@charset "UTF-8";.admonition {
    position: relative;
    margin: 1rem 0 1.5rem;
    border-left: .25rem solid #448aff;
    box-shadow: 5px 5px 10px -5px rgba(0,0,0,.5);
    border-radius: 0 8px 8px 0;
    overflow: auto
}

.admonition .admonition-title {
    padding: .25rem .5rem;
    border-bottom: 1px solid rgba(68,138,255,.1);
    background-color: rgba(68,138,255,.1);
    color: #448aff
}

.admonition .admonition-title .icon {
    display: inline-block;
    padding: 0 10px 0 0;
    font-size: .85rem;
    color: #448aff
}

.admonition .admonition-content {
    padding: .25rem .5rem
}

.admonition.note {
    border-left-color: #448aff
}

.admonition.note .admonition-title {
    color: #448aff
}

.admonition.note .icon {
    color: #448aff
}

.admonition.info {
    border-left-color: #00b8d4
}

.admonition.info .admonition-title {
    color: #00b8d4
}

.admonition.info .icon {
    color: #00b8d4
}

.admonition.tip {
    border-left-color: #00bfa5
}

.admonition.tip .admonition-title {
    color: #00bfa5
}

.admonition.tip .icon {
    color: #00bfa5
}

.admonition.success {
    border-left-color: #00c853
}

.admonition.success .admonition-title {
    color: #00c853
}

.admonition.success .icon {
    color: #00c853
}

.admonition.warning {
    border-left-color: #ff9100
}

.admonition.warning .admonition-title {
    color: #ff9100
}

.admonition.warning .icon {
    color: #ff9100
}

.admonition.failure {
    border-left-color: #ff5252
}

.admonition.failure .admonition-title {
    color: #ff5252
}

.admonition.failure .icon {
    color: #ff5252
}

.admonition.danger {
    border-left-color: #ff1744
}

.admonition.danger .admonition-title {
    color: #ff1744
}

.admonition.danger .icon {
    color: #ff1744
}

.admonition.bug {
    border-left-color: #f50057
}

.admonition.bug .admonition-title {
    color: #f50057
}

.admonition.bug .icon {
    color: #f50057
}

.admonition.note {
    background-color: rgba(68,138,255,.1)
}

.admonition.note .admonition-title {
    border-bottom-color: rgba(68,138,255,.1);
    background-color: rgba(68,138,255,.1)
}

.admonition.info {
    background-color: rgba(0,184,212,.1)
}

.admonition.info .admonition-title {
    border-bottom-color: rgba(0,184,212,.1);
    background-color: rgba(0,184,212,.1)
}

.admonition.tip {
    background-color: rgba(0,191,165,.1)
}

.admonition.tip .admonition-title {
    border-bottom-color: rgba(0,191,165,.1);
    background-color: rgba(0,191,165,.1)
}

.admonition.success {
    background-color: rgba(0,200,83,.1)
}

.admonition.success .admonition-title {
    border-bottom-color: rgba(0,200,83,.1);
    background-color: rgba(0,200,83,.1)
}

.admonition.warning {
    background-color: rgba(255,145,0,.1)
}

.admonition.warning .admonition-title {
    border-bottom-color: rgba(255,145,0,.1);
    background-color: rgba(255,145,0,.1)
}

.admonition.failure {
    background-color: rgba(255,82,82,.1)
}

.admonition.failure .admonition-title {
    border-bottom-color: rgba(255,82,82,.1);
    background-color: rgba(255,82,82,.1)
}

.admonition.danger {
    background-color: rgba(255,23,68,.1)
}

.admonition.danger .admonition-title {
    border-bottom-color: rgba(255,23,68,.1);
    background-color: rgba(255,23,68,.1)
}

.admonition.bug {
    background-color: rgba(245,0,87,.1)
}

.admonition.bug .admonition-title {
    border-bottom-color: rgba(245,0,87,.1);
    background-color: rgba(245,0,87,.1)
}

