@charset "UTF-8";

.cls-1 {
    fill: #ffc541
}

.cls-2 {
    fill: #4e4066
}

.cls-3 {
    fill: #6f5b92
}

.cls-4 {
    fill: #f78d5e
}

.cls-5 {
    fill: #fa976c
}

.cls-6 {
    fill: #b65c32;
    opacity: .6
}

.cls-7 {
    opacity: .4
}

.cls-7,
.cls-8 {
    fill: #b65c32
}

.cls-9 {
    fill: #f4b73b
}

.cls-10 {
    opacity: .6
}

.cls-11 {
    fill: #f9c358
}

.cls-12 {
    fill: #9b462c
}

.cls-13 {
    fill: #aa512e
}

.cls-14 {
    fill: #7d6aa5
}

.wheel {
    animation: wheel-rotate 6s ease infinite;
    transform-box: fill-box;
    transform-origin: center
}

@keyframes wheel-rotate {
    50% {
        animation-timing-function: cubic-bezier(.55, .085, .68, .53);
        transform: rotate(1turn)
    }

    to {
        transform: rotate(960deg)
    }
}

.clock-hand-1 {
    animation: clock-rotate 3s linear infinite
}

.clock-hand-1,
.clock-hand-2 {
    transform-box: fill-box;
    transform-origin: bottom
}

.clock-hand-2 {
    animation: clock-rotate 6s linear infinite
}

@keyframes clock-rotate {
    to {
        transform: rotate(1turn)
    }
}

#box-top {
    animation: box-top-anim 2s linear infinite;
    transform-box: fill-box;
    transform-origin: right top
}

@keyframes box-top-anim {
    50% {
        transform: rotate(-5deg)
    }
}

#umbrella {
    animation: umbrella-anim 6s linear infinite;
    transform-box: fill-box;
    transform-origin: center
}

@keyframes umbrella-anim {
    25% {
        transform: translateY(10px) rotate(5deg)
    }

    75% {
        transform: rotate(-5deg)
    }
}

#cup {
    animation: cup-rotate 3s cubic-bezier(.455, .03, .515, .955) infinite;
    transform-box: fill-box;
    transform-origin: top left
}

@keyframes cup-rotate {
    50% {
        transform: rotate(-5deg)
    }
}

#pillow {
    animation: pillow-anim 3s linear infinite;
    transform-box: fill-box;
    transform-origin: center
}

@keyframes pillow-anim {
    25% {
        transform: rotate(10deg) translateY(5px)
    }

    75% {
        transform: rotate(-10deg)
    }
}

#stripe {
    animation: stripe-anim 3s linear infinite;
    transform-box: fill-box;
    transform-origin: center
}

@keyframes stripe-anim {
    25% {
        transform: translate(10px) rotate(-10deg)
    }

    75% {
        transform: translateX(10px)
    }
}

#bike {
    animation: bike-anim 6s ease infinite
}

@keyframes bike-anim {
    0% {
        transform: translateX(-1300px)
    }

    50% {
        animation-timing-function: cubic-bezier(.47, 0, .745, .715);
        transform: translateX(0)
    }

    to {
        transform: translateX(1300px)
    }
}

#rucksack {
    animation: ruck-anim 3s linear infinite;
    transform-box: fill-box;
    transform-origin: top
}

@keyframes ruck-anim {
    50% {
        transform: rotate(5deg)
    }
}

.circle {
    animation: circle-anim ease infinite;
    perspective: 0;
    transform-box: fill-box;
    transform-origin: center
}

.circle.c1 {
    animation-duration: 2s
}

.circle.c2 {
    animation-duration: 3s
}

.circle.c3,
.circle.c4 {
    animation-duration: 1s
}

.circle.c5 {
    animation-duration: 2s
}

.circle.c6 {
    animation-duration: 3s
}

@keyframes circle-anim {
    50% {
        transform: scale(.2) rotateX(1turn) rotateY(1turn)
    }
}

#ou,
.four {
    animation: four-anim cubic-bezier(.39, .575, .565, 1) infinite
}

.four.a {
    transform-origin: bottom left
}

.four.a,
.four.b {
    animation-duration: 3s;
    transform-box: fill-box
}

.four.b {
    transform-origin: bottom right
}

#ou {
    animation-duration: 6s;
    transform-box: fill-box;
    transform-origin: center
}

@keyframes four-anim {
    50% {
        transform: scale(.98)
    }
}

html {
    padding-left: calc(100vw - 100%)
}

body {
    font-family: Poppins, sans-serif
}

.badge {
    font-weight: 500
}

.bg-light,
.bg-light * {
    color: #343a40 !important
}

.search-box {
    box-shadow: none !important
}

.post.card {
    border-radius: 15px;
    height: 100%;
    padding: 15px;
    text-decoration: none !important
}

.post.card .card-footer {
    font-size: 14px;
    margin: 0 -15px -15px;
    padding: 15px 35px
}

.post-metadata {
    font-size: 14px;
    margin-top: -6px
}

