@import url(../generic/_reset.css);
@import url(../generic/_animations.css);
@import url(../settings/_colors.css);
@import url(../settings/_fonts.css);
@import url(../components/_navbar.css);
@import url(../components/_step.css);
@import url(../components/_quiz-setup.css);
@import url(../elements/_headings.css);
@import url(../elements/_main.css);
@import url(../elements/_buttons.css);
@import url(../utilities/style.css);
@import url(../components/_modal-idioma.css);
@import url(../components/_streak-modal.css);

.paragraph-pass {
    opacity: 0.7;
}

.icon__navbar--link-page {
    width: 3vw;
    height: 3vw;
    border-radius: 100%;
    object-fit: cover;
    border: 0.2vw solid var(--white);
}

@media (min-width: 0) and (max-width: 1000px) {

    .modal-content {
        width: 85vw;
    }

    .theme-options {
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
    }

    #btn-next-step, #btn-prev-step {
        width: 20vw;
        font-size: 5vw;
    }

    #btn-finish-setup {
        width: 50vw;
        font-size: 3vw;
    }

    .language-options {
        width: 95%;
    }

    .idioma-select__button {
        font-size: 3.5vw;
        width: 100%;
        padding: 3vw;
        height: 15vw;
    }

    h1 {
        font-size: 12vw;
    }

    p {
        font-size: 4vw;
    }

    .paragraph-pass {
        font-size: 3vw;
        font-weight: 600;
    }

    #passo1 .quiz-setup:hover,
    #passo2 .quiz-setup:hover,
    #passo3 .quiz-setup:hover {
        background-color: var(--lavander-veil);
        border: 3vw solid var(--eletric-indigo);
    }

    #passo1 .quiz-setup:focus,
    #passo2 .quiz-setup:focus,
    #passo3 .quiz-setup:focus {
        background-color: var(--indigo);
        border: 3vw solid var(--eletric-indigo);
    }

    #passo1 .quiz-setup__button,
    #passo2 .quiz-setup__button,
    #passo3 .quiz-setup__button {
        font-size: 2.6vw;
        border-radius: 1.5vw !important;
        width: 95%;
        border-radius: 0.5vw;
        height: 10vw;
    }

    #passo1:hover, #passo2:hover, #passo3:hover {
        border: 0.4vw solid var(--eletric-indigo);
    }

    .quiz-setup__buttons {
        padding-bottom: 2vw;
        flex-direction: column;
    }

    .icon__navbar--link-page {
        width: 7vw;
        height: 7vw;
        border-radius: 100%;
        object-fit: cover;
        border: 0.2vw solid var(--white);
    }

    #passo3 .quiz-setup__buttons {
        flex-direction: column;
        gap: 0.2vw;
    }

    #passo3 .quiz-setup__button {
        width: 100%;
    }

    #passo1,
    #passo2,
    #passo3 {
        padding: 5vw;
        border-radius: 3vw;
    }

}