#game {

    padding: 0 1em;
}

.option-container {

    display: flex;
    margin-bottom: .5em;
    width: 100%;
    background-color: white;
    font-size: 1em;
    border: .1em solid rgba(44, 70, 219, 0.228);
}

.choice-letter {

    padding: .5em .8em;
    background-color: #003d80;
    color: #FBFFFE;
}

.option {

    padding: .5em .8em;
    width: 100%;
}

.option-container:hover {
    cursor: pointer;
    box-shadow: .04em .04em .5em rgba(54, 32, 196, 0.137);
    transform: translateY(-0.11em);
    transition: transform 100ms;
}

.correct {

    background-color: #149814;
    color: #ddefdf;
}

.incorrect {

    background-color: #d31919;
    color: #e6d5d5;
}


#hud {

    display: flex;
    justify-content: space-between;
}

.hud-prefix {

    text-align: center;
    font-size: 1.2em;
    color: #021224;
}

.hud-main {

    text-align: center;
    font-size: 2.6em;
}

#progressBar {

    border: 0.2em solid rgb(0 61 128);
    height: 1.81em;
    margin-top: .75em;
    width: 9em;
}

#progressBarFull {

    background-color: rgb(0 61 128);
    height: 1.4em;
    width: 0%;
}



/* Loader */

#loader {

    border: 0.9em solid white;
    border-top: 0.9em solid rgb(0 61 128);
    border-radius: 50%;
    width: 5em;
    height: 5em;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 500px) {

    :root {

        /* width: 100vw;
        height: 100vh; */
        overflow: hidden;
    }



    #game {
        padding: 2em 1.7em 4.7em 1.7em;
        padding-bottom: 5.5em;
        height: 100vh;
        display: flex;
        justify-content: space-evenly;
    }

    #ques {
        font-size: 1.32em;
        padding-bottom: .4em;
    }

    .option-container {
        font-size: .94em;
        border-radius: 10px 10px 10px 10px;
    }

    /* .choice-letter {

        border-radius: 4px 0 0 4px;
    } */

    #progressBar {

        border: 0.15em solid rgb(0 61 128);
        height: 1.3em;
        margin-top: 0.75em;
        width: 7.5em;
    }

    #progressBarFull {

        height: .96em;
    }

    .option {

        padding: .7em .8em;
    }

    .choice-letter {

        padding: .7em .86em;
        border-radius: 7px 0px 0px 7px;
    }
}