/*!normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace,monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

button,[type=button],[type=reset],[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

.chroma {
    color: #eee;
    background-color: #2c3e50
}

.chroma .err {
    color: #960050;
    background-color: #1e0010
}

.chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0
}

.chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
    overflow: auto;
    display: block
}

.chroma .hl {
    display: block;
    width: 100%;
    background-color: #55595ebb
}

.chroma .lnt {
    margin-right: .4em;
    padding: 0 .4em
}

.chroma .ln {
    margin-right: .4em;
    padding: 0 .4em
}

.chroma .k {
    color: #66d9ef
}

.chroma .kc {
    color: #66d9ef
}

.chroma .kd {
    color: #66d9ef
}

.chroma .kn {
    color: #f92672
}

.chroma .kp {
    color: #66d9ef
}

.chroma .kr {
    color: #66d9ef
}

.chroma .kt {
    color: #66d9ef
}

.chroma .na {
    color: #a6e22e
}

.chroma .nc {
    color: #a6e22e
}

.chroma .no {
    color: #66d9ef
}

.chroma .nd {
    color: #a6e22e
}

.chroma .ne {
    color: #a6e22e
}

.chroma .nf {
    color: #a6e22e
}

.chroma .nx {
    color: #a6e22e
}

.chroma .nt {
    color: #f92672
}

.chroma .l {
    color: #ae81ff
}

.chroma .ld {
    color: #e6db74
}

.chroma .s {
    color: #e6db74
}

.chroma .sa {
    color: #e6db74
}

.chroma .sb {
    color: #e6db74
}

.chroma .sc {
    color: #e6db74
}

.chroma .dl {
    color: #e6db74
}

.chroma .sd {
    color: #e6db74
}

.chroma .s2 {
    color: #e6db74
}

.chroma .se {
    color: #ae81ff
}

.chroma .sh {
    color: #e6db74
}

.chroma .si {
    color: #e6db74
}

.chroma .sx {
    color: #e6db74
}

.chroma .sr {
    color: #e6db74
}

.chroma .s1 {
    color: #e6db74
}

.chroma .ss {
    color: #e6db74
}

.chroma .m {
    color: #ae81ff
}

.chroma .mb {
    color: #ae81ff
}

.chroma .mf {
    color: #ae81ff
}

.chroma .mh {
    color: #ae81ff
}

.chroma .mi {
    color: #ae81ff
}

.chroma .il {
    color: #ae81ff
}

.chroma .mo {
    color: #ae81ff
}

.chroma .o {
    color: #f92672
}

.chroma .ow {
    color: #f92672
}

.chroma .c {
    color: #75715e
}

.chroma .ch {
    color: #75715e
}

.chroma .cm {
    color: #75715e
}

.chroma .c1 {
    color: #75715e
}

.chroma .cs {
    color: #75715e
}

.chroma .cp {
    color: #75715e
}

.chroma .cpf {
    color: #75715e
}

.chroma .gd {
    color: #f92672
}

.chroma .ge {
    font-style: italic
}

.chroma .gi {
    color: #a6e22e
}

.chroma .gs {
    font-weight: 700
}

.chroma .gu {
    color: #75715e
}

/*!* animate.css - https://animate.style/
* Version - 4.1.0
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css*/
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animated {
    animation-duration: 1s;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both
}

.animated.infinite {
    animation-iteration-count: infinite
}

.animated.repeat-1 {
    animation-iteration-count: 1;
    animation-iteration-count: var(--animate-repeat)
}

.animated.repeat-2 {
    animation-iteration-count: 2;
    animation-iteration-count: calc(var(--animate-repeat)*2)
}

.animated.repeat-3 {
    animation-iteration-count: 3;
    animation-iteration-count: calc(var(--animate-repeat)*3)
}

.animated.delay-1s {
    animation-delay: 1s;
    animation-delay: var(--animate-delay)
}

.animated.delay-2s {
    animation-delay: 2s;
    animation-delay: calc(var(--animate-delay)*2)
}

.animated.delay-3s {
    animation-delay: 3s;
    animation-delay: calc(var(--animate-delay)*3)
}

.animated.delay-4s {
    animation-delay: 4s;
    animation-delay: calc(var(--animate-delay)*4)
}

.animated.delay-5s {
    animation-delay: 5s;
    animation-delay: calc(var(--animate-delay)*5)
}

.animated.faster {
    animation-duration: .5s;
    animation-duration: calc(var(--animate-duration)/2)
}

.animated.fast {
    animation-duration: .8s;
    animation-duration: calc(var(--animate-duration)*.8)
}

.animated.slow {
    animation-duration: 2s;
    animation-duration: calc(var(--animate-duration)*2)
}

.animated.slower {
    animation-duration: 3s;
    animation-duration: calc(var(--animate-duration)*3)
}

@media(prefers-reduced-motion:reduce),print {
    .animated {
        animation-duration: 1ms!important;
        transition-duration: 1ms!important;
        animation-iteration-count: 1!important
    }

    .animated[class*=Out] {
        opacity: 0
    }
}

