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

* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #ffb7c5;
    cursor: none;
}

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

*::selection {
    background: #EFEFEF;
    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."
    }

:root {
    --animate-delay: 0.5s;
    --height-desktop: calc(100vh - 100px);
    --height-mobile: 75vh;
}

/*--------------------------------------------------*/
/*-CURSOR-------------------------------------------*/
/*--------------------------------------------------*/
@media (any-pointer: fine) {
    .c-cursor {
        display: block;
    }

    .c-cursor__inner {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        mix-blend-mode: difference;
        border-radius: 50%;
        z-index: 50;
    }

    .c-cursor__side {
        position: absolute;
        top: 50%;
        width: 5px;
        height: 1px;
        background: #fff;
        opacity: 0;
    }

    .c-cursor__side--left {
        right: calc(100% + 5px);
    }

    .c-cursor__side--right {
        left: calc(100% + 5px);
    }

    .c-cursor__inner--circle {
        width: 25px;
        height: 25px;
        border: 1px solid #fff;
    }
}

/*--------------------------------------------------*/
/*-MAIN--------------------------------------------*/
/*--------------------------------------------------*/
main {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: none;
}
.content-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
}

.content-container {
    height: var(--height-desktop);
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.height-container {
    height: calc(var(--height-desktop) - 60px);
    margin: 60px 0 0 0;
    position: relative;
}

.scroll-container {
    max-width: 100%;
    max-height: var(--height-desktop);
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 40px;
    justify-content: center !important;
}

@media(max-width: 768px) {
    .content-container {
        height: var(--height-mobile);
        min-height: var(--height-mobile);
        max-height: var(--height-mobile);
    }
    .height-container {
        height: calc(var(--height-mobile) - 60px);
    }
    .scroll-container {
        max-height: var(--height-mobile);
    }
}
/*--------------------------------------------------*/
/*-GRID---------------------------------------------*/
/*--------------------------------------------------*/
.magic-square {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    font-family: Ancient;
    width: 80vw;
    max-width: 780px;
    max-height: 90vh;
}

.magic-square > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    height: 22vh;    
}


/*--------------------------------------------------*/
/*-TITLE--------------------------------------------*/
/*--------------------------------------------------*/

.title {
    position: relative;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    max-width: 80vw;
}
/* Google chrome */
@-webkit-keyframes svg-text-anim {
    40% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    60% {
        stroke-dashoffset: 0;
        fill: #ff8040;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #ff8040;
    }
}
/* Most browsers */
@keyframes svg-text-anim {
    40% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    60% {
        stroke-dashoffset: 0;
        fill: #ff8040;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #ff8040;
    }
}
/*--------------------------------------------------*/
/*-BUTTON-------------------------------------------*/
/*--------------------------------------------------*/
.btn-panel{
    height: 10vh;
    display: flex;
    justify-content: center;
}
.btn {
    width: 210px;
    height: 60px;
    border: 1px solid #333;
    font-family: Ancient, serif;
    font-size: 1.4em;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    transition: 1s;
    color: #333;
    cursor: none;
}

    .btn::before, .btn::after {
        position: absolute;
        background: #fff;
        z-index: -1;
        transition: 1s;
        content: '';
    }

    .btn::before {
        height: 60px;
        width: 190px;
    }

    .btn::after {
        width: 140px;
        height: 40px;
    }

@media(max-width: 1024px){
    .btn-panel {
        height: 15vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 5vh;
    }
    .btn{
        width: 120px;
        height: 60px;
    }
    .btn::before{
        width: 80px;
        height: 60px;
    }
    .btn::after{
        width: 100px;
        height: 40px;
    }
}

@media(max-width: 768px) {
    .btn-panel {
        height: 30vh;
        align-content: start;
    }

    .btn {
        width: 60px;
        height: 60px;
    }

        .btn::before {
            width: 40px;
            height: 40px;
        }

        .btn::after {
            width: 60px;
            height: 40px;
        }
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn:hover::before {
    width: 0px;
    background: #fff;
}

.btn:hover::after {
    height: 0px;
    background: #fff;
}

.btn:hover {
    background: #fff;
}

/*--------------------------------------------------*/
/*-PAINT--------------------------------------------*/
/*--------------------------------------------------*/
#wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.3;
}

