@font-face {
    font-family: "Ancient2";
    src: url('../fonts/BethLuisFearn-2v4K.woff2') format('woff2'), url('../fonts/BethLuisFearn-2v4K.woff') format('woff');
}

@font-face {
    font-family: "Glitch";
    src: url('../fonts/Glitch.woff2') format('woff2'), url('../fonts/Glitch.woff') format('woff');
}

@font-face {
    font-family: "Life";
    src: url('../fonts/Life.woff2') format('woff2'), url('../fonts/Life.woff') format('woff');
}

@font-face {
    font-family: "Ancient";
    src: url('../fonts/Makr.woff2') format('woff2'), url('../fonts/Makr.woff') format('woff');
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Glitch, sans-serif;
    text-transform: uppercase;
    background: #09090b;
}

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

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



/*-----------------------------*/
/*-INTRO------------------------*/
/*-----------------------------*/
#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: "Glitch", sans-serif;
    text-align: center;
}

    .p-summary h1 {
        margin: 0 0 0.1em;
        font-size: 18vh;
        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: "Glitch", sans-serif;
    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: rgb(254, 123, 31) !important;
    }

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

.glass-item svg {
    fill: #EFEFEF;
    height: 50px;
    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;
    }

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

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

    50% {
        opacity: 0.3;
    }

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

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

    .player.landscape {
        width: 120px;
        height: 120px;
    }

    .player > img {
        width: 100%;
        height: 100%;
    }

/*-----------------------------*/
/*-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;
}

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

    .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: "Glitch", sans-serif;
    text-transform: uppercase;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

    .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(420px, 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;
}

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

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


/*-----------------------------*/
/*-PUZZLES-ARCHERY-------------*/
/*-----------------------------*/
#mainContainer {
    transform-origin: 0% 0%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    min-height: 80vh;
    background: #333;
    border-radius: 50px;
}

#score {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 60px;
    font-weight: 900;
    color: white;
}

#showPoint {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    margin: 0;
}

    #showPoint .u {
        position: absolute;
        display: inline-block;
        top: 50%;
        left: 70%;
        font-size: 30px;
        font-family: "Glitch";
        text-transform: uppercase;
        opacity: 0;
        transition: top 0.1s linear,left 0.1s linear
    }

#animCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

#arrs {
    font-size: 30px;
    text-align: left;
    position: absolute;
    margin: 0;
    top: 0;
    padding-left: 10px;
}

#startMenu {
    position: absolute;
    top: 0;
    left: 0;
    background: #333;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 100px;
}

    #startMenu h1 {
        font-size: 50px;
        text-shadow: 2px 3px #aaa;
        font-weight: 900;
        text-align: center;
    }

    #startMenu button {
        font-size: 22px;
        background: none;
        border: none;
        border-top: 3px solid #000;
        border-bottom: 3px solid #000;
        padding: 10px 30px 5px;
        line-height: 20px;
        outline: none;
    }

    #startMenu h2 {
        font-size: 25px;
    }

#timerDiv {
    height: 8px;
    padding: 0px;
    border: 2px solid white;
    width: 50%;
    position: absolute;
    bottom: 20px;
    left: 25%;
    border-radius: 20px;
}

.timer {
    height: 8px;
    width: 0%;
    background: red;
    animation: countTime 4.5s linear 1;
    animation-delay: 0.5s;
    border-radius: 20px;
}

@keyframes countTime {
    0% {
        width: 100%;
        background-color: lime;
    }

    50% {
        background-color: yellow;
    }

    100% {
        width: 0%;
        background-color: red;
    }
}