.post-metadata .tag:hover {
    background-color: #007bff;
    color: #fff !important
}

.social {
    text-decoration: none !important
}

#container {
    display: inline-block;
    position: relative;
    width: 100%
}

#dummy {
    padding-top: 100%
}

#element {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.circle-image {
    border-radius: 50%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.nav-item.active:after,
.nav-link:after {
    background: #007bff;
    content: "";
    display: block;
    height: .15em
}

.nav-link:after {
    transition: width .35s;
    width: 0
}

.nav-link:hover:after {
    width: 100%
}

.nav-item.active {
    font-weight: 700
}

.nav-item.active:after {
    width: 100% !important
}

.navbar-brand {
    margin-bottom: -14px
}

.navbar-brand:after {
    margin-top: -.25em
}

.markdown-body h1,
.markdown-body h2 {
    margin-top: 32px
}

.markdown-body hr {
    background: #6c757d
}

.markdown-body img:not(.emoji) {
    display: block;
    height: auto;
    margin: 1rem auto;
    max-width: 100%
}

.markdown-body a:not(.btn):not([class^=carousel-]):not([class^=list-]):not(.no-underline) {
    display: inline-block;
    text-decoration: none
}

.markdown-body a:not(.btn):not([class^=carousel-]):not([class^=list-]):not(.no-underline):hover {
    color: #007bff
}

.markdown-body a:not(.btn):not([class^=carousel-]):not([class^=list-]):not(.no-underline):after {
    background: #007bff;
    content: "";
    display: block;
    height: .15em;
    margin-top: -.15em;
    transition: width .35s;
    width: 0
}

.markdown-body a:not(.btn):not([class^=carousel-]):not([class^=list-]):not(.no-underline):hover:after {
    width: 100%
}

.markdown-body pre {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #343a40;
    display: block;
    font-family: monospace;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    page-break-inside: avoid;
    word-wrap: break-word
}

.markdown-body code.highlighter-rouge {
    background-color: #f8f9fa;
    border-radius: 3px;
    color: #343a40;
    margin: 0;
    padding: .2em .65em
}

.markdown-body table:not(.highlight) {
    display: block;
    margin: 1rem 0;
    overflow-x: auto
}

.markdown-body table:not(.highlight) td {
    border: 1px solid #ddd;
    padding: 8px 16px
}

.markdown-body table:not(.highlight) tr:nth-child(2n) {
    background-color: rgba(0, 0, 0, .05)
}

.project.card {
    border-radius: 15px;
    margin: 10px auto;
    text-decoration: none !important;
    transition: transform .4s
}

.project.card:hover:not(.post) {
    box-shadow: -2px 8px 40px -12px rgba(0, 0, 0, .24);
    transform: translateY(-8px)
}

.highlight .k,
[data-theme=dark] code.highlighter-rouge .k,
[data-theme=dark] pre .k {
    color: #00a
}

.highlight .s,
[data-theme=dark] code.highlighter-rouge .s,
[data-theme=dark] pre .s {
    color: #a50
}

.highlight .c,
[data-theme=dark] code.highlighter-rouge .c,
[data-theme=dark] pre .c {
    color: #aaa;
    font-style: italic
}

.highlight .gt,
[data-theme=dark] code.highlighter-rouge .gt,
[data-theme=dark] pre .gt {
    color: #a00
}

.highlight .na,
[data-theme=dark] code.highlighter-rouge .na,
[data-theme=dark] pre .na {
    color: #1e90ff
}

.highlight .nc,
[data-theme=dark] code.highlighter-rouge .nc,
[data-theme=dark] pre .nc {
    color: #0a0
}

.highlight .c1,
[data-theme=dark] code.highlighter-rouge .c1,
[data-theme=dark] pre .c1 {
    color: #aaa;
    font-style: italic
}

.highlight .err,
[data-theme=dark] code.highlighter-rouge .err,
[data-theme=dark] pre .err {
    color: red
}

[data-theme=light] #theme-toggler:before {
    content: "🌙"
}

[data-theme=dark] #theme-toggler:before {
    content: "🌞"
}

[data-theme=light] .navbar-themed .navbar-brand {
    color: #343a40
}

[data-theme=dark] .navbar-themed .navbar-brand {
    color: hsla(0, 0%, 100%, .9)
}

[data-theme=light] .navbar-themed .navbar-nav .nav-link.active {
    color: #343a40
}

[data-theme=dark] .navbar-themed .navbar-nav .nav-link.active {
    color: hsla(0, 0%, 100%, .9)
}

[data-theme=light] .navbar-themed .navbar-nav .nav-link {
    color: rgba(52, 58, 64, .9)
}

[data-theme=dark] .navbar-themed .navbar-nav .nav-link {
    color: hsla(0, 0%, 100%, .9)
}

[data-theme=light] .text-themed {
    color: #343a40
}

[data-theme=dark] .text-themed {
    color: hsla(0, 0%, 100%, .9)
}