.ball {
    pointer-events: none;
    position: absolute;
    border-radius: 50%;
    -webkit-animation: implode 10s ease-in-out;
    animation: implode 10s ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes implode {
    0% {
        transform: scale(0);
    }

    5%, 30% {
        transform: scale(1);
    }

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

@keyframes implode {
    0% {
        transform: scale(0);
    }

    5%, 30% {
        transform: scale(1);
    }

    100% {
        transform: 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);
    }
}

/*--------------------------------------------------*/
/*-LETTER-------------------------------------------*/
/*--------------------------------------------------*/
.letter {
    flex-direction: column;
    font-family: Ancient;
    justify-content: center; 
    padding-left: 20px;
    padding-right: 20px;
}
.letter-content {
    line-height: 2em;
    margin: 30px 0;
}
    .letter-content > p > span::selection {
        background: #EFEFEF;
        color: red;
    }
.letter-head{

}
.letter-foot{
    
}
.letter-foot > p{
    margin-bottom: 30px;
}

#svgwrapper {
    display: inline-block;
    width: 300px;
    height: 150px;
    stroke: #000;
    fill: none;
    position: relative;
}

.logo-path {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
}

.logo-path {
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
}

.underline {
    stroke-width: 20;
    animation: letter-animation 5s linear forwards;
    animation-delay: 5.1s;
}

.i-2 { /* Mar(i)na */
    stroke-width: 12;
    animation: letter-animation 15s linear forwards;
    animation-delay: 4.8s;
}

.aa-2 { /* Marin(a) */
    stroke-width: 30;
    animation: letter-animation 10s linear forwards;
    animation-delay: 4.25s;
}

.aa-1 { /* Marin(a) */
    stroke-width: 10;
    animation: letter-animation 8s linear forwards;
    animation-delay: 4s;
}

.n-2 { /* Mari(n)a */
    stroke-width: 15;
    animation: letter-animation 10s linear forwards;
    animation-delay: 3.5s;
}

.n-1 { /* Mari(n)a */
    stroke-width: 10;
    animation: letter-animation 8s linear forwards;
    animation-delay: 3.3s;
}

.i-1 { /* Mar(i)na */
    stroke-width: 9;
    animation: letter-animation 8s linear forwards;
    animation-delay: 3s;
}

.r-2 { /* Ma(r)ina */
    stroke-width: 12;
    animation: letter-animation 8s linear forwards;
    animation-delay: 2.7s;
}

.r-1 { /* Ma(r)ina */
    stroke-width: 9;
    animation: letter-animation 8s linear forwards;
    animation-delay: 2.45s;
}

.a-2 { /* M(a)rina */
    stroke-width: 8;
    animation: letter-animation 8s linear forwards;
    animation-delay: 2.25s;
}

.a-1 { /* M(a)rina */
    stroke-width: 10;
    animation: letter-animation 8s linear forwards;
    animation-delay: 2s;
}

.M-3 { /* (M)arina */
    stroke-width: 20;
    animation: letter-animation 5s linear forwards;
    animation-delay: 1.53s;
}

.M-2 { /* (M)arina */
    stroke-width: 20;
    animation: letter-animation 5s linear forwards;
    animation-delay: 1.05s;
}

.M-1 { /* (M)arina */
    stroke-width: 18;
    animation: letter-animation 5s linear forwards;
}

@keyframes letter-animation {
    0% {
        stroke-dashoffset: 2600;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


/*--------------------------------------------------*/
/*-MAP----------------------------------------------*/
/*--------------------------------------------------*/
#map-wrapper {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
    height: 80vh;
}
#demo {    
    position: absolute;
    width: 100vw;
    left: 0;
    height: 80vh;
}
    #demo  image {
        
    }
#instructions {
    display: none;
}
#dial {
    position: absolute;
    top: 0;
    left: 50%;
}
.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);
    }
}
/*--------------------------------------------------*/
/*-MAP TOWN-----------------------------------------*/
/*--------------------------------------------------*/
.map-town {
    position: relative;
    height: calc(80vh - 40px);
    display: inline-flex;
    justify-content: center;
    text-align: center;
    margin-top: 40px;
    overflow: hidden;
    max-height: 60vw;
}
    .map-town ol {
        position: absolute;
        font-size: 1.5vh;
        text-align: left;
        bottom: 2vh;
        right: 2vh;
        z-index: 11;
        font-family: Ancient;
        padding: 20px 30px;
        border: solid 1px #333;
        background: #FFF;
    }
        .map-town ol li a {
            color: #ff8040;
        }