/*-----------------------------*/
/*-PUZZLES-STACK---------------*/
/*-----------------------------*/
#container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    #container #score {
        position: absolute;
        top: 20px;
        width: 100%;
        text-align: center;
        font-size: 10vh;
        transition: transform 0.5s ease;
        color: #FFF;
        transform: translateY(-200px) scale(1);
        z-index: 999;
    }

    #container #game {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 20vh;
        left: 0;
        height: 80vh;
        overflow: hidden;
    }

    #container .game-over {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 85%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        #container .game-over * {
            transition: opacity 0.5s ease, transform 0.5s ease;
            opacity: 0;
            transform: translateY(-50px);
            color: #333344;
        }

        #container .game-over h2 {
            margin: 0;
            padding: 0;
            font-size: 40px;
        }

    #container .game-ready {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        z-index: 999;
    }

        #container .game-ready #start-button, .button {
            transition: opacity 0.5s ease, transform 0.5s ease;
            opacity: 0;
            transform: translateY(-50px);
            border: 3px solid #FFF;
            border-radius: 30px;
            padding: 10px 20px;
            background-color: transparent;
            color: #FFF;
            font-size: 30px;
            z-index: 999;
        }

    #container #instructions {
        position: relative;
        transition: opacity 0.5s ease, transform 0.5s ease;
        opacity: 0;
        z-index: 999;
    }

        #container #instructions.hide {
            opacity: 0 !important;
        }

    #container.playing #score, #container.resetting #score {
        transform: translateY(0px) scale(1);
    }

    #container.playing #instructions {
        opacity: 1;
    }

    #container.ready .game-ready #start-button {
        opacity: 1;
        transform: translateY(0);
    }

    #container.ended #score {
        transform: translateY(6vh) scale(1.5);
    }

    #container.ended .game-over * {
        opacity: 1;
        transform: translateY(0);
    }

    #container.ended .game-over p {
        transition-delay: 0.3s;
    }

#game canvas {
    transform: rotateZ(0) scale(1);
}

/*-----------------------------*/
/*-PUZZLES-LOCK----------------*/
/*-----------------------------*/

.lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    z-index: 1;
    background: #333;
    border-radius: 50%;
    box-shadow: #000 0 0 100px;
}

    .lock .instruction {
        position: absolute;
        color: white;
        text-align: center;
        top: -100px;
        line-height: 1.5;
        font-family: "Glitch", sans-serif;
        text-transform: uppercase;
        width: 400px;
        margin-left: -100px;
    }

    .lock .ring {
        position: absolute;
        border: 5px solid rgba(255, 255, 255, 0.5);
        width: 100%;
        height: 100%;
        border-radius: 100%;
        top: 0;
        left: 0;
        box-sizing: border-box;
    }

        .lock .ring.checked {
            animation: blink 2s ease-in-out;
        }

@keyframes blink {
    0%, 50%, 100% {
        border: 5px solid rgba(255, 255, 255, 1);
    }

    25%, 75% {
        border: 5px solid rgba(255, 255, 255, 0.5);
    }
}

.lock .lockpick {
    position: absolute;
    width: 4px;
    height: 100px;
    background: black;
    left: 50%;
    top: 0px;
    margin-left: -2px;
    background: white;
    transform-origin: bottom;
}

.lock .stage {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

    .lock .stage li {
        width: 10px;
        height: 25px;
        background: rgba(255, 255, 255, 0.5);
        float: left;
        margin: 0 2px;
        border-radius: 5px;
        transition: all 1s ease;
    }

        .lock .stage li.active,
        .lock .stage li.done {
            background: white;
            margin-top: -10px;
        }

        .lock .stage li.done {
            margin-top: -20px;
            background: green;
        }

.lock > .fas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 100%;
    width: 90px;
    height: 90px;
    text-align: center;
    box-sizing: border-box;
}

.lock .lockpick .fas {
    position: absolute;
    color: white;
    display: none;
}

    .lock .lockpick .fas.fa-caret-right {
        top: 3px;
        right: -8px;
    }

    .lock .lockpick .fas.fa-caret-left {
        top: 3px;
        left: -8px;
    }

@keyframes shake-little {
    2% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    4% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

    6% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

    8% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

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

    12% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

    14% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

    16% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

    18% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

    20% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

    22% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

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

    26% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    28% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    30% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    32% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

    34% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

    36% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

    38% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    40% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    42% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    44% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    46% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

    48% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    50% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    52% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

    54% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

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

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

    60% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

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

    64% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

    66% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    68% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

    70% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

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

    74% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

    76% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

    78% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

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

    82% {
        transform: translate(1px, 0px) rotate(0.5deg);
    }

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

    86% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    88% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    90% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

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

    94% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    96% {
        transform: translate(0px, 1px) rotate(0.5deg);
    }

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

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

.shake-little:hover,
.shake-trigger:hover .shake-little,
.shake-little.shake-freeze,
.shake-little.shake-constant {
    animation-name: shake-little;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

#message {
    position: relative;
    z-index: 9999;
    display: none;
    text-align: center;
}

/*-----------------------------*/
/*-PUZZLES-WATER---------------*/
/*-----------------------------*/

#game {
    position: absolute;
    top: 0;
    left: 0;
    height: 80vh;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow-y: scroll;
}

