@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Pompiere&family=Rubik+Distressed&display=swap');

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "Pompiere", sans-serif;
    text-transform: uppercase;
    background: #09090b;
    width: 100vw;
    overflow-x: hidden;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.justify-start {
    justify-content: start;
}

.flex-wrap {
    flex-wrap: wrap;
}

@media(max-width: 768px) {
    .justify-center {
        justify-content: start;
    }
}

.full-width {
    width: 100vw;
    position: relative;
    overflow-y: scroll;
    height: 80vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
}

/* Chrome, Edge, Safari */
.full-width::-webkit-scrollbar {
    width: 8px; /* vertical scrollbar width */
    height: 8px; /* horizontal scrollbar height */
}

    .full-width::-webkit-scrollbar-track {
        background: transparent; /* or a very light color */
    }

    .full-width::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.3);
        border-radius: 4px;
        border: 2px solid transparent; /* padding around thumb */
        background-clip: content-box;
    }


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2em;
}

.body {
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

@media(max-width: 768px) {
    .body {
        align-items: start;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100vw;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
    }

    /* Chrome, Edge, Safari */
    .body::-webkit-scrollbar {
        width: 8px; /* vertical scrollbar width */
        height: 8px; /* horizontal scrollbar height */
    }

        .body::-webkit-scrollbar-track {
            background: transparent; /* or a very light color */
        }

        .body::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.3);
            border-radius: 4px;
            border: 2px solid transparent; /* padding around thumb */
            background-clip: content-box;
        }
}



/*-----------------------------*/
/*-INTRO------------------------*/
/*-----------------------------*/
canvas#blood {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
}

#neuro {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.p-summary {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    color: #fff;
    font-family: "Rubik Distressed", system-ui;
    text-align: center;
}

    .p-summary h1 {
        margin: 0 0 0.1em;
        font-size: 12vh;
        font-weight: 400;
    }

    .p-summary p {
        margin: 0;
        font-size: 3vh;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .p-summary a {
        color: #fff;
    }

/*-----------------------------*/
/*-MENU------------------------*/
/*-----------------------------*/

.container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    font-family: "Rubik Distressed", system-ui;
    z-index: 5;
}

.container--mobile {
    min-width: 32rem;
    overflow: hidden;
}

.container--small {
    max-width: 10rem;
    margin: 5rem 1rem 1rem;
}

    .container--small svg {
        fill: white;
    }

.container--inline {
    display: flex;
    flex-direction: row;
}