.map-town > header {
    position: absolute;
    height: calc(80vh - 40px);
    width: 100%;
}
@media(max-width: 980px) {
    .map-town > header {
        min-width: 80vw;
    }

    .map-town ol {
        display: none;
    }
}
.map-town .placeholder {
    height: 100%;
    opacity: 0;
}
.map-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80vw;
}
    .map-layer.l-red {
        z-index: 9;
    }
    .map-layer.l-yellow {
        z-index: 8;
    }
    .map-layer.l-blue {
        z-index: 7;
    }
    .map-layer.l-green {
        z-index: 6;        
    }
    .map-layer.l-white {
        z-index: 5;        
    }

/*--------------------------------------------------*/
/*-PULSE--------------------------------------------*/
/*--------------------------------------------------*/
.pulse .fa-solid {
    font-size: 15px;
    position: absolute;
    padding: 7px;
}

.pulse {
    width: 1rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.5s ease;
    border: solid 1px #000;

}

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

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

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

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

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


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


.puzzle-grid {
    display: grid;    
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 80vw;
    height: 40vh;
    max-height: 40vh;
    position: relative;
    z-index: 10;
    margin-top: 10px;
}

.puzzle-key {
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 50vw;
    height: 30px;
    position: relative;
    z-index: 10;
}

.puzzle-grid > div, .puzzle-key > div {
    border: solid 2px white;
}


.frame-border {
    position: relative;
    -moz-box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
    -webkit-box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
    box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
    border: 11px solid #ededed;
    width: 100%;
    height: 100%;
    min-height: 30vh;
    margin: 0 auto;
    padding: 20px !important;
}

.frame-inset:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    -moz-box-shadow: inset 10px 0 12px rgba(0,0,0,0.35);
    -webkit-box-shadow: inset 10px 0 12px rgba(0,0,0,0.35);
    box-shadow: inset 10px 0 12px rgba(0,0,0,0.35);
}

.frame-inset {
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    background-color: #DCE1E3;
    border: 32px solid #f5f5f5;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    padding:  49px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Ancient;
}

/*---------------------------HOVER CARDS-------------------------*/
.hover-card {
    margin: 1em;
    font-family: Ancient;
}

.hover-card-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.front,
.back {
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
    background-position: center;
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;
    min-height: 320px;
    height: auto;
    color: #fff;
    font-size: 1.5rem;
}

@media(max-width: 768px) {
    .front,
    .back{
        min-height: 140px;
    }
}

.back {
    
}

.front:after, .back:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hover-card-container.hover .front,
.hover-card-container.hover .back {
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

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

.inner {
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
    transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0.5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
}

.hover-card-container.hover .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.hover-card-container.hover .front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.hover-card-container .back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.hover-card-container .front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.front .inner p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    font-family: Ancient;
}

    .front .inner p:after {
        content: '';
        width: 4rem;
        height: 2px;
        position: absolute;
        background: #C6D4DF;
        display: block;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: -.75rem;
    }

.front .inner span {
    color: rgba(255,255,255,0.7);
    font-family: Ancient;
    font-weight: 300;
}

@media screen and (max-width: 64rem) {
    .hover-card {
        width: calc(33.333333% - 2rem);
    }
}

@media screen and (max-width: 48rem) {
    .hover-card {
        width: calc(50% - 2rem);
    }
}

@media screen and (max-width: 32rem) {
    .hover-card {
        width: 100%;
        margin: 0 0 2rem 0;
    }
}

/*-------------------------------------------*/
/*-----------------PLAY----------------------*/
/*-------------------------------------------*/
.play-button {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
}

.button-content {
    background: #ff8040;
    border-radius: 50%;
    box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.051), 0 2.3px 5.3px rgba(0, 0, 0, 0.059), 0 4.4px 10px rgba(0, 0, 0, 0.06), 0 7.8px 17.9px rgba(0, 0, 0, 0.059), 0 14.6px 33.4px rgba(0, 0, 0, 0.059), 0 35px 80px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    height: 100px;
    position: absolute;
    width: 100px;
}

.play-button:active .button-content {
    background: #ff4040;
}

.button-icon {
    height: 200px;
    transform: rotate(-120deg);
    transition: transform 500ms;
    width: 200px;
}

.button-part {
    background: white;
    height: 200px;
    position: absolute;
    width: 200px;
}