@keyframes bounce {
    0%,20%,53%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        transform: translateZ(0)
    }

    40%,43% {
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        transform: translate3d(0,-30px,0)scaleY(1.1)
    }

    70% {
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        transform: translate3d(0,-15px,0)scaleY(1.05)
    }

    80% {
        transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transform: translateZ(0)scaleY(.95)
    }

    90% {
        transform: translate3d(0,-4px,0)scaleY(1.02)
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom
}

@keyframes bounceInRight {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)scaleX(1)
    }

    75% {
        transform: translate3d(10px,0,0)scaleX(.98)
    }

    90% {
        transform: translate3d(-5px,0,0)scaleX(.995)
    }

    to {
        transform: translateZ(0)
    }
}

.bounceInRight {
    animation-name: bounceInRight
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px,0,0)scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0)scaleX(2)
    }
}

.bounceOutRight {
    animation-name: bounceOutRight
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0,100%,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInUp {
    animation-name: slideInUp
}

@keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,100%,0)
    }
}

.slideOutDown {
    animation-name: slideOutDown
}

.scroll-up {
    position: fixed;
    bottom: 10%;
    right: 2%;
    z-index: 1;
    opacity: 0;
    transition: all .5s ease
}

.scroll-up .scroll #st-ring {
    stroke: #ccc
}

.scroll-up .scroll #st-circle {
    fill: #3b3e48
}

.scroll-up .scroll #st-arrow {
    fill: #018574
}

.hide {
    opacity: 0;
    transform: translateY(20px)
}

.show {
    opacity: 1;
    transform: translateY(0)
}

#share-links {
    position: fixed;
    bottom: 7em;
    right: .5em;
    display: none;
    padding: .6em .5em;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: -1px -2px 3px rgba(0,0,0,.45);
    background-color: #2c3e50
}

#share-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 2;
    font-size: 1.2em
}

#share-links ul a {
    color: #7d828a
}

#share-links ul a:hover,#share-links ul a:active,#share-links ul a:focus {
    color: #e8eef2
}

@media(max-width: 520px) {
    #share-links {
        right:.2em;
        bottom: 8em
    }
}

html,#site-header,#mobile-menu {
    background: #fff!important
}

body,button,input,select,textarea,a {
    color: #000!important;
    font-family: open sans,sans-serif
}

a {
    border-bottom: 3px solid transparent
}

a:hover {
    color: #fe5185!important
}

#home-title {
    font-size: 1.6em
}

h1,h2,h3,.next-post,.prev-post,.site-branding a,.post-year,.post-day,.post-info,.tag a {
    font-family: unica one,cursive
}

pre,pre code {
    background: #7d828a
}

a.anchor {
    box-shadow: none!important
}

.content a:hover {
    box-shadow: inset 0 -4px #fe5185
}

.content a {
    word-wrap: break-word;
    border: none;
    transition-property: box-shadow;
    box-shadow: inset 0 -4px #fe5185!important;
    transition-duration: .1s
}

.post-info a:hover {
    border-bottom: 1px solid #fe5185!important
}

.posts-group .post-item {
    border-bottom: 1px dashed #eee
}

.pagination {
    display: inline-flex;
    list-style: none;
    width: 100%
}

.page-item {
    margin: auto;
    padding: 1em
}

.related-posts {
    margin: 4em 0!important;
    border-top: 3px dashed #fe5185!important;
    border-radius: 0!important
}

#menu-btn {
    display: none!important
}

::-moz-selection {
    background: #7d828a
}

::selection {
    background: #7d828a
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: #2c3e50
}

::-webkit-scrollbar-thumb {
    background: #888
}

::-webkit-scrollbar-thumb:hover {
    background: #e8eef2
}

html {
    background: #494f5c;
    line-height: 1.6;
    letter-spacing: .06em;
    scroll-behavior: smooth
}

body,button,input,select,textarea {
    color: #e8eef2;
    font-family: trebuchet ms,Verdana,verdana ref,segoe ui,Candara,lucida grande,lucida sans unicode,lucida sans,Tahoma,sans-serif
}

pre,code,pre tt {
    font-family: Consolas,andale mono wt,andale mono,Menlo,Monaco,lucida console,lucida sans typewriter,dejavu sans mono,bitstream vera sans mono,liberation mono,nimbus mono l,courier new,Courier,yahei consolas hybrid,monospace,segoe ui emoji,pingfang sc,microsoft yahei
}

