/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 1000 version
*/
  
*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

:root {
    /* --card-height: 88px; */
    /* --card-width: 56px; */
    --card-height: 85px;
    --card-width: 55px;
    --card-height-default: 85px;
    --card-width-default: 55px;

    --dot-size: 1rem;
    --animation-duration: 2s;

    --index-background: white;
    /* --light-green: #c0ff00; */
    --light-green: #8cff00;
    --light-green-with-opacity: #8cff00b0;
    --light-green-with-more-opacity: #8cff003b;

    --light-green-opposite: #82A3FF;

    --black-with-opacity: #000000c4;
    --black-with-more-opacity: #0000005c;
    --white-with-opacity: #ffffffb0;

    --purple: rgb(176, 38, 255)
}

@-webkit-keyframes wiggle {
    0%,100% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(20deg);
                transform: rotate(20deg);
    }
}
@-moz-keyframes wiggle {
    0%,100% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }

    50% {
        -moz-transform: rotate(20deg);
             transform: rotate(20deg);
    }
}
@-o-keyframes wiggle {
    0%,100% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }

    50% {
        -o-transform: rotate(20deg);
           transform: rotate(20deg);
    }
}
@keyframes wiggle {
    0%,100% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(20deg);
           -moz-transform: rotate(20deg);
             -o-transform: rotate(20deg);
                transform: rotate(20deg);
    }
}

@-webkit-keyframes remove-lock {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        top: 10px;
    }
    5% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    10% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    15% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    20% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    30% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    35% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    40% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    45% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    55% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    60% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    65% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    70% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    80% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    85% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    90% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    95% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
        height: auto;
    }
    100% {
        top: 60px;
        height: 0;
    }
} 
@-moz-keyframes remove-lock {
    0% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
        top: 10px;
    }
    5% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    10% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    15% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    20% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    25% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    30% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    35% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    40% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    45% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    50% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    55% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    60% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    65% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    70% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    75% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    80% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    85% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
    }
    90% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    95% {
        -moz-transform: rotate(10deg);
             transform: rotate(10deg);
        height: auto;
    }
    100% {
        top: 60px;
        height: 0;
    }
} 
@-o-keyframes remove-lock {
    0% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
        top: 10px;
    }
    5% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    10% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    15% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    20% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    25% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    30% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    35% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    40% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    45% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    50% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    55% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    60% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    65% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    70% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    75% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    80% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    85% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
    }
    90% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    95% {
        -o-transform: rotate(10deg);
           transform: rotate(10deg);
        height: auto;
    }
    100% {
        top: 60px;
        height: 0;
    }
} 
@keyframes remove-lock {
    0% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
        top: 10px;
    }
    5% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    10% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    15% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    20% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    30% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    35% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    40% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    45% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    55% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    60% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    65% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    70% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    80% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    85% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    90% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    95% {
        -webkit-transform: rotate(10deg);
           -moz-transform: rotate(10deg);
             -o-transform: rotate(10deg);
                transform: rotate(10deg);
        height: auto;
    }
    100% {
        top: 60px;
        height: 0;
    }
}

@keyframes sf-fly-by-1 {
    from {
        transform: translateZ(-600px);
        opacity: 0.5;
        -webkit-transform: translateZ(-600px);
        -moz-transform: translateZ(-600px);
        -ms-transform: translateZ(-600px);
        -o-transform: translateZ(-600px);
    }
    to {
        transform: translateZ(0);
        opacity: 0.5;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
    }
}
@-webkit-keyframes sf-fly-by-1 {
    from {
        transform: translateZ(-600px);
        opacity: 0.5;
        -webkit-transform: translateZ(-600px);
        -moz-transform: translateZ(-600px);
        -ms-transform: translateZ(-600px);
        -o-transform: translateZ(-600px);
    }
    to {
        transform: translateZ(0);
        opacity: 0.5;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
    }
}
@-moz-keyframes sf-fly-by-1 {
    from {
        transform: translateZ(-600px);
        opacity: 0.5;
        -webkit-transform: translateZ(-600px);
        -moz-transform: translateZ(-600px);
        -ms-transform: translateZ(-600px);
        -o-transform: translateZ(-600px);
    }
    to {
        transform: translateZ(0);
        opacity: 0.5;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
    }
}
@-o-keyframes sf-fly-by-1 {
    from {
        transform: translateZ(-600px);
        opacity: 0.5;
        -webkit-transform: translateZ(-600px);
        -moz-transform: translateZ(-600px);
        -ms-transform: translateZ(-600px);
        -o-transform: translateZ(-600px);
    }
    to {
        transform: translateZ(0);
        opacity: 0.5;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
    }
}

@keyframes sf-fly-by-2 {
    from {
        transform: translateZ(-1200px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1200px);
        -moz-transform: translateZ(-1200px);
        -ms-transform: translateZ(-1200px);
        -o-transform: translateZ(-1200px);
}
    to {
        transform: translateZ(-600px);
        opacity: 0.5;
        -webkit-transform: translateZ(-600px);
        -moz-transform: translateZ(-600px);
        -ms-transform: translateZ(-600px);
        -o-transform: translateZ(-600px);
}
}
@-webkit-keyframes sf-fly-by-2 {
    from {
        transform: translateZ(-1200px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1200px);
        -moz-transform: translateZ(-1200px);
        -ms-transform: translateZ(-1200px);
        -o-transform: translateZ(-1200px);
    }
    to {
        transform: translateZ(-600px);
        opacity: 0.5;
        -webkit-transform: translateZ(-600px);
        -moz-transform: translateZ(-600px);
        -ms-transform: translateZ(-600px);
        -o-transform: translateZ(-600px);
    }
}
@-moz-keyframes sf-fly-by-2 {
    from {
        transform: translateZ(-1200px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1200px);
        -moz-transform: translateZ(-1200px);
        -ms-transform: translateZ(-1200px);
        -o-transform: translateZ(-1200px);
    }
    to {
        transform: translateZ(-600px);
        opacity: 0.5;
        -webkit-transform: translateZ(-600px);
        -moz-transform: translateZ(-600px);
        -ms-transform: translateZ(-600px);
        -o-transform: translateZ(-600px);
    }
}
@-o-keyframes sf-fly-by-2 {
    from {
        transform: translateZ(-1200px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1200px);
        -moz-transform: translateZ(-1200px);
        -ms-transform: translateZ(-1200px);
        -o-transform: translateZ(-1200px);
    }
    to {
        transform: translateZ(-600px);
        opacity: 0.5;
        -webkit-transform: translateZ(-600px);
        -moz-transform: translateZ(-600px);
        -ms-transform: translateZ(-600px);
        -o-transform: translateZ(-600px);
    }
}

@keyframes sf-fly-by-3 {
    from {
        transform: translateZ(-1800px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1800px);
        -moz-transform: translateZ(-1800px);
        -ms-transform: translateZ(-1800px);
        -o-transform: translateZ(-1800px);
    }
    to {
        transform: translateZ(-1200px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1200px);
        -moz-transform: translateZ(-1200px);
        -ms-transform: translateZ(-1200px);
        -o-transform: translateZ(-1200px);
    }
}
@-webkit-keyframes sf-fly-by-3 {
    from {
        transform: translateZ(-1800px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1800px);
        -moz-transform: translateZ(-1800px);
        -ms-transform: translateZ(-1800px);
        -o-transform: translateZ(-1800px);
    }
    to {
        transform: translateZ(-1200px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1200px);
        -moz-transform: translateZ(-1200px);
        -ms-transform: translateZ(-1200px);
        -o-transform: translateZ(-1200px);
    }
}
@-moz-keyframes sf-fly-by-3 {
    from {
        transform: translateZ(-1800px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1800px);
        -moz-transform: translateZ(-1800px);
        -ms-transform: translateZ(-1800px);
        -o-transform: translateZ(-1800px);
    }
    to {
        transform: translateZ(-1200px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1200px);
        -moz-transform: translateZ(-1200px);
        -ms-transform: translateZ(-1200px);
        -o-transform: translateZ(-1200px);
    }
}
@-o-keyframes sf-fly-by-3 {
    from {
        transform: translateZ(-1800px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1800px);
        -moz-transform: translateZ(-1800px);
        -ms-transform: translateZ(-1800px);
        -o-transform: translateZ(-1800px);
    }
    to {
        transform: translateZ(-1200px);
        opacity: 0.5;
        -webkit-transform: translateZ(-1200px);
        -moz-transform: translateZ(-1200px);
        -ms-transform: translateZ(-1200px);
        -o-transform: translateZ(-1200px);
    }
}

@-webkit-keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}
@-moz-keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}
@-o-keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}
@keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}

@-webkit-keyframes fadeinout {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@-moz-keyframes fadeinout {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@-o-keyframes fadeinout {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@keyframes fadeinout {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 0.99;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeout {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 0.99;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeout {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 0.99;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 0.99;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes rushUp {
    0% {
        bottom: -webkit-calc(-5 * var(--card-height));
        bottom: calc(-5 * var(--card-height));
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        bottom: 0;
        -webkit-transform: rotate(350deg);
                transform: rotate(350deg);
    }
}

@-moz-keyframes rushUp {
    0% {
        bottom: -moz-calc(-5 * var(--card-height));
        bottom: calc(-5 * var(--card-height));
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -moz-transform: rotate(350deg);
             transform: rotate(350deg);
    }
}

@-o-keyframes rushUp {
    0% {
        bottom: calc(-5 * var(--card-height));
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -o-transform: rotate(350deg);
           transform: rotate(350deg);
    }
}

@keyframes rushUp {
    0% {
        bottom: -webkit-calc(-5 * var(--card-height));
        bottom: -moz-calc(-5 * var(--card-height));
        bottom: calc(-5 * var(--card-height));
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(350deg);
           -moz-transform: rotate(350deg);
             -o-transform: rotate(350deg);
                transform: rotate(350deg);
    }
}

@-webkit-keyframes makeItRain {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        -webkit-transform: translateY(600px);
    }
}

@-moz-keyframes makeItRain {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        -webkit-transform: translateY(600px);
    }
}

@-o-keyframes makeItRain {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        -webkit-transform: translateY(600px);
    }
}

@keyframes makeItRain {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        -webkit-transform: translateY(600px);
    }
}

@-moz-keyframes confetti-winner-text {
    1% {
        opacity: 1;
    }

    24% {
        opacity: 0;
        -moz-transform: scale(0.9);
             transform: scale(0.9);
    }

    33% {
        opacity: 4;
        -moz-transform: rotate(5deg);
             transform: rotate(5deg);
    }

    54% {
        opacity: 0;
        -moz-transform: scale (0.7);
             transform: scale (0.7);
    }

    70% {
        opacity: 4;
        -moz-transform: rotate(-5deg);
             transform: rotate(-5deg);
    }
}

@-o-keyframes confetti-winner-text {
    1% {
        opacity: 1;
    }

    24% {
        opacity: 0;
        -o-transform: scale(0.9);
           transform: scale(0.9);
    }

    33% {
        opacity: 4;
        -o-transform: rotate(5deg);
           transform: rotate(5deg);
    }

    54% {
        opacity: 0;
        -o-transform: scale (0.7);
           transform: scale (0.7);
    }

    70% {
        opacity: 4;
        -o-transform: rotate(-5deg);
           transform: rotate(-5deg);
    }
}

@keyframes confetti-winner-text {
    1% {
        opacity: 1;
    }

    24% {
        opacity: 0;
        -webkit-transform: scale(0.9);
           -moz-transform: scale(0.9);
             -o-transform: scale(0.9);
                transform: scale(0.9);
    }

    33% {
        opacity: 4;
        -webkit-transform: rotate(5deg);
           -moz-transform: rotate(5deg);
             -o-transform: rotate(5deg);
                transform: rotate(5deg);
    }

    54% {
        opacity: 0;
        -webkit-transform: scale (0.7);
           -moz-transform: scale (0.7);
             -o-transform: scale (0.7);
                transform: scale (0.7);
    }

    70% {
        opacity: 4;
        -webkit-transform: rotate(-5deg);
           -moz-transform: rotate(-5deg);
             -o-transform: rotate(-5deg);
                transform: rotate(-5deg);
    }
}

@-webkit-keyframes confetti-winner-text {
    1% {
        opacity: 1;
    }

    24% {
        opacity: 0;
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
    }

    33% {
        opacity: 4;
        -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
    }

    54% {
        opacity: 0;
        -webkit-transform: scale (0.7);
                transform: scale (0.7);
    }

    70% {
        opacity: 4;
        -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
    }
}

@-moz-keyframes game-over-text {
    0% {
        opacity: 0;
        -moz-transform: scale(0);
             transform: scale(0);
    }

    50% {
        opacity: 1;
        -moz-transform: scale(1);
             transform: scale(1);
    }

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

@-o-keyframes game-over-text {
    0% {
        opacity: 0;
        -o-transform: scale(0);
           transform: scale(0);
    }

    50% {
        opacity: 1;
        -o-transform: scale(1);
           transform: scale(1);
    }

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

@keyframes game-over-text {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
           -moz-transform: scale(0);
             -o-transform: scale(0);
                transform: scale(0);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0);
           -moz-transform: scale(0);
             -o-transform: scale(0);
                transform: scale(0);
    }
}

@-webkit-keyframes game-over-text {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
                transform: scale(0);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
    }

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

@-moz-keyframes click-somewhere-text {
    0%, 100% {
        opacity: 0.75;
        -webkit-transform: scale(0.5);
           -moz-transform: scale(0.5);
             -o-transform: scale(0.5);
                transform: scale(0.5);
    }

    50% {
        opacity: 1;
        -moz-transform: scale(1);
             transform: scale(1);
    }
}

@-o-keyframes click-somewhere-text {
    0%, 100% {
        opacity: 0.75;
        -webkit-transform: scale(0.5);
           -moz-transform: scale(0.5);
             -o-transform: scale(0.5);
                transform: scale(0.5);
    }

    50% {
        opacity: 1;
        -o-transform: scale(1);
           transform: scale(1);
    }
}

@keyframes click-somewhere-text {
    0%, 100% {
        opacity: 0.75;
        -webkit-transform: scale(0.5);
           -moz-transform: scale(0.5);
             -o-transform: scale(0.5);
                transform: scale(0.5);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }
}

@-webkit-keyframes click-somewhere-text {
    0%, 100% {
        opacity: 0.75;
        -webkit-transform: scale(0.5);
           -moz-transform: scale(0.5);
             -o-transform: scale(0.5);
                transform: scale(0.5);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@-moz-keyframes game-menu-btn-tilt {
    0% {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg)
    }
    100% {
        -moz-transform: rotate(359deg);
             transform: rotate(359deg)
    }
}

@-o-keyframes game-menu-btn-tilt {
    0% {
        -o-transform: rotate(360deg);
           transform: rotate(360deg)
    }
    100% {
        -o-transform: rotate(359deg);
           transform: rotate(359deg)
    }
}

@keyframes game-menu-btn-tilt {
    0% {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
           -moz-transform: rotate(359deg);
             -o-transform: rotate(359deg);
                transform: rotate(359deg)
    }
}

@-webkit-keyframes game-menu-btn-tilt {
    0% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
                transform: rotate(359deg)
    }
}

@-webkit-keyframes cards-fly-in1 {
    0% {
        transform: translate(calc(var(--card-width) * 3.2), -110px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.2), -110px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.2), -110px);
        -ms-transform: translate(calc(var(--card-width) * 3.2), -110px);
        -o-transform: translate(calc(var(--card-width) * 3.2), -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
}
}

@-moz-keyframes cards-fly-in1 {
    0% {
        transform: translate(calc(var(--card-width) * 3.2), -110px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.2), -110px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.2), -110px);
        -ms-transform: translate(calc(var(--card-width) * 3.2), -110px);
        -o-transform: translate(calc(var(--card-width) * 3.2), -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
}
}

@-o-keyframes cards-fly-in1 {
    0% {
        transform: translate(calc(var(--card-width) * 3.2), -110px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.2), -110px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.2), -110px);
        -ms-transform: translate(calc(var(--card-width) * 3.2), -110px);
        -o-transform: translate(calc(var(--card-width) * 3.2), -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
}
}