.button-part-play {
    clip-path: polygon( 43.77666% 55.85251%, 43.77874% 55.46331%, 43.7795% 55.09177%, 43.77934% 54.74844%, 43.77855% 54.44389%, 43.77741% 54.18863%, 43.77625% 53.99325%, 43.77533% 53.86828%, 43.77495% 53.82429%, 43.77518% 53.55329%, 43.7754% 53.2823%, 43.77563% 53.01131%, 43.77585% 52.74031%, 43.77608% 52.46932%, 43.7763% 52.19832%, 43.77653% 51.92733%, 43.77675% 51.65633%, 43.77653% 51.38533%, 43.7763% 51.11434%, 43.77608% 50.84334%, 43.77585% 50.57235%, 43.77563% 50.30136%, 43.7754% 50.03036%, 43.77518% 49.75936%, 43.77495% 49.48837%, 44.48391% 49.4885%, 45.19287% 49.48865%, 45.90183% 49.48878%, 46.61079% 49.48892%, 47.31975% 49.48906%, 48.0287% 49.4892%, 48.73766% 49.48934%, 49.44662% 49.48948%, 50.72252% 49.48934%, 51.99842% 49.4892%, 53.27432% 49.48906%, 54.55022% 49.48892%, 55.82611% 49.48878%, 57.10201% 49.48865%, 58.3779% 49.4885%, 59.6538% 49.48837%, 59.57598% 49.89151%, 59.31883% 50.28598%, 58.84686% 50.70884%, 58.12456% 51.19714%, 57.11643% 51.78793%, 55.78697% 52.51828%, 54.10066% 53.42522%, 52.02202% 54.54581%, 49.96525% 55.66916%, 48.3319% 56.57212%, 47.06745% 57.27347%, 46.11739% 57.79191%, 45.42719% 58.14619%, 44.94235% 58.35507%, 44.60834% 58.43725%, 44.37066% 58.41149%, 44.15383% 58.27711%, 43.99617% 58.0603%, 43.88847% 57.77578%, 43.82151% 57.43825%, 43.78608% 57.06245%, 43.77304% 56.66309%, 43.773% 56.25486% );
    transition: clip-path 500ms;
}

.button-part-pause {
    clip-path: polygon( 43.77666% 43.83035%, 43.77874% 44.21955%, 43.7795% 44.59109%, 43.77934% 44.93442%, 43.77855% 45.23898%, 43.77741% 45.49423%, 43.77625% 45.68961%, 43.77533% 45.81458%, 43.77495% 45.85858%, 43.77518% 46.12957%, 43.7754% 46.40056%, 43.77563% 46.67156%, 43.77585% 46.94255%, 43.77608% 47.21355%, 43.7763% 47.48454%, 43.77653% 47.75554%, 43.77675% 48.02654%, 43.77653% 48.29753%, 43.7763% 48.56852%, 43.77608% 48.83952%, 43.77585% 49.11051%, 43.77563% 49.38151%, 43.7754% 49.65251%, 43.77518% 49.9235%, 43.77495% 50.1945%, 44.48391% 50.19436%, 45.19287% 50.19422%, 45.90183% 50.19408%, 46.61079% 50.19394%, 47.31975% 50.1938%, 48.0287% 50.19366%, 48.73766% 50.19353%, 49.44662% 50.19338%, 50.72252% 50.19353%, 51.99842% 50.19366%, 53.27432% 50.1938%, 54.55022% 50.19394%, 55.82611% 50.19408%, 57.10201% 50.19422%, 58.3779% 50.19436%, 59.6538% 50.1945%, 59.57598% 49.79136%, 59.31883% 49.39688%, 58.84686% 48.97402%, 58.12456% 48.48572%, 57.11643% 47.89493%, 55.78697% 47.16458%, 54.10066% 46.25764%, 52.02202% 45.13705%, 49.96525% 44.01371%, 48.3319% 43.11074%, 47.06745% 42.4094%, 46.11739% 41.89096%, 45.42719% 41.53667%, 44.94235% 41.3278%, 44.60834% 41.24561%, 44.37066% 41.27137%, 44.15383% 41.40575%, 43.99617% 41.62256%, 43.88847% 41.90709%, 43.82151% 42.24461%, 43.78608% 42.62041%, 43.77304% 43.01978%, 43.773% 43.428% );
    transition: clip-path 500ms;
}

.button-end {
    border-radius: 50%;
    cursor: pointer;
    height: 100px;
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    width: 100px;
}