pre {
    padding: .7em 1.1em;
    font-size: .9em;
    line-height: 1.5;
    letter-spacing: normal;
    white-space: pre;
    color: #eee;
    background: #2c3e50;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

pre code {
    padding: 0;
    margin: 0;
    color: #eee;
    background: 0 0
}

code {
    color: #acaaaa;
    background: #3b3e48;
    border-radius: 3px;
    padding: 0 3px;
    margin: 0 4px;
    word-wrap: break-word;
    letter-spacing: normal
}

blockquote {
    border-left: .25em solid;
    margin: 1em;
    padding: 0 1em;
    font-style: italic
}

blockquote cite {
    font-weight: 700;
    font-style: normal
}

blockquote cite::before {
    content: "—— "
}

a {
    color: #e8eef2;
    text-decoration: none;
    border: none;
    transition-property: color;
    transition-duration: .4s;
    transition-timing-function: ease-out
}

a:hover {
    color: #fff;
    text-shadow: 0 0 1px #fff
}

hr {
    opacity: .2;
    border-width: 0 0 5px;
    border-style: dashed;
    background: 0 0;
    width: 50%;
    margin: 1.8em auto
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    width: 100%;
    max-width: 100%
}

table th,table td {
    padding: 1.5%;
    border: 1px solid
}

table th {
    font-weight: 700;
    vertical-align: bottom
}

.section-inner {
    margin: 0 auto;
    max-width: 1200px;
    width: 93%
}

.thin {
    max-width: 720px;
    margin: auto
}

.feather {
    display: inline-block;
    vertical-align: -.125em;
    width: 1em;
    height: 1em
}

.sub-menu {
    font-size: .7em
}

.desktop-only,.desktop-only-ib {
    display: none
}

.highlight {
    position: relative
}

.highlight div,.highlight pre {
    overflow-x: auto;
    border-radius: 4px;
    -webkit-overflow-scrolling: touch
}

.highlight-copy-btn {
    position: absolute;
    bottom: 7px;
    right: 7px;
    border: 0;
    border-radius: 4px;
    padding: 1px;
    font-size: .7em;
    line-height: 1.8;
    color: #fff;
    background-color: #777;
    opacity: .6;
    min-width: 55px;
    text-align: center
}

.highlight-copy-btn:hover {
    background-color: #666
}

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute!important;
    width: 1px;
    word-wrap: normal!important
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
    clip: auto!important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: .875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

#site-header {
    position: fixed;
    z-index: 1;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: -1px -2px 3px rgba(0,0,0,.45);
    background-color: #3b3e48;
    animation-duration: .3s
}

.hdr-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em 0;
    font-size: 1.2rem
}

.hdr-wrapper .site-branding {
    display: inline-block;
    margin-right: .8em;
    font-size: 1.2em
}

.hdr-wrapper .site-nav {
    display: inline-block;
    font-size: 1.1em;
    opacity: .8
}

.hdr-wrapper .site-nav .has-children {
    padding-right: .5em;
    border-right: 2px solid #7d828a
}

.hdr-wrapper .site-nav .sub-menu>a {
    margin-left: .3em
}

.hdr-wrapper .site-nav a {
    margin-left: .8em
}

.hdr-icons {
    font-size: 1.2em
}

.hdr-social {
    display: inline-block;
    margin-left: .6em
}

.hdr-social>a {
    margin-left: .4em
}

.hdr-btn {
    border: none;
    background: 0 0;
    padding: 0;
    margin-left: .4em;
    cursor: pointer
}

#menu-btn {
    display: none;
    margin-left: .6em;
    cursor: pointer
}

#mobile-menu {
    position: fixed;
    bottom: 4.8em;
    right: 4.5em;
    display: none;
    padding: .6em 1.8em;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: -1px -2px 3px rgba(0,0,0,.45);
    background-color: #3b3e48
}

#mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 2;
    font-size: 1.2em
}

#site-footer {
    text-align: center;
    font-size: .9em;
    margin-bottom: 96px;
    margin-top: 64px
}

#site-footer p {
    margin: 0
}

#spotlight {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 93%;
    margin: auto;
    font-size: 1.5rem
}

#spotlight.error-404 {
    flex-direction: row;
    line-height: normal
}

p.img-404 {
    margin: 0
}

p.img-404 svg {
    width: 180px;
    max-width: 100%;
    height: auto
}

.banner-404 {
    margin-left: 2em
}

.banner-404 h1 {
    font-size: 3em;
    margin: .5rem 0
}

.banner-404 p {
    margin-top: 0
}

.banner-404 .btn-404 {
    font-size: .8em
}