#menu {
    position: absolute;
}

#menu-heading {
    position: relative;
    margin-top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-color: yellow;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
    font-weight: 900;
}

.lvl {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    cursor: pointer;
}


@media(max-width: 768px) {
    #menu {
        display: grid;
    }

    .lvl {
        width: 220px;
        height: 160px;
        min-height: revert;
    }
}

@media(max-width: 520px) {
    #menu {
    }

    .lvl {
        height: 60px;
        min-width: 60px;
        width: 100%;
        min-height: revert;
    }
}

#level {
    z-index: 1;
    height: 140vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #09090b;
    overflow-y: scroll;
    overflow-x: hidden;
    display: none;
}

.lvl:hover {
}

.test-tube {
    position: absolute;
    height: 130px;
    width: 40px;
    border: 2px solid rgb(150,150,150);
    border-radius: 2px 2px 20px 20px;
    background-position: 0 10px;
    overflow: hidden;
    transition: 0.3s ease;
    transform: rotate(0deg);
    /* glowing effect */
    box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

    /* optional pulsing glow animation */
    .test-tube.glow {
        animation: tubeGlow 2s infinite alternate;
    }

@keyframes tubeGlow {
    0% {
        box-shadow: 0 0 5px rgba(255,255,255,0.3), 0 0 10px rgba(255,255,255,0.2);
    }

    50% {
        box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.3);
    }

    100% {
        box-shadow: 0 0 5px rgba(255,255,255,0.3), 0 0 10px rgba(255,255,255,0.2);
    }
}


@keyframes glassAnim {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.colors {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 30px;
    width: 40px;
    background-color: var(--tube-color);
    transition: all 0.3s ease;
}

    .colors::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 50%);
    }

.bubbles {
    position: relative;
    width: 80px;
    height: 60px;
    /* per-instance randomness */
    --dur: 4s;
    --delay: 0s;
    --drift: 0px;
}

    .bubbles span {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(0,0,0,0.2);
        animation: bubblerise var(--dur) linear infinite;
        animation-delay: var(--delay);
        will-change: transform;
    }

        /* base x positions */
        .bubbles span:nth-child(1) {
            left: 10px;
        }

        .bubbles span:nth-child(2) {
            left: 35px;
        }

        .bubbles span:nth-child(3) {
            left: 60px;
        }

@keyframes bubblerise {
    from {
        transform: translate(var(--drift), 50px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    to {
        transform: translate(var(--drift), -10px);
        opacity: 0;
    }
}

#won {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 60px;
    font-weight: 900;
    color: white;
}

#white-bg {
    position: absolute;
    left: 0;
    top: 10px;
    width: 40px;
    height: 10px;
    background-color: #09090b;
    z-index: 1000;
    transition: 1s;
}

#colorful-bg {
    position: absolute;
    width: 100%;
    height: 0;
    z-index: 1000;
    transition: 1s;
}

    #colorful-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 50%);
    }

#restart {
    left: 0;
}

#home {
    left: calc(100vw - 150px);
}

.game-buttons {
    position: fixed;
    top: calc(80vh - 50px);
    height: 50px;
    width: 150px;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    border-radius: 10px 10px 0 0;
    display: none;
}

#lvl-heading {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-color: yellow;
    border-radius: 0 0 25px 25px;
    font-size: 40px;
    font-weight: 800;
    line-height: 50px;
    text-align: center;
    letter-spacing: 5px;
    display: none;
}

#moves, #restart {
    width: 150px;
    height: 30px;
    font-size: 20px;
    margin: 1em;
    color: white;
    display: inline-block;
    position: relative;
    top: revert;
    left: revert;
    padding: 0;
    margin: 0 10px 0;
    width: auto;
}