.glass-container {
    max-width: 500px;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 2rem;
    overflow: hidden;
    flex: 1 1 auto;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
    color: var(--lg-text);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

@media (max-width: 768px) {
    .glass-container {
        width: 100vw;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.glass-container--rounded {
    border-radius: 3rem;
}

.glass-container--large {
    flex: 1 1 auto;
}

.glass-container--medium {
    flex: 1 1 auto;
}

.glass-container--small {
    flex: 0 1 auto;
}

.glass-filter,
.glass-overlay,
.glass-specular {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.glass-filter {
    z-index: 0;
    backdrop-filter: blur(4px);
    filter: url(#lensFilter) saturate(120%) brightness(1.15);
}

.glass-overlay {
    z-index: 1;
    background: var(--lg-bg-color);
}

.glass-specular {
    z-index: 2;
    box-shadow: inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
}

.glass-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-around;
    padding: 12px 28px;
    gap: 1rem;
    flex-wrap: wrap;
}

@media(max-width: 580px) {
    .glass-content {
        padding: 0;
        max-width: 90vw;
    }
}

.glass-content__link {
    margin-bottom: -1px;
    margin-top: 6px;
    transition: transform 0.2s ease-out;
}

    .glass-content__link img {
        width: 78px;
    }

    .glass-content__link:hover {
        transform: scale(1.1);
    }

    .glass-content__link:active {
        transform: scale(0.95);
    }

.player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.player__thumb {
    display: flex;
    align-items: center;
}

.player__img {
    width: 5rem;
    height: auto;
    border-radius: 0.5rem;
    margin-right: 1rem;
    transition: transform 0.25s ease-out;
}

    .player__img:hover {
        transform: scale(1.1);
    }

    .player__img:active {
        transform: scale(0.95);
    }

.player__legend {
    color: black;
}

.player__legend__title,
.player__legend__sub-title {
    margin: 0;
    font-size: 1rem;
}

.player__legend__sub-title {
    opacity: 0.6;
}

.player__controls {
    display: flex;
    align-items: center;
}

    .player__controls > :first-child {
        margin-right: 2rem;
    }

.glass-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: black;
    transition: color 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}

    .glass-item.active > svg {
        fill: #a31009 !important;
    }

@media (max-width: 768px) {
    .glass-item {
        font-size: 0.8em;
    }
}

.glass-item svg {
    fill: #999999;
    height: 40px;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
    transition: transform 0.25s ease-out;
}

    .glass-item svg:hover {
        transform: scale(1.1);
    }

    .glass-item svg:active {
        transform: scale(0.95);
    }

.glass-item--active {
    background: rgba(0, 0, 0, 0.25);
    color: var(--lg-red);
    margin: -8px -40px;
    padding: 0.5rem 2.5rem;
    border-radius: 3rem;
}

    .glass-item--active svg {
        fill: var(--lg-red);
    }

/*-----------------------------*/
/*-MAP-------------------------*/
/*-----------------------------*/
.location-switch {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .location-switch li {
        cursor: pointer;
        padding: 0.5em;
    }

        .location-switch li.current {
            color: lightblue;
        }

.map {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    border-radius: 50px;
    -webkit-mask-image: radial-gradient(circle, black 75%, transparent 100%);
    mask-image: radial-gradient(circle, black 75%, transparent 100%);
}

    .map > img {
        width: 925px;
        height: 100%;
    }

    .map.location {
        overflow-y: scroll;
        overflow-x: scroll;
        position: relative;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
    }

    /* Chrome, Edge, Safari */
    .map.location::-webkit-scrollbar {
        width: 8px; /* vertical scrollbar width */
        height: 8px; /* horizontal scrollbar height */
    }

            .map.location::-webkit-scrollbar-track {
                background: transparent; /* or a very light color */
            }

            .map.location::-webkit-scrollbar-thumb {
                background-color: rgba(0,0,0,0.3);
                border-radius: 4px;
                border: 2px solid transparent; /* padding around thumb */
                background-clip: content-box;
            }

        .map.location > img.map-image {
            width: 925px;
            height: auto;
            filter: blur(10px);
            opacity: 0;
            transition: filter 0.8s ease, opacity 0.8s ease;
        }

            .map.location > img.map-image.loaded {
                filter: blur(0);
                opacity: 1;
            }

    .map.carriage {
        max-width: 520px;
    }

        .map.carriage > img {
            width: 520px;
        }

    .map.carriage.location > img.map-image {
        width: 520px;
    }

@keyframes animate {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: scale(0.6);
        opacity: 0;
    }
}

.player {
    position: absolute;
    height: 100px;
    cursor: grab;
    -webkit-user-drag: none;
    user-drag: none;
    max-width: 100px;
    width: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 999999;
    display: inline-block;
    justify-content: center;
    align-items: start;
}

    .player::after {
        content: "";
        position: absolute;
        bottom: -5px; /* Distance from bottom of image */
        left: 50%;
        transform: translateX(-50%);
        width: 80px; /* Width of shadow */
        height: 12px; /* Height/thickness of shadow */
        background: rgba(0, 0, 0, 0.3); /* semi-transparent black */
        border-radius: 50%; /* Makes it an oval */
        filter: blur(4px); /* Softens the shadow */
        pointer-events: none; /* So it doesn’t block clicks */
        z-index: -1; /* Behind the player */
    }


    .player .tooltip {
        visibility: hidden;
        background-color: rgba(0,0,0,0.8);
        color: #fff;
        text-align: center;
        padding: 6px 10px 3px;
        border-radius: 6px;
        position: absolute;
        z-index: 10;
        bottom: 115%; /* above the player */
        left: 50%;
        transform: translateX(-50%) translateY(10px); /* start slightly lower */
        white-space: nowrap;
        font-size: 0.8rem;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* On hover: fade in and move up */
    .player:hover .tooltip {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0); /* move to final position */
    }

.carriage .player {
    height: 160px;
    max-width: 100px;
}

    .player.landscape {
        max-width: 160px;
        height: 220px;
        height: auto;
    }

.carriage .player.landscape {
    max-width: 240px;    
    height: 160px;
}


    .player > img {
        display: block; /* prevent inline gap */
        max-width: 100%;
        max-height: 100%;
        height: auto; /* preserve aspect ratio */
        width: auto; /* let image decide width */
    }

/*-----------------------------*/
/*-FIRE------------------------*/
/*-----------------------------*/
.fire {
    font-size: 7px;
    filter: blur(0.02em);
    -webkit-filter: blur(0.02em);
    margin: 0em auto 0 auto;
    position: absolute;
    width: 2em;
    height: 2em;
    opacity: 0.5;
    pointer-events: none;
    margin-top: 20px;
    transform: scale(0.6);
}

.particle {
    animation: rise 1s ease-in infinite;
    background-image: radial-gradient(#ff5000 20%, rgba(255, 80, 0, 0) 70%);
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 5em;
    height: 5em;
}

.fire.blue .particle {
    background-image: radial-gradient(#4fc3ff 20%, rgba(79, 195, 255, 0) 70%);
}

    .particle:nth-of-type(1) {
        animation-delay: 0.4968642875s;
        left: calc((100% - 5em) * 0);
    }

    .particle:nth-of-type(2) {
        animation-delay: 0.9312749218s;
        left: calc((100% - 5em) * 0.02);
    }

    .particle:nth-of-type(3) {
        animation-delay: 0.3814037167s;
        left: calc((100% - 5em) * 0.04);
    }

    .particle:nth-of-type(4) {
        animation-delay: 0.3343346062s;
        left: calc((100% - 5em) * 0.06);
    }

    .particle:nth-of-type(5) {
        animation-delay: 0.0072568586s;
        left: calc((100% - 5em) * 0.08);
    }

    .particle:nth-of-type(6) {
        animation-delay: 0.81816079s;
        left: calc((100% - 5em) * 0.1);
    }

    .particle:nth-of-type(7) {
        animation-delay: 0.5693493148s;
        left: calc((100% - 5em) * 0.12);
    }

    .particle:nth-of-type(8) {
        animation-delay: 0.544492249s;
        left: calc((100% - 5em) * 0.14);
    }

    .particle:nth-of-type(9) {
        animation-delay: 0.8147395453s;
        left: calc((100% - 5em) * 0.16);
    }

    .particle:nth-of-type(10) {
        animation-delay: 0.0108257865s;
        left: calc((100% - 5em) * 0.18);
    }

    .particle:nth-of-type(11) {
        animation-delay: 0.9311473605s;
        left: calc((100% - 5em) * 0.2);
    }

    .particle:nth-of-type(12) {
        animation-delay: 0.5534456875s;
        left: calc((100% - 5em) * 0.22);
    }

    .particle:nth-of-type(13) {
        animation-delay: 0.7027561692s;
        left: calc((100% - 5em) * 0.24);
    }

    .particle:nth-of-type(14) {
        animation-delay: 0.3424941761s;
        left: calc((100% - 5em) * 0.26);
    }

    .particle:nth-of-type(15) {
        animation-delay: 0.5534999728s;
        left: calc((100% - 5em) * 0.28);
    }

    .particle:nth-of-type(16) {
        animation-delay: 0.8678541037s;
        left: calc((100% - 5em) * 0.3);
    }

    .particle:nth-of-type(17) {
        animation-delay: 0.3559851823s;
        left: calc((100% - 5em) * 0.32);
    }

    .particle:nth-of-type(18) {
        animation-delay: 0.9854785847s;
        left: calc((100% - 5em) * 0.34);
    }

    .particle:nth-of-type(19) {
        animation-delay: 0.1410366852s;
        left: calc((100% - 5em) * 0.36);
    }

    .particle:nth-of-type(20) {
        animation-delay: 0.3758573601s;
        left: calc((100% - 5em) * 0.38);
    }

    .particle:nth-of-type(21) {
        animation-delay: 0.0569199397s;
        left: calc((100% - 5em) * 0.4);
    }

    .particle:nth-of-type(22) {
        animation-delay: 0.7848419648s;
        left: calc((100% - 5em) * 0.42);
    }

    .particle:nth-of-type(23) {
        animation-delay: 0.5062351072s;
        left: calc((100% - 5em) * 0.44);
    }

    .particle:nth-of-type(24) {
        animation-delay: 0.9921707656s;
        left: calc((100% - 5em) * 0.46);
    }

    .particle:nth-of-type(25) {
        animation-delay: 0.6692322239s;
        left: calc((100% - 5em) * 0.48);
    }

    .particle:nth-of-type(26) {
        animation-delay: 0.8346726291s;
        left: calc((100% - 5em) * 0.5);
    }

    .particle:nth-of-type(27) {
        animation-delay: 0.1715227871s;
        left: calc((100% - 5em) * 0.52);
    }

    .particle:nth-of-type(28) {
        animation-delay: 0.5388703375s;
        left: calc((100% - 5em) * 0.54);
    }

    .particle:nth-of-type(29) {
        animation-delay: 0.8898927228s;
        left: calc((100% - 5em) * 0.56);
    }

    .particle:nth-of-type(30) {
        animation-delay: 0.8168167627s;
        left: calc((100% - 5em) * 0.58);
    }

    .particle:nth-of-type(31) {
        animation-delay: 0.4806441262s;
        left: calc((100% - 5em) * 0.6);
    }

    .particle:nth-of-type(32) {
        animation-delay: 0.2695658826s;
        left: calc((100% - 5em) * 0.62);
    }

    .particle:nth-of-type(33) {
        animation-delay: 0.7571371052s;
        left: calc((100% - 5em) * 0.64);
    }

    .particle:nth-of-type(34) {
        animation-delay: 0.3166931874s;
        left: calc((100% - 5em) * 0.66);
    }

    .particle:nth-of-type(35) {
        animation-delay: 0.394047549s;
        left: calc((100% - 5em) * 0.68);
    }

    .particle:nth-of-type(36) {
        animation-delay: 0.0214250426s;
        left: calc((100% - 5em) * 0.7);
    }

    .particle:nth-of-type(37) {
        animation-delay: 0.977186211s;
        left: calc((100% - 5em) * 0.72);
    }

    .particle:nth-of-type(38) {
        animation-delay: 0.8500524678s;
        left: calc((100% - 5em) * 0.74);
    }

    .particle:nth-of-type(39) {
        animation-delay: 0.8961444645s;
        left: calc((100% - 5em) * 0.76);
    }

    .particle:nth-of-type(40) {
        animation-delay: 0.5703905789s;
        left: calc((100% - 5em) * 0.78);
    }

    .particle:nth-of-type(41) {
        animation-delay: 0.2662597528s;
        left: calc((100% - 5em) * 0.8);
    }

    .particle:nth-of-type(42) {
        animation-delay: 0.1518637413s;
        left: calc((100% - 5em) * 0.82);
    }

    .particle:nth-of-type(43) {
        animation-delay: 0.7776789423s;
        left: calc((100% - 5em) * 0.84);
    }

    .particle:nth-of-type(44) {
        animation-delay: 0.0427616104s;
        left: calc((100% - 5em) * 0.86);
    }

    .particle:nth-of-type(45) {
        animation-delay: 0.1738190744s;
        left: calc((100% - 5em) * 0.88);
    }

    .particle:nth-of-type(46) {
        animation-delay: 0.2368082427s;
        left: calc((100% - 5em) * 0.9);
    }

    .particle:nth-of-type(47) {
        animation-delay: 0.2425460052s;
        left: calc((100% - 5em) * 0.92);
    }

    .particle:nth-of-type(48) {
        animation-delay: 0.5996151075s;
        left: calc((100% - 5em) * 0.94);
    }

    .particle:nth-of-type(49) {
        animation-delay: 0.5408116607s;
        left: calc((100% - 5em) * 0.96);
    }

    .particle:nth-of-type(50) {
        animation-delay: 0.5285011437s;
        left: calc((100% - 5em) * 0.98);
    }

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0) scale(1);
    }

    25% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-10em) scale(0);
    }
}


