@import url("https://fonts.googleapis.com/css?family=Cinzel|Open+Sans+Condensed:300i");

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

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

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

/*----------------------------------------------------------------------------*/
/*-COMMON---------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

body {
    padding: 0;
    margin: 0;
    background: #000;
}

.page {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column !important;
}

main {
    height: 90vh;
    width: 100vw;
    overflow: hidden;

}

.menu {
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Cinzel", serif;
    font-size: 0.8em;
}

a {
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #e0550d !important;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
}
    
    a span {
        position: absolute;
        display: block;
    }

@keyframes animate1 {
    0% {
        left: -100%;
    }

    50%,100% {
        left: 100%;
    }
}

/*----------------------------------------------------------------------------*/
/*-MAP------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
canvas#ghost {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 10000;
    pointer-events: none;
}

:root{
    --tile-width: 16px;
}

#ring-canvas {
    position: absolute;
    background: #111;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}

.tile {
    width: var(--tile-width);
    height: var(--tile-width);
    box-sizing: border-box;
    position: relative;
}

.row {
    display: flex;
}

.floor {
    background-color: #000;
}

.wall {
    opacity: 0.9;
    background-color: #000;
}

.visible {
    opacity: 0;
}

.hidden {
    opacity: 1;
}

.fog {
    opacity: 0.3;
    filter: grayscale(100%);
}

.partial {
    opacity: 0.9;    
    transition: opacity 0.2s ease;
}

.tile.murky {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.player {
    width: var(--tile-width);
    height: var(--tile-width);
    background-image: url('../img/Hat.png');
    background-size: contain;
    transform: scale(1.5);
    background-repeat: no-repeat;
    background-color: transparent;
    top: 0px;
    left: 0px;
    opacity: 1;
    
    border-radius: 50%;
}


.character {
    width: calc(var(--tile-width) / 1.5);
    height: var(--tile-width);
    background-size: contain;
    transform: scale(4.5);
    background-repeat: no-repeat;
    background-color: transparent;
    top: 0px;
    left: 0px;
    opacity: 1;
    pointer-events: none;
    image-rendering: pixelated;
}

/*----------------------------------------------------------------------------*/
/*-INTRO----------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

.mainSVG {
    width: 100%;
    height: 100%;
    overflow: visible;
    position: relative;
}

.back {
    background: #000000;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;    
}

.light {
    width: 100%;
    height: 100%;
    animation: firelight 2s ease infinite;
    background: radial-gradient(ellipse at bottom, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0) 90%);
    position: fixed;
    z-index: 1;
    bottom: 0;
    left: 0;
    bottom: 0;    
}

@keyframes firelight {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

.content {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin: 0 0 -30px -100px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 100%;
}

    .content .fire {
        filter: url(#goo);
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .content div.bottom {
        position: absolute;
        left: 50px;
        bottom: 0;
        width: 100px;
        height: 30px;
        background: #ff9800;
        border-radius: 30px;
    }

    .content figure {
        position: absolute;
        margin: 0 0 -15px;
        left: calc(50% - 70px);
        bottom: 0;
        width: 70px;
        height: 70px;
        background: #ff9800;
        border-radius: 100%;
    }

        .content figure:nth-child(1) {
            animation: firecircle 1.2s 0.14s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 46px;
            margin-bottom: -21px;
        }

        .content figure:nth-child(2) {
            animation: firecircle 1.2s 0.28s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 48px;
            margin-bottom: -32px;
        }

        .content figure:nth-child(3) {
            animation: firecircle 1.2s 0.42s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 10px;
            margin-bottom: -40px;
        }

        .content figure:nth-child(4) {
            animation: firecircle 1.2s 0.56s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 15px;
            margin-bottom: -29px;
        }

        .content figure:nth-child(5) {
            animation: firecircle 1.2s 0.7s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 11px;
            margin-bottom: -38px;
        }

        .content figure:nth-child(6) {
            animation: firecircle 1.2s 0.84s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 31px;
            margin-bottom: -30px;
        }

        .content figure:nth-child(7) {
            animation: firecircle 1.2s 0.98s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 19px;
            margin-bottom: -26px;
        }

        .content figure:nth-child(8) {
            animation: firecircle 1.2s 1.12s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 11px;
            margin-bottom: -40px;
        }

        .content figure:nth-child(9) {
            animation: firecircle 1.2s 1.26s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 21px;
            margin-bottom: -28px;
        }

        .content figure:nth-child(10) {
            animation: firecircle 1.2s 1.4s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 45px;
            margin-bottom: -29px;
        }

        .content figure:nth-child(11) {
            animation: firecircle 1.2s 1.54s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 42px;
            margin-bottom: -26px;
        }

        .content figure:nth-child(12) {
            animation: firecircle 1.2s 1.68s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 19px;
            margin-bottom: -22px;
        }

        .content figure:nth-child(13) {
            animation: firecircle 1.2s 1.82s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 24px;
            margin-bottom: -21px;
        }

        .content figure:nth-child(14) {
            animation: firecircle 1.2s 1.96s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 50px;
            margin-bottom: -38px;
        }

        .content figure:nth-child(15) {
            animation: firecircle 1.2s 2.1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 36px;
            margin-bottom: -36px;
        }

        .content figure:nth-child(16) {
            animation: firecircle 1.2s 2.24s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 4px;
            margin-bottom: -29px;
        }

    .content .reverse div {
        position: absolute;
        margin: 0 0 -15px;
        left: 0;
        bottom: 0;
        width: 70px;
        height: 70px;
        background: #141e30;
        border-radius: 100%;
    }

        .content .reverse div:nth-child(1) {
            animation: firereverseleft 1.2s 0.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 22px;
            margin-bottom: -39px;
        }

        .content .reverse div:nth-child(2) {
            animation: firereverseleft 1.2s 1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 21px;
            margin-bottom: -26px;
        }

        .content .reverse div:nth-child(3) {
            animation: firereverseleft 1.2s 1.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 5px;
            margin-bottom: -26px;
        }

        .content .reverse div:nth-child(4) {
            animation: firereverseleft 1.2s 2s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 2px;
            margin-bottom: -16px;
        }

        .content .reverse div:nth-child(5) {
            left: 120px;
            animation: firereverseright 1.2s 0.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 9px;
            margin-bottom: -37px;
        }

        .content .reverse div:nth-child(6) {
            left: 120px;
            animation: firereverseright 1.2s 1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 23px;
            margin-bottom: -32px;
        }

        .content .reverse div:nth-child(7) {
            left: 120px;
            animation: firereverseright 1.2s 1.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 14px;
            margin-bottom: -38px;
        }

        .content .reverse div:nth-child(8) {
            left: 120px;
            animation: firereverseright 1.2s 2s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
            margin-left: 18px;
            margin-bottom: -38px;
        }

@keyframes firecircle {
    0% {
        transform: translateY(0) scale(1);
        background: #ff9800;
    }

    100% {
        transform: translateY(-175px) scale(0);
        background: #ffc107;
    }
}

@keyframes firereverseleft {
    0% {
        transform: translateY(0) translateX(0) scale(0.3);
    }

    100% {
        transform: translateY(-175px) translateX(50px) scale(1);
    }
}

@keyframes firereverseright {
    0% {
        transform: translateY(0) translateX(0) scale(0.3);
    }

    100% {
        transform: translateY(-175px) translateX(-50px) scale(1);
    }
}

p.intro {
    color: white;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 42px;
    font-family: "Cinzel", serif;
}

    p.intro span {
        width: 100%;
        font-size: 22px;
        font-style: italic;
        float: left;
        margin: 30px 0 0;
        letter-spacing: 1px;
        color: #ffc107;
        font-family: "Open Sans Condensed", sans-serif;
    }

        p.intro span:before {
            content: "-";
        }

/*--------------------------------------------------*/
/*-PUZZLE GRID--------------------------------------*/
/*--------------------------------------------------*/