[data-theme=dark] body {
    background-color: #17191a;
    color: hsla(0, 0%, 100%, .9)
}

[data-theme=dark] .highlight,
[data-theme=dark] code.highlighter-rouge,
[data-theme=dark] pre {
    background: #202020;
    color: #d0d0d0
}

[data-theme=dark] .highlight .c,
[data-theme=dark] code.highlighter-rouge .c,
[data-theme=dark] pre .c {
    color: #999;
    font-style: italic
}

[data-theme=dark] .highlight .err,
[data-theme=dark] code.highlighter-rouge .err,
[data-theme=dark] pre .err {
    background-color: #e3d2d2;
    color: #a61717
}

[data-theme=dark] .highlight .g,
[data-theme=dark] code.highlighter-rouge .g,
[data-theme=dark] pre .g {
    color: #d0d0d0
}

[data-theme=dark] .highlight .k,
[data-theme=dark] code.highlighter-rouge .k,
[data-theme=dark] pre .k {
    color: #6ab825;
    font-weight: 700
}

[data-theme=dark] .highlight .n,
[data-theme=dark] .highlight .o,
[data-theme=dark] .highlight .p,
[data-theme=dark] .highlight .x,
[data-theme=dark] code.highlighter-rouge .n,
[data-theme=dark] code.highlighter-rouge .o,
[data-theme=dark] code.highlighter-rouge .p,
[data-theme=dark] code.highlighter-rouge .x,
[data-theme=dark] pre .n,
[data-theme=dark] pre .o,
[data-theme=dark] pre .p,
[data-theme=dark] pre .x {
    color: #d0d0d0
}

[data-theme=dark] .highlight .c1,
[data-theme=dark] code.highlighter-rouge .c1,
[data-theme=dark] pre .c1 {
    color: #999;
    font-style: italic
}

[data-theme=dark] .highlight .gt,
[data-theme=dark] code.highlighter-rouge .gt,
[data-theme=dark] pre .gt {
    color: #d22323
}

[data-theme=dark] .highlight .s,
[data-theme=dark] code.highlighter-rouge .s,
[data-theme=dark] pre .s {
    color: #ed9d13
}

[data-theme=dark] .highlight .na,
[data-theme=dark] code.highlighter-rouge .na,
[data-theme=dark] pre .na {
    color: #bbb
}

[data-theme=dark] .highlight .nc,
[data-theme=dark] code.highlighter-rouge .nc,
[data-theme=dark] pre .nc {
    color: #447fcf;
    text-decoration: underline
}

[data-theme=dark] code.highlighter-rouge,
[data-theme=dark] pre {
    border: none
}

[data-theme=dark] input {
    background-color: #2c3032;
    border-color: #343a40;
    color: #17191a
}

[data-theme=dark] input::-moz-placeholder {
    color: hsla(0, 0%, 100%, .64)
}

[data-theme=dark] input::placeholder {
    color: hsla(0, 0%, 100%, .64)
}

[data-theme=dark] input:focus {
    background-color: #242526;
    color: hsla(0, 0%, 100%, .9)
}

[data-theme=dark] .card {
    background-color: #242526
}

[data-theme=dark] .card.border .card-footer {
    background-color: rgba(0, 0, 0, .1)
}

[data-theme=dark] table:not(.highlight) td {
    border-color: #242526
}

[data-theme=dark] table:not(.highlight) tr:nth-child(2n) {
    background-color: #343a40
}

[data-theme=dark] .list-group-item-action {
    background-color: #242526;
    color: hsla(0, 0%, 100%, .9)
}

[data-theme=dark] .list-group-item-action:focus,
[data-theme=dark] .list-group-item-action:hover {
    background-color: #1d1d1e
}

[data-theme=dark] .post footer {
    text-decoration: none
}

.border-primary {
    border-color: #00d4bd !important
}

.bg-primary {
    background-color: #00d4bd !important
}

.btn-outline-primary {
    border-color: #212529 !important;
    color: #00d4bd !important
}

.btn-outline-primary:hover {
    background-color: #00d4bd !important;
    border-color: #00d4bd !important;
    color: #fff !important
}

.badge.text-primary {
    color: #00d4bd !important
}

.badge.border-primary {
    border-color: #00d4bd !important
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: #00d4bd !important;
    position: relative
}

.navbar-nav .nav-link.active:after,
.navbar-nav .nav-link:hover:after {
    background-color: #00d4bd;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%
}

.navbar-nav .nav-link {
    transition: color .3s ease
}

.navbar-nav .nav-link:after {
    transition: background-color .3s ease
}

.logo-light {
    display: none
}

.logo-dark {
    display: inline
}

html[data-theme=dark] .logo-dark {
    display: none
}

html[data-theme=dark] .logo-light {
    display: inline
}

a.navbar-brand,
a.navbar-brand:active,
a.navbar-brand:focus,
a.navbar-brand:hover {
    all: unset;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-block;
    outline: none !important;
    text-decoration: none !important
}