/*-----------------------------*/
/*-ECLIPSE---------------------*/
/*-----------------------------*/
#eclipse {
    width: 80vh;
    height: 80vh;
    position: relative;
    overflow: hidden;
    max-width: 980px;
    max-height: 980px;
    min-width: 480px;
    min-height: 480px;
}

@media(max-width: 520px) {
    body {
        width: 100vw;
        overflow-x: hidden;
    }

    .page {
        overflow: hidden;
    }

    #eclipse {
        position: absolute;
        width: 80vh;
        max-width: 50vw;
        height: 80vh;
        max-height: 50vw;
        overflow: hidden;
    }
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layer-1 {
    animation: 30s linear rotate infinite;
    transform-origin: 66% 40%;
    background: repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.46) 3.96%, rgba(17, 21, 28, 0) 8.33%, rgba(17, 21, 28, 0) 8.33%) 69.5% 37.7%/17.2% 17.2% no-repeat, radial-gradient(ellipse at 50% 50%, var(--color-brand) 0%, rgba(17, 21, 28, 0) 47.22%) 74.1% 35.6%/33.6% 36.6% no-repeat;
    /* Rays */
}

.layer-2 {
    animation: 20s linear rotate infinite reverse;
    transform-origin: 66% 40%;
    background: radial-gradient( ellipse at 50% 50%, rgba(17, 21, 28, 0) 20%, #09090b 29%) 77.4% 33.8%/40% 40% no-repeat, repeating-conic-gradient( from 15deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.51) 2.64%, rgba(17, 21, 28, 0) 5.56%, rgba(17, 21, 28, 0) 5.56%) 69.5% 37.7%/17.2% 17.2% no-repeat;
    /* Rays */
}

.layer-3 {
    animation: 20s linear rotate infinite;
    background: repeating-conic-gradient( from 355deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.26) 8.1%, rgba(17, 21, 28, 0) 16.67%, rgba(17, 21, 28, 0) 16.67% ) 0 0/100% 100% no-repeat;
    /* Rays */
}

