@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;
}

.title-page__index {
    margin-top: 10vw;
}

.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;
    }

    .quiz-search {
        gap: 2vw;
    }

    .quiz-search__label {
        font-size: 3.4vw;
    }

    .quiz-search__input-row {
        gap: 1.4vw;
    }

    .quiz-search__input {
        border-radius: 2vw;
        border-width: 0.35vw;
        padding: 2.7vw 3vw;
        font-size: 3.5vw;
    }

    .quiz-search__clear {
        border-radius: 2vw;
        border-width: 0.35vw;
        padding: 2.45vw 3.2vw;
        font-size: 3vw;
        white-space: nowrap;
    }

    .quiz-search__options {
        top: calc(100% + 1.2vw);
        max-height: 55vw;
        border-radius: 2vw;
        border-width: 0.2vw;
        padding: 1vw;
    }

    .quiz-search__option {
        border-radius: 1.8vw;
        padding: 2.6vw 2.8vw;
        font-size: 3.2vw;
    }

    .quiz-search__empty {
        font-size: 3vw;
        margin-top: 1vw;
    }

}