html, body {
    margin: 0;
    color: white;
    background-color: #050505;
}

* {
  -webkit-tap-highlight-color: transparent;
}

h1 {
    font-family: 'Inter';
    font-size: calc(2.5vw + 0.7rem);
    /* background-color: green; */
    /* display: flex; */
    text-align: center;
    color: rgb(69, 233, 233);
    padding: 0;
    width: fit-content;
    margin: 6vw auto 0 auto;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: #db40db;
}

#descricao {
    /* background-color: red; */
    margin: 2vw auto;
    width: fit-content;
}

h2 {
    font-family: 'Roboto';
    font-size: calc(1vw + 0.9rem);
}

p {
    font-family: 'Roboto';
    font-size: calc(0.6vw + 0.4rem);
    margin: 0 0 1vw 0;
    /* background-color: yellow; */
    line-height: 1.4;
    letter-spacing: 0.7px;
}

/* p, h1, h2 {
    margin: 0;
    padding: 0;
} */

main {
    width: 80%;
    /* background-color: aqua; */
    margin: var(--altura-barra) auto 0 auto;
    display: flex;
    justify-content: center;
}

#containerFaq {
    /* background-color: red; */
    width: 80%;
}

/* #containerFaq section {
    dis
} */

.containerPergunta {
    width: calc(100% - 2px);
    margin: 1vw auto 0 auto;
}

details {
    background-color: #1d1d1d;
    padding: 0 1vw;
    border-radius: 1vw;
    border: 1px solid rgb(134, 128, 128);
}

details[open] {
    border: 1px solid aqua;
}

details[open] .iconeSumarry img {
    content: url("../icons/seta-cima.svg");
}

summary {
    /* background-color: rgb(0, 68, 255); */
    list-style: none;
    display: flex;
    align-items: center;
    /* width: 50%; */
    position: relative;
    cursor: pointer;
    padding: 1vw 0;
}

.iconeSumarry {
    /* background-color: green; */
    width: 1.5vw;
    display: flex;
    position: absolute;
    right: 0;
}

.iconeSumarry img {
    width: 100%;
    height: auto;
}

.pergunta {
    font-size: calc(0.8vw + 0.6rem);
    font-family: "Roboto";
}

/* details p {
    padding: 0 1rem 1rem;
} */

@media (max-width: 1024px) {
    h1 {
        font-size: calc(4.5vw + 0.7rem);
        /* background-color: green; */
        margin: 15vw auto 0 auto;
    }

    #descricao {
        /* background-color: red; */
        margin: 6vw auto;
        /* width: fit-content; */
        font-size: calc(2vw + 0.2rem);
        width: 70%;
        text-align: center;
    }

    p {
        font-size: calc(1.5vw + 0.2rem);
        margin: 0 0 2.3vw 0;
        /* background-color: yellow; */
    }


    main {
        width: 100%;
        /* background-color: aqua; */
        margin: var(--altura-barra-tablet) auto 0 auto;
    }

    #containerFaq {
        /* background-color: red; */
        width: 100%;
    }

    .containerPergunta {
        width: calc(100% - 4.6vw);
        margin: 1.5vw 2.3vw 0 2.3vw;
    }

    details {
        padding: 0 2.3vw;
        border-radius: 2vw;
        border: 1px solid rgb(134, 128, 128);
    }

    details[open] {
        border: 1px solid aqua;
    }

    details[open] .iconeSumarry img {
        content: url("../icons/seta-cima.svg");
    }

    summary {
        padding: 2.3vw 0;
    }

    .iconeSumarry {
        width: 3.5vw;
    }

    .pergunta {
        font-size: calc(2.5vw + 0.2rem);
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: calc(4.5vw + 0.7rem);
        /* background-color: green; */
        /* width: 90%; */
    }

    #descricao {
        /* background-color: red; */
        /* margin: 6vw auto; */
        /* width: fit-content; */
        font-size: calc(2vw + 0.5rem);
        width: 90%;
        /* text-align: center; */
    }

    p {
        font-size: calc(2vw + 0.5rem);
        margin: 0 0 3.5vw 0;
        /* background-color: yellow; */
    }


    main {
        /* width: 100%; */
        /* background-color: aqua; */
        /* margin: var(--altura-barra-tablet) auto 0 auto; */
    }

    #containerFaq {
        /* background-color: red; */
        /* width: 100%; */
    }

    .containerPergunta {
        width: calc(100% - 7vw);
        margin: 3vw 3.5vw 0 3.5vw;
    }

    details {
        padding: 0 3.5vw;
        border-radius: 4vw;
        border: 2px solid rgb(134, 128, 128);
    }

    details[open] {
        border: 2px solid aqua;
    }

    summary {
        padding: 3.5vw 0;
    }

    .iconeSumarry {
        width: 5.5vw;
    }

    .pergunta {
        font-size: calc(2vw + 0.7rem);
    }
}