:root {
    --color-flag-es-red: #AD1519;
    --color-flag-es-yellow: #FABD00;
    --color-green-dartmouth: #0B6E4F;
}

/* nunito-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/nunito-v32-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/nunito-v32-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    font-family: Nunito, sans;
}

html {
    background-color: rgb(245 229 205);
}

body {
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    max-width: 80rem;
    height: 100vh;

    &>header {
        padding: 0.5rem 2rem;
    }
}

button,
input {
    color: inherit;
    font-family: inherit;
    font-size: 1em;
}

.form-logout {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
}

.button {
    background-color: transparent;
    border: solid 0.2rem black;
    border-radius: 0.7em;
    color: inherit;
    padding: 0.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-decoration: none;

    &.dark {
        background-color: black;
        color: white;
    }
}

.quiz {
    display: grid;
    grid-template-rows: 1fr 1.5fr 3rem;
    gap: 1rem;
    height: 90%;
    align-items: center;

    .question {
        font-weight: 700;
        font-size: 3rem;
        margin: 0 0 3rem 0;
        text-align: center;
    }

    .options {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        &:has(.is-answer) .option:not(.is-answer, .is-corrent, .is-wrong) {
            border-color: var(--color-flag-es-yellow);
            color: var(--color-flag-es-yellow);
        }
    }

    .option {
        background-color: transparent;
        border-color: currentColor;
        border-radius: 0.7em;
        border-style: solid;
        border-width: 0.2em;
        font-size: 1.2em;
        font-weight: 700;
        padding: 0.5em 1em 0.5em 2em;
        margin: 0;
        position: relative;
        text-align: left;

        &::before {
            position: absolute;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            top: 0;
            left: 0;
            height: 100%;
            width: 2.5rem;
        }

        &.is-answer {
            &:not(.is-correct) {
                border-style: dashed;
            }

            border-color: var(--color-green-dartmouth);
            color: var(--color-green-dartmouth);

            &::before {
                content: "\2714 ";
                /* ✔ HEAVY CHECK MARK */
            }
        }

        &.is-wrong {
            border-color: var(--color-flag-es-red);
            color: var(--color-flag-es-red);

            &::before {
                content: "\2717 ";
                /* ✗ BALLOT X */
            }
        }
    }

    button.option {
        cursor: pointer;
    }
}

.quiz-row-next {
    margin: 0;
    padding: 0;
    text-align: center;
}

@media (width > 50rem) {
    .quiz {
        .options {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
}