.layer-4 {
    animation: 40s linear rotate infinite reverse;
    background: repeating-conic-gradient( from 355deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.26) 2.86%, rgba(17, 21, 28, 0) 5.88%, rgba(17, 21, 28, 0) 5.88% ) 0% 0%/100% 100% no-repeat;
    /* Rays */
}

.layer-5 {
    animation: 40s linear rotate infinite;
    background: repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.26) 6.62%, rgba(17, 21, 28, 0) 7.69%, rgba(17, 21, 28, 0) 7.69% ) 0% 0%/100% 100% no-repeat;
    /* Rays */
}

.layer-6 {
    background: radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.27) 0%, rgba(17, 21, 28, 0) 63.54%) 67% 39.3%/5.8% 5.8% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(17, 21, 28, 0) 40.28%, rgba(255, 183, 163, 0.05) 52.43%, rgba(17, 21, 28, 0) 63.54%) 68% 38.6%/13% 13% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.55) 0%, rgba(17, 21, 28, 0) 63.54%) 66.9% 39.3%/3.4% 3.4% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.2) 0%, rgba(17, 21, 28, 0) 66.67%) 70.7% 36.5%/25.6% 25.6% no-repeat, radial-gradient( ellipse at 50% 50%, #09090b 26%, rgba(17, 21, 28, 0) 26.4%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.04) 0%, rgba(17, 21, 28, 0) 69.79%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(255, 240, 148, 0.11) 0%, rgba(17, 21, 28, 0) 52.43%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 51% 49%, rgba(17, 21, 28, 0) 23.96%, #09090b 40.63%) 0% 0%/100% 100% no-repeat, repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.14) 11.04%, rgba(17, 21, 28, 0) 20%, rgba(17, 21, 28, 0) 20%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 52% 48%, rgba(17, 21, 28, 0) 23.96%, #09090b 34.03%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.29) 28%, rgba(17, 21, 28, 0) 30%) 0% 0%/100% 100% no-repeat;
    /* glow */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/*-----------------------------*/
/*-CARD------------------------*/
/*-----------------------------*/

.card-container {
    perspective: 1000px;
    z-index: 1;    
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
}

.card {
    position: relative;
    width: 220px;
    min-height: 220px;
    padding: 2em;
    color: white;
    border-radius: 20px;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
    font-family: "Rubik Distressed", system-ui;
    text-transform: uppercase;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

    .card h2 {
        z-index: 2;
        text-shadow: -3px 0 #a31009, 0 3px #a31009, 3px 0 #a31009, 0 -3px #a31009;
    }

    .card p {
        font-family: "Pompiere", sans-serif;
        font-weight: bold;
        font-size: 1.6rem;
        text-transform: math-auto;
    }

    .card > svg {
        max-width: 80px;
    }

.grid.four .card {
    width: 120px;
}

.card.large {
    width: 100%;
    max-width: 70vh;
    max-height: 70vh;
    min-width: 400px;
}

.card-container.message {
    position: absolute;
    z-index: 999999;
}

.card-container .card {
    min-height: 200px;
}

.card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.card.large {
    min-width: min(480px, 90vw);
    min-height: 480px;
}

    .card.large > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.card .character-box {
    background: #e0e0e0;
    width: 300px;
    margin: 0 auto;
    border-radius: 30px;
}

.card img.gif {
    width: auto;
    position: relative;
    height: 120px;
}

@media (max-width: 768px) {
    .card.large.limited {
        min-height: 380px;
        margin: 10px;
        width: calc(100% - 20px);
        min-width: revert;
    }
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(var(--angle, 135deg), rgba(255,255,255,0.1), rgba(255,255,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    transition: background 0.2s ease;
}

.glow {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at center, rgba(254, 123, 31, 0.2), transparent 80%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: top 0.1s, left 0.1s, opacity 0.3s ease;
    z-index: 0;
}


.card:hover .glow {
    opacity: 1;
}

.grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    position: relative;
    top: 0;
    max-height: 80vh;
    padding: 40px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
}

/* Chrome, Edge, Safari */
.grid::-webkit-scrollbar {
    width: 8px; /* vertical scrollbar width */
    height: 8px; /* horizontal scrollbar height */
}

    .grid::-webkit-scrollbar-track {
        background: transparent; /* or a very light color */
    }

    .grid::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.3);
        border-radius: 4px;
        border: 2px solid transparent; /* padding around thumb */
        background-clip: content-box;
    }

    .grid.four {
        grid-template-columns: repeat(4, 1fr);
    }

@media(max-width: 980px) {
    .grid {
        top: 0;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}

@media(max-width: 768px) {
    .grid {
        top: 0;
        grid-template-columns: repeat(2, 1fr);
        overflow-y: revert;
        overflow-x: revert;
        max-width: 80vw;
        margin-top: 5em;
        margin-bottom: 5em;
        padding: 0;
    }

        .grid.four {
            grid-template-columns: repeat(4, 1fr);
            overflow-x: scroll !important;
            overflow-y: hidden !important;
            margin-top: 1rem;
            max-width: 100vw;
            padding: 0 5vw;
        }
}

@media(max-width: 520px) {
    .grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: revert;
        overflow-x: revert;
    }

        .grid.four {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            overflow-x: scroll !important;
            overflow-y: hidden !important;
            margin-bottom: 0;
        }
}

.puzzle-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 880px;
    height: 80vh;
    top: 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

/*-----------------------------*/
/*-CONTROL---------------------*/
/*-----------------------------*/
ul.strip {
    max-height: 220px;
    overflow-x: scroll;
    list-style: none;
    width: 100%;
    max-width: 980px;
    min-height: 220px;
    display: flex;
    justify-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
}

/* Chrome, Edge, Safari */
ul.strip::-webkit-scrollbar {
    width: 8px; /* vertical scrollbar width */
    height: 8px; /* horizontal scrollbar height */
}

    ul.strip::-webkit-scrollbar-track {
        background: transparent; /* or a very light color */
    }

    ul.strip::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.3);
        border-radius: 4px;
        border: 2px solid transparent; /* padding around thumb */
        background-clip: content-box;
    }

    ul.strip li {
        margin: 0 10px 0 0;
    }

        ul.strip li .card-container.hidden img {
            opacity: 0.3 !important;
        }

        ul.strip li .card-container h2 {
            color: white;
            z-index: 2;
            pointer-events: none;
        }


