:root{
        --tertiary : #334;

}
/* ------------------------OVERRIDES-------------------------------------------- */
html{
    scroll-snap-type: none;
}

.flat_sections{
    background-color: var(--secondary);
}

.banner{
    overflow: visible;
}
.banner_img{
    height: 200%;
    min-width: unset;
    mask-image: linear-gradient(45deg, transparent, black);
    -webkit-mask-image: -webkit-linear-gradient(45deg,rgba(0,0,0,0), rgba(0,0,0,1));
}

/* --------------------------------------------------------------------------------------------- */
#faq_container{
    text-align: left;
}

.collapsible{
    list-style: none;
    padding: 0;
}

.collapsible>li{
    border: 3px solid var(--tertiary);
    border-radius: 10px;
    margin: 10px 0;
}

.collapsible a{
    color: var(--brand);
}

.question{
    cursor: pointer;
    padding: 5px 15px;
    /* font-weight: bold; */
    display: flex;
}

.question>p{
    flex: 0 0 95%;
}
/* .question::after{
    content: '\25bc';
    float: right;
    scale: 1.5 1;
    transition: rotate ease-in-out 0.5s;
    padding-top: 2px;
} */

.dropper{
    flex: 0 0 5%;
    margin: auto;
    text-align: center;
    scale: 1.5 1;
    transition: rotate ease-in-out 0.5s;
    padding-top: 2px;
}
.answer{
    max-height: 0;
    overflow: hidden;
    transition: max-height ease-in-out 0.5s;
    padding: 0;
    /* font-size: 0.8rem; */
}
.answer p, .answer ul{
    padding: 10px 15px;
}
.answer ul{
    padding-left: 40px;
    list-style-type: disc;
}
.answer hr{
    margin: 0;
    border: 2px solid var(--tertiary);    
}

.answer.expand {
    max-height: 300px;
    overflow: auto;
}

.question:has(~.answer.expand){
    font-weight: bold;
}

.question:has(~.answer.expand)>.dropper{
    rotate: 180deg;
}

/* -------------------------------------Media Queries---------------------------------- */

@media screen and (max-width: 600px) {
    .question{
        padding-right: 20px;
    }
}

@media screen and (min-width: 600px) and (max-width: 1000px){
    #faq_container{
        margin-left: 10%;
        margin-right: 10%;   
    }
}

@media screen and (min-width: 1000px){
    #faq_container{
        margin-left: 15%;
        margin-right: 15%;   
    }
}