.banner-404 .btn-404 a {
    display: inline-block;
    border: 2px solid #e8eef2;
    border-radius: 5px;
    padding: 5px;
    transition-property: color,border-color
}

.banner-404 .btn-404 a:first-child {
    margin-right: 1em
}

.banner-404 .btn-404 a:hover {
    border-color: #fff
}

.banner-404 .btn-404 a svg {
    margin-right: .5em
}

#home-center {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center
}

#home-title {
    margin: 0;
    text-align: center
}

#home-subtitle {
    margin-top: 0;
    margin-bottom: 1.5em;
    text-align: center;
    line-height: normal;
    font-size: .7em;
    font-style: italic;
    opacity: .9
}

#home-social {
    font-size: 1.4em;
    text-align: center;
    opacity: .8
}

#home-social a {
    margin: 0 .2em
}

#home-nav {
    opacity: .8
}

#home-nav a {
    display: block;
    text-align: center;
    margin-top: .5em
}

#home-footer {
    text-align: center;
    font-size: .6em;
    line-height: normal;
    opacity: .6
}

#home-footer p {
    margin-top: 0
}

.posts-group {
    display: flex;
    margin-bottom: 1.9em;
    line-height: normal
}

.posts-group .post-year {
    padding-top: 6px;
    margin-right: 1.8em;
    font-size: 1.6em;
    opacity: .6
}

.posts-group .post-year:hover {
    cursor: pointer
}

.posts-group .posts-list {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    list-style: none
}

.posts-group .post-item {
    border-bottom: 1px #7d828a dashed
}

.posts-group .post-item a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0
}

.posts-group .post-day {
    flex-shrink: 0;
    margin-left: 1em;
    opacity: .6
}

.posts-group .post-description {
    font-size: x-small;
    flex-shrink: 0;
    opacity: .6
}

.pinned-posts-group {
    display: flex;
    margin-bottom: 1.9em;
    line-height: normal;
    border-bottom: 2px #7d828a solid
}

.pinned-posts-group .pinned-posts-list {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    list-style: none
}

.pinned-posts-group .pinned-post-item {
    display: flex;
    justify-content: start;
    align-items: baseline;
    padding: 12px 0
}

.pinned-posts-group .pinned-post-item a {
    padding-left: 12px
}

.bg-img {
    width: 100vw;
    height: 100vh;
    opacity: .03;
    z-index: -1;
    position: fixed;
    top: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    transition: opacity .5s
}

.show-bg-img {
    z-index: 100;
    opacity: 1;
    cursor: pointer
}

.post-header {
    margin-top: 1.2em;
    line-height: normal
}

.post-header .post-meta {
    font-size: .9em;
    letter-spacing: normal;
    opacity: .6
}

.post-header h1 {
    margin-top: .1em
}

hr.post-end {
    width: 50%;
    margin-top: 1.6em;
    margin-bottom: .8em;
    margin-left: 0;
    border-style: solid;
    border-bottom-width: 4px
}

.content a {
    word-wrap: break-word;
    border: none;
    box-shadow: inset 0 -4px #018472;
    transition-property: box-shadow;
    transition-duration: .1s
}

.content a:hover {
    box-shadow: inset 0 -1em #018472
}

.content figure {
    max-width: 100%;
    height: auto;
    margin: 0;
    text-align: center
}

.content figure p {
    font-size: .8em;
    font-style: italic;
    opacity: .6
}

.content figure.left {
    float: left;
    margin-right: 1.5em;
    max-width: 50%
}

.content figure.right {
    float: right;
    margin-left: 1.5em;
    max-width: 50%
}

.content figure.big {
    max-width: 100vw
}

.content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
    border-radius: 4px
}

.content ul,.content ol {
    padding: 0;
    margin-left: 1.8em
}

.content a.anchor {
    float: left;
    margin-left: -20px;
    padding-right: 6px;
    box-shadow: none;
    opacity: .8
}

.content a.anchor:hover {
    background: 0 0;
    color: #018472;
    opacity: 1
}

.content a.anchor svg {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: baseline;
    visibility: hidden
}

.content a.anchor:focus svg {
    visibility: visible
}

.content h1:hover a.anchor svg,.content h2:hover a.anchor svg,.content h3:hover a.anchor svg,.content h4:hover a.anchor svg,.content h5:hover a.anchor svg,.content h6:hover a.anchor svg {
    visibility: visible
}

.footnotes {
    font-size: .85em
}

.footnotes a {
    box-shadow: none;
    text-decoration: underline;
    transition-property: color
}