/*--------------------------------------------------*/
/*-MICROCHIP----------------------------------------*/
/*--------------------------------------------------*/

:root {
    --hue: 34;
    --primary1: hsl(var(--hue),90%,90%);
    --primary3: hsl(var(--hue),90%,70%);
    --primary7: hsl(var(--hue),90%,30%);
    --primary9: hsl(var(--hue),90%,10%);
    --trans-dur: 0.3s;
}

#components-reconnect-modal {
    background: rgba(0, 0, 0, 0.75);
}

    #components-reconnect-modal a {
        color: orange !important;
        cursor: pointer;
    }

.microchip {
    display: block;
    margin: 0 auto;
    width: 8em;
    height: auto;
}

.microchip__center, .microchip__dot, .microchip__line, .microchip__lines, .microchip__spark, .microchip__wave {
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    animation-iteration-count: infinite;
}

.microchip__core, .microchip__dot {
    fill: var(--primary7);
    transition: fill var(--trans-dur);
}

.microchip__center, .microchip__wave {
    transform-origin: 25px 25px;
}

.microchip__center {
    animation-name: center-scale;
}

.microchip__dot--1 {
    animation-name: dot-scale1;
    transform-origin: 3px 38px;
}

.microchip__dot--2 {
    animation-name: dot-scale2;
    transform-origin: 3px 54px;
}

