@charset "UTF-8";

/*!* 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)
}


#home-title {
    font-size: 1.5em;
    font-family: "Cormorant Unicase", serif;
    font-style: italic;
}

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

html {
    /* line-height: 1.6; */
    letter-spacing: .06em;
    scroll-behavior: smooth
}

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

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

#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
}


#spotlight {
    display: flex;
    min-height: 30vh;
    padding-top: 3em;
    padding-bottom: 2em;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 93%;
    margin: auto;
    font-size: 1.5rem
}

#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-size: .5em;
    font-style: italic;
    opacity: .9
}

#home-nav {
    font-size: 1em;
    opacity: .8;
}

#home-nav a:hover {
    color: #25c5da;
}

#home-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

#home-nav li a{
    display: block;
    padding: 14px 14px;
    text-decoration: none;
    margin-top: .5em;
    font-size: 1.1rem;
}

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

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

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

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

    .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: 6em
    }

    .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
}

#page-content p {
    text-align: justify;
    font-size: 1.3em;
}