.footnotes a:hover {
    background: 0 0
}

.footnotes a.footnote-backref {
    text-decoration: none
}

.footnotes ol {
    line-height: 1.8
}

a.footnote-ref {
    box-shadow: none;
    text-decoration: none;
    padding: 2px;
    border-radius: 2px;
    background-color: #2c3e50
}

a.footnote-ref:hover {
    box-shadow: none;
    background-color: #018472;
    transition-property: background-color
}

.post-info {
    font-size: .8rem;
    line-height: normal;
    opacity: .6
}

.post-info p {
    margin: .8em 0
}

.post-info a:hover {
    border-bottom: 1px solid #018472
}

.post-info svg {
    margin-right: .8em
}

.post-info .tag {
    margin-right: .5em
}

.post-info .tag::before {
    content: "#"
}

.post-info .category {
    margin-right: .5em
}

.post-info .category::before {
    content: "⊲"
}

#toc {
    position: fixed;
    left: 50%;
    top: 0;
    display: none
}

.toc-title {
    margin-left: 1em;
    margin-bottom: .5em;
    font-size: .8em;
    font-weight: 700
}

#TableOfContents {
    font-size: .8em;
    opacity: .6
}

#TableOfContents ul {
    padding-left: 1em;
    margin: 0
}

#TableOfContents>ul {
    list-style-type: none
}

#TableOfContents>ul ul ul {
    font-size: .9em
}

#TableOfContents a:hover {
    border-bottom: #018472 1px solid
}

.post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5em;
    margin-bottom: 2.5em;
    font-size: 1.2em
}

.post-nav a {
    flex-basis: 50%;
    flex-grow: 1
}

.post-nav .next-post {
    text-align: left;
    padding-right: 5px
}

.post-nav .prev-post {
    text-align: right;
    padding-left: 5px
}

.post-nav .post-nav-label {
    font-size: .8em;
    opacity: .8;
    text-transform: uppercase
}

.related-posts {
    padding: .8em;
    margin-top: 1.5em;
    font-size: .8rem;
    border: 3px dashed rgba(255,255,255,.2);
    border-radius: 5px
}

.related-posts h2 {
    margin: 0;
    line-height: normal
}

.related-posts ul {
    margin-top: .5em;
    margin-bottom: 0
}

@media(min-width: 800px) {
    .site-main {
        margin-top:3em
    }

    hr.post-end {
        width: 40%
    }
}

@media(min-width: 960px) {
    .site-main {
        margin-top:6em
    }
}

@media(min-width: 1300px) {
    .site-main {
        margin-top:8em
    }

    .desktop-only,#toc.show-toc {
        display: block
    }

    .desktop-only-ib {
        display: inline-block
    }

    figure.left {
        margin-left: -240px
    }

    figure.left p {
        text-align: left
    }

    figure.right {
        margin-right: -240px
    }

    figure.right p {
        text-align: right
    }

    figure.big {
        width: 1200px;
        margin-left: -240px
    }

    hr.post-end {
        width: 30%
    }

    #toc {
        top: 13em;
        margin-left: 370px;
        max-width: 220px
    }
}

@media(min-width: 1800px) {
    .site-main {
        margin-top:10em
    }

    .section-inner {
        max-width: 1600px
    }

    .thin {
        max-width: 960px
    }

    figure.left {
        max-width: 75%;
        margin-left: -320px
    }

    figure.right {
        max-width: 75%;
        margin-right: -320px
    }

    figure.big {
        width: 1600px;
        margin-left: -320px
    }

    hr.post-end {
        width: 30%
    }

    #toc {
        top: 15em;
        margin-left: 490px;
        max-width: 300px
    }
}

@media(max-width: 760px) {
    .hide-in-mobile,.site-nav.hide-in-mobile {
        display:none
    }

    #menu-btn {
        display: inline-block
    }

    .posts-group {
        display: block
    }

    .posts-group .post-year {
        margin: -6px 0 4px
    }

    #spotlight.error-404 {
        flex-direction: column;
        text-align: center
    }

    #spotlight.error-404 .banner-404 {
        margin: 0
    }
}

@media(max-width: 520px) {
    .content figure.left,.content figure.right {
        float:unset;
        max-width: 100%;
        margin: 0
    }

    hr.post-end {
        width: 60%
    }

    #mobile-menu {
        right: 4.2em
    }

    #home-subtitle {
        font-size: .5em
    }
}

.human {
    display: flex;
    justify-content: flex-end
}