.active .button-icon {
    transform: rotate(-90deg);
}

.active .button-part-play {
    clip-path: polygon( 56.42249% 57.01763%, 54.93283% 57.0175%, 53.00511% 57.01738%, 50.83554% 57.01727%, 48.62036% 57.01718%, 46.55585% 57.01709%, 44.83822% 57.01702%, 43.66373% 57.01698%, 43.22863% 57.01696%, 42.86372% 57.01904%, 42.56988% 57.01621%, 42.3402% 56.99486%, 42.16778% 56.94152%, 42.0457% 56.84267%, 41.96705% 56.68478%, 41.92493% 56.45432%, 41.91246% 56.13777%, 41.91258% 55.76282%, 41.9129% 55.37058%, 41.91335% 54.96757%, 41.91387% 54.56032%, 41.91439% 54.15537%, 41.91485% 53.75926%, 41.91517% 53.3785%, 41.91529% 53.01965%, 41.94275% 52.72355%, 42.02117% 52.51653%, 42.14465% 52.38328%, 42.30727% 52.30854%, 42.50308% 52.27699%, 42.72619% 52.27341%, 42.97065% 52.28248%, 43.23056% 52.2889%, 43.94949% 52.28896%, 45.45083% 52.28912%, 47.47445% 52.28932%, 49.76027% 52.28957%, 52.04818% 52.28981%, 54.07805% 52.29003%, 55.5898% 52.29019%, 56.32332% 52.29024%, 56.58221% 52.28816%, 56.83726% 52.28948%, 57.07897% 52.30593%, 57.29794% 52.34898%, 57.48468% 52.43029%, 57.62978% 52.56146%, 57.72375% 52.7541%, 57.75718% 53.01981%, 57.75713% 53.37763%, 57.75699% 53.81831%, 57.75679% 54.31106%, 57.75657% 54.82507%, 57.75635% 55.32958%, 57.75615% 55.79377%, 57.75601% 56.18684%, 57.75596% 56.47801%, 57.7549% 56.50122%, 57.74034% 56.5624%, 57.6955% 56.64887%, 57.60334% 56.748%, 57.44691% 56.84712%, 57.20925% 56.93358%, 56.87342% 56.99471% );
}

.active .button-part-pause {
    clip-path: polygon( 56.42249% 42.44625%, 54.93283% 42.44637%, 53.00511% 42.44649%, 50.83554% 42.4466%, 48.62036% 42.4467%, 46.55585% 42.44679%, 44.83822% 42.44685%, 43.66373% 42.4469%, 43.22863% 42.44691%, 42.86372% 42.44483%, 42.56988% 42.44767%, 42.3402% 42.46902%, 42.16778% 42.52235%, 42.0457% 42.6212%, 41.96705% 42.77909%, 41.92493% 43.00956%, 41.91246% 43.32611%, 41.91258% 43.70105%, 41.9129% 44.0933%, 41.91335% 44.49631%, 41.91387% 44.90355%, 41.91439% 45.3085%, 41.91485% 45.70462%, 41.91517% 46.08537%, 41.91529% 46.44422%, 41.94275% 46.74032%, 42.02117% 46.94735%, 42.14465% 47.0806%, 42.30727% 47.15534%, 42.50308% 47.18688%, 42.72619% 47.19047%, 42.97065% 47.1814%, 43.23056% 47.17497%, 43.94949% 47.17491%, 45.45083% 47.17476%, 47.47445% 47.17455%, 49.76027% 47.1743%, 52.04818% 47.17406%, 54.07805% 47.17384%, 55.5898% 47.17369%, 56.32332% 47.17363%, 56.58221% 47.17571%, 56.83726% 47.17439%, 57.07897% 47.15795%, 57.29794% 47.1149%, 57.48468% 47.03359%, 57.62978% 46.90242%, 57.72375% 46.70977%, 57.75718% 46.44406%, 57.75713% 46.08625%, 57.75699% 45.64557%, 57.75679% 45.15282%, 57.75657% 44.6388%, 57.75635% 44.1343%, 57.75615% 43.6701%, 57.75601% 43.27703%, 57.75596% 42.98586%, 57.7549% 42.96265%, 57.74034% 42.90148%, 57.6955% 42.815%, 57.60334% 42.71587%, 57.44691% 42.61675%, 57.20925% 42.53029%, 56.87342% 42.46916% );
}




/*----------------------*/

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

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