.play-area {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    position: relative; /* needed so absolute children are positioned against this box */
    transition: height 0.3s;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    perspective: 1000px;
    /* keep layout flow until collection begins */
}

.card-container {
    --i: 0; /* index (used for stagger) */
    --dx: 0px;
    --dy: 0px;
    --rot: 0deg;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 3 / 4;
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(.2,.8,.2,1), left 0.8s cubic-bezier(.2,.8,.2,1), top 0.8s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
    transform-origin: center center;
    /* allow stagger using CSS variable for delay */
    transition-delay: calc(var(--i) * 0.04s);
    /* ensure a stacking context while moving */
    z-index: 1;
}

/* When collected: make each container absolute and move to computed offsets */
.play-area.collected .card-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.75);
    z-index: 100;
    /* add tiny fade for depth */
    opacity: 0.98;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

    .card.flipped {
        transform: rotateY(180deg);
    }

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    border: 1px solid #ccc;
    overflow: hidden;
    background: white;
}

.card-back {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-front {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .card-front > p {
        position: absolute;
        padding: 10px;
        font-size: 0.8em;
        font-weight: bold;
        text-align: center;
    }

.card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    transition: transform 0.2s;
}

.mirrored {
    transform: scaleX(-1);
}

/*--------------------------------------------------*/
/*-FIRE---------------------------------------------*/
/*--------------------------------------------------*/




.fire {
    font-size: 7px;
    filter: blur(0.02em);
    -webkit-filter: blur(0.02em);
    margin: 0em auto 0 auto;
    position: relative;
    width: 2em;
    height: 2em;
    opacity: 0.5;
    pointer-events: none;
}

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

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

:root {
    --hue: 153;
    --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;
    font-size: clamp(1rem,0.8rem + 1vw,2rem);
}

.microchip {
    display: block;
    margin: 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;
    }



.painted-image {
    max-height: calc(80vh - 40px);
    max-width: 80vw;
    height: auto;
    margin-top: 40px;
}

.painted-image-container {
    height: calc(var(--height-desktop) - 120px);
    margin: 100px 0 20px 0;
    position: relative;
}

@media(max-width: 768px) {
    .painted-image-container {
        height: calc(var(--height-mobile) - 120px);
    }
}

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

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