.microchip__dot--3 {
    animation-name: dot-scale3;
    transform-origin: 3px 70px;
}

.microchip__dot--4 {
    animation-name: dot-scale4;
    transform-origin: 3px 3px;
}

.microchip__dot--5 {
    animation-name: dot-scale5;
    transform-origin: 20px 3px;
}

.microchip__dot--6 {
    animation-name: dot-scale6;
    transform-origin: 3px 30px;
}

.microchip__dot--7 {
    animation-name: dot-scale7;
    transform-origin: 37px 3px;
}

.microchip__dot--8 {
    animation-name: dot-scale8;
    transform-origin: 54px 3px;
}

.microchip__dot--9 {
    animation-name: dot-scale9;
    transform-origin: 71px 3px;
}

.microchip__line, .microchip__spark, .microchip__wave {
    transition: stroke var(--trans-dur);
}

.microchip__line {
    stroke: var(--primary7);
}

.microchip__line--1 {
    animation-name: line-draw1;
}

.microchip__line--2 {
    animation-name: line-draw2;
}

.microchip__line--3 {
    animation-name: line-draw3;
}

.microchip__line--4 {
    animation-name: line-draw4;
}

.microchip__line--5 {
    animation-name: line-draw5;
}

.microchip__line--6 {
    animation-name: line-draw6;
}

.microchip__line--7 {
    animation-name: line-draw7;
}

.microchip__line--8 {
    animation-name: line-draw8;
}

.microchip__line--9 {
    animation-name: line-draw9;
}

.microchip__lines {
    animation-name: lines-scale;
    transform-origin: 54px 54px;
}

.microchip__spark, .microchip__wave {
    animation-timing-function: linear;
    stroke: var(--primary3);
}

