/* main FAQ text */
h1{
    font-family: "Escargoth";
    font-size: 20rem;
    color: blue;
}

/* faq section */
#faq {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
    align-items: center;
    justify-content: space-around;
}

/* faq layout for larger screens */
@media (min-width: 900px) {
    #faq {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* container for faqs */
#faqs-container{
    font-family: "Jost";
    color: blue;
}

/* individual faq item */
.faq-item{
    width: 50vw;
    min-width: 340px;
    margin: 1rem;
}

/* question part of faq */
.item-question{
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: blue;
    color: white;
    font-size: 1.2rem;
    padding: 1rem;
    border-radius: 30px;
}

.item-answer{
    display: none;
    padding: 2rem;
}

.close{
    display: none;
}

.show-answer .item-answer{
    display: block;
}

.show-answer .close{
    display: inline;
}

.show-answer .expand{
    display: none;
}

@media (max-width: 900px) {
    h1 {
        font-size: 10rem;
    }
}