#restart {
    cursor: pointer;
    border: solid 2px white;
    border-radius: 30px;
    line-height: 1.2;
    padding: 0 10px;
}

#rules-btn {
    position: fixed;
    left: calc(100% - 200px);
    top: calc(80vh - 50px);
    height: 50px;
    width: 200px;
    background-color: lightgreen;
    border-radius: 20px 20px 0 0;
    text-align: center;
    font-size: 25px;
    line-height: 50px;
    font-weight: 500;
}

#rules-page {
    display: none;
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: 0.5s linear;
}

#rules {
    position: absolute;
    top: 100px;
    left: 50px;
    height: calc(80vh - 200px);
    width: calc(100% - 100px);
    background-color: white;
    border-radius: 10px;
}

#rules-heading {
    position: absolute;
    top: 10px;
    left: 0;
    height: 30px;
    width: 100%;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
}

#rules-text {
    position: absolute;
    top: 70px;
    left: 5%;
    width: 90%;
    font-size: 20px;
    height: calc(80vh - 200px - 150px);
    overflow-x: hidden;
}

#back {
    position: absolute;
    top: calc(100% - 120px + 65px + 10px);
    height: 40px;
    width: 100px;
    left: calc(100% - 100px);
    background-color: rgb(100, 255, 100);
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    border-radius: 10px 0 0 10px;
}

#alert-button:hover {
    background-color: rgb(150,255,150);
}

/*-----------------------------*/
/*-STARGATE--------------------*/
/*-----------------------------*/

.sg-border {
    width: 700px;
    height: 700px;
    border: 14px solid #111;
    border-radius: 50%;
    margin: auto;
    position: relative;
}

.arrow {
    position: absolute;
    z-index: 2;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 25px;
    border-color: #5e2f12 transparent transparent transparent;
    transition: all 1s linear;
}

    .arrow.on {
        border-color: orange transparent transparent transparent;
        filter: drop-shadow(0 0 5px red);
    }

    .arrow.arrow1 {
        left: 318px;
    }

    .arrow.arrow2 {
        left: 525px;
        top: 80px;
        transform: rotate(40deg);
    }

    .arrow.arrow3 {
        left: 635px;
        top: 300px;
        transform: rotate(87deg);
    }

    .arrow.arrow4 {
        left: 575px;
        top: 515px;
        transform: rotate(125deg);
    }

    .arrow.arrow5 {
        left: 425px;
        top: 630px;
        transform: rotate(160deg);
    }

    .arrow.arrow6 {
        left: 215px;
        top: 635px;
        transform: rotate(200deg);
    }

    .arrow.arrow7 {
        left: 50px;
        top: 515px;
        transform: rotate(235deg);
    }

    .arrow.arrow8 {
        left: -12px;
        top: 315px;
        transform: rotate(272deg);
    }

    .arrow.arrow9 {
        left: 70px;
        top: 105px;
        transform: rotate(310deg);
    }