.microchip__spark--1 {
    animation-name: spark1;
}

.microchip__spark--2 {
    animation-name: spark2;
}

.microchip__spark--3 {
    animation-name: spark3;
}

.microchip__spark--4 {
    animation-name: spark4;
}

.microchip__spark--5 {
    animation-name: spark5;
}

.microchip__spark--6 {
    animation-name: spark6;
}

.microchip__spark--7 {
    animation-name: spark7;
}

.microchip__spark--8 {
    animation-name: spark8;
}

.microchip__spark--9 {
    animation-name: spark9;
}

.microchip__wave--1 {
    animation-name: wave-scale1;
}

.microchip__wave--2 {
    animation-name: wave-scale2;
}

/* Animations */
@keyframes center-scale {
    from, to {
        transform: scale(0);
    }

    12.5%, 75% {
        transform: scale(1);
    }
}

@keyframes dot-scale1 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes dot-scale2 {
    from, 10.5%, 87.5%, to {
        transform: scale(0);
    }

    23%, 75% {
        transform: scale(1);
    }
}

@keyframes dot-scale3 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes dot-scale4 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes dot-scale5 {
    from, 11.5%, 87.5%, to {
        transform: scale(0);
    }

    24%, 75% {
        transform: scale(1);
    }
}

@keyframes dot-scale6 {
    from, 14.5%, 85%, to {
        transform: scale(0);
    }

    27%, 72.5% {
        transform: scale(1);
    }
}

@keyframes dot-scale7 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes dot-scale8 {
    from, 11%, 87.5%, to {
        transform: scale(0);
    }

    23.5%, 75% {
        transform: scale(1);
    }
}

@keyframes dot-scale9 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes line-draw1 {
    from, 93.75%, to {
        stroke-dashoffset: 59;
    }

    25%, 68.75% {
        stroke-dashoffset: 17;
    }
}

@keyframes line-draw2 {
    from, 93.75%, to {
        stroke-dashoffset: 42;
    }

    25%, 68.75% {
        stroke-dashoffset: 0;
    }
}

@keyframes line-draw3 {
    from, 93.75%, to {
        stroke-dashoffset: 59;
    }

    25%, 68.75% {
        stroke-dashoffset: 17;
    }
}

@keyframes line-draw4 {
    from, 93.75%, to {
        stroke-dashoffset: 78;
    }

    25%, 68.75% {
        stroke-dashoffset: 18;
    }
}

@keyframes line-draw5 {
    from, 93.75%, to {
        stroke-dashoffset: 60;
    }

    25%, 68.75% {
        stroke-dashoffset: 0;
    }
}

@keyframes line-draw6 {
    from, 93.75%, to {
        stroke-dashoffset: 91;
    }

    25%, 68.75% {
        stroke-dashoffset: 31;
    }
}

@keyframes line-draw7 {
    from, 93.75%, to {
        stroke-dashoffset: 60;
    }

    25%, 68.75% {
        stroke-dashoffset: 17;
    }
}

@keyframes line-draw8 {
    from, 93.75%, to {
        stroke-dashoffset: 43;
    }

    25%, 68.75% {
        stroke-dashoffset: 0;
    }
}

@keyframes line-draw9 {
    from, 93.75%, to {
        stroke-dashoffset: 60;
    }

    25%, 68.75% {
        stroke-dashoffset: 17;
    }
}

