body {
    --questHeight: 20%;
    --mainMaxWidth: 500px;
    /*
    background-color: #ffffff;
    background-image: radial-gradient(#ff0000 0.6000000000000001px, #ffffff 0.6000000000000001px);
    background-size: 12px 12px;
    */
    transition: all 0.5s ease-in-out;
    font-optical-sizing: auto;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: 0.7rem;
    line-height: 1.2;
    overflow: hidden;
}

.quizGrid {
    display: none !important;
}

#background {
    z-index: 0;
    opacity: 0.7;
    height: 100vh;
    width: 100vw;

    background: radial-gradient(
            77.95% 77.95% at 74.66% 58.07%,
            rgba(0, 123, 193, 0.6) 0%,
            /* deep sea blue */ rgba(0, 173, 181, 0.2) 62.28%,
            /* turquoise */ rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
            89.67% 70.39% at 93.75% 92.16%,
            #005f73 0%,
            /* dark teal */ rgba(0, 150, 199, 0.4) 52.46%,
            /* ocean blue */ rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(68.86% 68.86% at 94.55% 1.7%, #6fffe9 0%, /* seafoam */ rgba(111, 255, 233, 0) 100%),
        linear-gradient(130.87deg, rgba(0, 105, 148, 0.7) 3.47%, /* marine blue */ rgba(0, 105, 148, 0) 77.25%);
    background-blend-mode: overlay, normal, normal, normal;
    filter: blur(50px);
}

#main {
    height: 97.5dvh;
    width: 95vw;
    max-width: var(--mainMaxWidth);
    max-height: calc(var(--mainMaxWidth) * 18 / 9);
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    border: solid;
    border-width: 0;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.1));
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.6);
    overflow: scroll;
}

@media (min-width: 1024px) {
    #main {
        height: 90dvh;
    }
}

a {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#loadingSpinner {
    height: 100%;
    width: 100%;
    display: none;
}
/* HTML: <div class="loader"></div> */
.loader {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60%;
    width: 50px;
    aspect-ratio: 1;
    background: #3fb8af;
    position: relative;
    animation: l8-0 2.5s infinite linear alternate;
}
.loader:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ff3d7f;
    transform: translate(100%);
    transform-origin: top left;
    animation: l8-1 0.5s infinite alternate;
}
@keyframes l8-0 {
    0%,
    19.9%,
    80%,
    100% {
        transform: scale(1, 1);
    }
    20%,
    39.9% {
        transform: scale(-1, 1);
    }
    40%,
    59.9% {
        transform: scale(-1, -1);
    }
    60%,
    79.9% {
        transform: scale(1, -1);
    }
}
@keyframes l8-1 {
    0%,
    20% {
        transform: translate(100%) rotate(0);
    }
    80%,
    100% {
        transform: translate(100%) rotate(-180deg);
    }
}