body:has(.game-bg) {
    --_transition-time: 1.5s;
    display: flex;
    flex-direction: column;
}

.game-bg {
    content: "";
    background-image: url(/res/imgs/media/background.png);
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    opacity: 0.1;
}

.answer-progress {
    background-color: var(--company-color10);
    height: 1.5em;
}

.answer-progress::before {
    content: "";
    background-color: var(--company-color6);
    display: block;
    height: 100%;
    width: 0%;

    animation: aprogress 10s ease-in forwards;
}

@keyframes aprogress {
    0% {
        width: 0%;
        background-color: var(--company-color6);
    }

    70% {
        background-color: var(--company-color6);
    }

    71% {
        background-color: var(--company-color9);
    }

    100% {
        width: 100%;
        background-color: var(--company-color9);
    }
}

main {
    flex: 1;
}

.game-question-wrapper {
    position: relative;
    width: 100%;
    height: 3em;
}

.game-question-box {
    height: 100%;
    width: fit-content;
    padding: 50px 100px;
    margin: auto;
    font-size: 2em;
}

.data-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

.logo-image {
    width: 100%;
}

.answer-timer {}

.answer-timer::before {}

@keyframes atimer {
    0% {
        width: 0%;
        background-color: var(--company-color6);
    }

    70% {
        background-color: var(--company-color6);
    }

    71% {
        background-color: var(--company-color9);
    }

    100% {
        width: 100%;
        background-color: var(--company-color9);
    }
}

.answer-counter {}

.answer-counter::before {}

/* answers section */

.answer-wrapper {}

.answer-card {}

@media (width<768px) {}

@media (width<1024px) {}

@media (width<1440px) {}