.correctAnswers {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.test b {
    font-weight: 400;
    color: var(--accent);
}

#cont {
    font-size: 1.5rem;
    width: 100% !important;
    max-width: none !important;
}


.variants {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.variants .btn {
    flex: 1;
    padding: 16px 5px;
}

.variants .btn.selected {
    transform: translateY(4px) translateZ(0);
}

.variants .btn.selected::before {
    box-shadow: none;
}

.no_uppercase .option_btn {
    text-transform: none;
}

.correct::before,
.correct:hover::before {
    border-color: var(--green) !important;
    background-color: var(--green) !important;
    box-shadow: 0 4px 0 var(--darkgreen);
}

.wrong::before,
.wrong:hover::before {
    border-color: var(--red) !important;
    background-color: var(--red) !important;
    box-shadow: 0 4px 0 var(--darkred);
}

#explanation {
    color: var(--secondary);
    margin-top: 15px;
    font-size: 16px;
    font-weight: 500;
    max-width: 700px;
}

.prev_question {
    padding: 10px 20px;
    background-color: var(--secondary_background);
    border-radius: 50vh;
    display: none;
    align-self: baseline;
    margin-top: 15px;
    transform: rotate(180deg);
    cursor: pointer;
    color: var(--accent);
}


@media (min-width: 992px) {
    #explanation {
        font-size: 19px;
    }
    .variants {
        gap: 24px;
    }
    
    .variants .btn {
        padding: 24px 5px;
    }
}

.desc pre {
    display: none;
}