@keyframes lines-scale {
    from {
        opacity: 1;
        transform: scale(0);
    }

    12.5%, 75% {
        opacity: 1;
        transform: scale(1);
    }

    93.75%, to {
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes spark1 {
    from, 27.5% {
        stroke-dashoffset: 59;
    }

    50%, 52.5% {
        stroke-dashoffset: -25;
    }

    75%, to {
        stroke-dashoffset: -109;
    }
}

@keyframes spark2 {
    from, 27.5% {
        stroke-dashoffset: 42;
    }

    50%, 52.5% {
        stroke-dashoffset: -42;
    }

    75%, to {
        stroke-dashoffset: -126;
    }
}

@keyframes spark3 {
    from, 27.5% {
        stroke-dashoffset: 59;
    }

    50%, 52.5% {
        stroke-dashoffset: -25;
    }

    75%, to {
        stroke-dashoffset: -109;
    }
}

@keyframes spark4 {
    from, 27.5% {
        stroke-dashoffset: 78;
    }

    50%, 52.5% {
        stroke-dashoffset: -42;
    }

    75%, to {
        stroke-dashoffset: -162;
    }
}

@keyframes spark5 {
    from, 27.5% {
        stroke-dashoffset: 60;
    }

    50%, 52.5% {
        stroke-dashoffset: -60;
    }

    75%, to {
        stroke-dashoffset: -180;
    }
}

@keyframes spark6 {
    from, 27.5% {
        stroke-dashoffset: 91;
    }

    50%, 52.5% {
        stroke-dashoffset: -29;
    }

    75%, to {
        stroke-dashoffset: -149;
    }
}

@keyframes spark7 {
    from, 27.5% {
        stroke-dashoffset: 60;
    }

    50%, 52.5% {
        stroke-dashoffset: -26;
    }

    75%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes spark8 {
    from, 27.5% {
        stroke-dashoffset: 43;
    }

    50%, 52.5% {
        stroke-dashoffset: -43;
    }

    75%, to {
        stroke-dashoffset: -129;
    }
}

@keyframes spark9 {
    from, 27.5% {
        stroke-dashoffset: 60;
    }

    50%, 52.5% {
        stroke-dashoffset: -26;
    }

    75%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes wave-scale1 {
    from, 0%, 25%, 50%, 75% {
        stroke-width: 6px;
        transform: scale(1);
    }

    10%, 35%, 60%, 85%, to {
        animation-timing-function: steps(1);
        stroke-width: 0;
        transform: scale(2);
    }
}

@keyframes wave-scale2 {
    from, 5%, 30%, 55%, 80% {
        stroke-width: 6px;
        transform: scale(1);
    }

    15%, 40%, 65%, 90%, to {
        animation-timing-function: steps(1);
        stroke-width: 0;
        transform: scale(2);
    }
}

#components-reconnect-modal {
    display: none;
}

    #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-rejected {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 100vh;
        width: 100vw;
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }


/*--------------------------------------------------*/
/*-PULSE--------------------------------------------*/
/*--------------------------------------------------*/
.pulse .fa-solid {
    font-size: 15px;
    padding: 8px;
    border-radius: 50%;
    background: transparent;
}

.pulse {
    width: 3rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pulse,
    .pulse::after,
    .pulse::before {
        content: "";
        display: grid;
        grid-area: 1/1;
        aspect-ratio: 1;
        border-radius: 50%;
        box-shadow: 0 0 0 0 #33333311;
        animation: pulsing 3s linear infinite var(--s, 0s);
    }

        .pulse::before {
            --s: 1s;
        }

        .pulse::after {
            --s: 2s;
        }

        .pulse:hover {
            background: #880808;
            color: #880808;
        }

@keyframes pulsing {
    to {
        box-shadow: 0 0 0 2rem #0000;
    }
}

/*------------------------------------*/
/*-RAIN-------------------------------*/
/*------------------------------------*/
section.rain {
    height: 1456px;
    position: absolute;
    overflow-y: hidden;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.2;
    z-index: 9;
}
.drop {
    background: -webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6)) );
    background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width: 1px;
    height: 89px;
    position: absolute;
    bottom: 200px;
    -webkit-animation: fall .63s linear infinite;
    -moz-animation: fall .63s linear infinite;
}

/* animate the drops*/
@-webkit-keyframes fall {
    to {
        margin-top: 900px;
    }
}

@-moz-keyframes fall {
    to {
        margin-top: 900px;
    }
}

/*------------------------------------*/
/*-PLAGUE-----------------------------*/
/*------------------------------------*/

canvas#plague {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1;
}

/*------------------------------------*/
/*-HEADER-----------------------------*/
/*------------------------------------*/
.banner-text {
    pointer-events: none;
}

.hero-text {
    display: flex;
    flex-wrap: wrap;
    font-size: 3rem;
    color: #FFF;   
    pointer-events: none;
}

.hero-word {
    margin-right: 0.35em;
    display: inline-block;
    white-space: nowrap;
    pointer-events: none;
}

.hero-letter {
    font-family: "Rubik Distressed", system-ui;
    display: inline-block;
    opacity: 0;
    transform: translateY(5px);
    font-size: 4rem;
    letter-spacing: 1.05rem;
    color: rgba(255, 255, 255, 0.4);
    animation: heroLetterIn 0.6s ease forwards, heroLetterFidget 4s ease-in-out infinite;
    animation-delay: 0s, 0.6s; /* start fidget after fade-in */
    pointer-events: none;
}

@keyframes heroLetterIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroLetterFidget {
    0% {
        transform: translate(0px,0px) rotate(0deg);
    }

    25% {
        transform: translate(0.5px,-0.8px) rotate(-0.3deg);
    }

    50% {
        transform: translate(-0.6px,0.6px) rotate(0.3deg);
    }

    75% {
        transform: translate(0.4px,0.7px) rotate(-0.2deg);
    }

    100% {
        transform: translate(0px,0px) rotate(0deg);
    }
}