@keyframes cards-fly-in1 {
    0% {
        transform: translate(calc(var(--card-width) * 3.2), -110px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.2), -110px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.2), -110px);
        -ms-transform: translate(calc(var(--card-width) * 3.2), -110px);
        -o-transform: translate(calc(var(--card-width) * 3.2), -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
}
}
@-webkit-keyframes cards-fly-in2 {
    0% {
        transform: translate(0, -110px);
        -webkit-transform: translate(0, -110px);
        -moz-transform: translate(0, -110px);
        -ms-transform: translate(0, -110px);
        -o-transform: translate(0, -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in2 {
    0% {
        transform: translate(0, -110px);
        -webkit-transform: translate(0, -110px);
        -moz-transform: translate(0, -110px);
        -ms-transform: translate(0, -110px);
        -o-transform: translate(0, -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in2 {
    0% {
        transform: translate(0, -110px);
        -webkit-transform: translate(0, -110px);
        -moz-transform: translate(0, -110px);
        -ms-transform: translate(0, -110px);
        -o-transform: translate(0, -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in2 {
    0% {
        transform: translate(0, -110px);
        -webkit-transform: translate(0, -110px);
        -moz-transform: translate(0, -110px);
        -ms-transform: translate(0, -110px);
        -o-transform: translate(0, -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in3 {
    0% {
        transform: translate(calc(var(--card-width) * -3.2), -110px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.2), -110px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.2), -110px);
        -ms-transform: translate(calc(var(--card-width) * -3.2), -110px);
        -o-transform: translate(calc(var(--card-width) * -3.2), -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in3 {
    0% {
        transform: translate(calc(var(--card-width) * -3.2), -110px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.2), -110px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.2), -110px);
        -ms-transform: translate(calc(var(--card-width) * -3.2), -110px);
        -o-transform: translate(calc(var(--card-width) * -3.2), -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in3 {
    0% {
        transform: translate(calc(var(--card-width) * -3.2), -110px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.2), -110px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.2), -110px);
        -ms-transform: translate(calc(var(--card-width) * -3.2), -110px);
        -o-transform: translate(calc(var(--card-width) * -3.2), -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in3 {
    0% {
        transform: translate(calc(var(--card-width) * -3.2), -110px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.2), -110px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.2), -110px);
        -ms-transform: translate(calc(var(--card-width) * -3.2), -110px);
        -o-transform: translate(calc(var(--card-width) * -3.2), -110px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in4 {
    0% {
        transform: translate(calc(var(--card-width) * 3.73), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.73), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.73), -160px);
        -ms-transform: translate(calc(var(--card-width) * 3.73), -160px);
        -o-transform: translate(calc(var(--card-width) * 3.73), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in4 {
    0% {
        transform: translate(calc(var(--card-width) * 3.73), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.73), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.73), -160px);
        -ms-transform: translate(calc(var(--card-width) * 3.73), -160px);
        -o-transform: translate(calc(var(--card-width) * 3.73), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in4 {
    0% {
        transform: translate(calc(var(--card-width) * 3.73), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.73), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.73), -160px);
        -ms-transform: translate(calc(var(--card-width) * 3.73), -160px);
        -o-transform: translate(calc(var(--card-width) * 3.73), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in4 {
    0% {
        transform: translate(calc(var(--card-width) * 3.73), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.73), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.73), -160px);
        -ms-transform: translate(calc(var(--card-width) * 3.73), -160px);
        -o-transform: translate(calc(var(--card-width) * 3.73), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in5 {
    0% {
        transform: translate(calc(var(--card-width) * 2.69), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.69), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.69), -160px);
        -ms-transform: translate(calc(var(--card-width) * 2.69), -160px);
        -o-transform: translate(calc(var(--card-width) * 2.69), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in5 {
    0% {
        transform: translate(calc(var(--card-width) * 2.69), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.69), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.69), -160px);
        -ms-transform: translate(calc(var(--card-width) * 2.69), -160px);
        -o-transform: translate(calc(var(--card-width) * 2.69), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in5 {
    0% {
        transform: translate(calc(var(--card-width) * 2.69), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.69), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.69), -160px);
        -ms-transform: translate(calc(var(--card-width) * 2.69), -160px);
        -o-transform: translate(calc(var(--card-width) * 2.69), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in5 {
    0% {
        transform: translate(calc(var(--card-width) * 2.69), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.69), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.69), -160px);
        -ms-transform: translate(calc(var(--card-width) * 2.69), -160px);
        -o-transform: translate(calc(var(--card-width) * 2.69), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in6 {
    0% {
        transform: translate(calc(var(--card-width) * 0.53), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 0.53), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 0.53), -160px);
        -ms-transform: translate(calc(var(--card-width) * 0.53), -160px);
        -o-transform: translate(calc(var(--card-width) * 0.53), -160px);
    }
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in6 {
    0% {
        transform: translate(calc(var(--card-width) * 0.53), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 0.53), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 0.53), -160px);
        -ms-transform: translate(calc(var(--card-width) * 0.53), -160px);
        -o-transform: translate(calc(var(--card-width) * 0.53), -160px);
    }
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in6 {
    0% {
        transform: translate(calc(var(--card-width) * 0.53), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 0.53), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 0.53), -160px);
        -ms-transform: translate(calc(var(--card-width) * 0.53), -160px);
        -o-transform: translate(calc(var(--card-width) * 0.53), -160px);
    }
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in6 {
    0% {
        transform: translate(calc(var(--card-width) * 0.53), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 0.53), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 0.53), -160px);
        -ms-transform: translate(calc(var(--card-width) * 0.53), -160px);
        -o-transform: translate(calc(var(--card-width) * 0.53), -160px);
    }
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in7 {
    0% {
        transform: translate(calc(var(--card-width) * -0.53), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -0.53), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -0.53), -160px);
        -ms-transform: translate(calc(var(--card-width) * -0.53), -160px);
        -o-transform: translate(calc(var(--card-width) * -0.53), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in7 {
    0% {
        transform: translate(calc(var(--card-width) * -0.53), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -0.53), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -0.53), -160px);
        -ms-transform: translate(calc(var(--card-width) * -0.53), -160px);
        -o-transform: translate(calc(var(--card-width) * -0.53), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in7 {
    0% {
        transform: translate(calc(var(--card-width) * -0.53), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -0.53), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -0.53), -160px);
        -ms-transform: translate(calc(var(--card-width) * -0.53), -160px);
        -o-transform: translate(calc(var(--card-width) * -0.53), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in7 {
    0% {
        transform: translate(calc(var(--card-width) * -0.53), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -0.53), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -0.53), -160px);
        -ms-transform: translate(calc(var(--card-width) * -0.53), -160px);
        -o-transform: translate(calc(var(--card-width) * -0.53), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in8 {
    0% {
        transform: translate(calc(var(--card-width) * -2.69), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.69), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.69), -160px);
        -ms-transform: translate(calc(var(--card-width) * -2.69), -160px);
        -o-transform: translate(calc(var(--card-width) * -2.69), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in8 {
    0% {
        transform: translate(calc(var(--card-width) * -2.69), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.69), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.69), -160px);
        -ms-transform: translate(calc(var(--card-width) * -2.69), -160px);
        -o-transform: translate(calc(var(--card-width) * -2.69), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in8 {
    0% {
        transform: translate(calc(var(--card-width) * -2.69), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.69), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.69), -160px);
        -ms-transform: translate(calc(var(--card-width) * -2.69), -160px);
        -o-transform: translate(calc(var(--card-width) * -2.69), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in8 {
    0% {
        transform: translate(calc(var(--card-width) * -2.69), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.69), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.69), -160px);
        -ms-transform: translate(calc(var(--card-width) * -2.69), -160px);
        -o-transform: translate(calc(var(--card-width) * -2.69), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in9 {
    0% {
        transform: translate(calc(var(--card-width) * -3.73), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.73), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.73), -160px);
        -ms-transform: translate(calc(var(--card-width) * -3.73), -160px);
        -o-transform: translate(calc(var(--card-width) * -3.73), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in9 {
    0% {
        transform: translate(calc(var(--card-width) * -3.73), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.73), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.73), -160px);
        -ms-transform: translate(calc(var(--card-width) * -3.73), -160px);
        -o-transform: translate(calc(var(--card-width) * -3.73), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in9 {
    0% {
        transform: translate(calc(var(--card-width) * -3.73), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.73), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.73), -160px);
        -ms-transform: translate(calc(var(--card-width) * -3.73), -160px);
        -o-transform: translate(calc(var(--card-width) * -3.73), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in9 {
    0% {
        transform: translate(calc(var(--card-width) * -3.73), -160px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.73), -160px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.73), -160px);
        -ms-transform: translate(calc(var(--card-width) * -3.73), -160px);
        -o-transform: translate(calc(var(--card-width) * -3.73), -160px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in10 {
    0% {
        transform: translate(calc(var(--card-width) * 4.23), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 4.23), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 4.23), -210px);
        -ms-transform: translate(calc(var(--card-width) * 4.23), -210px);
        -o-transform: translate(calc(var(--card-width) * 4.23), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in10 {
    0% {
        transform: translate(calc(var(--card-width) * 4.23), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 4.23), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 4.23), -210px);
        -ms-transform: translate(calc(var(--card-width) * 4.23), -210px);
        -o-transform: translate(calc(var(--card-width) * 4.23), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in10 {
    0% {
        transform: translate(calc(var(--card-width) * 4.23), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 4.23), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 4.23), -210px);
        -ms-transform: translate(calc(var(--card-width) * 4.23), -210px);
        -o-transform: translate(calc(var(--card-width) * 4.23), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in10 {
    0% {
        transform: translate(calc(var(--card-width) * 4.23), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 4.23), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 4.23), -210px);
        -ms-transform: translate(calc(var(--card-width) * 4.23), -210px);
        -o-transform: translate(calc(var(--card-width) * 4.23), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in11 {
    0% {
        transform: translate(calc(var(--card-width) * 3.19), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.19), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.19), -210px);
        -ms-transform: translate(calc(var(--card-width) * 3.19), -210px);
        -o-transform: translate(calc(var(--card-width) * 3.19), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in11 {
    0% {
        transform: translate(calc(var(--card-width) * 3.19), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.19), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.19), -210px);
        -ms-transform: translate(calc(var(--card-width) * 3.19), -210px);
        -o-transform: translate(calc(var(--card-width) * 3.19), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in11 {
    0% {
        transform: translate(calc(var(--card-width) * 3.19), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.19), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.19), -210px);
        -ms-transform: translate(calc(var(--card-width) * 3.19), -210px);
        -o-transform: translate(calc(var(--card-width) * 3.19), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in11 {
    0% {
        transform: translate(calc(var(--card-width) * 3.19), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.19), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.19), -210px);
        -ms-transform: translate(calc(var(--card-width) * 3.19), -210px);
        -o-transform: translate(calc(var(--card-width) * 3.19), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in12 {
    0% {
        transform: translate(calc(var(--card-width) * 2.14), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.14), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.14), -210px);
        -ms-transform: translate(calc(var(--card-width) * 2.14), -210px);
        -o-transform: translate(calc(var(--card-width) * 2.14), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in12 {
    0% {
        transform: translate(calc(var(--card-width) * 2.14), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.14), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.14), -210px);
        -ms-transform: translate(calc(var(--card-width) * 2.14), -210px);
        -o-transform: translate(calc(var(--card-width) * 2.14), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in12 {
    0% {
        transform: translate(calc(var(--card-width) * 2.14), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.14), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.14), -210px);
        -ms-transform: translate(calc(var(--card-width) * 2.14), -210px);
        -o-transform: translate(calc(var(--card-width) * 2.14), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in12 {
    0% {
        transform: translate(calc(var(--card-width) * 2.14), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.14), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.14), -210px);
        -ms-transform: translate(calc(var(--card-width) * 2.14), -210px);
        -o-transform: translate(calc(var(--card-width) * 2.14), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in13 {
    0% {
        transform: translate(calc(var(--card-width) * 1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * 1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * 1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in13 {
    0% {
        transform: translate(calc(var(--card-width) * 1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * 1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * 1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in13 {
    0% {
        transform: translate(calc(var(--card-width) * 1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * 1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * 1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in13 {
    0% {
        transform: translate(calc(var(--card-width) * 1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * 1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * 1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in14 {
    0% {
        transform: translate(0, -210px);
        -webkit-transform: translate(0, -210px);
        -moz-transform: translate(0, -210px);
        -ms-transform: translate(0, -210px);
        -o-transform: translate(0, -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in14 {
    0% {
        transform: translate(0, -210px);
        -webkit-transform: translate(0, -210px);
        -moz-transform: translate(0, -210px);
        -ms-transform: translate(0, -210px);
        -o-transform: translate(0, -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in14 {
    0% {
        transform: translate(0, -210px);
        -webkit-transform: translate(0, -210px);
        -moz-transform: translate(0, -210px);
        -ms-transform: translate(0, -210px);
        -o-transform: translate(0, -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in14 {
    0% {
        transform: translate(0, -210px);
        -webkit-transform: translate(0, -210px);
        -moz-transform: translate(0, -210px);
        -ms-transform: translate(0, -210px);
        -o-transform: translate(0, -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in15 {
    0% {
        transform: translate(calc(var(--card-width) * -1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * -1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * -1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in15 {
    0% {
        transform: translate(calc(var(--card-width) * -1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * -1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * -1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in15 {
    0% {
        transform: translate(calc(var(--card-width) * -1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * -1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * -1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in15 {
    0% {
        transform: translate(calc(var(--card-width) * -1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * -1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * -1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in16 {
    0% {
        transform: translate(calc(var(--card-width) * -1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * -1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * -1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in16 {
    0% {
        transform: translate(calc(var(--card-width) * -1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * -1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * -1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in16 {
    0% {
        transform: translate(calc(var(--card-width) * -1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * -1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * -1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in16 {
    0% {
        transform: translate(calc(var(--card-width) * -1.08), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.08), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.08), -210px);
        -ms-transform: translate(calc(var(--card-width) * -1.08), -210px);
        -o-transform: translate(calc(var(--card-width) * -1.08), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in17 {
    0% {
        transform: translate(calc(var(--card-width) * -2.14), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.14), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.14), -210px);
        -ms-transform: translate(calc(var(--card-width) * -2.14), -210px);
        -o-transform: translate(calc(var(--card-width) * -2.14), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in17 {
    0% {
        transform: translate(calc(var(--card-width) * -2.14), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.14), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.14), -210px);
        -ms-transform: translate(calc(var(--card-width) * -2.14), -210px);
        -o-transform: translate(calc(var(--card-width) * -2.14), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in17 {
    0% {
        transform: translate(calc(var(--card-width) * -2.14), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.14), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.14), -210px);
        -ms-transform: translate(calc(var(--card-width) * -2.14), -210px);
        -o-transform: translate(calc(var(--card-width) * -2.14), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in17 {
    0% {
        transform: translate(calc(var(--card-width) * -2.14), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.14), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.14), -210px);
        -ms-transform: translate(calc(var(--card-width) * -2.14), -210px);
        -o-transform: translate(calc(var(--card-width) * -2.14), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in18 {
    0% {
        transform: translate(calc(var(--card-width) * -3.19), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.19), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.19), -210px);
        -ms-transform: translate(calc(var(--card-width) * -3.19), -210px);
        -o-transform: translate(calc(var(--card-width) * -3.19), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in18 {
    0% {
        transform: translate(calc(var(--card-width) * -3.19), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.19), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.19), -210px);
        -ms-transform: translate(calc(var(--card-width) * -3.19), -210px);
        -o-transform: translate(calc(var(--card-width) * -3.19), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in18 {
    0% {
        transform: translate(calc(var(--card-width) * -3.19), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.19), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.19), -210px);
        -ms-transform: translate(calc(var(--card-width) * -3.19), -210px);
        -o-transform: translate(calc(var(--card-width) * -3.19), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in18 {
    0% {
        transform: translate(calc(var(--card-width) * -3.19), -210px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.19), -210px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.19), -210px);
        -ms-transform: translate(calc(var(--card-width) * -3.19), -210px);
        -o-transform: translate(calc(var(--card-width) * -3.19), -210px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in19 {
    0% {
        transform: translate(calc(var(--card-width) * 4.73), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 4.73), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 4.73), -240px);
        -ms-transform: translate(calc(var(--card-width) * 4.73), -240px);
        -o-transform: translate(calc(var(--card-width) * 4.73), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in19 {
    0% {
        transform: translate(calc(var(--card-width) * 4.73), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 4.73), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 4.73), -240px);
        -ms-transform: translate(calc(var(--card-width) * 4.73), -240px);
        -o-transform: translate(calc(var(--card-width) * 4.73), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in19 {
    0% {
        transform: translate(calc(var(--card-width) * 4.73), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 4.73), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 4.73), -240px);
        -ms-transform: translate(calc(var(--card-width) * 4.73), -240px);
        -o-transform: translate(calc(var(--card-width) * 4.73), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in19 {
    0% {
        transform: translate(calc(var(--card-width) * 4.73), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 4.73), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 4.73), -240px);
        -ms-transform: translate(calc(var(--card-width) * 4.73), -240px);
        -o-transform: translate(calc(var(--card-width) * 4.73), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in20 {
    0% {
        transform: translate(calc(var(--card-width) * 3.7), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.7), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.7), -240px);
        -ms-transform: translate(calc(var(--card-width) * 3.7), -240px);
        -o-transform: translate(calc(var(--card-width) * 3.7), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in20 {
    0% {
        transform: translate(calc(var(--card-width) * 3.7), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.7), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.7), -240px);
        -ms-transform: translate(calc(var(--card-width) * 3.7), -240px);
        -o-transform: translate(calc(var(--card-width) * 3.7), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in20 {
    0% {
        transform: translate(calc(var(--card-width) * 3.7), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.7), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.7), -240px);
        -ms-transform: translate(calc(var(--card-width) * 3.7), -240px);
        -o-transform: translate(calc(var(--card-width) * 3.7), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in20 {
    0% {
        transform: translate(calc(var(--card-width) * 3.7), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 3.7), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 3.7), -240px);
        -ms-transform: translate(calc(var(--card-width) * 3.7), -240px);
        -o-transform: translate(calc(var(--card-width) * 3.7), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in21 {
    0% {
        transform: translate(calc(var(--card-width) * 2.64), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.64), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.64), -240px);
        -ms-transform: translate(calc(var(--card-width) * 2.64), -240px);
        -o-transform: translate(calc(var(--card-width) * 2.64), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in21 {
    0% {
        transform: translate(calc(var(--card-width) * 2.64), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.64), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.64), -240px);
        -ms-transform: translate(calc(var(--card-width) * 2.64), -240px);
        -o-transform: translate(calc(var(--card-width) * 2.64), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in21 {
    0% {
        transform: translate(calc(var(--card-width) * 2.64), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.64), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.64), -240px);
        -ms-transform: translate(calc(var(--card-width) * 2.64), -240px);
        -o-transform: translate(calc(var(--card-width) * 2.64), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in21 {
    0% {
        transform: translate(calc(var(--card-width) * 2.64), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 2.64), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 2.64), -240px);
        -ms-transform: translate(calc(var(--card-width) * 2.64), -240px);
        -o-transform: translate(calc(var(--card-width) * 2.64), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in22 {
    0% {
        transform: translate(calc(var(--card-width) * 1.58), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 1.58), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 1.58), -240px);
        -ms-transform: translate(calc(var(--card-width) * 1.58), -240px);
        -o-transform: translate(calc(var(--card-width) * 1.58), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in22 {
    0% {
        transform: translate(calc(var(--card-width) * 1.58), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 1.58), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 1.58), -240px);
        -ms-transform: translate(calc(var(--card-width) * 1.58), -240px);
        -o-transform: translate(calc(var(--card-width) * 1.58), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in22 {
    0% {
        transform: translate(calc(var(--card-width) * 1.58), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 1.58), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 1.58), -240px);
        -ms-transform: translate(calc(var(--card-width) * 1.58), -240px);
        -o-transform: translate(calc(var(--card-width) * 1.58), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in22 {
    0% {
        transform: translate(calc(var(--card-width) * 1.58), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 1.58), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 1.58), -240px);
        -ms-transform: translate(calc(var(--card-width) * 1.58), -240px);
        -o-transform: translate(calc(var(--card-width) * 1.58), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in23 {
    0% {
        transform: translate(calc(var(--card-width) * 0.53), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 0.53), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 0.53), -240px);
        -ms-transform: translate(calc(var(--card-width) * 0.53), -240px);
        -o-transform: translate(calc(var(--card-width) * 0.53), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in23 {
    0% {
        transform: translate(calc(var(--card-width) * 0.53), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 0.53), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 0.53), -240px);
        -ms-transform: translate(calc(var(--card-width) * 0.53), -240px);
        -o-transform: translate(calc(var(--card-width) * 0.53), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in23 {
    0% {
        transform: translate(calc(var(--card-width) * 0.53), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 0.53), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 0.53), -240px);
        -ms-transform: translate(calc(var(--card-width) * 0.53), -240px);
        -o-transform: translate(calc(var(--card-width) * 0.53), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in23 {
    0% {
        transform: translate(calc(var(--card-width) * 0.53), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * 0.53), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * 0.53), -240px);
        -ms-transform: translate(calc(var(--card-width) * 0.53), -240px);
        -o-transform: translate(calc(var(--card-width) * 0.53), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in24 {
    0% {
        transform: translate(calc(var(--card-width) * -0.53), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -0.53), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -0.53), -240px);
        -ms-transform: translate(calc(var(--card-width) * -0.53), -240px);
        -o-transform: translate(calc(var(--card-width) * -0.53), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in24 {
    0% {
        transform: translate(calc(var(--card-width) * -0.53), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -0.53), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -0.53), -240px);
        -ms-transform: translate(calc(var(--card-width) * -0.53), -240px);
        -o-transform: translate(calc(var(--card-width) * -0.53), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in24 {
    0% {
        transform: translate(calc(var(--card-width) * -0.53), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -0.53), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -0.53), -240px);
        -ms-transform: translate(calc(var(--card-width) * -0.53), -240px);
        -o-transform: translate(calc(var(--card-width) * -0.53), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in24 {
    0% {
        transform: translate(calc(var(--card-width) * -0.53), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -0.53), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -0.53), -240px);
        -ms-transform: translate(calc(var(--card-width) * -0.53), -240px);
        -o-transform: translate(calc(var(--card-width) * -0.53), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in25 {
    0% {
        transform: translate(calc(var(--card-width) * -1.58), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.58), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.58), -240px);
        -ms-transform: translate(calc(var(--card-width) * -1.58), -240px);
        -o-transform: translate(calc(var(--card-width) * -1.58), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in25 {
    0% {
        transform: translate(calc(var(--card-width) * -1.58), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.58), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.58), -240px);
        -ms-transform: translate(calc(var(--card-width) * -1.58), -240px);
        -o-transform: translate(calc(var(--card-width) * -1.58), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in25 {
    0% {
        transform: translate(calc(var(--card-width) * -1.58), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.58), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.58), -240px);
        -ms-transform: translate(calc(var(--card-width) * -1.58), -240px);
        -o-transform: translate(calc(var(--card-width) * -1.58), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in25 {
    0% {
        transform: translate(calc(var(--card-width) * -1.58), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -1.58), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -1.58), -240px);
        -ms-transform: translate(calc(var(--card-width) * -1.58), -240px);
        -o-transform: translate(calc(var(--card-width) * -1.58), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in26 {
    0% {
        transform: translate(calc(var(--card-width) * -2.64), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.64), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.64), -240px);
        -ms-transform: translate(calc(var(--card-width) * -2.64), -240px);
        -o-transform: translate(calc(var(--card-width) * -2.64), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in26 {
    0% {
        transform: translate(calc(var(--card-width) * -2.64), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.64), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.64), -240px);
        -ms-transform: translate(calc(var(--card-width) * -2.64), -240px);
        -o-transform: translate(calc(var(--card-width) * -2.64), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in26 {
    0% {
        transform: translate(calc(var(--card-width) * -2.64), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.64), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.64), -240px);
        -ms-transform: translate(calc(var(--card-width) * -2.64), -240px);
        -o-transform: translate(calc(var(--card-width) * -2.64), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in26 {
    0% {
        transform: translate(calc(var(--card-width) * -2.64), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -2.64), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -2.64), -240px);
        -ms-transform: translate(calc(var(--card-width) * -2.64), -240px);
        -o-transform: translate(calc(var(--card-width) * -2.64), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in27 {
    0% {
        transform: translate(calc(var(--card-width) * -3.7), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.7), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.7), -240px);
        -ms-transform: translate(calc(var(--card-width) * -3.7), -240px);
        -o-transform: translate(calc(var(--card-width) * -3.7), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in27 {
    0% {
        transform: translate(calc(var(--card-width) * -3.7), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.7), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.7), -240px);
        -ms-transform: translate(calc(var(--card-width) * -3.7), -240px);
        -o-transform: translate(calc(var(--card-width) * -3.7), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in27 {
    0% {
        transform: translate(calc(var(--card-width) * -3.7), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.7), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.7), -240px);
        -ms-transform: translate(calc(var(--card-width) * -3.7), -240px);
        -o-transform: translate(calc(var(--card-width) * -3.7), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in27 {
    0% {
        transform: translate(calc(var(--card-width) * -3.7), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -3.7), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -3.7), -240px);
        -ms-transform: translate(calc(var(--card-width) * -3.7), -240px);
        -o-transform: translate(calc(var(--card-width) * -3.7), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-webkit-keyframes cards-fly-in28 {
    0% {
        transform: translate(calc(var(--card-width) * -4.73), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -4.73), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -4.73), -240px);
        -ms-transform: translate(calc(var(--card-width) * -4.73), -240px);
        -o-transform: translate(calc(var(--card-width) * -4.73), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-moz-keyframes cards-fly-in28 {
    0% {
        transform: translate(calc(var(--card-width) * -4.73), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -4.73), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -4.73), -240px);
        -ms-transform: translate(calc(var(--card-width) * -4.73), -240px);
        -o-transform: translate(calc(var(--card-width) * -4.73), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@-o-keyframes cards-fly-in28 {
    0% {
        transform: translate(calc(var(--card-width) * -4.73), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -4.73), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -4.73), -240px);
        -ms-transform: translate(calc(var(--card-width) * -4.73), -240px);
        -o-transform: translate(calc(var(--card-width) * -4.73), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}
@keyframes cards-fly-in28 {
    0% {
        transform: translate(calc(var(--card-width) * -4.73), -240px);
        -webkit-transform: translate(-webkit-calc(var(--card-width) * -4.73), -240px);
        -moz-transform: translate(-moz-calc(var(--card-width) * -4.73), -240px);
        -ms-transform: translate(calc(var(--card-width) * -4.73), -240px);
        -o-transform: translate(calc(var(--card-width) * -4.73), -240px);
}
    100% {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
    }
}

@-webkit-keyframes tilt-shaking {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    25% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
    50% { -webkit-transform: rotate(0eg); transform: rotate(0eg); }
    75% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-moz-keyframes tilt-shaking {
    0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
    25% { -moz-transform: rotate(3deg); transform: rotate(3deg); }
    50% { -moz-transform: rotate(0eg); transform: rotate(0eg); }
    75% { -moz-transform: rotate(-3deg); transform: rotate(-3deg); }
    100% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
}

@-o-keyframes tilt-shaking {
    0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
    25% { -o-transform: rotate(3deg); transform: rotate(3deg); }
    50% { -o-transform: rotate(0eg); transform: rotate(0eg); }
    75% { -o-transform: rotate(-3deg); transform: rotate(-3deg); }
    100% { -o-transform: rotate(0deg); transform: rotate(0deg); }
}

@keyframes tilt-shaking {
    0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
    25% { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); }
    50% { -webkit-transform: rotate(0eg); -moz-transform: rotate(0eg); -o-transform: rotate(0eg); transform: rotate(0eg); }
    75% { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
}

@-webkit-keyframes fontbulger  {
    0%, 100% {
       font-size:16px;
    }
    
    50% {
       font-size:30px;
    }
 
}
@-moz-keyframes fontbulger  {
    0%, 100% {
       font-size:16px;
    }
    
    50% {
       font-size:30px;
    }
 
}
@-o-keyframes fontbulger  {
    0%, 100% {
       font-size:16px;
    }
    
    50% {
       font-size:30px;
    }
 
}
@keyframes fontbulger  {
    0%, 100% {
       font-size:16px;
    }
    
    50% {
       font-size:30px;
    }
 
}

@-webkit-keyframes rocket-fly-left  {
    0% {
        left: -100px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }
    90% {
        left: -webkit-calc(39vw - 100px);
        left: calc(39vw - 100px);
    }
    100% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        left: -webkit-calc(39vw - 100px);
        left: calc(39vw - 100px);
    }
}
@-moz-keyframes rocket-fly-left  {
    0% {
        left: -100px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }
    90% {
        left: -moz-calc(39vw - 100px);
        left: calc(39vw - 100px);
    }
    100% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        left: -moz-calc(39vw - 100px);
        left: calc(39vw - 100px);
    }
}
@-o-keyframes rocket-fly-left  {
    0% {
        left: -100px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }
    90% {
        left: calc(39vw - 100px);
    }
    100% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        left: calc(39vw - 100px);
    }
}
@keyframes rocket-fly-left  {
    0% {
        left: -100px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }
    90% {
        left: -webkit-calc(39vw - 100px);
        left: -moz-calc(39vw - 100px);
        left: calc(39vw - 100px);
    }
    100% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        left: -webkit-calc(39vw - 100px);
        left: -moz-calc(39vw - 100px);
        left: calc(39vw - 100px);
    }
}


@-webkit-keyframes rocket-fly-right  {
    0% {
        right: -100px;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
    }
    90% {
        right: -webkit-calc(39vw - 100px);
        right: calc(39vw - 100px);
    }
    100% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        right: -webkit-calc(39vw - 100px);
        right: calc(39vw - 100px);
    }
}
@-moz-keyframes rocket-fly-right  {
    0% {
        right: -100px;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
    }
    90% {
        right: -moz-calc(39vw - 100px);
        right: calc(39vw - 100px);
    }
    100% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        right: -moz-calc(39vw - 100px);
        right: calc(39vw - 100px);
    }
}
@-o-keyframes rocket-fly-right  {
    0% {
        right: -100px;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
    }
    90% {
        right: calc(39vw - 100px);
    }
    100% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        right: calc(39vw - 100px);
    }
}
@keyframes rocket-fly-right  {
    0% {
        right: -100px;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
    }
    90% {
        right: -webkit-calc(39vw - 100px);
        right: -moz-calc(39vw - 100px);
        right: calc(39vw - 100px);
    }
    100% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        right: -webkit-calc(39vw - 100px);
        right: -moz-calc(39vw - 100px);
        right: calc(39vw - 100px);
    }
}

@-webkit-keyframes alpha-extra-text-top-down {
    0% {
        top: -50vh;
    }
    100% {
        top: 5px;
    }
}
@-moz-keyframes alpha-extra-text-top-down {
    0% {
        top: -50vh;
    }
    100% {
        top: 5px;
    }
}
@-o-keyframes alpha-extra-text-top-down {
    0% {
        top: -50vh;
    }
    100% {
        top: 5px;
    }
}
@keyframes alpha-extra-text-top-down {
    0% {
        top: -50vh;
    }
    100% {
        top: 5px;
    }
}

@-webkit-keyframes logo-from-bottom  {
    0% {
        top: 100vh;
        
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        top: 0;

        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes logo-from-bottom  {
    0% {
        top: 100vh;
        
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        top: 0;

        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes logo-from-bottom  {
    0% {
        top: 100vh;
        
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        top: 0;

        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes logo-from-bottom  {
    0% {
        top: 100vh;

        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        top: 0;

        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating {
    0% {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    100% {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@-moz-keyframes rotating {
    0% {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    100% {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@-o-keyframes rotating {
    0% {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    100% {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@keyframes rotating {
    0% {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    100% {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes moveX {
from { left: -100px; } to {left: 100%; }
}
@-moz-keyframes moveX {
from { left: -100px; } to {left: 100%; }
}
@-o-keyframes moveX {
from { left: -100px; } to {left: 100%; }
}
@keyframes moveX {
from { left: -100px; } to {left: 100%; }
}

@-webkit-keyframes moveY {
from { top: -100px; } to {top: 100%; }
}
@-moz-keyframes moveY {
from { top: -100px; } to {top: 100%; }
}
@-o-keyframes moveY {
from { top: -100px; } to {top: 100%; }
}
@keyframes moveY {
from { top: -100px; } to {top: 100%; }
}

@-webkit-keyframes animationOutline {
    0%, 100% { outline-width: 3px; }
    50% {outline-width: 7px; }
}

@-moz-keyframes animationOutline {
    0%, 100% { outline-width: 3px; }
    50% {outline-width: 7px; }
}

@-o-keyframes animationOutline {
    0%, 100% { outline-width: 3px; }
    50% {outline-width: 7px; }
}

@keyframes animationOutline {
    0%, 100% { outline-width: 3px; }
    50% {outline-width: 7px; }
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(359deg);transform: rotate(359deg);} to {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(359deg);transform: rotate(359deg);} to {-moz-transform: rotate(0deg);transform: rotate(0deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(359deg);transform: rotate(359deg);} to {-o-transform: rotate(0deg);transform: rotate(0deg);}
}
@keyframes rotation {
    from {-webkit-transform: rotate(359deg);-moz-transform: rotate(359deg);-o-transform: rotate(359deg);transform: rotate(359deg);} to {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
}
    
@-webkit-keyframes slideOut {
    0% {
        margin-top: 0px;
    }
    100% {
        margin-top: 100vh;
    }
}
    
@-moz-keyframes slideOut {
    0% {
        margin-top: 0px;
    }
    100% {
        margin-top: 100vh;
    }
}
    
@-o-keyframes slideOut {
    0% {
        margin-top: 0px;
    }
    100% {
        margin-top: 100vh;
    }
}
    
@keyframes slideOut {
    0% {
        margin-top: 0px;
    }
    100% {
        margin-top: 100vh;
    }
}
@-webkit-keyframes slideIn {
    0% {
        margin-top: -100vh;
    }
    100% {
        margin-top: 0vh;
    }
}
@-moz-keyframes slideIn {
    0% {
        margin-top: -100vh;
    }
    100% {
        margin-top: 0vh;
    }
}
@-o-keyframes slideIn {
    0% {
        margin-top: -100vh;
    }
    100% {
        margin-top: 0vh;
    }
}
@keyframes slideIn {
    0% {
        margin-top: -100vh;
    }
    100% {
        margin-top: 0vh;
    }
}

@-webkit-keyframes blinkImReadyBtnAnimation {
    0%, 100% {
        background: var(--light-green);
    }
    50% {
        background: var(--light-green-opposite);
    }
}

@-moz-keyframes blinkImReadyBtnAnimation {
    0%, 100% {
        background: var(--light-green);
    }
    50% {
        background: var(--light-green-opposite);
    }
}

@-o-keyframes blinkImReadyBtnAnimation {
    0%, 100% {
        background: var(--light-green);
    }
    50% {
        background: var(--light-green-opposite);
    }
}

@keyframes blinkImReadyBtnAnimation {
    0%, 100% {
        background: var(--light-green);
    }
    50% {
        background: var(--light-green-opposite);
    }
}
@-webkit-keyframes blinkImReadyBtnAnimation-darkmode {
    0%, 100% {
        background: var(--light-green-with-more-opacity);
    }
    50% {
        background: var(--light-green);
    }
}
@-moz-keyframes blinkImReadyBtnAnimation-darkmode {
    0%, 100% {
        background: var(--light-green-with-more-opacity);
    }
    50% {
        background: var(--light-green);
    }
}
@-o-keyframes blinkImReadyBtnAnimation-darkmode {
    0%, 100% {
        background: var(--light-green-with-more-opacity);
    }
    50% {
        background: var(--light-green);
    }
}
@keyframes blinkImReadyBtnAnimation-darkmode {
    0%, 100% {
        background: var(--light-green-with-more-opacity);
    }
    50% {
        background: var(--light-green);
    }
}

@-webkit-keyframes latestChatMsg-slideIn {
    from {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}

@-moz-keyframes latestChatMsg-slideIn {
    from {
        -moz-transform: translateX(100%);
             transform: translateX(100%);
        opacity: 0;
    }
    to {
        -moz-transform: translateX(0);
             transform: translateX(0);
        opacity: 1;
    }
}

@-o-keyframes latestChatMsg-slideIn {
    from {
        -o-transform: translateX(100%);
           transform: translateX(100%);
        opacity: 0;
    }
    to {
        -o-transform: translateX(0);
           transform: translateX(0);
        opacity: 1;
    }
}

@keyframes latestChatMsg-slideIn {
    from {
        -webkit-transform: translateX(100%);
           -moz-transform: translateX(100%);
             -o-transform: translateX(100%);
                transform: translateX(100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
@-webkit-keyframes latestChatMsg-slideOut {
    from {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
    to {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        opacity: 0;
    }
}
@-moz-keyframes latestChatMsg-slideOut {
    from {
        -moz-transform: translateX(0);
             transform: translateX(0);
        opacity: 1;
    }
    to {
        -moz-transform: translateX(100%);
             transform: translateX(100%);
        opacity: 0;
    }
}
@-o-keyframes latestChatMsg-slideOut {
    from {
        -o-transform: translateX(0);
           transform: translateX(0);
        opacity: 1;
    }
    to {
        -o-transform: translateX(100%);
           transform: translateX(100%);
        opacity: 0;
    }
}
@keyframes latestChatMsg-slideOut {
    from {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
    to {
        -webkit-transform: translateX(100%);
           -moz-transform: translateX(100%);
             -o-transform: translateX(100%);
                transform: translateX(100%);
        opacity: 0;
    }
}

@-webkit-keyframes fly-style-6 {
    0% {
        -webkit-transform: translateX(50%) translateY(100%) rotate(-20deg);
                transform: translateX(50%) translateY(100%) rotate(-20deg);
    }
    20% {
        -webkit-transform: translateX(20%) translateY(20%) rotate(-20deg);
                transform: translateX(20%) translateY(20%) rotate(-20deg);
    }
    45% {
        -webkit-transform: translateX(-50%) translateY(-150%) rotate(-20deg);
                transform: translateX(-50%) translateY(-150%) rotate(-20deg);
    }
    55% {
        -webkit-transform: translateX(50%) translateY(-150%) rotate(-155deg);
                transform: translateX(50%) translateY(-150%) rotate(-155deg);
    }
    100% {
        -webkit-transform: translateX(-50%) translateY(150%) rotate(-155deg);
                transform: translateX(-50%) translateY(150%) rotate(-155deg);
    }
}
@-moz-keyframes fly-style-6 {
    0% {
        -moz-transform: translateX(50%) translateY(100%) rotate(-20deg);
             transform: translateX(50%) translateY(100%) rotate(-20deg);
    }
    20% {
        -moz-transform: translateX(20%) translateY(20%) rotate(-20deg);
             transform: translateX(20%) translateY(20%) rotate(-20deg);
    }
    45% {
        -moz-transform: translateX(-50%) translateY(-150%) rotate(-20deg);
             transform: translateX(-50%) translateY(-150%) rotate(-20deg);
    }
    55% {
        -moz-transform: translateX(50%) translateY(-150%) rotate(-155deg);
             transform: translateX(50%) translateY(-150%) rotate(-155deg);
    }
    100% {
        -moz-transform: translateX(-50%) translateY(150%) rotate(-155deg);
             transform: translateX(-50%) translateY(150%) rotate(-155deg);
    }
}
@-o-keyframes fly-style-6 {
    0% {
        -o-transform: translateX(50%) translateY(100%) rotate(-20deg);
           transform: translateX(50%) translateY(100%) rotate(-20deg);
    }
    20% {
        -o-transform: translateX(20%) translateY(20%) rotate(-20deg);
           transform: translateX(20%) translateY(20%) rotate(-20deg);
    }
    45% {
        -o-transform: translateX(-50%) translateY(-150%) rotate(-20deg);
           transform: translateX(-50%) translateY(-150%) rotate(-20deg);
    }
    55% {
        -o-transform: translateX(50%) translateY(-150%) rotate(-155deg);
           transform: translateX(50%) translateY(-150%) rotate(-155deg);
    }
    100% {
        -o-transform: translateX(-50%) translateY(150%) rotate(-155deg);
           transform: translateX(-50%) translateY(150%) rotate(-155deg);
    }
}
@keyframes fly-style-6 {
    0% {
        -webkit-transform: translateX(50%) translateY(100%) rotate(-20deg);
           -moz-transform: translateX(50%) translateY(100%) rotate(-20deg);
             -o-transform: translateX(50%) translateY(100%) rotate(-20deg);
                transform: translateX(50%) translateY(100%) rotate(-20deg);
    }
    20% {
        -webkit-transform: translateX(20%) translateY(20%) rotate(-20deg);
           -moz-transform: translateX(20%) translateY(20%) rotate(-20deg);
             -o-transform: translateX(20%) translateY(20%) rotate(-20deg);
                transform: translateX(20%) translateY(20%) rotate(-20deg);
    }
    45% {
        -webkit-transform: translateX(-50%) translateY(-150%) rotate(-20deg);
           -moz-transform: translateX(-50%) translateY(-150%) rotate(-20deg);
             -o-transform: translateX(-50%) translateY(-150%) rotate(-20deg);
                transform: translateX(-50%) translateY(-150%) rotate(-20deg);
    }
    55% {
        -webkit-transform: translateX(50%) translateY(-150%) rotate(-155deg);
           -moz-transform: translateX(50%) translateY(-150%) rotate(-155deg);
             -o-transform: translateX(50%) translateY(-150%) rotate(-155deg);
                transform: translateX(50%) translateY(-150%) rotate(-155deg);
    }
    100% {
        -webkit-transform: translateX(-50%) translateY(150%) rotate(-155deg);
           -moz-transform: translateX(-50%) translateY(150%) rotate(-155deg);
             -o-transform: translateX(-50%) translateY(150%) rotate(-155deg);
                transform: translateX(-50%) translateY(150%) rotate(-155deg);
    }
}

html[lang="de"] .text::before {
    content: attr(data-de)
}
html[lang="es"] .text::before {
    content: attr(data-es)
}
.text::before {
    content: attr(data-en)
}
input[type=range]::-ms-tooltip {
    display: none;
}
input[type=range] {
    height: 16px;
    -webkit-appearance: none;
    background: none;
}

/*progress support*/
input[type=range] {
    --range: -webkit-calc(var(--max) - var(--min));
    --range: -moz-calc(var(--max) - var(--min));
    --range: calc(var(--max) - var(--min));
    --ratio: -webkit-calc((var(--value) - var(--min)) / var(--range));
    --ratio: -moz-calc((var(--value) - var(--min)) / var(--range));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: -webkit-calc(0.5 * 20px + var(--ratio) * (100% - 20px));
    --sx: -moz-calc(0.5 * 20px + var(--ratio) * (100% - 20px));
    --sx: calc(0.5 * 20px + var(--ratio) * (100% - 20px));
}
input[type=range]:focus {
    outline: none;
}
  
/*webkit*/
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 1em;
            border-radius: 1em;
    background: black;
    border: none;
    -webkit-box-shadow: 0 0 2px var(--light-green);
            box-shadow: 0 0 2px var(--light-green);
    margin-top: -webkit-calc(12px * 0.5 - 20px * 0.5);
    margin-top: calc(12px * 0.5 - 20px * 0.5);
}
input[type=range]::-webkit-slider-runnable-track {
    height: 12px;
    -webkit-border-radius: 0.5em;
            border-radius: 0.5em;
    background: var(--black-with-opacity);
    -webkit-box-shadow: none;
            box-shadow: none;
} 
input[type=range]::-webkit-slider-runnable-track {
    background: -webkit-gradient(linear,left top, left bottom,from(black),to(black)) 0/var(--sx) 100% no-repeat, var(--black-with-more-opacity);
    background: -webkit-linear-gradient(black,black) 0/var(--sx) 100% no-repeat, var(--black-with-more-opacity);
    background: linear-gradient(black,black) 0/var(--sx) 100% no-repeat, var(--black-with-more-opacity);
}
  
/*mozilla*/
input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    -moz-border-radius: 1em;
         border-radius: 1em;
    background: var(--light-green);
    border: none;
    -moz-box-shadow: 0 0 2px black;
         box-shadow: 0 0 2px black;
}
  
input[type=range]::-moz-range-track {
    height: 12px;
    border: none;
    -moz-border-radius: 0.5em;
         border-radius: 0.5em;
    background: var(--light-green-with-opacity);
    -moz-box-shadow: none;
         box-shadow: none;
}
  
input[type=range]::-moz-range-track {
    background: -moz-linear-gradient(var(--light-green),var(--light-green)) 0/var(--sx) 100% no-repeat, var(--light-green-with-opacity);
    background: linear-gradient(var(--light-green),var(--light-green)) 0/var(--sx) 100% no-repeat, var(--light-green-with-opacity);
}

/*ms*/
input[type=range]::-ms-fill-upper {
    background: transparent;
    border-color: transparent;
}
  
input[type=range]::-ms-fill-lower {
    background: transparent;
    border-color: transparent;
}
  
input[type=range]::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 1em;
    background: var(--light-green);
    border: none;
    box-shadow: 0 0 2px black;
    margin-top: 0;
    box-sizing: border-box;
}
  
input[type=range]::-ms-track {
    height: 12px;
    border-radius: 0.5em;
    background: var(--light-green-with-opacity);
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}
  
input[type=range]::-ms-fill-lower {
    height: 12px;
    border-radius: 0.5em 0 0 0.5em;
    margin: -undefined 0 -undefined -undefined;
    background: var(--light-green);
    border: none;
    border-right-width: 0;
}

@media (orientation: landscape) {
    .show_orientation_warning {
        display: none !important;
    }
}
@media screen and (min-width: 615px) and (orientation: portrait) {
    .show_orientation_warning {
        display: none !important;
    }
}

.fullscreen-warning {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    background: black;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.show_orientation_warning {
    z-index: 999999;
}

.show_orientation_warning div.first {
    text-align: center;
    border: 5px solid var(--light-green-with-opacity);
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
    height: 350px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-58%);
       -moz-transform: translateY(-58%);
        -ms-transform: translateY(-58%);
         -o-transform: translateY(-58%);
            transform: translateY(-58%);
    margin: 25px;
}

.show_orientation_warning div:not(.first) {
    margin: auto;
}

.show_orientation_warning p {
    font-weight: bolder;
    font-size: 2rem;
    color: black;
    -webkit-filter: invert(70%);
            filter: invert(70%);
    padding: 5px;
}

.show_orientation_warning img {
    max-width: 110px;
    width: 30vw;
    height: auto;
    -webkit-filter: invert(50%);
            filter: invert(50%);

    -webkit-animation: wiggle 2s infinite;

            -moz-animation: wiggle 2s infinite;

              -o-animation: wiggle 2s infinite;

         animation: wiggle 2s infinite;
}

.this-div-is-the-body.slide-out {
    -webkit-animation: slideOut 0.5s linear forwards;
       -moz-animation: slideOut 0.5s linear forwards;
         -o-animation: slideOut 0.5s linear forwards;
            animation: slideOut 0.5s linear forwards;
}
.this-div-is-the-body.slide-in {
    -webkit-animation: slideIn 0.5s linear forwards;
       -moz-animation: slideIn 0.5s linear forwards;
         -o-animation: slideIn 0.5s linear forwards;
            animation: slideIn 0.5s linear forwards;
}

body:has(.body-legal-notice) .show_orientation_warning,
body:has(.body-privacy-policy) .show_orientation_warning {
    display: none;
}

.body-legal-notice .logo,
.body-privacy-policy .logo {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
}

html {
    scroll-behavior: smooth;
}

html, body {
    /* overflow: hidden; */
    height: 100vh;
    margin: 0;
    font-family: sans-serif;

    font-size: 16px;
}

body.winlose {
    margin: 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: var(--card-width) 0.5rem var(--card-width);
    grid-template-columns: repeat(2, var(--card-width));
    -ms-grid-rows: var(--card-height) 0.5rem 2rem 0.5rem var(--card-height);
    grid-template-rows: var(--card-height) 2rem var(--card-height);
    gap: 0.5rem;
    cursor: pointer;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 1rem;
}

body.winlose > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

body.winlose > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

body.winlose > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

body.winlose > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

body.winlose > *:nth-child(5) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

body.winlose > *:nth-child(6) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
}

/* Background: */
body.dark-mode .light-mode-background {
    display: none;
}
body.dark-mode .dark-mode-background {
    display: block;
}
body.dark-mode .stars-gif {
    filter: brightness(2);
    -webkit-filter: brightness(2);
    
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}


.light-mode-background {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: -1;
}
#saturn {
    width: 400px;
    height: 400px;
    max-height: 100vh;
    margin: auto;
    /* transform: rotateZ(-15deg); */
    /* -webkit-transform: rotateZ(-15deg);
    -moz-transform: rotateZ(-15deg);
    -ms-transform: rotateZ(-15deg);
    -o-transform: rotateZ(-15deg); */
}
.rings {
    position: relative;
    width: 100%;
    height: 100%;

    background: -moz-radial-gradient(center, ellipse cover,  rgba(24,19,25,0) 0%, rgba(53,52,51,0) 34%, rgba(55,54,52,1) 36%, rgba(56,55,53,1) 37%, rgba(68,67,66,1) 38%, rgba(56,55,53,1) 39%, rgba(68,67,66,1) 40%, rgba(56,55,53,1) 41%, rgba(87,77,76,1) 42%, rgba(87,77,76,1) 44%, rgba(113,110,103,1) 46%, rgba(113,110,103,1) 48%, rgba(113,98,93,1) 49%, rgba(113,98,93,1) 51%, rgba(122,115,105,1) 52%, rgba(113,98,93,1) 53%, rgba(113,98,93,1) 54%, rgba(122,115,105,1) 55%, rgba(106,99,89,1) 56%, rgba(106,99,89,1) 58%, rgba(79,76,76,0) 60%, rgba(65,64,70,1) 61%, rgba(65,64,70,1) 62%, rgba(90,85,89,1) 63%, rgba(78,74,73,1) 65%, rgba(78,73,74,1) 67%, rgba(78,73,74,0) 68%, rgba(78,73,75,1) 69%, rgba(78,73,75,1) 70%, rgba(78,73,76,0) 71%, rgba(77,72,76,0) 72%, rgba(24,19,25,0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(24,19,25,0)), color-stop(34%,rgba(53,52,51,0)), color-stop(36%,rgba(55,54,52,1)), color-stop(37%,rgba(56,55,53,1)), color-stop(38%,rgba(68,67,66,1)), color-stop(39%,rgba(56,55,53,1)), color-stop(40%,rgba(68,67,66,1)), color-stop(41%,rgba(56,55,53,1)), color-stop(42%,rgba(87,77,76,1)), color-stop(44%,rgba(87,77,76,1)), color-stop(46%,rgba(113,110,103,1)), color-stop(48%,rgba(113,110,103,1)), color-stop(49%,rgba(113,98,93,1)), color-stop(51%,rgba(113,98,93,1)), color-stop(52%,rgba(122,115,105,1)), color-stop(53%,rgba(113,98,93,1)), color-stop(54%,rgba(113,98,93,1)), color-stop(55%,rgba(122,115,105,1)), color-stop(56%,rgba(106,99,89,1)), color-stop(58%,rgba(106,99,89,1)), color-stop(60%,rgba(79,76,76,0)), color-stop(61%,rgba(65,64,70,1)), color-stop(62%,rgba(65,64,70,1)), color-stop(63%,rgba(90,85,89,1)), color-stop(65%,rgba(78,74,73,1)), color-stop(67%,rgba(78,73,74,1)), color-stop(68%,rgba(78,73,74,0)), color-stop(69%,rgba(78,73,75,1)), color-stop(70%,rgba(78,73,75,1)), color-stop(71%,rgba(78,73,76,0)), color-stop(72%,rgba(77,72,76,0)), color-stop(100%,rgba(24,19,25,0)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(24,19,25,0) 0%,rgba(53,52,51,0) 34%,rgba(55,54,52,1) 36%,rgba(56,55,53,1) 37%,rgba(68,67,66,1) 38%,rgba(56,55,53,1) 39%,rgba(68,67,66,1) 40%,rgba(56,55,53,1) 41%,rgba(87,77,76,1) 42%,rgba(87,77,76,1) 44%,rgba(113,110,103,1) 46%,rgba(113,110,103,1) 48%,rgba(113,98,93,1) 49%,rgba(113,98,93,1) 51%,rgba(122,115,105,1) 52%,rgba(113,98,93,1) 53%,rgba(113,98,93,1) 54%,rgba(122,115,105,1) 55%,rgba(106,99,89,1) 56%,rgba(106,99,89,1) 58%,rgba(79,76,76,0) 60%,rgba(65,64,70,1) 61%,rgba(65,64,70,1) 62%,rgba(90,85,89,1) 63%,rgba(78,74,73,1) 65%,rgba(78,73,74,1) 67%,rgba(78,73,74,0) 68%,rgba(78,73,75,1) 69%,rgba(78,73,75,1) 70%,rgba(78,73,76,0) 71%,rgba(77,72,76,0) 72%,rgba(24,19,25,0) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(24,19,25,0) 0%,rgba(53,52,51,0) 34%,rgba(55,54,52,1) 36%,rgba(56,55,53,1) 37%,rgba(68,67,66,1) 38%,rgba(56,55,53,1) 39%,rgba(68,67,66,1) 40%,rgba(56,55,53,1) 41%,rgba(87,77,76,1) 42%,rgba(87,77,76,1) 44%,rgba(113,110,103,1) 46%,rgba(113,110,103,1) 48%,rgba(113,98,93,1) 49%,rgba(113,98,93,1) 51%,rgba(122,115,105,1) 52%,rgba(113,98,93,1) 53%,rgba(113,98,93,1) 54%,rgba(122,115,105,1) 55%,rgba(106,99,89,1) 56%,rgba(106,99,89,1) 58%,rgba(79,76,76,0) 60%,rgba(65,64,70,1) 61%,rgba(65,64,70,1) 62%,rgba(90,85,89,1) 63%,rgba(78,74,73,1) 65%,rgba(78,73,74,1) 67%,rgba(78,73,74,0) 68%,rgba(78,73,75,1) 69%,rgba(78,73,75,1) 70%,rgba(78,73,76,0) 71%,rgba(77,72,76,0) 72%,rgba(24,19,25,0) 100%);
    background: -webkit-radial-gradient(center,  ellipse,  rgba(24,19,25,0) 0%,rgba(53,52,51,0) 34%,rgba(55,54,52,1) 36%,rgba(56,55,53,1) 37%,rgba(68,67,66,1) 38%,rgba(56,55,53,1) 39%,rgba(68,67,66,1) 40%,rgba(56,55,53,1) 41%,rgba(87,77,76,1) 42%,rgba(87,77,76,1) 44%,rgba(113,110,103,1) 46%,rgba(113,110,103,1) 48%,rgba(113,98,93,1) 49%,rgba(113,98,93,1) 51%,rgba(122,115,105,1) 52%,rgba(113,98,93,1) 53%,rgba(113,98,93,1) 54%,rgba(122,115,105,1) 55%,rgba(106,99,89,1) 56%,rgba(106,99,89,1) 58%,rgba(79,76,76,0) 60%,rgba(65,64,70,1) 61%,rgba(65,64,70,1) 62%,rgba(90,85,89,1) 63%,rgba(78,74,73,1) 65%,rgba(78,73,74,1) 67%,rgba(78,73,74,0) 68%,rgba(78,73,75,1) 69%,rgba(78,73,75,1) 70%,rgba(78,73,76,0) 71%,rgba(77,72,76,0) 72%,rgba(24,19,25,0) 100%);
    background: -moz-radial-gradient(center,  ellipse,  rgba(24,19,25,0) 0%,rgba(53,52,51,0) 34%,rgba(55,54,52,1) 36%,rgba(56,55,53,1) 37%,rgba(68,67,66,1) 38%,rgba(56,55,53,1) 39%,rgba(68,67,66,1) 40%,rgba(56,55,53,1) 41%,rgba(87,77,76,1) 42%,rgba(87,77,76,1) 44%,rgba(113,110,103,1) 46%,rgba(113,110,103,1) 48%,rgba(113,98,93,1) 49%,rgba(113,98,93,1) 51%,rgba(122,115,105,1) 52%,rgba(113,98,93,1) 53%,rgba(113,98,93,1) 54%,rgba(122,115,105,1) 55%,rgba(106,99,89,1) 56%,rgba(106,99,89,1) 58%,rgba(79,76,76,0) 60%,rgba(65,64,70,1) 61%,rgba(65,64,70,1) 62%,rgba(90,85,89,1) 63%,rgba(78,74,73,1) 65%,rgba(78,73,74,1) 67%,rgba(78,73,74,0) 68%,rgba(78,73,75,1) 69%,rgba(78,73,75,1) 70%,rgba(78,73,76,0) 71%,rgba(77,72,76,0) 72%,rgba(24,19,25,0) 100%);
    background: -o-radial-gradient(center,  ellipse,  rgba(24,19,25,0) 0%,rgba(53,52,51,0) 34%,rgba(55,54,52,1) 36%,rgba(56,55,53,1) 37%,rgba(68,67,66,1) 38%,rgba(56,55,53,1) 39%,rgba(68,67,66,1) 40%,rgba(56,55,53,1) 41%,rgba(87,77,76,1) 42%,rgba(87,77,76,1) 44%,rgba(113,110,103,1) 46%,rgba(113,110,103,1) 48%,rgba(113,98,93,1) 49%,rgba(113,98,93,1) 51%,rgba(122,115,105,1) 52%,rgba(113,98,93,1) 53%,rgba(113,98,93,1) 54%,rgba(122,115,105,1) 55%,rgba(106,99,89,1) 56%,rgba(106,99,89,1) 58%,rgba(79,76,76,0) 60%,rgba(65,64,70,1) 61%,rgba(65,64,70,1) 62%,rgba(90,85,89,1) 63%,rgba(78,74,73,1) 65%,rgba(78,73,74,1) 67%,rgba(78,73,74,0) 68%,rgba(78,73,75,1) 69%,rgba(78,73,75,1) 70%,rgba(78,73,76,0) 71%,rgba(77,72,76,0) 72%,rgba(24,19,25,0) 100%);
    background: radial-gradient(ellipse at center,  rgba(24,19,25,0) 0%,rgba(53,52,51,0) 34%,rgba(55,54,52,1) 36%,rgba(56,55,53,1) 37%,rgba(68,67,66,1) 38%,rgba(56,55,53,1) 39%,rgba(68,67,66,1) 40%,rgba(56,55,53,1) 41%,rgba(87,77,76,1) 42%,rgba(87,77,76,1) 44%,rgba(113,110,103,1) 46%,rgba(113,110,103,1) 48%,rgba(113,98,93,1) 49%,rgba(113,98,93,1) 51%,rgba(122,115,105,1) 52%,rgba(113,98,93,1) 53%,rgba(113,98,93,1) 54%,rgba(122,115,105,1) 55%,rgba(106,99,89,1) 56%,rgba(106,99,89,1) 58%,rgba(79,76,76,0) 60%,rgba(65,64,70,1) 61%,rgba(65,64,70,1) 62%,rgba(90,85,89,1) 63%,rgba(78,74,73,1) 65%,rgba(78,73,74,1) 67%,rgba(78,73,74,0) 68%,rgba(78,73,75,1) 69%,rgba(78,73,75,1) 70%,rgba(78,73,76,0) 71%,rgba(77,72,76,0) 72%,rgba(24,19,25,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181319', endColorstr='#00181319',GradientType=1 );

    -webkit-transform: rotateX(75deg);

       -moz-transform: rotateX(75deg);

            transform: rotateX(75deg);
}

.planet {
    background: green;
    width: 180px;
    height: 180px;
    position: absolute;
    top: 110px;
    left: 110px;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

.top {
    clip: rect(0px, 180px, 90px, 0px);
}

.bottom {
    clip: rect(90px, 180px, 180px, 0px);
}

.planet-bg {
    background: -moz-radial-gradient(top, circle cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%), -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 62%, rgba(0,0,0,1) 100%), -moz-linear-gradient(bottom,  rgba(131,129,117,1) 0%, rgba(131,129,117,1) 3%, rgba(150,144,130,1) 5%, rgba(150,144,130,1) 9%, rgba(190,177,145,1) 20%, rgba(190,177,145,1) 32%, rgba(202,176,153,1) 35%, rgba(202,176,153,1) 47%, rgba(205,186,156,1) 48%, rgba(205,186,156,1) 49%, rgba(211,184,157,1) 51%, rgba(211,184,157,1) 59%, rgba(218,188,162,1) 61%, rgba(218,188,162,1) 63%, rgba(208,180,158,1) 64%, rgba(208,180,158,1) 68%, rgba(213,181,143,1) 74%, rgba(213,181,143,1) 78%, rgba(221,203,157,1) 83%, rgba(221,203,157,1) 85%, rgba(212,203,174,1) 90%, rgba(212,203,174,1) 100%);
    background: -webkit-radial-gradient(top, circle cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -webkit-linear-gradient(bottom,  rgba(131,129,117,1) 0%,rgba(131,129,117,1) 3%,rgba(150,144,130,1) 5%,rgba(150,144,130,1) 9%,rgba(190,177,145,1) 20%,rgba(190,177,145,1) 32%,rgba(202,176,153,1) 35%,rgba(202,176,153,1) 47%,rgba(205,186,156,1) 48%,rgba(205,186,156,1) 49%,rgba(211,184,157,1) 51%,rgba(211,184,157,1) 59%,rgba(218,188,162,1) 61%,rgba(218,188,162,1) 63%,rgba(208,180,158,1) 64%,rgba(208,180,158,1) 68%,rgba(213,181,143,1) 74%,rgba(213,181,143,1) 78%,rgba(221,203,157,1) 83%,rgba(221,203,157,1) 85%,rgba(212,203,174,1) 90%,rgba(212,203,174,1) 100%);
    background: -o-radial-gradient(top, circle cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -o-linear-gradient(bottom,  rgba(131,129,117,1) 0%,rgba(131,129,117,1) 3%,rgba(150,144,130,1) 5%,rgba(150,144,130,1) 9%,rgba(190,177,145,1) 20%,rgba(190,177,145,1) 32%,rgba(202,176,153,1) 35%,rgba(202,176,153,1) 47%,rgba(205,186,156,1) 48%,rgba(205,186,156,1) 49%,rgba(211,184,157,1) 51%,rgba(211,184,157,1) 59%,rgba(218,188,162,1) 61%,rgba(218,188,162,1) 63%,rgba(208,180,158,1) 64%,rgba(208,180,158,1) 68%,rgba(213,181,143,1) 74%,rgba(213,181,143,1) 78%,rgba(221,203,157,1) 83%,rgba(221,203,157,1) 85%,rgba(212,203,174,1) 90%,rgba(212,203,174,1) 100%);
    background: -webkit-radial-gradient(top, circle, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), -webkit-radial-gradient(center, ellipse, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -webkit-gradient(linear,  left bottom, left top,  from(rgba(131,129,117,1)),color-stop(3%, rgba(131,129,117,1)),color-stop(5%, rgba(150,144,130,1)),color-stop(9%, rgba(150,144,130,1)),color-stop(20%, rgba(190,177,145,1)),color-stop(32%, rgba(190,177,145,1)),color-stop(35%, rgba(202,176,153,1)),color-stop(47%, rgba(202,176,153,1)),color-stop(48%, rgba(205,186,156,1)),color-stop(49%, rgba(205,186,156,1)),color-stop(51%, rgba(211,184,157,1)),color-stop(59%, rgba(211,184,157,1)),color-stop(61%, rgba(218,188,162,1)),color-stop(63%, rgba(218,188,162,1)),color-stop(64%, rgba(208,180,158,1)),color-stop(68%, rgba(208,180,158,1)),color-stop(74%, rgba(213,181,143,1)),color-stop(78%, rgba(213,181,143,1)),color-stop(83%, rgba(221,203,157,1)),color-stop(85%, rgba(221,203,157,1)),color-stop(90%, rgba(212,203,174,1)),to(rgba(212,203,174,1)));
    background: -moz-radial-gradient(top, circle, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), -moz-radial-gradient(center, ellipse, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -webkit-gradient(linear,  left bottom, left top,  from(rgba(131,129,117,1)),color-stop(3%, rgba(131,129,117,1)),color-stop(5%, rgba(150,144,130,1)),color-stop(9%, rgba(150,144,130,1)),color-stop(20%, rgba(190,177,145,1)),color-stop(32%, rgba(190,177,145,1)),color-stop(35%, rgba(202,176,153,1)),color-stop(47%, rgba(202,176,153,1)),color-stop(48%, rgba(205,186,156,1)),color-stop(49%, rgba(205,186,156,1)),color-stop(51%, rgba(211,184,157,1)),color-stop(59%, rgba(211,184,157,1)),color-stop(61%, rgba(218,188,162,1)),color-stop(63%, rgba(218,188,162,1)),color-stop(64%, rgba(208,180,158,1)),color-stop(68%, rgba(208,180,158,1)),color-stop(74%, rgba(213,181,143,1)),color-stop(78%, rgba(213,181,143,1)),color-stop(83%, rgba(221,203,157,1)),color-stop(85%, rgba(221,203,157,1)),color-stop(90%, rgba(212,203,174,1)),to(rgba(212,203,174,1)));
    background: -o-radial-gradient(top, circle, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), -o-radial-gradient(center, ellipse, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -webkit-gradient(linear,  left bottom, left top,  from(rgba(131,129,117,1)),color-stop(3%, rgba(131,129,117,1)),color-stop(5%, rgba(150,144,130,1)),color-stop(9%, rgba(150,144,130,1)),color-stop(20%, rgba(190,177,145,1)),color-stop(32%, rgba(190,177,145,1)),color-stop(35%, rgba(202,176,153,1)),color-stop(47%, rgba(202,176,153,1)),color-stop(48%, rgba(205,186,156,1)),color-stop(49%, rgba(205,186,156,1)),color-stop(51%, rgba(211,184,157,1)),color-stop(59%, rgba(211,184,157,1)),color-stop(61%, rgba(218,188,162,1)),color-stop(63%, rgba(218,188,162,1)),color-stop(64%, rgba(208,180,158,1)),color-stop(68%, rgba(208,180,158,1)),color-stop(74%, rgba(213,181,143,1)),color-stop(78%, rgba(213,181,143,1)),color-stop(83%, rgba(221,203,157,1)),color-stop(85%, rgba(221,203,157,1)),color-stop(90%, rgba(212,203,174,1)),to(rgba(212,203,174,1)));
    background: radial-gradient(circle at top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -webkit-gradient(linear,  left bottom, left top,  from(rgba(131,129,117,1)),color-stop(3%, rgba(131,129,117,1)),color-stop(5%, rgba(150,144,130,1)),color-stop(9%, rgba(150,144,130,1)),color-stop(20%, rgba(190,177,145,1)),color-stop(32%, rgba(190,177,145,1)),color-stop(35%, rgba(202,176,153,1)),color-stop(47%, rgba(202,176,153,1)),color-stop(48%, rgba(205,186,156,1)),color-stop(49%, rgba(205,186,156,1)),color-stop(51%, rgba(211,184,157,1)),color-stop(59%, rgba(211,184,157,1)),color-stop(61%, rgba(218,188,162,1)),color-stop(63%, rgba(218,188,162,1)),color-stop(64%, rgba(208,180,158,1)),color-stop(68%, rgba(208,180,158,1)),color-stop(74%, rgba(213,181,143,1)),color-stop(78%, rgba(213,181,143,1)),color-stop(83%, rgba(221,203,157,1)),color-stop(85%, rgba(221,203,157,1)),color-stop(90%, rgba(212,203,174,1)),to(rgba(212,203,174,1)));
    background: -webkit-radial-gradient(top, circle, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), -webkit-radial-gradient(center, ellipse, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -webkit-linear-gradient(bottom,  rgba(131,129,117,1) 0%,rgba(131,129,117,1) 3%,rgba(150,144,130,1) 5%,rgba(150,144,130,1) 9%,rgba(190,177,145,1) 20%,rgba(190,177,145,1) 32%,rgba(202,176,153,1) 35%,rgba(202,176,153,1) 47%,rgba(205,186,156,1) 48%,rgba(205,186,156,1) 49%,rgba(211,184,157,1) 51%,rgba(211,184,157,1) 59%,rgba(218,188,162,1) 61%,rgba(218,188,162,1) 63%,rgba(208,180,158,1) 64%,rgba(208,180,158,1) 68%,rgba(213,181,143,1) 74%,rgba(213,181,143,1) 78%,rgba(221,203,157,1) 83%,rgba(221,203,157,1) 85%,rgba(212,203,174,1) 90%,rgba(212,203,174,1) 100%);
    background: -moz-radial-gradient(top, circle, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), -moz-radial-gradient(center, ellipse, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -moz-linear-gradient(bottom,  rgba(131,129,117,1) 0%,rgba(131,129,117,1) 3%,rgba(150,144,130,1) 5%,rgba(150,144,130,1) 9%,rgba(190,177,145,1) 20%,rgba(190,177,145,1) 32%,rgba(202,176,153,1) 35%,rgba(202,176,153,1) 47%,rgba(205,186,156,1) 48%,rgba(205,186,156,1) 49%,rgba(211,184,157,1) 51%,rgba(211,184,157,1) 59%,rgba(218,188,162,1) 61%,rgba(218,188,162,1) 63%,rgba(208,180,158,1) 64%,rgba(208,180,158,1) 68%,rgba(213,181,143,1) 74%,rgba(213,181,143,1) 78%,rgba(221,203,157,1) 83%,rgba(221,203,157,1) 85%,rgba(212,203,174,1) 90%,rgba(212,203,174,1) 100%);
    background: -o-radial-gradient(top, circle, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), -o-radial-gradient(center, ellipse, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), -o-linear-gradient(bottom,  rgba(131,129,117,1) 0%,rgba(131,129,117,1) 3%,rgba(150,144,130,1) 5%,rgba(150,144,130,1) 9%,rgba(190,177,145,1) 20%,rgba(190,177,145,1) 32%,rgba(202,176,153,1) 35%,rgba(202,176,153,1) 47%,rgba(205,186,156,1) 48%,rgba(205,186,156,1) 49%,rgba(211,184,157,1) 51%,rgba(211,184,157,1) 59%,rgba(218,188,162,1) 61%,rgba(218,188,162,1) 63%,rgba(208,180,158,1) 64%,rgba(208,180,158,1) 68%,rgba(213,181,143,1) 74%,rgba(213,181,143,1) 78%,rgba(221,203,157,1) 83%,rgba(221,203,157,1) 85%,rgba(212,203,174,1) 90%,rgba(212,203,174,1) 100%);
    background: radial-gradient(circle at top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%), radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), linear-gradient(to top,  rgba(131,129,117,1) 0%,rgba(131,129,117,1) 3%,rgba(150,144,130,1) 5%,rgba(150,144,130,1) 9%,rgba(190,177,145,1) 20%,rgba(190,177,145,1) 32%,rgba(202,176,153,1) 35%,rgba(202,176,153,1) 47%,rgba(205,186,156,1) 48%,rgba(205,186,156,1) 49%,rgba(211,184,157,1) 51%,rgba(211,184,157,1) 59%,rgba(218,188,162,1) 61%,rgba(218,188,162,1) 63%,rgba(208,180,158,1) 64%,rgba(208,180,158,1) 68%,rgba(213,181,143,1) 74%,rgba(213,181,143,1) 78%,rgba(221,203,157,1) 83%,rgba(221,203,157,1) 85%,rgba(212,203,174,1) 90%,rgba(212,203,174,1) 100%);
}

.animation-outline-border {
    -webkit-animation: animationOutline 5s linear infinite;
       -moz-animation: animationOutline 5s linear infinite;
         -o-animation: animationOutline 5s linear infinite;
            animation: animationOutline 5s linear infinite;
    outline-style: solid;
    outline-color: red;
}

.dark-mode-background {
    background: url("../imgs/space-dark-small.webp") no-repeat center center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -3;

    display: none;
}
.dark-mode-background:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0.3;
}

.stars-gif {
    position: fixed;
    top: 0;
    background: url("../imgs/stargif.gif") no-repeat center center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    -webkit-filter: brightness(2);
            filter: brightness(2);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    filter: invert(1);
    -webkit-filter: invert(1);
}



.thought-bubble {
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    background-color:#fff;
    padding:20px;
    -webkit-border-radius:30px;
       -moz-border-radius:30px;
            border-radius:30px;
    min-width:40px;
    max-width:220px;
    min-height:40px;
    margin:20px;
    position:relative;
    -webkit-box-align:center;
    -webkit-align-items:center;
       -moz-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
       -moz-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    text-align:center;
  }
  .thought-bubble:before,
  .thought-bubble:after {
    content:"";
    background-color:#fff;
    -webkit-border-radius:50%;
       -moz-border-radius:50%;
            border-radius:50%;
    display:block;
    position:absolute;
    z-index:-1;
  }
  .thought-bubble:before {
    width:44px;
    height:44px;
    top:-12px;
    left:28px;
    -webkit-box-shadow:-50px 30px 0 -12px #fff;
       -moz-box-shadow:-50px 30px 0 -12px #fff;
            box-shadow:-50px 30px 0 -12px #fff;
  }
  .thought-bubble:after {
    bottom:-10px;
    right:26px;
    width:30px;
    height:30px;
    -webkit-box-shadow:40px -34px 0 0 #fff,
               -28px -6px 0 -2px #fff,
               -24px 17px 0 -6px #fff,
               -5px 25px 0 -10px #fff;
       -moz-box-shadow:40px -34px 0 0 #fff,
               -28px -6px 0 -2px #fff,
               -24px 17px 0 -6px #fff,
               -5px 25px 0 -10px #fff;
            box-shadow:40px -34px 0 0 #fff,
               -28px -6px 0 -2px #fff,
               -24px 17px 0 -6px #fff,
               -5px 25px 0 -10px #fff;
    
  }

.text-bubble.hidden {
    display: none;
}
.text-bubble {
    padding: 10px;
    background-color: var(--light-green);
    -webkit-border-radius: 10%;
       -moz-border-radius: 10%;
            border-radius: 10%;
    color: black;
    font-weight: 900;
    position: absolute;
    left: 53%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.text-bubble .left-point {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 35px solid var(--light-green);
    position: absolute;
    top: 5%;
    left: -14%;
    -webkit-transform: rotate(59deg);
       -moz-transform: rotate(59deg);
        -ms-transform: rotate(59deg);
         -o-transform: rotate(59deg);
            transform: rotate(59deg);
}
.text-bubble .right-point{
	width: 0;
	height: 0;
	border-left: 2vh solid transparent;
	border-right: 2vh solid transparent;
	border-top: 10vh solid blue;
	position: absolute;
	top: 45%;
	right: -10%;
	-webkit-transform: rotate(-60deg);
	   -moz-transform: rotate(-60deg);
	    -ms-transform: rotate(-60deg);
	     -o-transform: rotate(-60deg);
	        transform: rotate(-60deg);
}


/* <div class="star-field">
    <div class="layer"></div>    
    <div class="layer"></div>
    <div class="layer"></div>
</div> */
/* .star-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    perspective: 600px;
    -webkit-perspective: 600px;
    z-index: -1;

    filter: invert(1);
    -webkit-filter: invert(1);
}
.star-field .layer {
    box-shadow: -411px -476px #cccccc, 777px -407px #d4d4d4, -387px -477px #fcfcfc, -91px -235px #d4d4d4, 491px -460px #f7f7f7, 892px -128px #f7f7f7, 758px -277px #ededed, 596px 378px #cccccc, 647px 423px whitesmoke, 183px 389px #c7c7c7,
        524px -237px #f0f0f0, 679px -535px #e3e3e3, 158px 399px #ededed, 157px 249px #ededed, 81px -450px #ebebeb, 719px -360px #c2c2c2, -499px 473px #e8e8e8, -158px -349px #d4d4d4, 870px -134px #cfcfcf, 446px 404px #c2c2c2,
        440px 490px #d4d4d4, 414px 507px #e6e6e6, -12px 246px #fcfcfc, -384px 369px #e3e3e3, 641px -413px #fcfcfc, 822px 516px #dbdbdb, 449px 132px #c2c2c2, 727px 146px #f7f7f7, -315px -488px #e6e6e6, 952px -70px #e3e3e3,
        -869px -29px #dbdbdb, 502px 80px #dedede, 764px 342px #e0e0e0, -150px -380px #dbdbdb, 654px -426px #e3e3e3, -325px -263px #c2c2c2, 755px -447px #c7c7c7, 729px -177px #c2c2c2, -682px -391px #e6e6e6, 554px -176px #ededed,
        -85px -428px #d9d9d9, 714px 55px #e8e8e8, 359px -285px #cfcfcf, -362px -508px #dedede, 468px -265px #fcfcfc, 74px -500px #c7c7c7, -514px 383px #dbdbdb, 730px -92px #cfcfcf, -112px 287px #c9c9c9, -853px 79px #d6d6d6,
        828px 475px #d6d6d6, -681px 13px #fafafa, -176px 209px #f0f0f0, 758px 457px #fafafa, -383px -454px #ededed, 813px 179px #d1d1d1, 608px 98px whitesmoke, -860px -65px #c4c4c4, -572px 272px #f7f7f7, 459px 533px #fcfcfc,
        624px -481px #e6e6e6, 790px 477px #dedede, 731px -403px #ededed, 70px -534px #cccccc, -23px 510px #cfcfcf, -652px -237px whitesmoke, -690px 367px #d1d1d1, 810px 536px #d1d1d1, 774px 293px #c9c9c9, -362px 97px #c2c2c2,
        563px 47px #dedede, 313px 475px #e0e0e0, 839px -491px #e3e3e3, -217px 377px #d4d4d4, -581px 239px #c2c2c2, -857px 72px #cccccc, -23px 340px #dedede, -837px 246px white, 170px -502px #cfcfcf, 822px -443px #e0e0e0, 795px 497px #e0e0e0,
        -814px -337px #cfcfcf, 206px -339px #f2f2f2, -779px 108px #e6e6e6, 808px 2px #d4d4d4, 665px 41px #d4d4d4, -564px 64px #cccccc, -380px 74px #cfcfcf, -369px -60px #f7f7f7, 47px -495px #e3e3e3, -383px 368px #f7f7f7, 419px 288px #d1d1d1,
        -598px -50px #c2c2c2, -833px 187px #c4c4c4, 378px 325px whitesmoke, -703px 375px #d6d6d6, 392px 520px #d9d9d9, -492px -60px #c4c4c4, 759px 288px #ebebeb, 98px -412px #c4c4c4, -911px -277px #c9c9c9;
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4px;
    width: 4px;
    border-radius: 2px;
}
.star-field .layer:nth-child(1) {
    animation: sf-fly-by-1 5s linear infinite;
    -webkit-animation: sf-fly-by-1 5s linear infinite;
}
.star-field .layer:nth-child(2) {
    animation: sf-fly-by-2 5s linear infinite;
    -webkit-animation: sf-fly-by-2 5s linear infinite;
} */
/* .star-field .layer:nth-child(3) { display: none;;
    animation: sf-fly-by-3 5s linear infinite;
    -webkit-animation: sf-fly-by-3 5s linear infinite;
} */

/* End Background: */

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.arrow.right {
    -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
         transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
  
.arrow.left {
    -moz-transform: rotate(135deg);
     -ms-transform: rotate(135deg);
      -o-transform: rotate(135deg);
         transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
  
.arrow.up {
    -moz-transform: rotate(-135deg);
     -ms-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
         transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
  
.arrow.down {
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
         transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

input:not([type="range"]),
textarea,
.button,
select {
    border: 2px solid black;
    font-size: 1rem;
    padding: 7px;

    -webkit-border-radius: 5px;

       -moz-border-radius: 5px;

            border-radius: 5px;

    background: var(--white-with-opacity);
    font-weight: bolder;
}

.button,
input[type="button"] {
    background: var(--light-green);
    cursor: pointer;
    color: black;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.popup.profile .button.logout {
    background: #f721193b !important;
    color: #F72119 !important;
    border-color: #F72119 !important;
}

.logo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;

    padding-top: 4vh;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-box-align: center;

    -webkit-align-items: center;

       -moz-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}

.logo img {
    height: 4.5rem;
    width: auto;
    -webkit-transform: rotate(355deg);
       -moz-transform: rotate(355deg);
        -ms-transform: rotate(355deg);
         -o-transform: rotate(355deg);
            transform: rotate(355deg);
}

.logo p:not(.ads) {
    font-weight: bolder;
    font-size: 1.3rem;
    margin: 0;

    word-spacing: 50000px;

    width: 10rem;
}

.logo p:not(.ads).extra-info-alpha {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    color: red;
    text-shadow: 0 0 5px red;
    font-size: 25px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    position: absolute;
    top: 30px;
    left: 140px;
}

.alpha-version-text {
    width: -webkit-calc(100vw - 220px - 65px);
    width: -moz-calc(100vw - 220px - 65px);
    width: calc(100vw - 220px - 65px);
    position: absolute;
    left: 220px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0px;
    font-size: 13px;
    background: var(--white-with-opacity);

    -webkit-animation: alpha-extra-text-top-down 2s forwards;
    -moz-animation: alpha-extra-text-top-down 2s forwards;
      -o-animation: alpha-extra-text-top-down 2s forwards;
         animation: alpha-extra-text-top-down 2s forwards;
    top: 100vh;
}

.index {
    width: 100%;
    height: 100vh;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;

    cursor: pointer;
}

.index > p {
    -moz-animation: fontbulger 5s infinite alternate;
      -o-animation: fontbulger 5s infinite alternate;
         animation: fontbulger 5s infinite alternate;
    -webkit-animation: fontbulger 5s infinite alternate;
    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
         -o-animation-timing-function: linear;
            animation-timing-function: linear;
    font-weight: bolder;
}

.index-animation-card {
    position: absolute;
    top: -webkit-calc(50% - 50px);
    top: -moz-calc(50% - 50px);
    top: calc(50% - 50px);
    z-index: -1;
    left: -100px;
    top: -100px;
}

.index-animation-card.c1 {
    -webkit-animation: moveX 10s linear 0s infinite alternate, moveY 20s linear 0s infinite alternate, rotating 35s linear infinite alternate;
    -moz-animation: moveX 10s linear 0s infinite alternate, moveY 20s linear 0s infinite alternate, rotating 35s linear infinite alternate;
    -o-animation: moveX 10s linear 0s infinite alternate, moveY 20s linear 0s infinite alternate, rotating 35s linear infinite alternate;
    animation: moveX 10s linear 0s infinite alternate, moveY 20s linear 0s infinite alternate, rotating 35s linear infinite alternate;
    -webkit-animation-delay: 0.5s;
       -moz-animation-delay: 0.5s;
         -o-animation-delay: 0.5s;
            animation-delay: 0.5s;
}
.index-animation-card.c2 {
    -webkit-animation: moveX 16s linear 0s infinite alternate, moveY 9s linear 0s infinite alternate, rotating 25s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -moz-animation: moveX 16s linear 0s infinite alternate, moveY 9s linear 0s infinite alternate, rotating 25s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -o-animation: moveX 16s linear 0s infinite alternate, moveY 9s linear 0s infinite alternate, rotating 25s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    animation: moveX 16s linear 0s infinite alternate, moveY 9s linear 0s infinite alternate, rotating 25s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -webkit-animation-delay: 1s;
       -moz-animation-delay: 1s;
         -o-animation-delay: 1s;
            animation-delay: 1s;
}
.index-animation-card.c3 {
    -webkit-animation: moveX 13s linear 0s infinite alternate, moveY 23s linear 0s infinite alternate, rotating 45s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -moz-animation: moveX 13s linear 0s infinite alternate, moveY 23s linear 0s infinite alternate, rotating 45s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -o-animation: moveX 13s linear 0s infinite alternate, moveY 23s linear 0s infinite alternate, rotating 45s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    animation: moveX 13s linear 0s infinite alternate, moveY 23s linear 0s infinite alternate, rotating 45s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -webkit-animation-delay: 1.5s;
       -moz-animation-delay: 1.5s;
         -o-animation-delay: 1.5s;
            animation-delay: 1.5s;
}
.index-animation-card.c4 {
    -webkit-animation: moveX 11s linear 0s infinite alternate, moveY 14s linear 0s infinite alternate, rotating 45s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -moz-animation: moveX 11s linear 0s infinite alternate, moveY 14s linear 0s infinite alternate, rotating 45s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -o-animation: moveX 11s linear 0s infinite alternate, moveY 14s linear 0s infinite alternate, rotating 45s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    animation: moveX 11s linear 0s infinite alternate, moveY 14s linear 0s infinite alternate, rotating 45s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
    -webkit-animation-delay: 2s;
       -moz-animation-delay: 2s;
         -o-animation-delay: 2s;
            animation-delay: 2s;
}

.index-animation-rocket img {
    width: 100px;
    height: auto;
}


.index .logo {
    position: absolute;
    -webkit-animation: logo-from-bottom 2s forwards 0.5s;
    -moz-animation: logo-from-bottom 2s forwards 0.5s;
      -o-animation: logo-from-bottom 2s forwards 0.5s;
         animation: logo-from-bottom 2s forwards 0.5s;

    top: 100vh;
}


.index p {
    margin: auto;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin: 6px 0;
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: var(--light-green)
}
  
.checkmark.error {
    outline: 3px solid red;
}

  /* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
/* background-color: var(--light-green-with-opacity); */
}
  
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 7px;
    top: 3px;
    width: 8px;
    height: 13px;
    border: solid black;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
         transform: rotate(45deg);
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: black;
    border: 1px solid var(--light-green);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    padding: 10px 20px;
    z-index: 9999;

    max-height: 98vh;
    overflow-y: auto;
    width: 310px;

    color: white !important;
}
.popup.show {
    display: block;
}

.popup .close {
    position: absolute;
    right: 15px;
    color: var(--light-green);
    font-size: 23px;
    font-weight: bolder;

    cursor: pointer;
}

.popup input[type=text],
.popup input[type=email],
 .popup input[type=password] {
    display: block;
    margin: 8px 0;
    padding: 5px;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.popup button {
    width: 100%;
    cursor: pointer;
}

.popup h2 {
    margin: 0;
}

.popup .switchForm-button {
    color: var(--light-green);
    border: 1px solid;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    padding: 0px 5px;

    cursor: pointer;
}

.popup .formLoginRegister .switchForm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;

    margin: 0;
    margin-top: 25px;
    line-height: 30.5px;

    font-size: 14px;
    font-weight: bolder;
}
.popup .formLoginRegister .switchForm p {
    margin: 0;
    white-space: nowrap;
}

.popup.modal-center {
    text-align: center;
}

.popup input[type="button"].cancel {
    background: red !important;
}


.password-restrictions {
    display: none;
    position: absolute;
    top: 20px;

    background: var(--light-green);
    padding: 5px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    width: 90%;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    gap: 3px;
  }

  .password-restrictions.show {
    display: block;
  }
  
  .restriction {
    color: var(--light-green-opposite);
    font-size: 13px;
    line-height: 13px;
    font-weight: bolder;
  }
  
  .restriction.valid {
    color: black;
  }
  
  #password-strength {
    margin-top: 5px;
    height: 10px;
    min-width: 1%;
    width: 1%;
    background-color: #f00;
    -webkit-transition: width 0.5s ease;
    -o-transition: width 0.5s ease;
    -moz-transition: width 0.5s ease;
    transition: width 0.5s ease;
  }
  
  #password-strength.valid {
    background-color: black;
  }

  


  .input-wrapper {
    position: relative;
  }
  
  .toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
  
  .toggle-password:focus {
    outline: none;
  }
  
  #password-hint {
    font-size: 12px;
    margin-top: 5px;
    color: gray;
  }
  

.popup.profile {
    left: unset;
    top: 60px;
    -webkit-transform: unset;
       -moz-transform: unset;
        -ms-transform: unset;
         -o-transform: unset;
            transform: unset;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    -moz-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
    display: block;
    border: none;
    padding: 0;
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
}
.popup.profile .content {
    border: 1px solid var(--light-green);
    padding: 10px 20px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

.popup.profile .welcome-username {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    
    -webkit-box-align: center;
    
    -webkit-align-items: center;
    
       -moz-box-align: center;
    
        -ms-flex-align: center;
    
            align-items: center;
    gap: 5px;
}

.popup.profile .welcome-username p {
    margin: 0;
    overflow-wrap: anywhere;
}
.popup.profile.show {
    max-height: 200px;
}
  

.deck {
    height: 100%;
    width: 100%;
    -webkit-border-radius: 0.5rem;
       -moz-border-radius: 0.5rem;
            border-radius: 0.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: -webkit-calc(0.35 * var(--card-height));
    font-size: -moz-calc(0.35 * var(--card-height));
    font-size: calc(0.35 * var(--card-height));
    color: white;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.computer-deck {
    background-color: green;
}

.player-deck {
    background-color: blue;
}

.drawing-deck {
    background-color: black;
    cursor: pointer;
    height: var(--card-height);
    z-index: 5;
}

.under-board {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /* gap: var(--card-width); */

    -webkit-justify-content: space-around;

        -ms-flex-pack: distribute;

            justify-content: space-around;
    width: 100%;
    max-width: -webkit-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    max-width: -moz-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    max-width: calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
}



.info-process-bar.process-bar.green.hidden,
.info-process-bar:has( .process-bar.purple) .process-bar.green { /* fixed */
    display: none;
}

.info-process-bar.process-bar.green,
.info-process-bar:has( .process-bar.purple.hidden) .process-bar.green { /* fixed */
    display: block;
}

.drawing-cards {
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-grid-columns: var(--card-width) 3px var(--card-width) 3px var(--card-width) 3px var(--card-width);
    grid-template-columns: repeat(4, var(--card-width));
    gap: 3px;
}

.info-points {
    background: grey;
    min-width: -webkit-calc(2 * var(--card-width));
    min-width: -moz-calc(2 * var(--card-width));
    min-width: calc(2 * var(--card-width));
    max-width: -webkit-calc(2 * var(--card-width));
    max-width: -moz-calc(2 * var(--card-width));
    max-width: calc(2 * var(--card-width));
    color: white;
    font-weight: bolder;
    -webkit-border-radius: 11px;
       -moz-border-radius: 11px;
            border-radius: 11px;
    text-align: center;
    /* background-image: linear-gradient(30deg, rgb(135, 136, 160) 12%, transparent 12.5%, transparent 87%, rgb(135, 136, 160) 87.5%, rgb(135, 136, 160)), linear-gradient(150deg, rgb(135, 136, 160) 12%, transparent 12.5%, transparent 87%, rgb(135, 136, 160) 87.5%, rgb(135, 136, 160)), linear-gradient(30deg, rgb(135, 136, 160) 12%, transparent 12.5%, transparent 87%, rgb(135, 136, 160) 87.5%, rgb(135, 136, 160)), linear-gradient(150deg, rgb(135, 136, 160) 12%, transparent 12.5%, transparent 87%, rgb(135, 136, 160) 87.5%, rgb(135, 136, 160)), linear-gradient(60deg, rgba(135, 136, 160, 0.467) 25%, transparent 25.5%, transparent 75%, rgba(135, 136, 160, 0.467) 75%, rgba(135, 136, 160, 0.467)), linear-gradient(60deg, rgba(135, 136, 160, 0.467) 25%, transparent 25.5%, transparent 75%, rgba(135, 136, 160, 0.467) 75%, rgba(135, 136, 160, 0.467));
    background-size: 12px 21px;
    background-position: 0px 0px, 0px 0px, 6px 11px, 6px 11px, 0px 0px, 6px 11px; */

    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);

    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);

    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);

    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    height: var(--card-height);
}

.info-points .points-box {
    height: 100%;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}

.info-points .points-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: -webkit-calc(0.05* var(--card-height));
    gap: -moz-calc(0.05* var(--card-height));
    gap: calc(0.05* var(--card-height));
    padding: 3px;
}
.info-points .points-box .lobby-code-flow-level {
    margin-bottom: -2px;
}

.info-points .points-box p,
.info-points .mini-scoreboard p {
    margin: 0;
    font-size: -webkit-calc(0.22 * var(--card-width));
    font-size: -moz-calc(0.22 * var(--card-width));
    font-size: calc(0.22 * var(--card-width));
}
.info-points .points-box p.text {
    margin-top: 4px;
}
.info-points .points-box p.points-flow-level {
    font-size: -webkit-calc(0.12* var(--card-width));
    font-size: -moz-calc(0.12* var(--card-width));
    font-size: calc(0.12* var(--card-width));
    height: -webkit-calc(0.12* var(--card-width));
    height: -moz-calc(0.12* var(--card-width));
    height: calc(0.12* var(--card-width));
}
.info-points p {
    text-shadow: -2px 2px 0 #000, 2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
}
.info-points p#points-of-this-round {
    font-size: -webkit-calc(0.15* var(--card-width));
    font-size: -moz-calc(0.15* var(--card-width));
    font-size: calc(0.15* var(--card-width));
}

.info-points .mini-scoreboard {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    height: var(--card-height);
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;

    cursor: pointer;
}
.info-points .mini-scoreboard p.click-me {
    -webkit-animation: blink 1s infinite linear;
       -moz-animation: blink 1s infinite linear;
         -o-animation: blink 1s infinite linear;
            animation: blink 1s infinite linear;
}

.info-points .mini-scoreboard .rank-player-points {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    

    padding: 0 3px;
    width: 100%;
}


.multiplayer-game .info-points .mini-scoreboard p {
    text-shadow: unset;
}

.info-points .mini-scoreboard .rank-player {
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
       -moz-box-flex: 3;
        -ms-flex-positive: 3;
            flex-grow: 3;

    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;

    text-align: left;
}

.info-points .mini-scoreboard .rank-player-points.me {
    background: var(--light-green);
}

.info-points .mini-scoreboard .rank-player-points.me .rank-player,
.info-points .mini-scoreboard .rank-player-points.me .under-rank-points {
    color: black;
    text-shadow: unset;
}

.info-points .mini-scoreboard .rank-player-points .under-rank-points {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
       -moz-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;

    font-size: 8px;
    font-weight: 200;
    text-align: right;
}

.info-points .mini-scoreboard .rank-player-points:first-child {
    -webkit-border-top-left-radius: 11px;
       -moz-border-radius-topleft: 11px;
            border-top-left-radius: 11px;
    -webkit-border-top-right-radius: 11px;
       -moz-border-radius-topright: 11px;
            border-top-right-radius: 11px;
}
.info-points .mini-scoreboard .rank-player-points:last-child {
    -webkit-border-bottom-left-radius: 11px;
       -moz-border-radius-bottomleft: 11px;
            border-bottom-left-radius: 11px;
    -webkit-border-bottom-right-radius: 11px;
       -moz-border-radius-bottomright: 11px;
            border-bottom-right-radius: 11px;
}

.info-points .mini-scoreboard .rank-player-points:not(:last-child) {
    border-bottom: 1px solid black;
}



.bolder {
    font-weight: bolder;
}

.open-card {
    background-color: #4d4d4d;;
}

.open-card button.card {
    display: none;
}
.open-card button.card:last-child {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.confetti .animated-text,
.game-over .animated-text {
    -ms-grid-column-span: 2;
    grid-column: span 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.card {
         background: white;
         position: relative;
         height: 100%;
         width: 100%;
         border: 2.5px solid black;
         -webkit-border-radius: 0.5rem;
         -moz-border-radius: 0.5rem;
         border-radius: 0.5rem;
         display: -webkit-box;
         display: -webkit-flex;
         display: -moz-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: end;
         -webkit-justify-content: flex-end;
         -moz-box-pack: end;
         -ms-flex-pack: end;
         justify-content: flex-end;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -webkit-flex-direction: column;
         -moz-box-orient: vertical;
         -moz-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-align: center;
         -webkit-align-items: center;
         -moz-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         font-weight: bolder;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
         font-family: sans-serif;     
         
         overflow: hidden;
}

.board-cards .card.fly-in:nth-child(1) {
    -moz-animation: cards-fly-in1 1s;
      -o-animation: cards-fly-in1 1s;
         animation: cards-fly-in1 1s;
    -webkit-animation: cards-fly-in1 1s;
}
.board-cards .card.fly-in:nth-child(2) {
    -moz-animation: cards-fly-in2 1s;
      -o-animation: cards-fly-in2 1s;
         animation: cards-fly-in2 1s;
    -webkit-animation: cards-fly-in2 1s;
}
.board-cards .card.fly-in:nth-child(3) {
    -moz-animation: cards-fly-in3 1s;
      -o-animation: cards-fly-in3 1s;
         animation: cards-fly-in3 1s;
    -webkit-animation: cards-fly-in3 1s;
}
.board-cards .card.fly-in:nth-child(4) {
    -moz-animation: cards-fly-in4 1s;
      -o-animation: cards-fly-in4 1s;
         animation: cards-fly-in4 1s;
    -webkit-animation: cards-fly-in4 1s;
}
.board-cards .card.fly-in:nth-child(5) {
    -moz-animation: cards-fly-in5 1s;
      -o-animation: cards-fly-in5 1s;
         animation: cards-fly-in5 1s;
    -webkit-animation: cards-fly-in5 1s;
}
.board-cards .card.fly-in:nth-child(6) {
    -moz-animation: cards-fly-in6 1s;
      -o-animation: cards-fly-in6 1s;
         animation: cards-fly-in6 1s;
    -webkit-animation: cards-fly-in6 1s;
}
.board-cards .card.fly-in:nth-child(7) {
    -moz-animation: cards-fly-in7 1s;
      -o-animation: cards-fly-in7 1s;
         animation: cards-fly-in7 1s;
    -webkit-animation: cards-fly-in7 1s;
}
.board-cards .card.fly-in:nth-child(8) {
    -moz-animation: cards-fly-in8 1s;
      -o-animation: cards-fly-in8 1s;
         animation: cards-fly-in8 1s;
    -webkit-animation: cards-fly-in8 1s;
}
.board-cards .card.fly-in:nth-child(9) {
    -moz-animation: cards-fly-in9 1s;
      -o-animation: cards-fly-in9 1s;
         animation: cards-fly-in9 1s;
    -webkit-animation: cards-fly-in9 1s;
}
.board-cards .card.fly-in:nth-child(10) {
    -moz-animation: cards-fly-in10 1s;
      -o-animation: cards-fly-in10 1s;
         animation: cards-fly-in10 1s;
    -webkit-animation: cards-fly-in10 1s;
}
.board-cards .card.fly-in:nth-child(11) {
    -moz-animation: cards-fly-in11 1s;
      -o-animation: cards-fly-in11 1s;
         animation: cards-fly-in11 1s;
    -webkit-animation: cards-fly-in11 1s;
}
.board-cards .card.fly-in:nth-child(12) {
    -moz-animation: cards-fly-in12 1s;
      -o-animation: cards-fly-in12 1s;
         animation: cards-fly-in12 1s;
    -webkit-animation: cards-fly-in12 1s;
}
.board-cards .card.fly-in:nth-child(13) {
    -moz-animation: cards-fly-in13 1s;
      -o-animation: cards-fly-in13 1s;
         animation: cards-fly-in13 1s;
    -webkit-animation: cards-fly-in13 1s;
}
.board-cards .card.fly-in:nth-child(14) {
    -moz-animation: cards-fly-in14 1s;
      -o-animation: cards-fly-in14 1s;
         animation: cards-fly-in14 1s;
    -webkit-animation: cards-fly-in14 1s;
}
.board-cards .card.fly-in:nth-child(15) {
    -moz-animation: cards-fly-in15 1s;
      -o-animation: cards-fly-in15 1s;
         animation: cards-fly-in15 1s;
    -webkit-animation: cards-fly-in15 1s;
}
.board-cards .card.fly-in:nth-child(16) {
    -moz-animation: cards-fly-in16 1s;
      -o-animation: cards-fly-in16 1s;
         animation: cards-fly-in16 1s;
    -webkit-animation: cards-fly-in16 1s;
}
.board-cards .card.fly-in:nth-child(17) {
    -moz-animation: cards-fly-in17 1s;
      -o-animation: cards-fly-in17 1s;
         animation: cards-fly-in17 1s;
    -webkit-animation: cards-fly-in17 1s;
}
.board-cards .card.fly-in:nth-child(18) {
    -moz-animation: cards-fly-in18 1s;
      -o-animation: cards-fly-in18 1s;
         animation: cards-fly-in18 1s;
    -webkit-animation: cards-fly-in18 1s;
}
.board-cards .card.fly-in:nth-child(19) {
    -moz-animation: cards-fly-in19 1s;
      -o-animation: cards-fly-in19 1s;
         animation: cards-fly-in19 1s;
    -webkit-animation: cards-fly-in19 1s;
}
.board-cards .card.fly-in:nth-child(20) {
    -moz-animation: cards-fly-in20 1s;
      -o-animation: cards-fly-in20 1s;
         animation: cards-fly-in20 1s;
    -webkit-animation: cards-fly-in20 1s;
}
.board-cards .card.fly-in:nth-child(21) {
    -moz-animation: cards-fly-in21 1s;
      -o-animation: cards-fly-in21 1s;
         animation: cards-fly-in21 1s;
    -webkit-animation: cards-fly-in21 1s;
}
.board-cards .card.fly-in:nth-child(22) {
    -moz-animation: cards-fly-in22 1s;
      -o-animation: cards-fly-in22 1s;
         animation: cards-fly-in22 1s;
    -webkit-animation: cards-fly-in22 1s;
}
.board-cards .card.fly-in:nth-child(23) {
    -moz-animation: cards-fly-in23 1s;
      -o-animation: cards-fly-in23 1s;
         animation: cards-fly-in23 1s;
    -webkit-animation: cards-fly-in23 1s;
}
.board-cards .card.fly-in:nth-child(24) {
    -moz-animation: cards-fly-in24 1s;
      -o-animation: cards-fly-in24 1s;
         animation: cards-fly-in24 1s;
    -webkit-animation: cards-fly-in24 1s;
}
.board-cards .card.fly-in:nth-child(25) {
    -moz-animation: cards-fly-in25 1s;
      -o-animation: cards-fly-in25 1s;
         animation: cards-fly-in25 1s;
    -webkit-animation: cards-fly-in25 1s;
}
.board-cards .card.fly-in:nth-child(26) {
    -moz-animation: cards-fly-in26 1s;
      -o-animation: cards-fly-in26 1s;
         animation: cards-fly-in26 1s;
    -webkit-animation: cards-fly-in26 1s;
}
.board-cards .card.fly-in:nth-child(27) {
    -moz-animation: cards-fly-in27 1s;
      -o-animation: cards-fly-in27 1s;
         animation: cards-fly-in27 1s;
    -webkit-animation: cards-fly-in27 1s;
}
.board-cards .card.fly-in:nth-child(28) {
    -moz-animation: cards-fly-in28 1s;
      -o-animation: cards-fly-in28 1s;
         animation: cards-fly-in28 1s;
    -webkit-animation: cards-fly-in28 1s;
}














.board-cards.ingame .card {
    z-index: 2000;
}


.card span {
    font-size: -webkit-calc(0.85 * var(--card-width));
    font-size: -moz-calc(0.85 * var(--card-width));
    font-size: calc(0.85 * var(--card-width));

    margin-bottom: -webkit-calc(0.045 * var(--card-height));
    margin-bottom: -moz-calc(0.045 * var(--card-height));
    margin-bottom: calc(0.045 * var(--card-height));
}

.cards-to-design .card span{
    font-size: -webkit-calc(0.75 * var(--card-height));
    font-size: -moz-calc(0.75 * var(--card-height));
    font-size: calc(0.75 * var(--card-height));
}

.card.red,
body.dark-mode .card.red {
    color: rgb(255, 0, 0) !important;
}

.card.black {
    color: black;
}

.card::before {
    position: absolute;
    content: attr(data-suit) "\20" attr(data-value);
    font-size: 15px;
    color: inherit;

    top: -webkit-calc(0.05 * var(--card-height));
    top: -moz-calc(0.05 * var(--card-height));
    top: calc(0.05 * var(--card-height));
    left: -webkit-calc(0.05 * var(--card-width));
    left: -moz-calc(0.05 * var(--card-width));
    left: calc(0.05 * var(--card-width));
}

.cards-to-design .card::before {
    font-size: 24px;
}

/* .card::after {
    bottom: 0.5rem;
    right: 0.5rem;
    transform: rotate(180deg);
} */

.board-cards > .card {
    position: relative;
    cursor: pointer;
}

.board-cards.closed .card,
.drawing-cards.closed .card,
.card.closed {
    background: white;
    cursor: not-allowed;
}

.board-cards.closed .card span,
.drawing-cards.closed .card span,
.card.closed span:not(.tooltiptext span) {
    display: none;
}

.board-cards.closed .card::after,
.board-cards.closed .card::before,
.drawing-cards.closed .card::after,
.drawing-cards.closed .card::before,
.card.closed::after,
.card.closed::before {
    content: "";
}

.card.half-closed:not(.roundOver), 
.card.black.half-closed:not(.roundOver) {
    color: #00000080 !important;
    cursor: not-allowed;
}

button.card.red.roundOver,
button.card.black.roundOver,
button.card.light-color-black-style-1.roundOver,
button.card.light-color-black-style-2.roundOver,
button.card.light-color-black-style-3.roundOver,
button.card.light-color-black-style-4.roundOver,
button.card.light-color-black-style-5.roundOver,
button.card.light-color-black-style-6.roundOver,
button.card.light-color-black-style-7.roundOver,
button.card.light-color-black-style-8.roundOver,
button.card.light-color-red-style-1.roundOver,
button.card.light-color-red-style-2.roundOver,
button.card.light-color-red-style-3.roundOver,
button.card.light-color-red-style-4.roundOver,
button.card.light-color-red-style-5.roundOver,
button.card.light-color-red-style-6.roundOver,
button.card.light-color-red-style-7.roundOver,
button.card.light-color-red-style-8.roundOver,

body.dark-mode button.card.red.roundOver,
body.dark-mode button.card.black.roundOver,
body.dark-mode button.card.dark-color-black-style-1.roundOver,
body.dark-mode button.card.dark-color-black-style-2.roundOver,
body.dark-mode button.card.dark-color-black-style-3.roundOver,
body.dark-mode button.card.dark-color-black-style-4.roundOver,
body.dark-mode button.card.dark-color-black-style-5.roundOver,
body.dark-mode button.card.dark-color-black-style-6.roundOver,
body.dark-mode button.card.dark-color-black-style-7.roundOver,
body.dark-mode button.card.dark-color-black-style-8.roundOver,
body.dark-mode button.card.dark-color-red-style-1.roundOver,
body.dark-mode button.card.dark-color-red-style-2.roundOver,
body.dark-mode button.card.dark-color-red-style-3.roundOver,
body.dark-mode button.card.dark-color-red-style-4.roundOver,
body.dark-mode button.card.dark-color-red-style-5.roundOver,
body.dark-mode button.card.dark-color-red-style-6.roundOver,
body.dark-mode button.card.dark-color-red-style-7.roundOver,
body.dark-mode button.card.dark-color-red-style-8.roundOver 

{
    color: rgb(128 128 128) !important;
    background: white;
    cursor: not-allowed;
}

.card.hidden {
    visibility: hidden;

    user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    pointer-events: none;
        -ms-touch-action: none;
    touch-action: none;
}
/* .board-cards > .card:nth-child(n+2):nth-child(-n+7) {
    top: 5rem;
}

.board-cards > .card:nth-child(n+8):nth-child(-n+16) {
    top: 9rem;
}

.board-cards > .card:nth-child(n+17):nth-child(-n+28) {
    top: 9rem;
} */

.board {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;

    height: -webkit-calc(2.35 * var(--card-height));
    height: -moz-calc(2.35 * var(--card-height));
    height: calc(2.35 * var(--card-height));

    width: -webkit-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    width: -moz-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    width: calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    /* margin: 20px auto 10px; */
}
.board.auto-margin {
    margin: auto
}

.board .board-cards,
.board .game-over,
.board .confetti,
.board .countdown-big,
.board .leave-dialog,
.board .score-board,
.board .stack-done-rockets,
.board .waiting-for-other-player,
.board .all-stacks-done-big-rocket {
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-column: 1;
        grid-column-start: 1;
}

.board-cards {
    height: -webkit-calc(2.5 * var(--card-height));
    height: -moz-calc(2.5 * var(--card-height));
    height: calc(2.5 * var(--card-height));
    width: 100%;
}


.all-stacks-done-big-rocket .big-rocket {
    width: -webkit-calc(3 * var(--card-width));
    width: -moz-calc(3 * var(--card-width));
    width: calc(3 * var(--card-width));
    margin: auto;
    position: relative;

    visibility: hidden;
}

.all-stacks-done-big-rocket .big-rocket img {
    width: 100%;
    height: auto;
}

.all-stacks-done-big-rocket .big-rocket .big-text-on-img {
    font-size: 5rem;
    position: absolute;
    top: 70%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.all-stacks-done-big-rocket .big-rocket.show {
    visibility: unset;
    
    -webkit-animation: rushUp 2s;
    -moz-animation: rushUp 2s;
      -o-animation: rushUp 2s;
         animation: rushUp 2s;

    z-index: 999;
    
    -webkit-transform: rotate(350deg);
    
       -moz-transform: rotate(350deg);
    
        -ms-transform: rotate(350deg);
    
         -o-transform: rotate(350deg);
    
            transform: rotate(350deg);
}

.all-stacks-done-big-rocket .big-rocket.show > .big-text-on-img {
    -webkit-animation: fadeout 3.5s forwards;
    -moz-animation: fadeout 3.5s forwards;
      -o-animation: fadeout 3.5s forwards;
         animation: fadeout 3.5s forwards;
}

.stack-done-rockets {
    margin-top: 1rem;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;
}

.rocket > .text-on-img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 3rem;
}

.stack-done-rockets > .rocket {
    position: relative;
    display: inline-block;
    
    visibility: hidden;
    
    width: -webkit-calc(1.5 * var(--card-width));
    
    width: -moz-calc(1.5 * var(--card-width));
    
    width: calc(1.5 * var(--card-width));
}

.stack-done-rockets > .rocket.show {
    visibility: unset;
    
    -webkit-animation: rushUp 2s;
    -moz-animation: rushUp 2s;
      -o-animation: rushUp 2s;
         animation: rushUp 2s;
    visibility: unset;
    
    -webkit-transform: rotate(350deg);
    
       -moz-transform: rotate(350deg);
    
        -ms-transform: rotate(350deg);
    
         -o-transform: rotate(350deg);
    
            transform: rotate(350deg);
}
.rocket.show > .text-on-img {
    -webkit-animation: fadeout 3.5s forwards;
    -moz-animation: fadeout 3.5s forwards;
      -o-animation: fadeout 3.5s forwards;
         animation: fadeout 3.5s forwards;
}

.stack-done-rockets > .rocket img {
    width: 100%;
    height: auto;
}

.stack-done-rockets > .rocket:nth-child(1) {
    left: -webkit-calc(1.3 * var(--card-width));
    left: -moz-calc(1.3 * var(--card-width));
    left: calc(1.3 * var(--card-width));
}

.stack-done-rockets > .rocket:nth-child(2) {
    left: -webkit-calc(2.7 * var(--card-width));
    left: -moz-calc(2.7 * var(--card-width));
    left: calc(2.7 * var(--card-width));
}

.stack-done-rockets > .rocket:nth-child(3) {
    left: -webkit-calc(4.15 * var(--card-width));
    left: -moz-calc(4.15 * var(--card-width));
    left: calc(4.15 * var(--card-width));
}

.board .leave-button {
    position: relative;
}

.leave-button {
    width: -webkit-calc(0.6 * var(--card-width));
    width: -moz-calc(0.6 * var(--card-width));
    width: calc(0.6 * var(--card-width));
    height: -webkit-calc(0.6 * var(--card-width));
    height: -moz-calc(0.6 * var(--card-width));
    height: calc(0.6 * var(--card-width));
    bottom: -webkit-calc(2.5 * var(--card-height));
    bottom: -moz-calc(2.5 * var(--card-height));
    bottom: calc(2.5 * var(--card-height));
    cursor: pointer;
}
.body-legal-notice .leave-button,
.body-privacy-policy .leave-button,
.body-privacy-policy .leave-button {
    margin-left: 5vw;
    margin-top: 15px;
}

.display-round {
    font-size: -webkit-calc(0.3 * var(--card-width));
    font-size: -moz-calc(0.3 * var(--card-width));
    font-size: calc(0.3 * var(--card-width));
    font-weight: bolder;
    bottom: -webkit-calc(2.5 * var(--card-height) + (0.6 * var(--card-width)));
    bottom: -moz-calc(2.5 * var(--card-height) + (0.6 * var(--card-width)));
    bottom: calc(2.5 * var(--card-height) + (0.6 * var(--card-width)));
    margin: 0;
    position: relative;
    left: -webkit-calc((10 * var(--card-width)));
    left: -moz-calc((10 * var(--card-width)));
    left: calc((10 * var(--card-width)));
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.leave-button img {
    width: 100%;
    height: auto;
}

.leave-dialog,
.score-board {
    background: var(--black-with-opacity);
    margin: auto;
    padding: 0 15px;
    -webkit-border-radius: 0.5rem;
       -moz-border-radius: 0.5rem;
            border-radius: 0.5rem;
    min-width: -webkit-calc(9 * var(--card-width));
    min-width: -moz-calc(9 * var(--card-width));
    min-width: calc(9 * var(--card-width));
    color:white;
}

.score-board .score-round,
.score-board .score-mode span#flow-level,
.score-board .score-round-timer {
    font-size: 1rem;
    position: relative;
    font-weight: bolder;

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;
}

.score-board {
    z-index: 9995;
}

.score-board .top-info{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
}

.score-board .highscore-with-cards {
    /* height: -webkit-calc(0.41 * var(--card-height));
    height: -moz-calc(0.41 * var(--card-height));
    height: calc(0.41 * var(--card-height));


    height: 45px; */
}

.score-board .score-mode,
.score-board p {
    width: 100%;
}

.score-board .score-mode {
    font-size: 0.9rem;
    text-align: center;
}

.score-board .score-round-timer {
    text-align: right;
}

.score-board-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 1rem;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    position: relative;
}

.score-board-btn input {
    color: black;
}

.score-board-btn.hidden {
    display: none;
}

.leave-dialog:not(.pause) {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bolder;
}

.leave-dialog.pause input {
    width: 144px;
    height: 44px;
}

.leave-dialog:not(.hidden) {
    z-index: 9999;
}

.leave-dialog.warn {
    position: absolute;
    width: 90vw;
    height: -webkit-calc(100vh - 10vw);
    height: -moz-calc(100vh - 10vw);
    height: calc(100vh - 10vw);
    max-height: 500px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}
.leave-dialog.warn .data {
    font-size: 1.2rem;
}
.leave-dialog.warn .btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}
.leave-dialog.warn .btns .button{
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%
}

.leave-dialog.pause {
    position: absolute;

    width: 224px;
    min-width: unset;
    margin-left: 3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 7px;
    margin-top: 0;
}

.leave-dialog p,
.score-board p {
    margin: 0;
}

.score-board .player-points {
    max-height: -webkit-calc(2.25 * var(--card-height));
    max-height: -moz-calc(2.25 * var(--card-height));
    max-height: calc(2.25 * var(--card-height));
    overflow-y: auto;

    text-align: right;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 1rem;
    line-height: 1.3rem;
    width: 100%;
}

.score-board .player-points p.start-text {
    text-align: left;
    padding: 20px 10px 10px;
    font-size: 20px;
    font-weight: 100;
}

.score-board .player-points p.me {
    font-weight: bolder;
}

.score-board .player-points p.points-last-round {
    font-size: 13px;
    line-height: 11px;
    position: relative;
    display: block;
}

/* first line (3x) */
.board-cards > .card:nth-child(1) {
    left: -webkit-calc(1.5 * var(--card-width));
    left: -moz-calc(1.5 * var(--card-width));
    left: calc(1.5 * var(--card-width));
}

.board-cards > .card:nth-child(2) {
    top: -webkit-calc(-1 * var(--card-height));
    top: -moz-calc(-1 * var(--card-height));
    top: calc(-1 * var(--card-height));
    left: -webkit-calc((4.5 * var(--card-width)) + (0.225 * var(--card-width)));
    left: -moz-calc((4.5 * var(--card-width)) + (0.225 * var(--card-width)));
    left: calc((4.5 * var(--card-width)) + (0.225 * var(--card-width)));
}

.board-cards > .card:nth-child(3) {
    top: -webkit-calc(-2 * var(--card-height));
    top: -moz-calc(-2 * var(--card-height));
    top: calc(-2 * var(--card-height));
    left: -webkit-calc((7.5 * var(--card-width)) + (0.375 * var(--card-width)));
    left: -moz-calc((7.5 * var(--card-width)) + (0.375 * var(--card-width)));
    left: calc((7.5 * var(--card-width)) + (0.375 * var(--card-width)));
}

/* second line (6x) */
.board-cards > .card:nth-child(4) {
    top: -webkit-calc((var(--card-height) / -2) + (-2 * var(--card-height)));
    top: -moz-calc((var(--card-height) / -2) + (-2 * var(--card-height)));
    top: calc((var(--card-height) / -2) + (-2 * var(--card-height)));
    left: -webkit-calc(1 * var(--card-width));
    left: -moz-calc(1 * var(--card-width));
    left: calc(1 * var(--card-width));
}

.board-cards > .card:nth-child(5) {
    top: -webkit-calc((var(--card-height) / -2) + (-3 * var(--card-height)));
    top: -moz-calc((var(--card-height) / -2) + (-3 * var(--card-height)));
    top: calc((var(--card-height) / -2) + (-3 * var(--card-height)));
    left: -webkit-calc((2 * var(--card-width)) + (0.05 * var(--card-width)));
    left: -moz-calc((2 * var(--card-width)) + (0.05 * var(--card-width)));
    left: calc((2 * var(--card-width)) + (0.05 * var(--card-width)));
}

.board-cards > .card:nth-child(6) {
    top: -webkit-calc((var(--card-height) / -2) + (-4 * var(--card-height)));
    top: -moz-calc((var(--card-height) / -2) + (-4 * var(--card-height)));
    top: calc((var(--card-height) / -2) + (-4 * var(--card-height)));
    left: -webkit-calc((4 * var(--card-width)) + (0.2 * var(--card-width)));
    left: -moz-calc((4 * var(--card-width)) + (0.2 * var(--card-width)));
    left: calc((4 * var(--card-width)) + (0.2 * var(--card-width)));
}

.board-cards > .card:nth-child(7) {
    top: -webkit-calc((var(--card-height) / -2) + (-5 * var(--card-height)));
    top: -moz-calc((var(--card-height) / -2) + (-5 * var(--card-height)));
    top: calc((var(--card-height) / -2) + (-5 * var(--card-height)));
    left: -webkit-calc((5 * var(--card-width)) + (0.25 * var(--card-width)));
    left: -moz-calc((5 * var(--card-width)) + (0.25 * var(--card-width)));
    left: calc((5 * var(--card-width)) + (0.25 * var(--card-width)));
}

.board-cards > .card:nth-child(8) {
    top: -webkit-calc((var(--card-height) / -2) + (-6 * var(--card-height)));
    top: -moz-calc((var(--card-height) / -2) + (-6 * var(--card-height)));
    top: calc((var(--card-height) / -2) + (-6 * var(--card-height)));
    left: -webkit-calc((7 * var(--card-width)) + (0.35 * var(--card-width)));
    left: -moz-calc((7 * var(--card-width)) + (0.35 * var(--card-width)));
    left: calc((7 * var(--card-width)) + (0.35 * var(--card-width)));
}

.board-cards > .card:nth-child(9) {
    top: -webkit-calc((var(--card-height) / -2) + (-7 * var(--card-height)));
    top: -moz-calc((var(--card-height) / -2) + (-7 * var(--card-height)));
    top: calc((var(--card-height) / -2) + (-7 * var(--card-height)));
    left: -webkit-calc((8 * var(--card-width)) + (0.4 * var(--card-width)));
    left: -moz-calc((8 * var(--card-width)) + (0.4 * var(--card-width)));
    left: calc((8 * var(--card-width)) + (0.4 * var(--card-width)));
}

/* third line (9x) */
.board-cards > .card:nth-child(10) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-7 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-7 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-7 * var(--card-height)));
    left: -webkit-calc((0.5 * var(--card-width)));
    left: -moz-calc((0.5 * var(--card-width)));
    left: calc((0.5 * var(--card-width)));
}

.board-cards > .card:nth-child(11) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-8 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-8 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-8 * var(--card-height)));
    left: -webkit-calc((1.5 * var(--card-width)) + (0.05 * var(--card-width)));
    left: -moz-calc((1.5 * var(--card-width)) + (0.05 * var(--card-width)));
    left: calc((1.5 * var(--card-width)) + (0.05 * var(--card-width)));
}

.board-cards > .card:nth-child(12) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-9 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-9 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-9 * var(--card-height)));
    left: -webkit-calc((2.5 * var(--card-width)) + (0.1 * var(--card-width)));
    left: -moz-calc((2.5 * var(--card-width)) + (0.1 * var(--card-width)));
    left: calc((2.5 * var(--card-width)) + (0.1 * var(--card-width)));
}

.board-cards > .card:nth-child(13) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-10 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-10 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-10 * var(--card-height)));
    left: -webkit-calc((3.5 * var(--card-width)) + (0.15 * var(--card-width)));
    left: -moz-calc((3.5 * var(--card-width)) + (0.15 * var(--card-width)));
    left: calc((3.5 * var(--card-width)) + (0.15 * var(--card-width)));
}

.board-cards > .card:nth-child(14) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-11 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-11 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-11 * var(--card-height)));
    left: -webkit-calc((4.5 * var(--card-width)) + (0.2 * var(--card-width)));
    left: -moz-calc((4.5 * var(--card-width)) + (0.2 * var(--card-width)));
    left: calc((4.5 * var(--card-width)) + (0.2 * var(--card-width)));
}

.board-cards > .card:nth-child(15) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-12 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-12 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-12 * var(--card-height)));
    left: -webkit-calc((5.5 * var(--card-width)) + (0.25 * var(--card-width)));
    left: -moz-calc((5.5 * var(--card-width)) + (0.25 * var(--card-width)));
    left: calc((5.5 * var(--card-width)) + (0.25 * var(--card-width)));
}

.board-cards > .card:nth-child(16) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-13 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-13 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-13 * var(--card-height)));
    left: -webkit-calc((6.5 * var(--card-width)) + (0.3 * var(--card-width)));
    left: -moz-calc((6.5 * var(--card-width)) + (0.3 * var(--card-width)));
    left: calc((6.5 * var(--card-width)) + (0.3 * var(--card-width)));
}

.board-cards > .card:nth-child(17) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-14 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-14 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-14 * var(--card-height)));
    left: -webkit-calc((7.5 * var(--card-width)) + (0.35 * var(--card-width)));
    left: -moz-calc((7.5 * var(--card-width)) + (0.35 * var(--card-width)));
    left: calc((7.5 * var(--card-width)) + (0.35 * var(--card-width)));
}

.board-cards > .card:nth-child(18) {
    top: -webkit-calc((var(--card-height) * -1.15) + (-15 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.15) + (-15 * var(--card-height)));
    top: calc((var(--card-height) * -1.15) + (-15 * var(--card-height)));
    left: -webkit-calc((8.5 * var(--card-width)) + (0.4 * var(--card-width)));
    left: -moz-calc((8.5 * var(--card-width)) + (0.4 * var(--card-width)));
    left: calc((8.5 * var(--card-width)) + (0.4 * var(--card-width)));
}

/* fourth line (10x) */
.board-cards > .card:nth-child(19) {
    top: -webkit-calc((var(--card-height) * -1.65) + (-15 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + (-15 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + (-15 * var(--card-height)));
    left: 0;
}

.board-cards > .card:nth-child(20) {
    top: -webkit-calc((var(--card-height) * -1.65) + (-16 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + (-16 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + (-16 * var(--card-height)));
    left: -webkit-calc((1 * var(--card-width)) + (0.05 * var(--card-width)));
    left: -moz-calc((1 * var(--card-width)) + (0.05 * var(--card-width)));
    left: calc((1 * var(--card-width)) + (0.05 * var(--card-width)));
}

.board-cards > .card:nth-child(21) {
    top: -webkit-calc((var(--card-height) * -1.65) + (-17 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + (-17 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + (-17 * var(--card-height)));
    left: -webkit-calc((2 * var(--card-width)) + (0.1 * var(--card-width)));
    left: -moz-calc((2 * var(--card-width)) + (0.1 * var(--card-width)));
    left: calc((2 * var(--card-width)) + (0.1 * var(--card-width)));
}

.board-cards > .card:nth-child(22) {
    top: -webkit-calc((var(--card-height) * -1.65) + -webkit-calc(-18 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + -moz-calc(-18 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + calc(-18 * var(--card-height)));
    left: -webkit-calc((3 * var(--card-width)) + (0.15 * var(--card-width)));
    left: -moz-calc((3 * var(--card-width)) + (0.15 * var(--card-width)));
    left: calc((3 * var(--card-width)) + (0.15 * var(--card-width)));
}

.board-cards > .card:nth-child(23) {
    top: -webkit-calc((var(--card-height) * -1.65) + -webkit-calc(-19 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + -moz-calc(-19 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + calc(-19 * var(--card-height)));
    left: -webkit-calc((4 * var(--card-width)) + (0.2 * var(--card-width)));
    left: -moz-calc((4 * var(--card-width)) + (0.2 * var(--card-width)));
    left: calc((4 * var(--card-width)) + (0.2 * var(--card-width)));
}

.board-cards > .card:nth-child(24) {
    top: -webkit-calc((var(--card-height) * -1.65) + -webkit-calc(-20 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + -moz-calc(-20 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + calc(-20 * var(--card-height)));
    left: -webkit-calc((5 * var(--card-width)) + (0.25 * var(--card-width)));
    left: -moz-calc((5 * var(--card-width)) + (0.25 * var(--card-width)));
    left: calc((5 * var(--card-width)) + (0.25 * var(--card-width)));
}

.board-cards > .card:nth-child(25) {
    top: -webkit-calc((var(--card-height) * -1.65) + -webkit-calc(-21 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + -moz-calc(-21 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + calc(-21 * var(--card-height)));
    left: -webkit-calc((6 * var(--card-width)) + (0.3 * var(--card-width)));
    left: -moz-calc((6 * var(--card-width)) + (0.3 * var(--card-width)));
    left: calc((6 * var(--card-width)) + (0.3 * var(--card-width)));
}

.board-cards > .card:nth-child(26) {
    top: -webkit-calc((var(--card-height) * -1.65) + -webkit-calc(-22 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + -moz-calc(-22 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + calc(-22 * var(--card-height)));
    left: -webkit-calc((7 * var(--card-width)) + (0.35 * var(--card-width)));
    left: -moz-calc((7 * var(--card-width)) + (0.35 * var(--card-width)));
    left: calc((7 * var(--card-width)) + (0.35 * var(--card-width)));
}

.board-cards > .card:nth-child(27) {
    top: -webkit-calc((var(--card-height) * -1.65) + -webkit-calc(-23 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + -moz-calc(-23 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + calc(-23 * var(--card-height)));
    left: -webkit-calc((8 * var(--card-width)) + (0.4 * var(--card-width)));
    left: -moz-calc((8 * var(--card-width)) + (0.4 * var(--card-width)));
    left: calc((8 * var(--card-width)) + (0.4 * var(--card-width)));
}

.board-cards > .card:nth-child(28) {
    top: -webkit-calc((var(--card-height) * -1.65) + -webkit-calc(-24 * var(--card-height)));
    top: -moz-calc((var(--card-height) * -1.65) + -moz-calc(-24 * var(--card-height)));
    top: calc((var(--card-height) * -1.65) + calc(-24 * var(--card-height)));
    left: -webkit-calc((9 * var(--card-width)) + (0.45 * var(--card-width)));
    left: -moz-calc((9 * var(--card-width)) + (0.45 * var(--card-width)));
    left: calc((9 * var(--card-width)) + (0.45 * var(--card-width)));
}

.card-move-animation {
    position: absolute;
    display: none;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;

    -webkit-animation: moveCard 0.5s linear forwards;

       -moz-animation: moveCard 0.5s linear forwards;

         -o-animation: moveCard 0.5s linear forwards;

            animation: moveCard 0.5s linear forwards;
}
.card-move-animation.show {
    display: block;
}

@-webkit-keyframes moveCard {
    from {
        top: var(--start-top);
        left: var(--start-left);
    }
    to {
        top: var(--end-top);
        left: var(--end-left);
    }
}

@-moz-keyframes moveCard {
    from {
        top: var(--start-top);
        left: var(--start-left);
    }
    to {
        top: var(--end-top);
        left: var(--end-left);
    }
}

@-o-keyframes moveCard {
    from {
        top: var(--start-top);
        left: var(--start-left);
    }
    to {
        top: var(--end-top);
        left: var(--end-left);
    }
}

@keyframes moveCard {
    from {
        top: var(--start-top);
        left: var(--start-left);
    }
    to {
        top: var(--end-top);
        left: var(--end-left);
    }
}

.play-button::before {
    content: "";
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 29px solid;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

.points-font-style {
    font-weight: bolder;
    font-family: fantasy;
    color: green;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 5px #fff, 0 -5px #fff, 3px 3px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff;
}

.show-points-per-card {
    position: absolute;

    font-size: 2.5rem;

    z-index: 2001;

    -webkit-animation: fadeinout 0.1s;
    -moz-animation: fadeinout 0.1s;
      -o-animation: fadeinout 0.1s;
         animation: fadeinout 0.1s;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;

    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;

    margin: 0;

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.show-points-per-card.red {
    color: red;
}

.show-points-per-card.hidden {
    display: none;
}

.countdown-big:not(.pre-start-loading-animation) .lds-spinner {
    display: none;
}

.countdown-big,
.waiting-for-other-player {
    z-index: 1001;
    text-align: center;
    font-size: 4rem;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;
}

.waiting-for-other-player {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
}

.waiting-for-other-player .dowload-cards-text.hidden, /* fixed */
.waiting-for-other-player .waiting-for-other-player-text.hidden,
.waiting-for-other-player:has( .waiting-for-other-player-text:not(.hidden)) .dowload-cards-text { /* fixed */
    display: none;
}

.waiting-for-other-player span {
    font-size: 1rem;
    color: red;
    font-weight: 200;
}

.game-over.hidden,
.confetti.hidden,
.countdown-big.hidden,
.score-board.hidden,
.waiting-for-other-player.hidden {
    display: none;
}

.countdown-big p,
.waiting-for-other-player p {
    color: black;
    font-weight: bolder;
    text-shadow: 2px 0 red, -2px 0 red, 0 5px red, 0 -5px red, 3px 3px red, -2px -2px red, 2px -2px red, -2px 2px red;
    width: -webkit-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    width: -moz-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    width: calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    margin: 0 auto;
}

/* --- Dots ---- */

.dot-container {
    margin-top: 0.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.dot-container > * {
    margin: 0 1rem;
}
.dot {
    width: var(--dot-size);
    height: var(--dot-size);
    background-color: red;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

/* --- Animation --- */

/* Define animation keyframes */
@-webkit-keyframes blink {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@-moz-keyframes blink {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@-o-keyframes blink {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@keyframes blink {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Minimal example */
.dot--basic {
    -webkit-animation: blink 2s infinite;
            -moz-animation: blink 2s infinite;
              -o-animation: blink 2s infinite;
         animation: blink 2s infinite;
}

/* Run animation once */
.dot--once {
    -webkit-animation: blink 2s 1;
            -moz-animation: blink 2s 1;
              -o-animation: blink 2s 1;
         animation: blink 2s 1;
    /* animation-iteration-count: 1; */
}

/* Wait 4s before running the animation */
.dot--delayed {
    -webkit-animation: blink 2s infinite 4s;
            -moz-animation: blink 2s infinite 4s;
              -o-animation: blink 2s infinite 4s;
         animation: blink 2s infinite 4s;
    /* animation-delay: 4s; */
}

/* Use frames with "from" and "to" */
@-webkit-keyframes choppyBlink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes choppyBlink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes choppyBlink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes choppyBlink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.dot--choppy {
    -webkit-animation: choppyBlink 2s infinite;
            -moz-animation: choppyBlink 2s infinite;
              -o-animation: choppyBlink 2s infinite;
         animation: choppyBlink 2s infinite;
    /* animation-name: choppyBlink; */
}

/* Animate multiple properties (transform and color) */
@-webkit-keyframes pulse {
    0%,
    100% {
        -webkit-transform: scale(0) translateY(-75%);
                transform: scale(0) translateY(-75%);
        background-color: blue;
    }
    33% {
        background-color: orange;
    }
    50% {
        -webkit-transform: scale(1.125) translateY(0);
                transform: scale(1.125) translateY(0);
        background-color: red;
    }
}
@-moz-keyframes pulse {
    0%,
    100% {
        -moz-transform: scale(0) translateY(-75%);
             transform: scale(0) translateY(-75%);
        background-color: blue;
    }
    33% {
        background-color: orange;
    }
    50% {
        -moz-transform: scale(1.125) translateY(0);
             transform: scale(1.125) translateY(0);
        background-color: red;
    }
}
@-o-keyframes pulse {
    0%,
    100% {
        -o-transform: scale(0) translateY(-75%);
           transform: scale(0) translateY(-75%);
        background-color: blue;
    }
    33% {
        background-color: orange;
    }
    50% {
        -o-transform: scale(1.125) translateY(0);
           transform: scale(1.125) translateY(0);
        background-color: red;
    }
}
@keyframes pulse {
    0%,
    100% {
        -webkit-transform: scale(0) translateY(-75%);
           -moz-transform: scale(0) translateY(-75%);
             -o-transform: scale(0) translateY(-75%);
                transform: scale(0) translateY(-75%);
        background-color: blue;
    }
    33% {
        background-color: orange;
    }
    50% {
        -webkit-transform: scale(1.125) translateY(0);
           -moz-transform: scale(1.125) translateY(0);
             -o-transform: scale(1.125) translateY(0);
                transform: scale(1.125) translateY(0);
        background-color: red;
    }
}
.dot--pulse {
    -webkit-animation: pulse 8s infinite;
            -moz-animation: pulse 8s infinite;
              -o-animation: pulse 8s infinite;
         animation: pulse 8s infinite;
}

/* Disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dot {
        -webkit-animation: none;
                -moz-animation: none;
                  -o-animation: none;
             animation: none;
    }
}

/* END dots */

/* fancy Border */

.fancy-border {
    border: 25px solid var(--light-green);
    -o-border-image: url("../imgs/fancy-border-green.svg") 25;
       -webkit-border-image: url("../imgs/fancy-border-green.svg") 25;
          -moz-border-image: url("../imgs/fancy-border-green.svg") 25;
            border-image: url("../imgs/fancy-border-green.svg") 25;
}

/* End fancy Border */

/* winner & game over animation */

.click-somewhere .click-somewhere-text {
    color: var(--light-green);

    -webkit-animation: click-somewhere-text 4s infinite linear;
    -moz-animation: click-somewhere-text 4s infinite linear;
      -o-animation: click-somewhere-text 4s infinite linear;
    animation: click-somewhere-text 4s infinite linear;
}   

.game-over .animated-text {
    font-size: 80px;

    text-align: center;
    font-family: poppins;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    -webkit-animation: game-over-text 7s infinite linear;
            -moz-animation: game-over-text 7s infinite linear;
              -o-animation: game-over-text 7s infinite linear;
         animation: game-over-text 7s infinite linear;

    opacity: 0;
}

.confetti .animated-text {
    font-size: 60px;

    text-align: center;
    font-family: poppins;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    -webkit-animation: confetti-winner-text 2s infinite linear;
            -moz-animation: confetti-winner-text 2s infinite linear;
              -o-animation: confetti-winner-text 2s infinite linear;
         animation: confetti-winner-text 2s infinite linear;

    opacity: 0;
}

.game-over,
.confetti {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;

    color: white;;

    z-index: 10002;
}

.confetti {
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.confetti-piece {
    position: fixed;
    width: 15px;
    height: 35px;
    background: #ffd300;
    top: 0;
    opacity: 0;
}

.confetti-piece:nth-child(odd) {
    background: #7431e8;
}

.confetti-piece:nth-child(even) {
    z-index: 1;
}

.confetti-piece:nth-child(4n) {
    width: 10px;
    height: 18px;
    -webkit-animation-duration: 1000ms;
    -moz-animation-duration: 1000ms;
      -o-animation-duration: 1000ms;
         animation-duration: 1000ms;

    -webkit-animation-duration: -webkit-calc(1000ms * 2);

            -moz-animation-duration: -moz-calc(1000ms * 2);

              -o-animation-duration: calc(1000ms * 2);

         animation-duration: calc(1000ms * 2);
}

.confetti-piece:nth-child(3n) {
    width: 12px;
    height: 17px;
    -webkit-animation-duration: 2500ms;
    -moz-animation-duration: 2500ms;
      -o-animation-duration: 2500ms;
         animation-duration: 2500ms;
    -webkit-animation-duration: -webkit-calc(2500ms * 2);
            -moz-animation-duration: -moz-calc(2500ms * 2);
              -o-animation-duration: calc(2500ms * 2);
         animation-duration: calc(2500ms * 2);
    -webkit-animation-delay: 1000ms;
    -moz-animation-delay: 1000ms;
      -o-animation-delay: 1000ms;
         animation-delay: 1000ms;
}

.confetti-piece:nth-child(4n-7) {
    background: red;
}

.confetti-piece:nth-child(1) {
    left: 7%;
    -webkit-transform: rotate(-40deg);
       -moz-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
         -o-transform: rotate(-40deg);
            transform: rotate(-40deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 182ms;
            -moz-animation-delay: 182ms;
              -o-animation-delay: 182ms;
         animation-delay: 182ms;
    -webkit-animation-duration: -webkit-calc(1116ms * 2);
            -moz-animation-duration: -moz-calc(1116ms * 2);
              -o-animation-duration: calc(1116ms * 2);
         animation-duration: calc(1116ms * 2);
}

.confetti-piece:nth-child(2) {
    left: 14%;
    -webkit-transform: rotate(4deg);
       -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
         -o-transform: rotate(4deg);
            transform: rotate(4deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 161ms;
            -moz-animation-delay: 161ms;
              -o-animation-delay: 161ms;
         animation-delay: 161ms;
    -webkit-animation-duration: -webkit-calc(1076ms * 2);
            -moz-animation-duration: -moz-calc(1076ms * 2);
              -o-animation-duration: calc(1076ms * 2);
         animation-duration: calc(1076ms * 2);
}

.confetti-piece:nth-child(3) {
    left: 21%;
    -webkit-transform: rotate (-51deg);
       -moz-transform: rotate (-51deg);
        -ms-transform: rotate (-51deg);
         -o-transform: rotate (-51deg);
            transform: rotate (-51deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 481ms;
            -moz-animation-delay: 481ms;
              -o-animation-delay: 481ms;
         animation-delay: 481ms;
    -webkit-animation-duration: -webkit-calc(1103ms * 2);
            -moz-animation-duration: -moz-calc(1103ms * 2);
              -o-animation-duration: calc(1103ms * 2);
         animation-duration: calc(1103ms * 2);
}

.confetti-piece:nth-child(4) {
    left: 28%;
    -webkit-transform: rotate(61deg);
       -moz-transform: rotate(61deg);
        -ms-transform: rotate(61deg);
         -o-transform: rotate(61deg);
            transform: rotate(61deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 334ms;
            -moz-animation-delay: 334ms;
              -o-animation-delay: 334ms;
         animation-delay: 334ms;
    -webkit-animation-duration: -webkit-calc(708ms * 2);
            -moz-animation-duration: -moz-calc(708ms * 2);
              -o-animation-duration: calc(708ms * 2);
         animation-duration: calc(708ms * 2);
}

.confetti-piece:nth-child(5) {
    left: 35%;
    -webkit-transform: rotate(-52deg);
       -moz-transform: rotate(-52deg);
        -ms-transform: rotate(-52deg);
         -o-transform: rotate(-52deg);
            transform: rotate(-52deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 302ms;
            -moz-animation-delay: 302ms;
              -o-animation-delay: 302ms;
         animation-delay: 302ms;
    -webkit-animation-duration: -webkit-calc(776ms * 2);
            -moz-animation-duration: -moz-calc(776ms * 2);
              -o-animation-duration: calc(776ms * 2);
         animation-duration: calc(776ms * 2);
}

.confetti-piece:nth-child(6) {
    left: 42%;
    -webkit-transform: rotate(38deg);
       -moz-transform: rotate(38deg);
        -ms-transform: rotate(38deg);
         -o-transform: rotate(38deg);
            transform: rotate(38deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 180ms;
            -moz-animation-delay: 180ms;
              -o-animation-delay: 180ms;
         animation-delay: 180ms;
    -webkit-animation-duration: -webkit-calc(1168ms * 2);
            -moz-animation-duration: -moz-calc(1168ms * 2);
              -o-animation-duration: calc(1168ms * 2);
         animation-duration: calc(1168ms * 2);
}

.confetti-piece:nth-child(7) {
    left: 49%;
    -webkit-transform: rotate(11deg);
       -moz-transform: rotate(11deg);
        -ms-transform: rotate(11deg);
         -o-transform: rotate(11deg);
            transform: rotate(11deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 395ms;
            -moz-animation-delay: 395ms;
              -o-animation-delay: 395ms;
         animation-delay: 395ms;
    -webkit-animation-duration: -webkit-calc(1200ms * 2);
            -moz-animation-duration: -moz-calc(1200ms * 2);
              -o-animation-duration: calc(1200ms * 2);
         animation-duration: calc(1200ms * 2);
}

.confetti-piece:nth-child(8) {
    left: 56%;
    -webkit-transform: rotate (49deg);
       -moz-transform: rotate (49deg);
        -ms-transform: rotate (49deg);
         -o-transform: rotate (49deg);
            transform: rotate (49deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 14ms;
            -moz-animation-delay: 14ms;
              -o-animation-delay: 14ms;
         animation-delay: 14ms;
    -webkit-animation-duration: -webkit-calc(887ms * 2);
            -moz-animation-duration: -moz-calc(887ms * 2);
              -o-animation-duration: calc(887ms * 2);
         animation-duration: calc(887ms * 2);
}

.confetti-piece:nth-child(9) {
    left: 63%;
    -webkit-transform: rotate(-72deg);
       -moz-transform: rotate(-72deg);
        -ms-transform: rotate(-72deg);
         -o-transform: rotate(-72deg);
            transform: rotate(-72deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 149ms;
            -moz-animation-delay: 149ms;
              -o-animation-delay: 149ms;
         animation-delay: 149ms;
    -webkit-animation-duration: -webkit-calc(805ms * 2);
            -moz-animation-duration: -moz-calc(805ms * 2);
              -o-animation-duration: calc(805ms * 2);
         animation-duration: calc(805ms * 2);
}

.confetti-piece:nth-child(10) {
    left: 70%;
    -webkit-transform: rotate(10deg);
       -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
         -o-transform: rotate(10deg);
            transform: rotate(10deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 351ms;
            -moz-animation-delay: 351ms;
              -o-animation-delay: 351ms;
         animation-delay: 351ms;
    -webkit-animation-duration: -webkit-calc(1059ms * 2);
            -moz-animation-duration: -moz-calc(1059ms * 2);
              -o-animation-duration: calc(1059ms * 2);
         animation-duration: calc(1059ms * 2);
}

.confetti-piece:nth-child(11) {
    left: 77%;
    -webkit-transform: rotate(4deg);
       -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
         -o-transform: rotate(4deg);
            transform: rotate(4deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 307ms;
            -moz-animation-delay: 307ms;
              -o-animation-delay: 307ms;
         animation-delay: 307ms;
    -webkit-animation-duration: -webkit-calc(1132ms * 2);
            -moz-animation-duration: -moz-calc(1132ms * 2);
              -o-animation-duration: calc(1132ms * 2);
         animation-duration: calc(1132ms * 2);
}

.confetti-piece:nth-child(12) {
    left: 84%;
    -webkit-transform: rotate(42deg);
       -moz-transform: rotate(42deg);
        -ms-transform: rotate(42deg);
         -o-transform: rotate(42deg);
            transform: rotate(42deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 464ms;
            -moz-animation-delay: 464ms;
              -o-animation-delay: 464ms;
         animation-delay: 464ms;
    -webkit-animation-duration: -webkit-calc(776ms * 2);
            -moz-animation-duration: -moz-calc(776ms * 2);
              -o-animation-duration: calc(776ms * 2);
         animation-duration: calc(776ms * 2);
}

.confetti-piece:nth-child(13) {
    left: 91%;
    -webkit-transform: rotate(-72deg);
       -moz-transform: rotate(-72deg);
        -ms-transform: rotate(-72deg);
         -o-transform: rotate(-72deg);
            transform: rotate(-72deg);
    -webkit-animation: makeItRain 1000ms infinite ease-out;
            -moz-animation: makeItRain 1000ms infinite ease-out;
              -o-animation: makeItRain 1000ms infinite ease-out;
         animation: makeItRain 1000ms infinite ease-out;
    -webkit-animation-delay: 429ms;
            -moz-animation-delay: 429ms;
              -o-animation-delay: 429ms;
         animation-delay: 429ms;
    -webkit-animation-duration: -webkit-calc(818ms * 2);
            -moz-animation-duration: -moz-calc(818ms * 2);
              -o-animation-duration: calc(818ms * 2);
         animation-duration: calc(818ms * 2);
}
/* end winner animation */

/* 
@media screen and (max-width: 700px) and (min-height: 375px) {
    .ads-next-to-eachother:not(.nocolumn) {
        flex-direction: column !important; 
    }
} 
*/

body:not(.has-ads) .game-menu-ads {
    display: none;
}

body.has-ads .ads-next-to-eachother,
body.has-ads .ads {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 710px)  {
    .ads-next-to-eachother .ads {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
}

.ads-next-to-eachother {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 20px 0 5px;
    gap: 5px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: none;
}
.ads {
    min-width: 300px;
    width: 300px;
    min-height: 50px;
    height: 50px;
    border: 2px solid gray;

    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    margin: 0;
}

.ads.has-ad {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    outline: 1px solid;
    border: 0;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
.ads.has-ad.text::before {
    content: ""
}

.ads.ad1.has-ad {
    background: url(../imgs/ad-softmeer.gif) no-repeat center center;
}

.ads.ad2.has-ad {
    background: url(../imgs/ad-qr-scan-menu.gif) no-repeat center center;
}

.game-menu div.next-to-eachother.legal-shit .game-menu-btn.attention {
    height: 30px !important;
    font-size: 25px !important;
    background: red !important;
}

.game-menu div.next-to-eachother.legal-shit .game-menu-btn.attention,
.attention {
    -webkit-animation: tilt-shaking 0.3s infinite;
       -moz-animation: tilt-shaking 0.3s infinite;
         -o-animation: tilt-shaking 0.3s infinite;
            animation: tilt-shaking 0.3s infinite;
}

body:has(.index) .in-app-reload.show,
body:has(.tutorial-tour) .in-app-reload.show,
.in-app-reload,
.toggle-chat,
.toggle-fullscreen,
.card-size-changer {
    visibility: hidden;
}


.in-app-reload.show,
.toggle-chat.show,
.toggle-fullscreen.show,
.card-size-changer.show {
    visibility: unset;
}

.in-app-reload.show:not(.in-countdown):hover {
    -webkit-animation: rotation 1s;
       -moz-animation: rotation 1s;
         -o-animation: rotation 1s;
            animation: rotation 1s;
}
.in-app-reload.in-countdown {
    cursor: not-allowed;
}
.in-app-reload.in-countdown img {
    opacity: 0.5;
}
.in-app-reload span {
    position: absolute;
    left: 0px;
    bottom: 0px;
    font-weight: bolder;
    color: var(--light-green);
    width: 32px;
    height: 32px;
    text-align: center;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
}

.lobby .lobby-info .lobby-code div.share-button {
    display: none;
}
.lobby .lobby-info .lobby-code div.share-button.show {
    display: inline;
}

.threemagicstacks .toggle-darkmode,
.toggle-fullscreen,
.toggle-chat {
    position: fixed;

    width: -webkit-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));

    width: -moz-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));

    width: calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
       -moz-box-orient: horizontal;
       -moz-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.login-profile-icon,
.in-app-reload,
.toggle-chat
.toggle-fullscreen,
.edit-volume,
.toggle-darkmode,
.edit-volume-range,
.card-size-changer,
.card-size-changer-range {
    position: fixed;
}

.card-size-changer-range-buttons {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
       -moz-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.card-size-changer-range-buttons {
    margin: 5px 0;
}
.range-card-height-minus,
.range-card-width-minus {
    -webkit-border-radius: 5px 0 0 5px;
       -moz-border-radius: 5px 0 0 5px;
            border-radius: 5px 0 0 5px;
}
.card-size-changer-range-buttons p {
    margin: 0;
    border: 2px solid black;
    border-left: 0;
    border-right: 0;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 45px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 16px;
}
.range-card-height-plus,
.range-card-width-plus {
    -webkit-border-radius: 0px 5px 5px 0px;
       -moz-border-radius: 0px 5px 5px 0px;
            border-radius: 0px 5px 5px 0px;
}
.range-card-height-minus,
.range-card-height-plus,
.range-card-width-minus,
.range-card-width-plus {
    padding: 4px 7px;
    font-size: 20px;
}


.toggle-fullscreen,
.card-size-changer {
    bottom: 50px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 50px;
}
.toggle-chat {
    bottom: 90px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 50px;
}

.pa2 {
    padding: 2px;
}

.container-chat {
    display: none;

    position: absolute;
    top: 15px;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    
    background: var(--black-with-opacity);
    color: white;

    width: -webkit-calc(100vw - 84px);

    width: -moz-calc(100vw - 84px);

    width: calc(100vw - 84px);
    height: -webkit-calc(100vh - 30px);
    height: -moz-calc(100vh - 30px);
    height: calc(100vh - 30px);
    max-height: 700px;
    max-width: 1000px;

    z-index: 100003;
}

.container-chat.show {
    display: block;
}

.container-chat .close {
    position: absolute;
    right: -40px;
    top: -40px;
    color: red;
    font-size: 38px;
    font-weight: bolder;
    cursor: pointer;

    background: black;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 180px;
       -moz-border-radius: 180px;
            border-radius: 180px;

    height: 56px;
    border: 3px solid var(--light-green);
    width: 56px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.container-chat .chat {
    height: -webkit-calc(100% - 50px);
    height: -moz-calc(100% - 50px);
    height: calc(100% - 50px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3px;

    overflow: auto;
    padding: 10px 0 20px;
}
.container-chat .chat p {
    margin: 0;
    word-break: break-word;
}
.container-chat .chat p.time,
.container-chat .chat p.username {
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
}
.container-chat .chat .chat-message {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
}
.container-chat .chat .chat-message.italic {
    font-style: italic;
}

.container-chat .container-input-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
       -moz-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.container-chat .container-input-btn textarea {
    -webkit-border-top-right-radius: 0;
       -moz-border-radius-topright: 0;
            border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
       -moz-border-radius-bottomright: 0;
            border-bottom-right-radius: 0;

    width: 100%;
    max-width: 1000px;
    height: 50px;

    border-color: var(--light-green-with-opacity);
    color: white !important;
    background: black !important;
}
.container-chat .container-input-btn textarea.err-chat-spam-protection {
    border-color: red;
    outline: red;
}
.container-chat .container-input-btn .char-count {
    position: absolute;
    margin: 0;
    right: 40px;
    bottom: 1px;
    font-size: 10px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.container-chat .container-input-btn .chat-spam-protection {
    position: absolute;
    margin: 0;
    right: 40px;
    bottom: 50px;
    font-size: 13px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: red;
}
.container-chat .container-input-btn button {
    background: black;

    border: 2px solid var(--light-green-with-opacity);
    border-left: 0;
    -webkit-border-top-right-radius: 5px;
       -moz-border-radius-topright: 5px;
            border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
       -moz-border-radius-bottomright: 5px;
            border-bottom-right-radius: 5px;
    padding: 5px;
}
.container-chat .container-input-btn button img {
    height: 25px;
    width: auto;
    -webkit-filter: invert(1);
        filter: invert(1);
}

.container-chat-new-msg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
       -moz-box-orient: horizontal;
       -moz-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    pointer-events: none;

    position: fixed;
    top: 5px;
    right: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;

    cursor: pointer;
}
.container-chat-new-msg.show {
    pointer-events: auto;
}
.container-chat-new-msg.hidden {
    display: none;
}

.container-chat-new-msg .chat-new-msg {
    -webkit-transform: translateX(100%);
       -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
         -o-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;

    -webkit-border-radius: 5px;

       -moz-border-radius: 5px;

            border-radius: 5px;
    border: 2px solid var(--light-green-with-opacity);
    background: black;
    color: white;

    padding: 5px;

    max-width: 400px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-height: 60px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    
    font-size: 12px;
}

.chat-new-msg .name.show {
    margin-bottom: 5px;
}
.chat-new-msg .msg {
    white-space: revert-layer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    line-height: 13px;
}

.chat-new-msg .msg.italic {
    font-style: italic;
}

.container-chat-new-msg.slide-in .chat-new-msg {
    -webkit-animation: latestChatMsg-slideIn 0.25s ease forwards;
       -moz-animation: latestChatMsg-slideIn 0.25s ease forwards;
         -o-animation: latestChatMsg-slideIn 0.25s ease forwards;
            animation: latestChatMsg-slideIn 0.25s ease forwards;
}
.container-chat-new-msg.slide-out .chat-new-msg {
    -webkit-animation: latestChatMsg-slideOut 0.25s ease forwards;
       -moz-animation: latestChatMsg-slideOut 0.25s ease forwards;
         -o-animation: latestChatMsg-slideOut 0.25s ease forwards;
            animation: latestChatMsg-slideOut 0.25s ease forwards;
}

.container-chat-new-msg p {
    margin: 0;
}

.in-app-reload {
    bottom: 90px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 50px;
}

.card-size-changer-range {
    bottom: 70px;
}
.card-size-changer-range input[type="number"] {
    width: 85px;
    font-size: 14px;
    padding: 3px 5px;
}

.popup.profile,
.login-profile-icon,
.toggle-chat,
.toggle-fullscreen,
.toggle-darkmode {
    right: 10px;
}

.login-profile-icon {
    top: 10px;
    display: none;
}
.login-profile-icon.show {
    display: block;
}

.choose-card-design .need-to-login img,
.login-profile-icon img {
    width: 50px !important;
}

.login-profile-icon img.hidden {
    display: none;
}

.edit-volume,
.toggle-darkmode,
.edit-volume-range {
    /* position: fixed; */
    bottom: 10px;
}

.in-app-reload,
.edit-volume,
.card-size-changer {
    left: 10px;
}
.edit-volume-range,
.card-size-changer-range {
    left: 50px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    display: table;
    border: 2px solid black;
    background: var(--light-green);
}
.edit-volume-range {
    padding: 7px;
}
.card-size-changer-range {
    padding: 2px 7px;
}
.edit-volume-range.hidden,
.card-size-changer-range.hidden {
    display: none;
}
.edit-volume-range .row,
.card-size-changer-range .row {
    display: table-row;
}
.edit-volume-range label,
.edit-volume-range input[type="range"],
.card-size-changer-range label,
.card-size-changer-range input[type="number"] {
    display: table-cell;
    min-width: 60px;
    vertical-align: middle;
}
.edit-volume-range input[type="range"].first,
.card-size-changer-range input[type="number"].first {
    margin-bottom: 3px;
}

.edit-volume-range label,
.card-size-changer-range label {
    padding: 0 5px;
}

.choose-card-design .need-to-login img,
.login-profile-icon img,
.in-app-reload img,
.edit-volume img,
.toggle-chat img,
.toggle-fullscreen img,
.toggle-darkmode img,
.card-size-changer img {
    width: 32px;
    height: auto;
    cursor: pointer;
}

.default,
.join,
.singleplayer,
.multiplayer,
.highscore,
.lobby {
    height: 100vh;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 0;
}

.default,
.join,
.singleplayer,
.multiplayer,
.highscore,
.lobby,
.feedback,
.tutorial {
    padding: 5vw;
}

body.has-ads .default,
body.has-ads .join,
body.has-ads .singleplayer,
body.has-ads .multiplayer,
body.has-ads .highscore,
body.has-ads .lobby,
body.has-ads .feedback,
body.has-ads .tutorial {
    padding-top: 15px;
}



.lobby .lobby-info {
    text-align: right;
    font-weight: bolder;
    text-align: center;
}

.lobby .lobby-info p:first-child {
    margin: 0 0 1rem 0;
}

.lobby .lobby-info p {
    margin: 0;
}

.lobby .select-flow-level,
.lobby .select-max-round {
    display: none;
}


.lobby .lobby-info .lobby-code div {
    display: inline;
    position: relative;
}

.lobby .lobby-info:has( .timerLobby:empty) #text-timer-lobby {
    visibility: hidden;
}

.lobby .lobby-edit {
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    margin-top: -2.7rem;
    right: 6%;
}

.lobby .lobby-edit img {
    width: 100%;
    height: auto;
}


.lobby .lobby-info .lobby-code div img {
    width: 1.2rem;
    height: auto;
    margin-left: 10px;
}

.formLoginRegister {
    display: none;
}
.formLoginRegister.show {
    display: block;
}

.formLoginRegister .login-error {
    display: none;

    padding: 10px;
    background: var(--light-green-with-opacity);
    color: black;
    border: 2px solid var(--light-green);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;

    font-weight: bolder;
}

.formLoginRegister .login-error.show {
    display: block;
}

.formLoginRegister .checkboxes {
    padding: 5px 0;
}

.create-join .join-btn-loading,
.create-join .create-lobby-btn-loading,
.formLoginRegister .button,
.lobby .im-ready-button {
    display: none;
    margin-top: 8px;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
    font-weight: bolder;
    padding: 5px;
    color: black;
    min-height: 44px;
    height: 44px;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
}

.im-ready-button.im-not-ready {
    -webkit-animation: blinkImReadyBtnAnimation 3s infinite;
       -moz-animation: blinkImReadyBtnAnimation 3s infinite;
         -o-animation: blinkImReadyBtnAnimation 3s infinite;
            animation: blinkImReadyBtnAnimation 3s infinite;
}

.create-join .join-btn-loading,
.create-join .create-lobby-btn-loading,
.formLoginRegister .button.loading,
.lobby .im-ready-button.loading {
    height: 42px;
    text-align: center;
}

.create-join .join-btn-loading .lds-spinner,
.create-join .create-lobby-btn-loading .lds-spinner,
.formLoginRegister .button.loading .lds-spinner,
.lobby .im-ready-button .lds-spinner {
    height: unset;
}
.create-join .join-btn-loading .lds-spinner div,
.create-join .create-lobby-btn-loading .lds-spinner div,
.formLoginRegister .button.loading .lds-spinner div,
.lobby .im-ready-button .lds-spinner div {
    -webkit-transform-origin: unset;
            transform-origin: unset;
    -moz-transform-origin: unset;
    -ms-transform-origin: unset;
    -o-transform-origin: unset;
}
.create-join .join-btn-loading .lds-spinner div:after,
.create-join .create-lobby-btn-loading .lds-spinner div:after,
.formLoginRegister .button.loading .lds-spinner div:after,
.lobby .im-ready-button .lds-spinner div:after {
    height: 10px;
}

.formLoginRegister .button {
    width: 100%;
}

.formLoginRegister span.small-error-msg {
    color: red;
    margin-top: -8px;
    margin-bottom: -6px;
    font-size: 12px;
    font-weight: bold;
    display: none;
}

.formLoginRegister span.small-error-msg.show {
    display: block;
}

.formLoginRegister input {
    border: 3px solid transparent;
    outline: none;
}

.formLoginRegister .forgot-password {
    margin-top: 0px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: bolder;
    float: right;
}
.formLoginRegister .forgot-password:hover {
    color: var(--light-green);
}

.formLoginRegister.reset-password .password-restrictions.show {
    position: unset;
    width: 100%;

    -webkit-transform: unset;

       -moz-transform: unset;

        -ms-transform: unset;

         -o-transform: unset;

            transform: unset;
    left: unset;
}

.formLoginRegister.reset-password .loading-div {
    height: 100px;
    margin-bottom: -25px;
}

.formLoginRegister.reset-password .loading-div div.lds-spinner {
    position: relative;
}

.formLoginRegister.reset-password .loading-div,
.formLoginRegister.reset-password .token-expired-msg,
.formLoginRegister.reset-password .enter-new-password {
    display: none;
}

.formLoginRegister.reset-password .loading-div.show,
.formLoginRegister.reset-password .token-expired-msg.show,
.formLoginRegister.reset-password .enter-new-password.show {
    display: block;
}

/* 
.formLoginRegister.reset-password div.lds-spinner,
.formLoginRegister.reset-password div.lds-spinner div,
.formLoginRegister.reset-password div.password-restrictions div {
    display: block !important;
}
.formLoginRegister.reset-password div:not(.show) {
    display: none;
} */


.error-border {
    border-color: red !important;
}

.formLoginRegister:has(span.small-error-msg.username.show) input[name="username"],
.formLoginRegister:has(span.small-error-msg.username-not-req.show) input[name="username"],
.formLoginRegister:has(span.small-error-msg.email.show) input[name="email"],
.formLoginRegister:has(span.small-error-msg.email-not-req.show) input[name="email"],
.formLoginRegister:has(span.small-error-msg.password.show) input[name="password"],
.formLoginRegister:has(span.small-error-msg.confirmPassword.show) input[name="password"]:not(.correct),
.formLoginRegister:has(span.small-error-msg.confirmPassword.show) input[name="confirmPassword"] {
    border-color: red !important;
}

.formLoginRegister input[name="username"].correct,
.formLoginRegister input[name="email"].correct,
.formLoginRegister input[name="password"].correct,
.formLoginRegister input[name="confirmPassword"].correct {
    border-color: var(--light-green) !important;
}

.formLoginRegister .lds-spinner div:after {
    background: black;
}

.formLoginRegister:has(span.small-error-msg.username-not-req.show) span.small-error-msg.username.show, /* fixed */
.formLoginRegister:has(span.small-error-msg.email-not-req.show) span.small-error-msg.email.show, /* fixed */
.formLoginRegister:has(.password-restrictions.show) .small-error-msg.password {  /* fixed */
    display: none;
}

.create-join .join-btn-loading.show,
.create-join .create-lobby-btn-loading.show,
.formLoginRegister .button.show,
.lobby .lobby-edit.show,
.lobby .select-flow-level.show,
.lobby .select-max-round.show,
.lobby .im-ready-button.show {
    display: block;
}

.formLoginRegister.reset-password .token-expired-msg,
.formLoginRegister.forgot-password .after-sending-recovery-email {
    background: var(--light-green);
    padding: 10px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    color: black;
    margin: 10px 0;
}

.formLoginRegister.forgot-password .after-sending-recovery-email.show {
    display: block;
}
.formLoginRegister.forgot-password .after-sending-recovery-email,
.formLoginRegister.forgot-password .before-sending-recovery-email {
    display: none;
}
.formLoginRegister.forgot-password .before-sending-recovery-email.show {
    display: block;
}

.lobby .leave-button {
    position: absolute;
    bottom: unset;
}

.lobby .leave-dialog {
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
}

.lobby .main-body {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    
    gap: 5px;
}

.lobby .lobby-rules,
.lobby .player-list {
    min-height: 55vh;
    max-height: 55vh;
    width: 100%;
    overflow: auto;
    
    padding: 2px;

    background: var(--white-with-opacity);
}

.lobby .lobby-rules  {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
} 

.lobby .lobby-rules .info .same-cards {
    position: relative;
    left: 0;
    font-size: 0.85rem;
    text-align: right;
    margin: 0 0 -10.5px 0;
    padding-right: 2px;
} 

.div-legal-notice span.tel-nr,
.div-legal-notice span.email,
.div-legal-notice span.managerName,
.div-legal-notice a,
.lobby .lobby-rules .info .same-cards,
.load-legal-notice-data {
    color: #82A3FF;
}
.div-legal-notice span.tel-nr:hover,
.div-legal-notice span.email:hover,
.div-legal-notice span.managerName:hover,
.div-legal-notice a:hover,
.lobby .lobby-rules .info .same-cards:hover,
.load-legal-notice-data:hover {
    -webkit-text-decoration: 3px underline;
       -moz-text-decoration: 3px underline;
            text-decoration: 3px underline;
}
.lobby .lobby-rules .highscore {
    padding: 5px 10px;
    border-top: 4px solid;
    height: 100%;
    overflow: auto;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}

.lobby .player-list,
.lobby .lobby-rules {
    border: 2px solid;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.lobby .player-list p {
    margin: 0.6rem 0;
}

.lobby .lobby-rules .rounds {
    margin: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.lobby .lobby-rules .lobby-flow-mode,
.lobby .lobby-rules .lobby-round-nr {
    font-weight: bolder;
    font-size: 115%;

    display: none;
}

.lobby .lobby-rules .lobby-flow-mode.show,
.lobby .lobby-rules .lobby-round-nr.show {
    display: unset;
}

.lobby .lobby-player-div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0.5vw;
}

.highscore-with-cards .lobby-player-card-designs,
.lobby .lobby-player-div .lobby-player-card-designs {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    max-width: 60px;
}

.highscore-with-cards {
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -webkit-flex-direction:row;
       -moz-box-orient:horizontal;
       -moz-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    width:100%;
    border:2px solid;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    margin-bottom: 4px;
}
.highscore-with-cards .name-and-points {
    -webkit-flex-basis: 80%;
        -ms-flex-preferred-size: 80%;
            flex-basis: 80%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    margin-left: 5px;

    text-align: left;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* .highscore-with-cards .name-and-points div p {
    margin: 0.2rem 0 !important;
} */

.highscore-with-cards .name-and-points div:not(.scoreboard-extra-info) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.highscore-with-cards .name-and-points .scoreboard-extra-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}


.highscore-with-cards .name-and-points .scoreboard-extra-info p.card, 
.highscore-with-cards .name-and-points .scoreboard-extra-info p.drawing-deck {
    height: 25px !important;
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    font-size: 11px;
    font-weight: 100;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    padding: 0 1px;
}

.highscore-with-cards .name-and-points .scoreboard-extra-info p.card {
    color: black
}


.highscore-with-cards p.rank {
    border: 1px solid;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    width: 2rem;
    height: 2rem;
    text-align: center;
    margin: 0;
    font-size: 1rem;
    font-weight: bolder;
    line-height: 2rem;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
    margin: 0.1rem 0 !important;
}
.highscore-with-cards  .lobby-player-card-designs .card {
    margin: auto;
}

.lobby .lobby-player-div.me {
    background: black;
    color: white;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}
.highscore-with-cards .lobby-player-card-designs .card,
.lobby .lobby-player-div .lobby-player-card-designs .card {
    height: -webkit-calc(0.35 * var(--card-height-default)) !important;
    height: -moz-calc(0.35 * var(--card-height-default)) !important;
    height: calc(0.35 * var(--card-height-default)) !important;
    width: -webkit-calc(0.35 * var(--card-width-default)) !important;
    width: -moz-calc(0.35 * var(---card-width-default)) !important;
    width: -moz-calc(0.35 * var(--card-width-default)) !important;
    width: calc(0.35 * var(--card-width-default)) !important;
    -webkit-border-radius: 0.35rem;
       -moz-border-radius: 0.35rem;
            border-radius: 0.35rem;
}
.highscore-with-cards .lobby-player-card-designs .card.left,
.lobby .lobby-player-div .lobby-player-card-designs .card.left {
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    position: relative;
    left: -webkit-calc(0.14 * var(--card-width-default));
    left: -moz-calc(0.14 * var(--card-width-default));
    left: calc(0.14 * var(--card-width-default));
}
.highscore-with-cards .lobby-player-card-designs .card.middle,
.lobby .lobby-player-div .lobby-player-card-designs .card.middle {
    z-index: 2;
}
.highscore-with-cards .lobby-player-card-designs .card.right,
.lobby .lobby-player-div .lobby-player-card-designs .card.right {
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    position: relative;
    left: -webkit-calc(-0.14 * var(--card-width-default));
    left: -moz-calc(-0.14 * var(--card-width-default));
    left: calc(-0.14 * var(--card-width-default));
}

.highscore-with-cards .lobby-player-card-designs .card.left::before,
.highscore-with-cards .lobby-player-card-designs .card.right::before,
.lobby .lobby-player-div .lobby-player-card-designs .card.left::before,
.lobby .lobby-player-div .lobby-player-card-designs .card.right::before {
    top: 0;
    left: 2px;
    left: 1.5px;
}

.lobby .lobby-player-div .lobby-player-card-designs img {
    max-width: 100%;
    height: auto;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
    margin: auto;
}

.lobby .lobby-player-div .lobby-player-name {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
    -webkit-flex-basis: 70%;
        -ms-flex-preferred-size: 70%;
            flex-basis: 70%;
    word-break: break-all;
}

.lobby .lobby-player-div.im-ready .lobby-player-name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;
}
.lobby .lobby-player-div.im-ready .lobby-player-name::before {
    content: "\2714";
}

.lobby .lobby-player-div .lobby-player-delete {
    -webkit-flex-basis: 10%;
        -ms-flex-preferred-size: 10%;
            flex-basis: 10%;
    margin: auto;
    display: none;
}

.lobby .lobby-player-div .lobby-player-delete .remove-player-from-lobby {
    color:black;
}

.lobby .lobby-player-div .lobby-player-delete.show {
    display: block;
}

.lobby .toggle-darkmode,
.multiplayer .toggle-darkmode {
    position: relative;
    bottom: -webkit-calc(20px + 8vh);
    bottom: -moz-calc(20px + 8vh);
    bottom: calc(20px + 8vh);
}

.index .toggle-darkmode,
.div-game-menu .toggle-darkmode,
.default .toggle-darkmode,
.join .toggle-darkmode,
.singleplayer .toggle-darkmode,
.multiplayer .toggle-darkmode,
.highscore .toggle-darkmode,
.lobby .toggle-darkmode {
    bottom: 10vh;
    /* position: absolute; */
    position: fixed;
    right: 4vw;
}

.default .leave-button,
.join .leave-button,
.singleplayer .leave-button,
.multiplayer .leave-button,
.highscore .leave-button,
.tutorial .leave-button:not(.legend) {
    bottom: unset;
}

.multiplayer .enter-name {
    margin-top: 1.25rem;
}

.multiplayer .enter-name input {
    font-size: 2rem;
    padding: 10px;
    max-width: 100%;
}

.multiplayer .create-join {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 0.5rem;
    gap: 5px;
}

.multiplayer .create-join .join-btn-loading,
.multiplayer .create-join .create-lobby-btn-loading {
    margin-top: 0;
}

.multiplayer .join-lobby {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0;
}

.multiplayer .join-lobby input {
    margin: 0;
}

.multiplayer .join-lobby .lobby-code {
    -webkit-border-radius: 5px 0 0 5px;
       -moz-border-radius: 5px 0 0 5px;
            border-radius: 5px 0 0 5px;

    border-left: 2px;
    border-right: 0.1px;
    border-bottom: 2px;
    border-top: 2px;
    border-color: black;
    border-style: solid;

    width: 150px;
}

.multiplayer .join-lobby .join-btn,
.multiplayer .join-lobby .join-btn-loading {
    -webkit-border-radius: 0 5px 5px 0;
       -moz-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
    color: black;
}

.multiplayer .create-lobby {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.multiplayer .create-lobby select,
.multiplayer .create-lobby input {
    margin: 0;
}

.multiplayer .create-lobby .select-flow-level {
    -webkit-border-radius: 5px 0 0 5px;
       -moz-border-radius: 5px 0 0 5px;
            border-radius: 5px 0 0 5px;

    border-left: 2px;
    border-right: 0.1px !important;
    border-bottom: 2px;
    border-top: 2px;
    border-color: black;
    border-style: solid;
}

.multiplayer .create-lobby .select-max-round {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    border-right: 0 !important;
}


.multiplayer .create-lobby .create-lobby-btn-loading,
.multiplayer .create-lobby .create-lobby-btn {
    -webkit-border-radius: 0 5px 5px 0;
       -moz-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
    color: black;

    height: 44px;
}

.multiplayer .join-lobby .join-btn,
.multiplayer .create-lobby .create-lobby-btn {
    display: none;
}
.multiplayer .join-lobby .join-btn.show,
.multiplayer .create-lobby .create-lobby-btn.show {
    display: unset;
}

.multiplayer .my-open-lobbies {
    margin-top: 10px;
    max-height: -webkit-calc(100vh - 230px);
    max-height: -moz-calc(100vh - 230px);
    max-height: calc(100vh - 230px);
    background: var(--light-green);
    overflow: auto;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
body.has-ads .multiplayer .my-open-lobbies {
    max-height: -webkit-calc(100vh - 255px);
    max-height: -moz-calc(100vh - 255px);
    max-height: calc(100vh - 255px);
}

.multiplayer .my-open-lobbies div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;

    border: 1px solid;
    
    cursor: pointer;
}

.multiplayer .my-open-lobbies div.lobby-info,
.multiplayer .my-open-lobbies div.my-info {
    padding: 20px 0;
}

.multiplayer .my-open-lobbies div.lobby-info {
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
       -moz-box-flex: 3;
        -ms-flex-positive: 3;
            flex-grow: 3;
}
.multiplayer .my-open-lobbies div.my-info {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
       -moz-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    background: var(--black-with-more-opacity);
}

.multiplayer .my-open-lobbies p {
    margin: 0;
}

select {
    border: 2px solid black;
    color: black;
}

.join .join-div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 3vh;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 10vh auto;
}

.join .join-div .join-text1 {
    font-weight: bolder;
}

.join .join-div .join-text2 {
    display: -ms-grid;
    display: grid;
    gap: 4px;
    text-align: center;
}

.game-menu,
.div-privacy-policy,
.div-legal-notice,
.div-credit {
    padding: 1vh 10vw 5vh;
}

.div-legal-notice h2 {
    font-size: 3rem;
    margin: 0;
    font-weight: 700;
}

.div-legal-notice p:first-of-type,
.div-privacy-policy p:first-of-type {
    margin-top: 0.5rem;
}
.div-legal-notice p,
.div-privacy-policy p {
    margin: 1rem 0;
}
.div-legal-notice span.tel-nr,
.div-legal-notice span.email,
.div-legal-notice span.managerName,
.load-legal-notice-data {
    font-weight: bolder;
    cursor: pointer;
}

.div-legal-notice a {
    text-decoration: none;
}


/* GAME MENU */

.game-menu {    
    text-align: center;
}

.game-menu div.next-to-eachother {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
}

.game-menu div.next-to-eachother div:not(.legal-shit) {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    text-align: -webkit-center;
}

.game-menu div.next-to-eachother.legal-shit {
    height: 5vh;
    margin-top: 10px;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    row-gap: 0px;
}

.game-menu div.next-to-eachother.legal-shit .game-menu-btn {
    height: 100%;
    font-size: 0.5rem;
    padding: 3px 8px;
    background: transparent !important;
    border-width: 1px !important;
    -webkit-flex-basis: fit-content;
        -ms-flex-preferred-size: fit-content;
            flex-basis: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}



.game-menu .game-menu-btn {
    height: 44px;
    max-height: 11vh;
    margin: 0px 0 3vh 0;
    cursor: pointer;

    width: 100%;
    font-size: 1rem;
    font-weight: bolder;

    text-transform: uppercase;
    background: var(--light-green-with-opacity);
    text-transform: uppercase;
    border: 2px solid black;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;

    display: -ms-grid;

    display: grid;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;

    height: -webkit-calc(0.52 * var(--card-height));

    height: -moz-calc(0.52 * var(--card-height));

    height: calc(0.52 * var(--card-height))
}

.game-menu .game-menu-btn a {
    color: inherit;
    text-decoration: none;
}

.game-menu .toggle-darkmode {
    text-align: right;
}

.game-menu .game-menu-btn:hover {
    -webkit-animation: game-menu-btn-tilt 300ms forwards;
            -moz-animation: game-menu-btn-tilt 300ms forwards;
              -o-animation: game-menu-btn-tilt 300ms forwards;
         animation: game-menu-btn-tilt 300ms forwards;
    background: #555;
    color: white;
}

.coming-soon {
    opacity: 0.25;
    cursor: not-allowed;
}

/* game-menu-btn-tilt */

.highscore div.header {
    position: relative;
    top: -34px;
    left: 50px;
    font-size: 1.3rem;
    font-weight: bolder;
    width: 75vw;
    margin: 0;
}

.highscore-list {
    margin-top: -25px;

    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 5px 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: -webkit-calc(47vh - 43px) 5px -webkit-calc(47vh - 43px);
    -ms-grid-rows: -moz-calc(47vh - 43px) 5px -moz-calc(47vh - 43px);
    -ms-grid-rows: calc(47vh - 43px) 5px calc(47vh - 43px);
    grid-template-rows: repeat(2, -webkit-calc(47vh - 43px));
    grid-template-rows: repeat(2, -moz-calc(47vh - 43px));
    grid-template-rows: repeat(2, calc(47vh - 43px));
    grid-gap: 5px;
}

body.has-ads .highscore-list {
    margin-top: -30px;

    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2px 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: -webkit-calc(49vh - 60px) 5px -webkit-calc(49vh - 60px);
    -ms-grid-rows: -moz-calc(49vh - 60px) 5px -moz-calc(49vh - 60px);
    -ms-grid-rows: calc(49vh - 60px) 5px calc(49vh - 60px);
    grid-template-rows: repeat(2, -webkit-calc(49vh - 60px));
    grid-template-rows: repeat(2, -moz-calc(49vh - 60px));
    grid-template-rows: repeat(2, calc(49vh - 60px));
    grid-gap: 2px;
}

.body-highscore .ads-next-to-eachother,
.body-design-card .ads-next-to-eachother {
    margin: 10px 0 5px;
}

.lobby .ads-next-to-eachother {
    margin: 0px 0 5px;
}

.body-tutorial .ads-next-to-eachother {
    margin: 0px 0 25px;
}

.lowercase-input {
    text-transform: lowercase;
}
.lowercase-input::-webkit-input-placeholder {
    text-transform: none;
}
.lowercase-input:-moz-placeholder {
    text-transform: none;
}
.lowercase-input::-moz-placeholder {
    text-transform: none;
}
.lowercase-input:-ms-input-placeholder {
    text-transform: none;
}
.lowercase-input::-ms-input-placeholder {
    text-transform: none;
}
.lowercase-input::placeholder {
    text-transform: none;
}

.highscore-list > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.highscore-list > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.highscore-list > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.highscore-list > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.highscore-list .highscores {
    height: 100%;
    overflow: auto;
    border: 2px solid black;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    padding: 7px;
    background: var(--white-with-opacity);
}

.highscore-list .highscores span {
    font-weight: bolder;
    font-size: 1.2rem;
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: -7px;
    background: white;
    margin: -7px -7px 0.4rem -7px;
    padding: 3px 7px 2px 7px;
    z-index: 3;
}

/* .highscore-list .highscores div {
    height: 100%;
    overflow: auto;
} */

.lobby .lobby-rules .highscore p,
.highscore-list p {
    margin: 0;
    /* margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid; */
}

.lobby .lobby-rules .highscore p:last-child,
.highscore-list p:last-child {
    border-bottom: 0px;
}

/* singleplayer */

.singleplayer hr {
    width: 100%;
    margin: 3.2vh 0;
    height: 3px;
    background-color: black;
    border-color: black;
}

.quickstart-start1,
.quickstart-start2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 5px;

    gap: 20px;
    margin-top: 10px;
}
.singleplayer .div-quickstart {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -moz-box-align: center;
    align-items: center;
    gap: 2vw;
}

.singleplayer .div-quickstart.coming-soon {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -ms-touch-action: none;
        touch-action: none;
    pointer-events: none;
}

.singleplayer .div-quickstart.first {
    margin-top: 3vh;
}

.singleplayer .button-info-quickstart-offline {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-flex-basis: 14rem;
        -ms-flex-preferred-size: 14rem;
            flex-basis: 14rem;
    gap: 4px;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;

    -webkit-border-radius: 15px;

       -moz-border-radius: 15px;

            border-radius: 15px;
}

.singleplayer .button-info-quickstart-offline p {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
    font-weight: bolder;
    text-align: center;
    margin: 0;

    width: 100%;
}

.singleplayer .button-info-quickstart-offline .button {
    width: 3.5rem;
    padding: 0;
    height: 40px;
    text-align: center;
}

.singleplayer .button-info-quickstart-offline select {
    width: 100%;
}

.singleplayer .button-info-quickstart-offline div {
    height: 40px;
}

.singleplayer .button-info-quickstart-offline img {
    width: auto;
    height: 100%;
    -webkit-transform: rotate(86deg);
       -moz-transform: rotate(86deg);
        -ms-transform: rotate(86deg);
         -o-transform: rotate(86deg);
            transform: rotate(86deg);
}

.singleplayer .highscore-quickstart-offline {
    min-width: unset;
    margin: unset;
    width: 30rem;
    max-width: calc(100% - 15rem);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    text-align: center;

    padding: 0;

    height: 73px;
}

.singleplayer-game,
.multiplayer-game {
    padding-top: 15px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 5px;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

       -moz-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;
    height: 100vh;
}

.singleplayer-game .ads-next-to-eachother,
.multiplayer-game .ads-next-to-eachother {
    margin: 0;
    padding: 5px 0;

    margin-top: -15px;
}

.warning_for_inactivity.popup {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    top: 60px;
    left: unset;
    -webkit-transform: unset;
       -moz-transform: unset;
        -ms-transform: unset;
         -o-transform: unset;
            transform: unset;
}

.warning_for_inactivity.popup.show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    z-index: 100004;
}

.warning_for_inactivity.popup p {
    margin: 10px 0;
}

.warning_for_inactivity.popup h3 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    font-size: 16px;
    font-weight: bold;
}

.singleplayer-game .end-screen div,
.singleplayer .highscore-quickstart-offline div {
    margin: -8px;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
    font-size: 1rem;

    -webkit-flex-basis: -webkit-calc(50% - 25px);

        -ms-flex-preferred-size: calc(50% - 25px);

            flex-basis: -moz-calc(50% - 25px);

            flex-basis: calc(50% - 25px);
}

.singleplayer-game .end-screen div p:first-child,
.singleplayer .highscore-quickstart-offline div p:first-child {
   font-size: 0.9rem;
   font-weight: lighter;
}

.singleplayer-game .end-screen div p,
.singleplayer .highscore-quickstart-offline div p {
   font-size: 1.1rem;
   font-weight: bolder;
   /* color: black; */
}

.singleplayer-game .end-screen {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.singleplayer-game .end-screen div {
    margin: 0;
    text-align: center;
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    gap: 2px;
}

.singleplayer-game .end-screen.hidden {
    display: none;
}

.singleplayer-game .confetti .animated-text {
    color: black;
    margin-top: -93px;
}

body:not(.dark-mode) .tutorial {
    background: var(--white-with-opacity);
    height: unset;
}
.tutorial h2 {
    cursor: pointer;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    width: 100%;
    background: var(--light-green);
    margin: 5px 0 0 0;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    padding: 10px;
    border: 2px solid black;
    min-height: 44px;
}

.tutorial h2.has-div-show {
    -webkit-border-radius: 5px 5px 0 0;
       -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
    border: unset;
    border-top: 2px solid;
    border-right: 2px solid;
    border-left: 2px solid;
}
.tutorial h2:has(+ div.show) {
    -webkit-border-radius: 5px 5px 0 0;
       -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
    border: unset;
    border-top: 2px solid;
    border-right: 2px solid;
    border-left: 2px solid;
}

.tutorial-text {
    color:black;
    display: none;
    margin-top: 5vh;
}
.tutorial-text.show {
    display: block;
}

.tutorial .load {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.tutorial .div-start-tour {
    margin-top: 3vh;
    min-height: 44px;
    width: 200px;
}
.tutorial div.toggle-div {
    display: none;
}
.tutorial div.toggle-div.show {
    display: block;
    background: var(--light-green);
    padding: 0 10px 10px 10px;
    -webkit-border-radius: 0 0 5px 5px;
       -moz-border-radius: 0 0 5px 5px;
            border-radius: 0 0 5px 5px;

    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
}
.tutorial div.toggle-div div.info {
    padding: 10px;
    border-top: 2px solid;
    margin-top: 10px;
}
.tutorial div.toggle-div div.info p {
    margin: 0;
    display: inline;
}
.tutorial div.toggle-div div.hidden {
    display: none;
}
.tutorial div.toggle-div div.points-box p {
    line-height: unset;
}
.tutorial div.toggle-div p {
    line-height: 25px;
    margin: 0;
}
.tutorial .toggle-div.w-0.legend {
    padding-top: 15px;
}
.tutorial .legend .tutorial-legend-border {
    position: relative;
    top: -110px;
    height: 0;
}
.tutorial .legend div.stack {
    height: -webkit-calc(2.35 * var(--card-height));
    height: -moz-calc(2.35 * var(--card-height));
    height: calc(2.35 * var(--card-height));
    width: -webkit-calc(3.45 * var(--card-width) + 5px);
    width: -moz-calc(3.45 * var(--card-width) + 5px);
    width: calc(3.45 * var(--card-width) + 5px);
    border: 3px solid #0000ff;
    position: relative;
}
.tutorial .legend div.stack.n1 {
    top: -webkit-calc(-2.4 * var(--card-height));
    top: -moz-calc(-2.4 * var(--card-height));
    top: calc(-2.4 * var(--card-height));
}
.tutorial .legend .stack.n2 {
    top: -webkit-calc(-4.75 * var(--card-height));
    top: -moz-calc(-4.75 * var(--card-height));
    top: calc(-4.75 * var(--card-height));
    left: -webkit-calc(3.55 * var(--card-width) + 10px);
    left: -moz-calc(3.55 * var(--card-width) + 10px);
    left: calc(3.55 * var(--card-width) + 10px);
    width: -webkit-calc(2.9 * var(--card-width));
    width: -moz-calc(2.9 * var(--card-width));
    width: calc(2.9 * var(--card-width));
}
.tutorial .legend .stack.n3 {
    top: -webkit-calc(-7.1 * var(--card-height));
    top: -moz-calc(-7.1 * var(--card-height));
    top: calc(-7.1 * var(--card-height));
    left: -webkit-calc(6.65 * var(--card-width) + 15px);
    left: -moz-calc(6.65 * var(--card-width) + 15px);
    left: calc(6.65 * var(--card-width) + 15px);
}
.tutorial .legend .playground {
    position: relative;
    height: -webkit-calc(2.35 * var(--card-height) + 10px);
    height: -moz-calc(2.35 * var(--card-height) + 10px);
    height: calc(2.35 * var(--card-height) + 10px);
    width: -webkit-calc(10.48 * var(--card-width) + 10px);
    width: -moz-calc(10.48 * var(--card-width) + 10px);
    width: calc(10.48 * var(--card-width) + 10px);
    border: 3px solid red;
    top: -webkit-calc(-9.4 * var(--card-height) - 10px);
    top: -moz-calc(-9.4 * var(--card-height) - 10px);
    top: calc(-9.4 * var(--card-height) - 10px);
    left: -5px;
}

.tutorial .leave-button.legend {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
    /* outline-color: #fdbe21 !important; */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.tutorial .leave-button.legend > span{
    line-height: 31px;
    font-size: 31px;
}

.tutorial .legend .display-round{
    left: -webkit-calc((9.8 * var(--card-width)));
    left: -moz-calc((9.8 * var(--card-width)));
    left: calc((9.8 * var(--card-width)));
}

.tutorial .legend .all-open-value-cards {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-calc(3 * var(--card-width) + 5px);
    width: -moz-calc(3 * var(--card-width) + 5px);
    width: calc(3 * var(--card-width) + 5px);
    gap:1px;
}

.tutorial .legend .board-cards {
    padding-top: 52px;
}

.tutorial .legend .info-process-bar,
.tutorial .legend .drawing-deck,
.tutorial .legend .all-open-value-cards,
.tutorial .legend .info-points,
.tutorial .leave-button.legend,
.tutorial .legend .display-round {
    padding: 1px 2px;
    outline: 3px solid;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
}
.tutorial .legend .info-process-bar {
    /* outline-color: black; */
}
.tutorial .legend .drawing-deck {
    /* outline-color: #f800ff; */
    border: 0 !important;
}
.tutorial .legend .drawing-cards {
    gap: 8px;
}
.tutorial .legend .info-points {
    outline-color: #000;
}

.tutorial .legend .under-board {
    margin-top: 10px;
}




.tutorial .legend-text {
    margin-top: 175px;
}

.tutorial .legend .stack-text span,
.tutorial .legend .playground-text span {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    padding: 2px 5px;
}
.tutorial .legend .stack-text span.blue {
    background: #0000ff;
    color: white;
}
.tutorial .legend .playground-text {
    margin-bottom: 10px;
}
.tutorial .legend .playground-text span.red {
    background: red;
    color: white;
}
.tutorial .legend .all-open-value-cards.highlightDiv .card,
body.dark-mode .drawing-deck.highlightDiv,
.highlightDiv {
    background-color: #ffa500ad !important;
}

.tutorial .legend .div-badge,
.tutorial .legend .badge[data-badge]:after {
    font-size: 23px;
    background: var(--light-green-opposite);
    color: black;
    border-color: black;
    border: 1px solid;
    height: 23px;
    width: 23px;
    font-weight: bolder;
    line-height: 22px;
    top: -17px;
    right: -12px;
    z-index: 10000;
}

.tutorial .legend .div-badge {
    -webkit-border-radius: 180px;
       -moz-border-radius: 180px;
            border-radius: 180px;
    text-align: center;
}
.tutorial .legend .div-badge-legend-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2px;
    margin-top: 10px;
}
.tutorial .legend .playground-text,
.tutorial .legend .stack-text,
.tutorial .legend .div-badge-legend-text {
    padding: 2.5px;
    cursor: pointer;
}
.tutorial .legend .playground-text:hover,
.tutorial .legend .stack-text:hover,
.tutorial .legend .div-badge-legend-text:hover {
    background: #ffa500;
}

.ways-to-get-bonus-points h3 {
    margin: 15px 0 8px 0;
}
.ways-to-get-bonus-points p {
    margin: 0;
}
.ways-to-get-bonus-points .explain {
    margin-left: 30px;
}

.example {
    margin: 5px 0;
    font-size: 80%;
    padding: 10px 15px;
    background: #d3d3d3;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}


.fill-btn {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
}

.fill-btn input{
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1 / 1 / 2 / 2;
}

.fill-btn p{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;
    background: var(--black-with-opacity);
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1 / 1 / 2 / 2;
    height: inherit;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;

    width: 0%;

    margin: 0px;

    z-index: 2;
}

.leave-dialog .fill-btn, 
.leave-dialog .button {
    z-index: 2;
    color: black;
}

.leave-dialog.hidden {
    visibility: hidden;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;
}


.card {
    height: var(--card-height) !important;
    width: var(--card-width) !important;
}

.cards-to-design .card {
    height: -webkit-calc(1.4 * var(--card-height)) !important;
    height: -moz-calc(1.4 * var(--card-height)) !important;
    height: calc(1.4 * var(--card-height)) !important;
    max-height: 240px;
    width: -webkit-calc(1.4 * var(--card-width)) !important;
    width: -moz-calc(1.4 * var(--card-width)) !important;
    width: calc(1.4 * var(--card-width)) !important;
    max-width: 150px;
}
body.has-ads .cards-to-design .card {
    height: -webkit-calc(1.3 * var(--card-height)) !important;
    height: -moz-calc(1.3 * var(--card-height)) !important;
    height: calc(1.3 * var(--card-height)) !important;
    max-height: 240px;
    width: -webkit-calc(1.3 * var(--card-width)) !important;
    width: -moz-calc(1.3 * var(--card-width)) !important;
    width: calc(1.3 * var(--card-width)) !important;
    max-width: 150px;
}

.radio-toolbar input[type="radio"] {
    display: none;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #ddd;
    padding: 4px 11px;
    font-family: Arial;
    font-size: 1rem;
    cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
    background-color: #bbb;
}

.process-bar {
    z-index: 1000;
    height: 100%;
    width: -webkit-calc(var(--card-width) / 2.5);
    width: -moz-calc(var(--card-width) / 2.5);
    width: calc(var(--card-width) / 2.5);
    position: relative;
    background: #555;
    -webkit-border-radius: 25px;
       -moz-border-radius: 25px;
            border-radius: 25px;
    padding: 6px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
       -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
            box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.process-bar > span {
    display: block;
    -webkit-border-top-right-radius: 8px;
       -moz-border-radius-topright: 8px;
            border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 20px;
       -moz-border-radius-bottomright: 20px;
            border-bottom-right-radius: 20px;
    -webkit-border-top-left-radius: 8px;
       -moz-border-radius-topleft: 8px;
            border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 20px;
       -moz-border-radius-bottomleft: 20px;
            border-bottom-left-radius: 20px;
    -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
       -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);

    -webkit-transform: rotatex(180deg);

       -moz-transform: rotatex(180deg);

        -ms-transform: rotatex(180deg);

         -o-transform: rotatex(180deg);

            transform: rotatex(180deg);
}

.process-bar.green > span {
    background-color: rgb(0, 255, 0);
}

.process-bar.purple > span {
    background-color: var(--purple);
}

.process-bar.hidden {
    display: none;
}

.fullscreen-ads {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* LOADING: */
.fullscreen-ads,
.loading {
    z-index: 10005;

    display: none;
}

.fullscreen-ads > div.close-fullscreen-ad {
    left: unset;
    right: 30px;
}

.fullscreen-ads > .close-fullscreen-ad,
.loading > .stop-lds-spinner {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 30px;
    font-weight: bolder;
    color: var(--light-green);
}

.fullscreen-ads.show,
.loading.show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}
.highscore .lds-spinner {
    height: 60px;
}

.highscore-list .lds-spinner,
.lobby-rules .lds-spinner {
    position: relative;
}

.formLoginRegister .button.loading .lds-spinner,
.highscore-list .lds-spinner,
.im-ready-button.loading .lds-spinner {
    position: relative;
    top: unset;
    left: unset;
    -webkit-transform: unset;
       -moz-transform: unset;
        -ms-transform: unset;
         -o-transform: unset;
            transform: unset;
}
.create-join .join-btn-loading .lds-spinner,
.create-join .create-lobby-btn-loading .lds-spinner {
    position: relative;
    top: unset;
}


.lds-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    color: black;
    display: inline-block;
    /* position: relative; */
    width: 80px;
    height: 80px;
}
.loading-info {
    position: fixed;
    top: -webkit-calc(50% + 50px);
    top: -moz-calc(50% + 50px);
    top: calc(50% + 50px);
    text-align: center;
    width: 100%;
}
  .highscore .lds-spinner div {
    -webkit-transform-origin: 40px 25px;
       -moz-transform-origin: 40px 25px;
        -ms-transform-origin: 40px 25px;
         -o-transform-origin: 40px 25px;
            transform-origin: 40px 25px;
  }
  .lds-spinner div {
    -webkit-transform-origin: 40px 40px;
       -moz-transform-origin: 40px 40px;
        -ms-transform-origin: 40px 40px;
         -o-transform-origin: 40px 40px;
            transform-origin: 40px 40px;
    -webkit-animation: lds-spinner 1.2s linear infinite;
            -moz-animation: lds-spinner 1.2s linear infinite;
              -o-animation: lds-spinner 1.2s linear infinite;
         animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    -webkit-border-radius: 20%;
       -moz-border-radius: 20%;
            border-radius: 20%;
    background: white;
  }
  .highscores .lds-spinner div:after {
    background: black;
  }
  .lds-spinner div:nth-child(1) {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-delay: -1.1s;
            -moz-animation-delay: -1.1s;
              -o-animation-delay: -1.1s;
         animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
    -webkit-animation-delay: -1s;
            -moz-animation-delay: -1s;
              -o-animation-delay: -1s;
         animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
    -webkit-animation-delay: -0.9s;
            -moz-animation-delay: -0.9s;
              -o-animation-delay: -0.9s;
         animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-animation-delay: -0.8s;
            -moz-animation-delay: -0.8s;
              -o-animation-delay: -0.8s;
         animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    -webkit-animation-delay: -0.7s;
            -moz-animation-delay: -0.7s;
              -o-animation-delay: -0.7s;
         animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    -webkit-transform: rotate(150deg);
       -moz-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
         -o-transform: rotate(150deg);
            transform: rotate(150deg);
    -webkit-animation-delay: -0.6s;
            -moz-animation-delay: -0.6s;
              -o-animation-delay: -0.6s;
         animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-animation-delay: -0.5s;
            -moz-animation-delay: -0.5s;
              -o-animation-delay: -0.5s;
         animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    -webkit-transform: rotate(210deg);
       -moz-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
         -o-transform: rotate(210deg);
            transform: rotate(210deg);
    -webkit-animation-delay: -0.4s;
            -moz-animation-delay: -0.4s;
              -o-animation-delay: -0.4s;
         animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    -webkit-transform: rotate(240deg);
       -moz-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
         -o-transform: rotate(240deg);
            transform: rotate(240deg);
    -webkit-animation-delay: -0.3s;
            -moz-animation-delay: -0.3s;
              -o-animation-delay: -0.3s;
         animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
         -o-transform: rotate(270deg);
            transform: rotate(270deg);
    -webkit-animation-delay: -0.2s;
            -moz-animation-delay: -0.2s;
              -o-animation-delay: -0.2s;
         animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    -webkit-transform: rotate(300deg);
       -moz-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
         -o-transform: rotate(300deg);
            transform: rotate(300deg);
    -webkit-animation-delay: -0.1s;
            -moz-animation-delay: -0.1s;
              -o-animation-delay: -0.1s;
         animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    -webkit-transform: rotate(330deg);
       -moz-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
         -o-transform: rotate(330deg);
            transform: rotate(330deg);
    -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
              -o-animation-delay: 0s;
         animation-delay: 0s;
  }

  /* END LOADING */


/* MESSAGES */ 

.blur {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;
}


.messages {
    width: 75vw;
    z-index: 99999;
}

.messages.position-absolut-center {
    width: 75vw;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.messages.hidden {
    display: none;
}
.message {
    background: white;
    -webkit-box-shadow: 4px 4px 8px 0px rgb(0 0 0 / 31%);
       -moz-box-shadow: 4px 4px 8px 0px rgb(0 0 0 / 31%);
            box-shadow: 4px 4px 8px 0px rgb(0 0 0 / 31%);
    -webkit-border-radius: 1em;
       -moz-border-radius: 1em;
            border-radius: 1em;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    max-width: 40em;
    margin: 1em auto;
}

.message.error header {
    background: #D50000;
    text-align: right;
    padding: 1px;
    font-weight: bolder;
    font-size: 1.2rem;
}

.message.error header span {
    padding: 0px 15px;
    cursor: pointer;
}

.message header {
    background: #9E9E9E;
    width: 100%;
    padding: 0.5em; 
}

.message div {
    width: 50px;
    background: #D50000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.message div p {
    margin: auto;
    font-size: 3rem;
    font-weight: bolder;
    color: #ff5656;;
}

.message h2 {
    margin: 0.75em;
    font-size: 1.25em;
    position: relative;
    display: block;
    width: auto;
    max-width: -webkit-calc(100% - 56px - 1.5rem);
    max-width: -moz-calc(100% - 56px - 1.5rem);
    max-width: calc(100% - 56px - 1.5rem);
}


.message.error h2 span:first-child {
    color: #D50000;
    margin-right: 6px;
}


.message.error h2:after {
    border-bottom: 0.1em solid #D50000;
}

.message h2:after {
    content: "";
    border-bottom: 0.1em solid #9E9E9E;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


.badge:not(.toggle-chat):not(.lobby-edit) {
    position:relative;
}
.badge[data-badge]:after {
    content:attr(data-badge);
    position:absolute;
    top:-5px;
    right:-5px;
    font-size: 15px;
    background:red;
    color:white;
    width:15px;
    height:15px;
    text-align:center;
    line-height:15px;
    -webkit-border-radius:50%;
       -moz-border-radius:50%;
            border-radius:50%;
    -webkit-box-shadow:0 0 1px #333;
       -moz-box-shadow:0 0 1px #333;
            box-shadow:0 0 1px #333;
}
.game-menu-tutorial.badge[data-badge]:after {
    background: red;
    color: white;
    right: -8px;
    top: -9px;
    font-weight: 500;
}

.lobby-edit.badge[data-badge]:after {
    top:20px;
    right: 43px;
    background:var(--light-green-opposite);
    font-size: 0.6em;
}

body:not(.dark-mode) .feedback-path {
    background: var(--white-with-opacity);
}

.feedback-path {
    margin-top: 50px;
}

.feedback .infos-top {
    margin-right: 40px;
    margin-top: -25px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
       -moz-box-orient: horizontal;
       -moz-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    pointer-events: none;
}

.feedback .infos-top.hidden {
    display: none;
}

.feedback .infos-top .info {
    width: 22rem;
    padding: 2px;
}

.feedback .infos-top .info p {
    font-weight: bolder;
}

.feedback p {
    margin: 0;
}

.feedback .question_answer.first {
    border-top: 2px solid;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.feedback .question_answer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid;
}

.feedback .rating {
    margin-left: 16rem;
    display: none;
}

.feedback .rating,
.feedback .answer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    width: -webkit-calc(100% - 16rem);
    width: -moz-calc(100% - 16rem);
    width: calc(100% - 16rem);
    max-width: 35rem;
}

.feedback .answer {
    margin-left: 5px;
    border-style: solid;
    border-color: transparent;
    border-width: 3px;
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
}
.feedback .rating p {
    width: 10rem;
    text-align: center;
}
.feedback .question {
    width: 16rem;
}

.feedback .answer div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 10rem;
}

.feedback .answer input {
    width: 1rem;
    margin: 0;
}

.feedback .answer input:checked {
    border: 6px solid black;
}

.feedback h4 {
    font-size: 1rem;
    margin: 2rem 0 0.5rem 0;
    font-weight: 200;
}

.feedback textarea {
    width: -webkit-calc(100% - 2rem);
    width: -moz-calc(100% - 2rem);
    width: calc(100% - 2rem);
}

.feedback .if-want-to-hear input {
    min-width: 17rem;
    width: 40%;
}

.feedback .btn-block {
    text-align: center;
    margin: 1.5rem 2rem 2rem 2rem;
}

.feedback .send-feedback {
    width: 60vw;
    height: 3rem;
    font-weight: bolder;
}

.feedback p.info {
    margin: 0.5rem 0;
    border-bottom: 2px solid;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.feedback .question,
.feedback label {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
}

.feedback .answer.missing-answer {
    border-color: red;
}

/* label.super-happy svg path {
    d: path("M 12 17.5 C 14.33 17.5 16.3 16.04 17.11 14 H 6.89 C 7.69 16.04 9.67 17.5 12 17.5 M 8.5 11 A 1.5 1.5 0 0 0 10 9.5 A 1.5 1.5 0 0 0 8.5 8 A 1.5 1.5 0 0 0 7 9.5 A 1.5 1.5 0 0 0 8.5 11 M 15.5 11 A 1.5 1.5 0 0 0 17 9.5 A 1.5 1.5 0 0 0 15.5 8 A 1.5 1.5 0 0 0 14 9.5 A 1.5 1.5 0 0 0 15.5 11 M 12 20 A 8 8 0 0 1 4 12 A 8 8 0 0 1 12 4 A 8 8 0 0 1 20 12 A 8 8 0 0 1 12 20 M 12 2 C 6.47 2 2 6.5 2 12 A 10 10 0 0 0 12 22 A 10 10 0 0 0 22 12 A 10 10 0 0 0 12 2 Z");
} */

/* label.happy svg path {
    d: path("M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z");
} */

/* label.neutral svg path {
    d: path("M8.5,11A1.5,1.5 0 0,1 7,9.5A1.5,1.5 0 0,1 8.5,8A1.5,1.5 0 0,1 10,9.5A1.5,1.5 0 0,1 8.5,11M15.5,11A1.5,1.5 0 0,1 14,9.5A1.5,1.5 0 0,1 15.5,8A1.5,1.5 0 0,1 17,9.5A1.5,1.5 0 0,1 15.5,11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M9,14H15A1,1 0 0,1 16,15A1,1 0 0,1 15,16H9A1,1 0 0,1 8,15A1,1 0 0,1 9,14Z");
} */

/* label.sad svg path {
    d: path("M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z");
} */

/* label.super-sad svg path {
    d: path("M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M16.18,7.76L15.12,8.82L14.06,7.76L13,8.82L14.06,9.88L13,10.94L14.06,12L15.12,10.94L16.18,12L17.24,10.94L16.18,9.88L17.24,8.82L16.18,7.76M7.82,12L8.88,10.94L9.94,12L11,10.94L9.94,9.88L11,8.82L9.94,7.76L8.88,8.82L7.82,7.76L6.76,8.82L7.82,9.88L6.76,10.94L7.82,12M12,14C9.67,14 7.69,15.46 6.89,17.5H17.11C16.31,15.46 14.33,14 12,14Z");
} */


svg {
	fill: #999999;
	height: 2.5rem;
	width: 2.5rem;
}


#radios label {
	position: relative;
}

input[type="radio"] {
	position: absolute;
	opacity: 0;
}

input + svg {
	cursor: pointer;
}

input[class="super-happy"]:hover + svg,
input[class="happy"]:hover + svg,
input[class="neutral"]:hover + svg,
input[class="sad"]:hover + svg,
input[class="super-sad"]:hover + svg {
    fill: rgb(113, 126, 118);
}
input[class="super-happy"]:checked + svg,
input[class="super-happy"]:focus + svg {
    fill: rgb(0, 204, 79);
}

input[class="happy"]:checked + svg,
input[class="happy"]:focus + svg {
    fill: #00bc00;
}

input[class="neutral"]:checked + svg,
input[class="neutral"]:focus + svg {
	fill: #DAA520;
}

input[class="sad"]:checked + svg,
input[class="sad"]:focus + svg {
	fill: rgb(229, 132, 0);
}

input[class="super-sad"]:checked + svg,
input[class="super-sad"]:focus + svg {
	fill: rgb(239, 42, 16);
}

footer {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	   -moz-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	text-align: right;
	width: 34.6rem;
	margin: auto;
}

footer p {
	font-size: 1.3em;
}
/* 
@media screen and (max-width: 650px) and (max-height: 700px) {
	body,
	html {
		font-size: 0.7rem;
	}
	header h1 {
		font-size: 4em;
	}
	footer p {
		font-size: 2em;
	}
}

@media screen and (max-height: 700px) {
	body,
	html {
		font-size: 0.7rem;
	}
	header h1 {
		font-size: 4em;
	}
	footer p {
		font-size: 2em;
	}
}

@media screen and (max-width: 650px) {
	body,
	html {
		font-size: 0.7rem;
	}
	header h1 {
		font-size: 4em;
	}
	footer p {
		font-size: 2em;
	}
}

@media screen and (max-width: 450px) and (max-height: 550px) {
	body,
	html {
		font-size: 0.6rem;
	}
	header h1 {
		font-size: 4.6em;
	}
	footer p {
		font-size: 3em;
	}
}

*/


/*

@media screen and (max-width: 450px) {
	body,
	html {
		font-size: 0.6rem;
	}
	header h1 {
		font-size: 4.6em;
	}
	footer p {
		font-size: 3em;
	}
}

@media screen and (max-width: 400px) and (max-height: 500px) {
	body,
	html {
		height: 500px;
		width: 400px;
	}
}

@media screen and (max-height: 500px) {
	body,
	html {
		height: 500px;
	}
}

@media screen and (max-width: 400px) {
	body,
	html {
		width: 400px;
	}
} */


.leave-button,
.toggle-chat img,
.toggle-fullscreen img, 
.toggle-darkmode img {
    -webkit-tap-highlight-color: transparent;
}


.news.hidden {
    display: none;
}

.news.most-important {
    z-index: 999999;
}

.news.bigger {
    font-size: 1.2rem;
    font-weight: bolder;
}

.news {
    max-width: 300px;
    min-width: 100px;
    -webkit-border-radius: 1em;
       -moz-border-radius: 1em;
            border-radius: 1em;
    text-align: center;
    position: absolute;
    top: 3vh;
    right: 5vw;
    border: 3px solid #D50000;
    background: white;

    margin-right: 50px;

    z-index: 100000;
}

.news span {
    display: block;
    text-align: right;
    padding-right: 15px;
    background: #D50000;
    -webkit-border-radius: 12px 12px 0 0;
       -moz-border-radius: 12px 12px 0 0;
            border-radius: 12px 12px 0 0;
    font-weight: bolder;
    cursor: pointer;
} 

.news p {
    padding: 20px;
    margin: 0;
}

.news.green {
    border: 3px solid black;
}

.news.green span {
    background: var(--light-green);
} 


.body-design-card main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    gap: 15px;
    margin: 0;
    padding: 0px 10px;

    -webkit-align-self: center;

        -ms-flex-item-align: center;

                -ms-grid-row-align: center;

            align-self: center;
}

.body-design-card p {
    margin: 0;
}

.info-that-also-change-other-side {
    max-width: -webkit-calc(100% - 115px);
    max-width: -moz-calc(100% - 115px);
    max-width: calc(100% - 115px);
    position: fixed;
    right: 55px;
    height: 40px;
    bottom: 10px;
    background: var(--black-with-opacity);
    padding: 10px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    border: 2px solid var(--light-green);
    color: #fff;
}

.info-that-also-change-other-side .close-info-that-also-change-other-side{
    position: absolute;
    top: -5px;
    left: -5px;
    border: 1px solid red;
    -webkit-border-radius: 180px;
       -moz-border-radius: 180px;
            border-radius: 180px;
    width: 17px;
    height: 18px;
    font-size: 15px;
    padding: 2px;
    line-height: 14px;
    background: red;
}

.info-that-also-change-other-side.hidden {
    display: none;
}

.info-that-also-change-other-side::after {
    content: " ";
    position: absolute;
    bottom: 7px;
    left: 100%;
    margin-top: -5px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--light-green);
}

.choose-card-design {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3px;
    width: 100%;
    /* width: calc(100% - 160px); */
}

.choose-card-design .need-to-login {   
    position: absolute;
    height: 228px;
    background: #000000d1;
    width: 235px;
    margin-left: -webkit-calc(0.525 * var(--card-width) * 4 + (4 * 10px) + 5px);
    margin-left: -moz-calc(0.525 * var(--card-width) * 4 + (4 * 10px) + 5px);
    margin-left: calc(0.525 * var(--card-width) * 4 + (4 * 10px) + 5px);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    display: block;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.choose-card-design .need-to-login.hidden {   
    display: none;
}

.cards-to-design {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: -webkit-calc(1.4 * var(--card-height)) 4px -webkit-calc(1.4 * var(--card-height));
    -ms-grid-rows: -moz-calc(1.4 * var(--card-height)) 4px -moz-calc(1.4 * var(--card-height));
    -ms-grid-rows: calc(1.4 * var(--card-height)) 4px calc(1.4 * var(--card-height));
    grid-template-rows: -webkit-calc(1.4 * var(--card-height)) -webkit-calc(1.4 * var(--card-height));
    grid-template-rows: -moz-calc(1.4 * var(--card-height)) -moz-calc(1.4 * var(--card-height));
    grid-template-rows: calc(1.4 * var(--card-height)) calc(1.4 * var(--card-height));
    -ms-grid-columns: -webkit-calc(1.4 * var(--card-width)) 4px -webkit-calc(1.4 * var(--card-width));
    -ms-grid-columns: -moz-calc(1.4 * var(--card-width)) 4px -moz-calc(1.4 * var(--card-width));
    -ms-grid-columns: calc(1.4 * var(--card-width)) 4px calc(1.4 * var(--card-width));
    grid-template-columns: -webkit-calc(1.4 * var(--card-width)) -webkit-calc(1.4 * var(--card-width));
    grid-template-columns: -moz-calc(1.4 * var(--card-width)) -moz-calc(1.4 * var(--card-width));
    grid-template-columns: calc(1.4 * var(--card-width)) calc(1.4 * var(--card-width));
    margin: auto 0px;

    gap: 4px;
}
body.has-ads .cards-to-design {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: -webkit-calc(1.3 * var(--card-height)) 4px -webkit-calc(1.3 * var(--card-height));
    -ms-grid-rows: -moz-calc(1.3 * var(--card-height)) 4px -moz-calc(1.3 * var(--card-height));
    -ms-grid-rows: calc(1.3 * var(--card-height)) 4px calc(1.3 * var(--card-height));
    grid-template-rows: -webkit-calc(1.3 * var(--card-height)) -webkit-calc(1.3 * var(--card-height));
    grid-template-rows: -moz-calc(1.3 * var(--card-height)) -moz-calc(1.3 * var(--card-height));
    grid-template-rows: calc(1.3 * var(--card-height)) calc(1.3 * var(--card-height));
    -ms-grid-columns: -webkit-calc(1.3 * var(--card-width)) 4px -webkit-calc(1.3 * var(--card-width));
    -ms-grid-columns: -moz-calc(1.3 * var(--card-width)) 4px -moz-calc(1.3 * var(--card-width));
    -ms-grid-columns: calc(1.3 * var(--card-width)) 4px calc(1.3 * var(--card-width));
    grid-template-columns: -webkit-calc(1.3 * var(--card-width)) -webkit-calc(1.3 * var(--card-width));
    grid-template-columns: -moz-calc(1.3 * var(--card-width)) -moz-calc(1.3 * var(--card-width));
    grid-template-columns: calc(1.3 * var(--card-width)) calc(1.3 * var(--card-width));
    margin: auto 0px;

    gap: 5px;
}

.cards-to-design > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.cards-to-design > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.cards-to-design > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.cards-to-design > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.choose-text-color .card span:not(.tooltiptext span) {
    font-size: -webkit-calc(0.37 * var(--card-height));
    font-size: -moz-calc(0.37 * var(--card-height));
    font-size: calc(0.37 * var(--card-height));
}


.background-of-choosing {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
    gap: 10px;
    background: grey;
    padding: 5px 8px;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    overflow-y: hidden; 

    width: 100%;
    /* width: calc(100% - 160px); */
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
}

.background-of-choosing button.card{
    height: -webkit-calc(0.575 * var(--card-height)) !important;
    height: -moz-calc(0.575 * var(--card-height)) !important;
    height: calc(0.575 * var(--card-height)) !important;
    width: -webkit-calc(0.575 * var(--card-width)) !important;
    width: -moz-calc(0.575 * var(--card-width)) !important;
    width: calc(0.575 * var(--card-width)) !important;
    min-width: -webkit-calc(0.6 * var(--card-width)) !important;
    min-width: -moz-calc(0.6 * var(--card-width)) !important;
    min-width: calc(0.6 * var(--card-width)) !important;
    cursor: pointer;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
body.has-ads .background-of-choosing button.card{
    height: -webkit-calc(0.525 * var(--card-height)) !important;
    height: -moz-calc(0.525 * var(--card-height)) !important;
    height: calc(0.525 * var(--card-height)) !important;
    width: -webkit-calc(0.525 * var(--card-width)) !important;
    width: -moz-calc(0.525 * var(--card-width)) !important;
    width: calc(0.525 * var(--card-width)) !important;
    min-width: -webkit-calc(0.525 * var(--card-width)) !important;
    min-width: -moz-calc(0.525 * var(--card-width)) !important;
    min-width: calc(0.525 * var(--card-width)) !important;
}

body.has-ads .next-to-eachother:not(.legal-shit) .tutorial-badge {
    display: none;
}
body:not(.has-ads) .next-to-eachother.legal-shit .tutorial-badge {
    display: none;
}

.background-of-choosing button.card.coming-soon{
    cursor: not-allowed;
}
.background-of-choosing button.card.locked{
    cursor: help;
}

.background-of-choosing button.card.locked span:not(.tooltiptext span),
.background-of-choosing button.card.coming-soon span{
    opacity: 0.7;
}

body:not(.dark-mode) .background-of-choosing button.card.light-selected,
body.dark-mode .background-of-choosing button.card.dark-selected {
    border: 5px solid red !important;
}


.background-of-choosing .card:not(.closed):not(.card-to-change-background-color)::after {
    content: "A";
    font-size: -webkit-calc(0.37 * var(--card-height));
    font-size: -moz-calc(0.37 * var(--card-height));
    font-size: calc(0.37 * var(--card-height));
}

.background-of-choosing button.card.locked .item-locked,
.background-of-choosing button.card.coming-soon .item-locked {
    height: auto;
    width: 97%;
    position: absolute;
}

.background-of-choosing button.card:not(.locked):not(.coming-soon) .item-locked {
    display: none;
}

.item-locked.open-animation {
    -webkit-animation: remove-lock 8s forwards;
            -moz-animation: remove-lock 8s forwards;
              -o-animation: remove-lock 8s forwards;
         animation: remove-lock 8s forwards;
}

.background-of-choosing .coming-soon {
    opacity: 0.7;
}


/* .tooltip {
    position: relative;
    display: inline-block;
} */

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    border: 1px solid;
    text-align: center;
    padding: 5px;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    height: -webkit-calc(0.575 * var(--card-height) + 5px);
    height: -moz-calc(0.575 * var(--card-height) + 5px);
    height: calc(0.575 * var(--card-height) + 5px);
    font-size: 0.7rem;;

    display: -webkit-box;;
    display: -webkit-flex;;
    display: -moz-box;;
    display: -ms-flexbox;;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

       -moz-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext,
.tooltip .tooltiptext.show  {
    visibility: visible;
}

.tooltip.top .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.tooltip.top .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip.right .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.tooltip.right .tooltiptext {
    top: -5px;
    left: 105%;
}

.tooltip.bottom .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.tooltip.bottom .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.tooltip .tooltiptext span {
    font-size: inherit;
    opacity: 1;
}



.body-design-card .tooltip.left .tooltiptext {
    z-index: 4;
    top: -webkit-calc(-1 * 0.31 * var(--card-height) + 5px - 5px);
    top: -moz-calc(-1 * 0.31 * var(--card-height) + 5px - 5px);
    top: calc(-1 * 0.31 * var(--card-height) + 5px - 5px);
    right: -webkit-calc(0.575 * var(--card-width) / 2) !important;
    right: -moz-calc(0.575 * var(--card-width) / 2) !important;
    right: calc(0.575 * var(--card-width) / 2) !important
}
.body-design-card .tooltip.left .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}
.body-design-card .card.closed .tooltip.left .tooltiptext {
    top: -webkit-calc(0 * 0.575 * var(--card-height) + 0px - 5px);
    top: -moz-calc(0 * 0.575 * var(--card-height) + 0px - 5px);
    top: calc(0 * 0.575 * var(--card-height) + 0px - 5px)
}
.body-design-card .card.card-to-change-red-text-color .tooltip.left .tooltiptext,
.body-design-card .card.card-to-change-black-text-color .tooltip.left .tooltiptext {
    top: -webkit-calc(-1 * 0.05 * var(--card-height) + 0px - 5px);
    top: -moz-calc(-1 * 0.05 * var(--card-height) + 0px - 5px);
    top: calc(-1 * 0.05 * var(--card-height) + 0px - 5px)
}



.unlock_animation {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    max-height: 90vh;
    width: 31rem;
    max-width: 90vw;
    background-image: -webkit-gradient(linear, left top, right top, from(#434343), to(white));
    background-image: -webkit-linear-gradient(left, #434343 0%, white 100%);
    background-image: -moz-linear-gradient(left, #434343 0%, white 100%);
    background-image: -o-linear-gradient(left, #434343 0%, white 100%);
    background-image: linear-gradient(to right, #434343 0%, white 100%);
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;

    border: 10px solid;
    border-color: var(--light-green);

    padding: 25px;

    z-index: 10003;
}

.unlock_animation,
.new-card-design {
    display: none;
}

.unlock_animation.show,
.new-card-design.show {
    display: unset;   
}

.unlock_animation h2 {
    margin: 0;
    text-align: center;
}

.unlock_animation section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 25px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.unlock_animation button {
    font-weight: bolder;
}

.unlock_animation section:first-of-type {
    margin: 1.3rem 0;
}

.div-credit {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 7px;
}

.credit {
    padding: 10px;
    background: var(--white-with-opacity);;
    -webkit-border-radius: 15px;;
       -moz-border-radius: 15px;;
            border-radius: 15px;
    border: 2px solid;
}

.credit a {
    color: var(--light-green-opposite);
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.credit p {
    margin: 0;
    font-weight: bolder;
}



/* DARK-MODE: */

body.dark-mode {
    color: white !important;

    /* background: url(../imgs/space.jpg) no-repeat center center; */
    /* background: url(../imgs/space.jpg) repeat center center; */
    background: black;
    background-color: black !important;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

body.dark-mode .highscore-list .highscores {
    background: var(--black-with-more-opacity);
}

body.dark-mode .news {
    background: black !important;
    color: white !important;
}

body.dark-mode.singleplayer-game .confetti .animated-text {
    color: white !important;
}


.card.red.card-to-change-red-text-color.dark-color-red-style-6:not(.light-color-red-style-6),
body:not(.dark-mode) .card.red.card-to-change-red-text-color.light-color-red-style-4.dark-color-red-style-4,
body:not(.dark-mode) .card.card-to-change-black-text-color.light-color-black-style-4.dark-color-black-style-4,
body:not(.dark-mode) .card.card-to-change-black-text-color.light-color-black-style-6.dark-color-black-style-6,
body.dark-mode .card:not(.card-to-change-black-text-color.light-color-black-style-6.dark-color-black-style-6) {
    background: black;
    border-color: white;
    color: white;
}

body.dark-mode .card.half-closed:not(.roundOver) {
    color: rgb(128 128 128 / 70%) !important;
}

body.dark-mode .display-round,
body.dark-mode .card.black {
    color: white !important;
}

body.dark-mode .drawing-deck {
    border: 2.5px solid white !important;
    background-color: #405000 !important;
}

.choose-card-design .need-to-login img,
body.dark-mode .login-profile-icon img,
body.dark-mode .in-app-reload img,
body.dark-mode .card-size-changer img,
body.dark-mode .leave-button img,
body.dark-mode .toggle-chat img,
body.dark-mode .toggle-fullscreen img,
body.dark-mode .lobby-code img,
body.dark-mode .lobby-rules img,
body.dark-mode .go-back img,
body.dark-mode.body-design-card main div > img,
body.dark-mode .toggle-darkmode img,
body.dark-mode .edit-volume img {
    filter: invert(100%) !important;
    -webkit-filter: invert(100%) !important; 
}

body.dark-mode .edit-volume-range,
body.dark-mode .card-size-changer-range {
    z-index: 100000000;
    border: 2px solid var(--light-green-with-opacity);
    background: black;
}

body.dark-mode .card-size-changer-range-buttons p {
    border-width: 3px;
    border-color: var(--light-green-with-opacity);
}

body.dark-mode .button:not(.only-in-light),
body.dark-mode textarea,
body.dark-mode input:not([type="range"]), 
body.dark-mode .join-lobby .lobby-code {
    border-color: var(--light-green-with-opacity);
    color: white !important;
}

body.dark-mode .button:not(.only-in-light),
body.dark-mode textarea,
body.dark-mode input:not([type="range"]):not(.im-not-ready), 
body.dark-mode .join-lobby .lobby-code {
    background: var(--black-with-more-opacity) !important;
} 

body.dark-mode .multiplayer .enter-name input {
    color: #ffffffb8 !important;
}

body.dark-mode .button:not(.only-in-light),
body.dark-mode input[type="button"]:not(.im-not-ready) {
    background: var(--light-green-with-more-opacity) !important;
} 

body.dark-mode .game-menu .right,
body.dark-mode .game-menu .left {
    background: black !important;
    border-color: black !important;
}

body.dark-mode select {
    border: 2px solid var(--light-green-with-opacity) !important;
    background: var(--black-with-more-opacity);
    color: white;
}

/* body.dark-mode .tooltiptext {
    background: #555 !important;
    /* border-color: black !important; 
    color: white !important;
} */

/* body.dark-mode .tooltiptext::after {
    border-color: transparent transparent transparent white !important;
} */

body.dark-mode .game-menu .game-menu-btn {
    background: var(--black-with-more-opacity) !important;
    border: 2px solid var(--light-green-with-opacity) !important;
    color: white !important;
}
body.dark-mode .game-menu .game-menu-btn:hover {
    background: var(--light-green-with-opacity) !important;
    color: black !important;
}

body.dark-mode .singleplayer hr {
    background-color: var(--light-green-with-opacity);
}

body.dark-mode .highscores .lds-spinner div:after {
    background: white;
}

body.dark-mode .fancy-border input[type="button"] {
    background: black !important;
} 

body.dark-mode .highscore-list .highscores span {
    background: var(--black-with-more-opacity);
}

body.dark-mode .singleplayer-game .confetti .animated-text {
    color: white !important;
}

body.dark-mode .div-legal-notice span.tel-nr,
body.dark-mode .div-legal-notice span.email,
body.dark-mode .div-legal-notice span.managerName,
body.dark-mode .div-legal-notice a,
body.dark-mode .lobby .lobby-rules .info .same-cards,
body.dark-mode .load-legal-notice-data {
    color: var(--light-green-with-opacity) !important;
} 

body.dark-mode .lobby .player-list,
body.dark-mode .lobby .lobby-rules,
body.dark-mode .lobby .lobby-rules .highscore {
    border-color: var(--light-green-with-opacity) !important;
} 


body.dark-mode .lobby .player-list,
body.dark-mode .lobby .lobby-rules {
    background: unset;
}


body.dark-mode .message {
    -webkit-box-shadow: 4px 4px 8px 0px rgb(255 255 255 / 31%);
       -moz-box-shadow: 4px 4px 8px 0px rgb(255 255 255 / 31%);
            box-shadow: 4px 4px 8px 0px rgb(255 255 255 / 31%); 
    background: black;
} 

body.dark-mode input[class="happy"]:hover + svg,
body.dark-mode input[class="happy"]:checked + svg,
body.dark-mode input[class="happy"]:focus + svg {
    fill: var(--light-green-with-opacity);
}

body.dark-mode .unlock_animation {
    background-image: -webkit-gradient(linear, left top, right top, from(#434343), to(black));
    background-image: -webkit-linear-gradient(left, #434343 0%, black 100%);
    background-image: -moz-linear-gradient(left, #434343 0%, black 100%);
    background-image: -o-linear-gradient(left, #434343 0%, black 100%);
    background-image: linear-gradient(to right, #434343 0%, black 100%);
}

body.dark-mode .news.green {
    border: 3px solid var(--light-green-with-opacity);
}

body.dark-mode .news.green span {
    background: var(--light-green-with-opacity);
} 
body.dark-mode .lobby-edit.badge[data-badge]:after {
    background:var(--light-green-with-opacity);
}

body.dark-mode .lobby .lobby-player-div.me {
    background: var(--light-green-with-opacity);
    color: black;
}
body.dark-mode .example {
    color:black;
}

body.dark-mode .highscore-list .highscores,
body.dark-mode div:not(.player-points) > .highscore-with-cards,
body.dark-mode .feedback .question_answer,
body.dark-mode .feedback .question_answer.first,
body.dark-mode .feedback p.info,
body.dark-mode .singleplayer hr {
    border-color: var(--light-green-with-opacity);
}

body.dark-mode .credit {
    background: var(--black-with-more-opacity);
}

body.dark-mode .credit a {
    color: var(--light-green-with-opacity);
}

body.dark-mode .fill-btn p {
    background: var(--light-green-with-opacity);
}

body.dark-mode .tutorial h2 {
    background: var(--light-green-with-opacity);
    border-color: white;
}
body.dark-mode .tutorial div.toggle-div.show {
    background: var(--light-green-with-opacity);
    border-color: white;
}


/* Card Designs: */
/* Background-colors: */
body:not(.dark-mode) .card.light-background-color-style-1,
body.dark-mode .card.dark-background-color-style-1 {
    background-color: rgb(255 190 190) !important;
}
body:not(.dark-mode) .card.light-background-color-style-2,
body.dark-mode .card.dark-background-color-style-2 {
    background-color: rgb(0, 0, 215) !important;
}
body:not(.dark-mode) .card.light-background-color-style-3,
body.dark-mode .card.dark-background-color-style-3 {
    background-color: rgb(200, 20, 20) !important;
}
body:not(.dark-mode) .card.light-background-color-style-4,
body.dark-mode .card.dark-background-color-style-4 {
    background: -webkit-gradient(linear, left top, right top, from(#DECBA4), to(#3E5151)) !important;
    background: -webkit-linear-gradient(left, #DECBA4, #3E5151) !important;
    background: -moz-linear-gradient(left, #DECBA4, #3E5151) !important;
    background: -o-linear-gradient(left, #DECBA4, #3E5151) !important;
    background: linear-gradient(to right, #DECBA4, #3E5151) !important;
}
body.dark-mode .card.dark-background-color-style-4.half-closed:not(.roundOver) {
    color: #00000080 !important;
}
body:not(.dark-mode) .card.light-background-color-style-5,
body.dark-mode .card.dark-background-color-style-5 {
    background: -webkit-linear-gradient(315deg, #0033A0, #FFD700) !important;
    background: -moz-linear-gradient(315deg, #0033A0, #FFD700) !important;
    background: -o-linear-gradient(315deg, #0033A0, #FFD700) !important;
    background: linear-gradient(135deg, #0033A0, #FFD700) !important;;
}
body:not(.dark-mode) .card.light-background-color-style-6,
body.dark-mode .card.dark-background-color-style-6 {
    background: -webkit-linear-gradient(315deg, #001F3F, #6A0D91) !important;
    background: -moz-linear-gradient(315deg, #001F3F, #6A0D91) !important;
    background: -o-linear-gradient(315deg, #001F3F, #6A0D91) !important;
    background: linear-gradient(135deg, #001F3F, #6A0D91) !important;
}
body:not(.dark-mode) .card.light-background-color-style-7,
body.dark-mode .card.dark-background-color-style-7 {
    background: -webkit-linear-gradient(315deg, #00CED1, #FF7F50) !important;
    background: -moz-linear-gradient(315deg, #00CED1, #FF7F50) !important;
    background: -o-linear-gradient(315deg, #00CED1, #FF7F50) !important;
    background: linear-gradient(135deg, #00CED1, #FF7F50) !important;
}
body:not(.dark-mode) .card.light-background-color-style-8,
body.dark-mode .card.dark-background-color-style-8 {
    background-color: var(--light-green) !important;
    box-shadow: 0 0 15px 5px var(--light-green) !important;
}
body:not(.dark-mode) .card.light-background-color-style-9,
body.dark-mode .card.dark-background-color-style-9 {
    background-color: rgb(68,214,44) !important;
}
body:not(.dark-mode) .card.light-background-color-style-10,
body.dark-mode .card.dark-background-color-style-10 {
    background-color: rgb(219,62,177) !important;
}

body.dark-mode input[type=range]::-webkit-slider-thumb {
    background: var(--light-green);
}
body.dark-mode input[type=range]::-webkit-slider-runnable-track {
    background: var(--light-green-with-opacity);
}
body.dark-mode input[type=range]::-webkit-slider-runnable-track {
    background: -webkit-gradient(linear,left top, left bottom,from(var(--light-green)),to(var(--light-green))) 0/var(--sx) 100% no-repeat, var(--light-green-with-opacity);
    background: -webkit-linear-gradient(var(--light-green),var(--light-green)) 0/var(--sx) 100% no-repeat, var(--light-green-with-opacity);
    background: linear-gradient(var(--light-green),var(--light-green)) 0/var(--sx) 100% no-repeat, var(--light-green-with-opacity);
}
body.dark-mode input[type=range]::-moz-range-thumb {
    background: var(--light-green);
}
body.dark-mode input[type=range]::-moz-range-track {
    background: var(--light-green-with-opacity);
}
body.dark-mode input[type=range]::-moz-range-track {
    background: -moz-linear-gradient(var(--light-green),var(--light-green)) 0/var(--sx) 100% no-repeat, var(--light-green-with-opacity);
    background: linear-gradient(var(--light-green),var(--light-green)) 0/var(--sx) 100% no-repeat, var(--light-green-with-opacity);
}
body.dark-mode input[type=range]::-ms-thumb {
    background: var(--light-green);
}
body.dark-mode input[type=range]::-ms-track {
    background: var(--light-green-with-opacity);
}
body.dark-mode input[type=range]::-ms-fill-lower {
    background: var(--light-green);
}
body.dark-mode .text.white {
    color: white;
}
body.dark-mode .tutorial .legend .drawing-deck, 
body.dark-mode .tutorial .legend .display-round {
    outline-color: black;
}

/* styles: */
body.dark-mode .board-cards.closed .card::after,
body.dark-mode .drawing-cards.closed .card::after,
body.dark-mode .card.closed::after,
body:not(.dark-mode) .board-cards.closed .card::after,
body:not(.dark-mode) .drawing-cards.closed .card::after,
body:not(.dark-mode) .card.closed::after {
    opacity: 1;
    width: inherit;
    height: inherit;
}

body.dark-mode .board-cards.closed .card.dark-style-1::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-1::after, 
body.dark-mode .card.closed.dark-style-1::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-1::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-1::after,
body:not(.dark-mode) .card.closed.light-style-1::after {
    opacity: 1;
    
    background-image: url("../rocket-skins/asiimov-rocket.webp") !important;

    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 80% 80%;
       -moz-background-size: 80%;
         -o-background-size: 80%;
            background-size: 80%;
    
    width: inherit;
    height: inherit;
}
body.dark-mode .board-cards.closed .card.dark-style-2::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-2::after, 
body.dark-mode .card.closed.dark-style-2::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-2::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-2::after,
body:not(.dark-mode) .card.closed.light-style-2::after {
    opacity: 1;
    
    background-image: url("../rocket-skins/costarica-rocket.webp") !important;

    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 80% 80%;
       -moz-background-size: 80%;
         -o-background-size: 80%;
            background-size: 80%;

    width: inherit;
    height: inherit;
}
body.dark-mode .board-cards.closed .card.dark-style-3::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-3::after, 
body.dark-mode .card.closed.dark-style-3::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-3::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-3::after,
body:not(.dark-mode) .card.closed.light-style-3::after {
    opacity: 1;

    background-image: url("../rocket-skins/germany-rocket.webp") !important;

    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 80% 80%;
       -moz-background-size: 80%;
         -o-background-size: 80%;
            background-size: 80%;
    
    width: inherit;
    height: inherit;
}
body.dark-mode .board-cards.closed .card.dark-style-4::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-4::after, 
body.dark-mode .card.closed.dark-style-4::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-4::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-4::after,
body:not(.dark-mode) .card.closed.light-style-4::after {
    opacity: 1;
    background-image: url("../imgs/rocket5.png") !important;

    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 80% 80%;
       -moz-background-size: 80%;
         -o-background-size: 80%;
            background-size: 80%;

    width: inherit;
    height: inherit;
}
body.dark-mode .board-cards.closed .card.dark-style-5::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-5::after, 
body.dark-mode .card.closed.dark-style-5::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-5::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-5::after,
body:not(.dark-mode) .card.closed.light-style-5::after {
    opacity: 1;
    background-image: url("../imgs/rocket5.png") !important;

    background-repeat: repeat;
    background-position: center center;
    -webkit-background-size: 50% 50%;
       -moz-background-size: 50%;
         -o-background-size: 50%;
            background-size: 50%;

            
    width: inherit;
    height: inherit;
}

body.dark-mode .board-cards.closed .card.dark-style-6::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-6::after, 
body.dark-mode .card.closed.dark-style-6::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-6::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-6::after,
body:not(.dark-mode) .card.closed.light-style-6::after {
    opacity: 1;

    filter: brightness(2);
    -webkit-filter: brightness(2);
    
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    
    background: url('../imgs/stargif.gif') no-repeat center center fixed;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    width: inherit;
    height: inherit;
}

body.dark-mode .board-cards.closed .card.dark-style-6::before, 
body.dark-mode .drawing-cards.closed .card.dark-style-6::before, 
body.dark-mode .card.closed.dark-style-6::before,
body:not(.dark-mode) .board-cards.closed .card.light-style-6::before,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-6::before,
body:not(.dark-mode) .card.closed.light-style-6::before {
    content: '';
    position: absolute;
    
    width: inherit;
    height: inherit;
    background: url('../imgs/rocket5-fire.webp') no-repeat center center;
    background-size: contain;
    
    animation: fly-style-6 3s linear infinite;

    transform: rotate(-20deg);
}

body.dark-mode .card-to-change-background-design.locked img.item-locked,
body.dark-mode .card-to-change-red-text-color.locked img.item-locked,
body.dark-mode .card-to-change-black-text-color.locked img.item-locked {
    filter: invert(1);
    z-index: 3;
}


body.dark-mode .board-cards.closed .card.dark-style-7::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-7::after, 
body.dark-mode .card.closed.dark-style-7::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-7::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-7::after,
body:not(.dark-mode) .card.closed.light-style-7::after {
    opacity: 1;
    background-image: url("../rocket-skins/20M-rocket.webp") !important;

    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 85% 85%;
       -moz-background-size: 85%;
         -o-background-size: 85%;
            background-size: 85%;

    width: inherit;
    height: inherit;
}

.card-to-change-red-text-color.light-color-red-style-8,
.card-to-change-red-text-color.dark-color-red-style-8,
.card-to-change-black-text-color.light-color-black-style-8,
.card-to-change-black-text-color.dark-color-black-style-8  {
    border-color: #FB48C4 !important;
    -webkit-box-shadow: 0 0 15px 5px #FB48C4 !important;
       -moz-box-shadow: 0 0 15px 5px #FB48C4 !important;
            box-shadow: 0 0 15px 5px #FB48C4 !important;
}
body.dark-mode .board-cards.closed .card.dark-style-8::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-8::after, 
body.dark-mode .card.closed.dark-style-8::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-8::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-8::after,
body:not(.dark-mode) .card.closed.light-style-8::after {
    opacity: 1;
    background-image: url("../rocket-skins/9.999.999.999-rocket.webp") !important;

    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 95% 95%;
       -moz-background-size: 95%;
         -o-background-size: 95%;
            background-size: 95%;

    width: inherit;
    height: inherit;
}
body.dark-mode .board-cards.closed .card.dark-style-9::after, 
body.dark-mode .drawing-cards.closed .card.dark-style-9::after, 
body.dark-mode .card.closed.dark-style-9::after,
body:not(.dark-mode) .board-cards.closed .card.light-style-9::after,
body:not(.dark-mode) .drawing-cards.closed .card.light-style-9::after,
body:not(.dark-mode) .card.closed.light-style-9::after {
    opacity: 1;
    background-image: url("../imgs/softmeer-logo.png") !important;

    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 75% 75%;
       -moz-background-size: 75%;
         -o-background-size: 75%;
            background-size: 75%;

    width: inherit;
    height: inherit;
}

body.dark-mode .multiplayer .my-open-lobbies {
    background: var(--light-green-with-more-opacity);
}

body.dark-mode .highscore-with-cards .name-and-points .scoreboard-extra-info p.card {
    color: white
}






/* Text Colors: */
.card.light-color-black-style-1,
body.dark-mode .card.dark-color-black-style-1,
.card.light-color-red-style-1,
body.dark-mode .card.dark-color-red-style-1 {
    color: var(--light-green) !important;
}

.card.light-color-black-style-2,
body.dark-mode .card.dark-color-black-style-2,
.card.light-color-red-style-2,
body.dark-mode .card.dark-color-red-style-2 {
    color: #78c6d1 !important;
}

.card.light-color-black-style-3,
body.dark-mode .card.dark-color-black-style-3,
.card.light-color-red-style-3,
body.dark-mode .card.dark-color-red-style-3 {
    color: rgb(100, 0, 0) !important;
}

.card.light-color-black-style-4, 
body.dark-mode .card.dark-color-black-style-4,
.card.light-color-red-style-4,
body.dark-mode .card.dark-color-red-style-4 {
    color: rgb(255, 255, 0) !important;
}
.card.light-color-black-style-5, 
body.dark-mode .card.dark-color-black-style-5,
.card.light-color-red-style-5,
body.dark-mode .card.dark-color-red-style-5 {
    color: rgb(85, 2, 149) !important;
}
.card.light-color-red-style-6,
body.dark-mode .card.dark-color-black-style-6 {
    color: black !important;
}
.card.light-color-black-style-6, 
body.dark-mode .card.dark-color-red-style-6 {
    color: white !important;
}
.card.light-color-black-style-7, 
body.dark-mode .card.dark-color-black-style-7,
.card.light-color-red-style-7,
body.dark-mode .card.dark-color-red-style-7 {
    color: rgb(205 139 0) !important;
}
.card.light-color-black-style-8, 
body.dark-mode .card.dark-color-black-style-8,
.card.light-color-red-style-8,
body.dark-mode .card.dark-color-red-style-8 {
    color: #FB48C4 !important;
    text-shadow: 0 0 7px #FB48C4;
}
.card.light-color-black-style-9, 
body.dark-mode .card.dark-color-black-style-9,
.card.light-color-red-style-9,
body.dark-mode .card.dark-color-red-style-9 {
    color: rgb(255 0 187) !important;
}

body.dark-mode .formLoginRegister .lds-spinner div:after {
    background: white;
}

body.dark-mode .background-of-choosing img.coming-soon {
    -webkit-filter: invert(1);
            filter: invert(1);
}

body.dark-mode .alpha-version-text {
    background: var(--black-with-opacity);
}

body.dark-mode .lobby .im-ready-button.im-not-ready {
    -webkit-animation: blinkImReadyBtnAnimation-darkmode 3s infinite;
       -moz-animation: blinkImReadyBtnAnimation-darkmode 3s infinite;
         -o-animation: blinkImReadyBtnAnimation-darkmode 3s infinite;
            animation: blinkImReadyBtnAnimation-darkmode 3s infinite;
}






/* START tutorial-tour */

.this-div-is-the-body.tutorial-tour .div-game-menu,
.this-div-is-the-body.tutorial-tour .div-singleplayer-game {
    min-height: 100vh;
}

.this-div-is-the-body.tutorial-tour:not(.tutorial1):not(.tutorial6):not(.tutorial9):not(.tutorial11) .div-game-menu,
.this-div-is-the-body.tutorial-tour:not(.tutorial1):not(.tutorial6):not(.tutorial9):not(.tutorial11) .div-singleplayer-game {
    cursor: pointer;
}



.this-div-is-the-body.tutorial-tour .badge[data-badge]:after {
    display: none;
}

.this-div-is-the-body.tutorial0 .game-menu-btn,

.this-div-is-the-body.tutorial1 .game-menu-btn:not(.game-menu-singleplayer),

.this-div-is-the-body.tutorial2 .display-round,
.this-div-is-the-body.tutorial2 .under-board,

.this-div-is-the-body.tutorial3 .drawing-deck,
.this-div-is-the-body.tutorial3 .display-round,
.this-div-is-the-body.tutorial3 .info-process-bar,
.this-div-is-the-body.tutorial3 .info-points,

.this-div-is-the-body.tutorial4 .drawing-deck,
.this-div-is-the-body.tutorial4 .display-round,
.this-div-is-the-body.tutorial4 .info-process-bar,
.this-div-is-the-body.tutorial4 .info-points,

.this-div-is-the-body.tutorial5 .drawing-deck,
.this-div-is-the-body.tutorial5 .display-round,
.this-div-is-the-body.tutorial5 .info-process-bar,
.this-div-is-the-body.tutorial5 .info-points,

.this-div-is-the-body.tutorial6 .drawing-deck,
.this-div-is-the-body.tutorial6 .display-round,
.this-div-is-the-body.tutorial6 .info-process-bar,
.this-div-is-the-body.tutorial6 .info-points,

.this-div-is-the-body.tutorial7 .drawing-deck,
.this-div-is-the-body.tutorial7 .display-round,
.this-div-is-the-body.tutorial7 .info-process-bar,
.this-div-is-the-body.tutorial7 .info-points,

.this-div-is-the-body.tutorial8 .drawing-deck,
.this-div-is-the-body.tutorial8 .display-round,
.this-div-is-the-body.tutorial8 .info-process-bar,
.this-div-is-the-body.tutorial8 .info-points,

.this-div-is-the-body.tutorial9 .display-round,
.this-div-is-the-body.tutorial9 .info-process-bar,
.this-div-is-the-body.tutorial9 .info-points,

.this-div-is-the-body.tutorial10 .display-round,
.this-div-is-the-body.tutorial10 .info-process-bar,
.this-div-is-the-body.tutorial10 .info-points,

.this-div-is-the-body.tutorial11 .game-menu-btn:not(.game-menu-tutorial)
{
    -webkit-filter: blur(10px);
            filter: blur(10px);

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;
    -ms-touch-action: none;
        touch-action: none;
    pointer-events: none;
}

.this-div-is-the-body.tutorial29 .skip-it {
    display: none;
}

.this-div-is-the-body.tutorial1 .game-menu-btn.game-menu-legal-notice,
.this-div-is-the-body.tutorial7 .board-cards,
.this-div-is-the-body.tutorial7 .drawing-deck,
.this-div-is-the-body.tutorial8 .drawing-deck,
.this-div-is-the-body.tutorial9 .board-cards,
.this-div-is-the-body.tutorial10 .board-cards,
.this-div-is-the-body.tutorial10 .game-menu-tutorial,
.this-div-is-the-body.tutorial11 .drawing-deck
{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -ms-touch-action: none;
        touch-action: none;
    pointer-events: none;
}


.this-div-is-the-body.tutorial19 #last-highscore1-div,
.this-div-is-the-body.tutorial16 .leave-button {
    border: 3px solid red !important;
} 

.this-div-is-the-body.tutorial16 .leave-button {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    padding: 2px;
} 


.tutorial2 .leave-button,
.tutorial3 .leave-button,
.tutorial4 .leave-button,
.tutorial5 .leave-button,
.tutorial6 .leave-button,
.tutorial7 .leave-button,
.tutorial8 .leave-button,
.tutorial9 .leave-button,
.tutorial10 .leave-button,
.tutorial11 .leave-button{
    -webkit-filter: blur(10px);
            filter: blur(10px);

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;
    -ms-touch-action: none;
        touch-action: none;
    pointer-events: none;
}


.this-div-is-the-body.tutorial1 .game-menu-singleplayer,
.this-div-is-the-body.tutorial9 .drawing-deck,
.this-div-is-the-body.tutorial11 .game-menu-btn.game-menu-tutorial,
.this-div-is-the-body.tutorial7 .oc2,
.this-div-is-the-body.tutorial8 .oc3 {
    -webkit-animation: animationOutline 2s linear infinite;
       -moz-animation: animationOutline 2s linear infinite;
         -o-animation: animationOutline 2s linear infinite;
            animation: animationOutline 2s linear infinite;
    outline-style: solid;
    outline-color: red;
}

.tutorial-speak-bubble {
    background: black;
    color: white;
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;
    min-width: 300px;
    max-width: 80vw;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 100px;
    
    display: -webkit-box;
    
    display: -webkit-flex;
    
    display: -moz-box;
    
    display: -ms-flexbox;
    
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 15px;
    font-weight: bolder;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#bubble.for-drawing-card {
    max-width: -webkit-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    max-width: -moz-calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    max-width: calc((10 * var(--card-width)) + (0.45 * var(--card-width)));
    margin: 20px auto 10px;
    display: -ms-grid;
    display: grid;
}

.tutorial-speak-bubble .name {
    font-weight: bolder;
}

.tutorial-speak-bubble .name.rocky {
    color: var(--light-green);
}

.div-skip-it {
    position: absolute;
    top: 75px;
    right: 1%;
    z-index: 10002;
}
.skip-it {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.skip-it.hidden {
    display: none;
}

/* END tutorial-tour */


/*---



    background: linear-gradient(to right, #DECBA4, #3E5151) !important; // nur mit leeren Hintergrund möglich



    background-color: #e5e5f7;
opacity: 0.8;
background-image: radial-gradient( ellipse farthest-corner at 10px 10px , #444cf7, #444cf7 50%, #e5e5f7 50%);
background-size: 10px 10px;

.card.light-color-black-style-1,
body.dark-mode .card.dark-color-black-style-1,
.card.light-color-red-style-1,
body.dark-mode .card.dark-color-red-style-1 {
    color: rgb(0 123 0);
}

.card.light-color-black-style-2,
body.dark-mode .card.dark-color-black-style-2,
.card.light-color-red-style-2,
body.dark-mode .card.dark-color-red-style-2 {
    color: rgb(0, 0, 255);
}

.card.light-color-black-style-4, 
body.dark-mode .card.dark-color-black-style-4,
.card.light-color-red-style-4,
body.dark-mode .card.dark-color-red-style-4 {
    color: rgb(255, 255, 0);
}
.card.light-color-black-style-1,
body.dark-mode .card.dark-color-black-style-1,
.card.light-color-red-style-1,
body.dark-mode .card.dark-color-red-style-1 {
    color: rgb(0 123 0);
}

.card.light-color-black-style-2,
body.dark-mode .card.dark-color-black-style-2,
.card.light-color-red-style-2,
body.dark-mode .card.dark-color-red-style-2 {
    color: rgb(0, 0, 255);
}

.card.light-color-black-style-4, 
body.dark-mode .card.dark-color-black-style-4,
.card.light-color-red-style-4,
body.dark-mode .card.dark-color-red-style-4 {
    color: rgb(255, 255, 0);
}
*/