#stargate {
    background: radial-gradient(transparent 53%, #222 53%);
    width: 675px;
    height: 675px;
    margin: auto;
    border-radius: 50%;
    box-shadow: 3px 3px 5px #000 inset, -4px -4px 6px #000 inset;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-animation: move 20s cubic-bezier(0.44, 0.35, 0.78, 0.73) paused infinite;
    animation: move 20s cubic-bezier(0.44, 0.35, 0.78, 0.73) paused infinite;
}

    #stargate.on {
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }

    #stargate .chevron {
        filter: invert(1);
        width: 42px;
        position: absolute;
        top: 47%;
        left: 50%;
        font-size: 1rem;
        font-family: "Ancient";
    }

        #stargate .chevron:nth-child(1) {
            transform: translate(0, -300px);
        }

        #stargate .chevron:nth-child(2) {
            transform: translate(50px, -290px);
        }

        #stargate .chevron:nth-child(3) {
            transform: translate(100px, -275px);
        }

        #stargate .chevron:nth-child(4) {
            transform: translate(145px, -250px);
        }

        #stargate .chevron:nth-child(5) {
            transform: translate(185px, -225px);
        }

        #stargate .chevron:nth-child(6) {
            transform: translate(220px, -185px);
        }

        #stargate .chevron:nth-child(7) {
            transform: translate(250px, -140px);
        }

        #stargate .chevron:nth-child(8) {
            transform: translate(275px, -90px);
        }

        #stargate .chevron:nth-child(9) {
            transform: translate(285px, -40px);
        }

        #stargate .chevron:nth-child(10) {
            transform: translate(290px, 0);
        }

        #stargate .chevron:nth-child(11) {
            transform: translate(288px, 50px);
        }

        #stargate .chevron:nth-child(12) {
            transform: translate(275px, 95px);
        }

        #stargate .chevron:nth-child(13) {
            transform: translate(253px, 135px);
        }

        #stargate .chevron:nth-child(14) {
            transform: translate(230px, 172px);
        }

        #stargate .chevron:nth-child(15) {
            transform: translate(197px, 207px);
        }

        #stargate .chevron:nth-child(16) {
            transform: translate(153px, 243px);
        }

        #stargate .chevron:nth-child(17) {
            transform: translate(111px, 269px);
        }

        #stargate .chevron:nth-child(18) {
            transform: translate(70px, 286px);
        }

        #stargate .chevron:nth-child(19) {
            transform: translate(21px, 293px);
        }

        #stargate .chevron:nth-child(20) {
            transform: translate(-25px, 295px);
        }

        #stargate .chevron:nth-child(21) {
            transform: translate(-66px, 290px);
        }

        #stargate .chevron:nth-child(22) {
            transform: translate(-109px, 277px);
        }

        #stargate .chevron:nth-child(23) {
            transform: translate(-144px, 258px);
        }

        #stargate .chevron:nth-child(24) {
            transform: translate(-185px, 235px);
        }

        #stargate .chevron:nth-child(25) {
            transform: translate(-221px, 202px);
        }

        #stargate .chevron:nth-child(26) {
            transform: translate(-249px, 170px);
        }

        #stargate .chevron:nth-child(27) {
            transform: translate(-272px, 135px);
        }

        #stargate .chevron:nth-child(28) {
            transform: translate(-282px, 100px);
        }

        #stargate .chevron:nth-child(29) {
            transform: translate(-295px, 69px);
        }

        #stargate .chevron:nth-child(30) {
            transform: translate(-300px, 32px);
        }

        #stargate .chevron:nth-child(31) {
            transform: translate(-300px, -17px);
        }

        #stargate .chevron:nth-child(32) {
            transform: translate(-293px, -61px);
        }

        #stargate .chevron:nth-child(33) {
            transform: translate(-282px, -103px);
        }

        #stargate .chevron:nth-child(34) {
            transform: translate(-263px, -138px);
        }

        #stargate .chevron:nth-child(35) {
            transform: translate(-240px, -171px);
        }

        #stargate .chevron:nth-child(36) {
            transform: translate(-205px, -211px);
        }

        #stargate .chevron:nth-child(37) {
            transform: translate(-163px, -248px);
        }

        #stargate .chevron:nth-child(38) {
            transform: translate(-109px, -275px);
        }

        #stargate .chevron:nth-child(39) {
            transform: translate(-60px, -287px);
        }

div.star-message {
    position: absolute;
    font-size: 2rem;
    color: #666;
    z-index: 5;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-animation: fadeout 1s ease-out 3s 1 forwards;
    animation: fadeout 1s ease-out 3s 1 forwards;
    background: rgba(75, 75, 75, 0.25);
}

    div.star-message p:first-child {
    }

    div.star-message .small {
        font-size: 18px;
        margin-top: 0;
        padding-bottom: 20px;
    }

.wormhole {
    position: relative;
    background-color: transparent;
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.5);
    border: #000 1px solid;
    width: 510px;
    height: 510px;
    border-radius: 50%;
    transition: all 1s ease;
}

    .wormhole.on {
        background-color: rgba(254, 123, 31, 0.3);
        box-shadow: 0px 0px 50px rgb(254, 123, 31) inset, -15px -15px 45px rgb(17, 21, 28) inset, 0 0 15px 10px rgba(0, 0, 0, 0.5);
    }

@-webkit-keyframes move {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes move {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fadeout {
    0% {
        opacity: 1;
        z-index: 4;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
        z-index: 4;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

/*--------------------------------------------------*/
/*-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;
    }