.faq {
    position: relative;
    /*height: 100vh;*/
    width: calc(100vw - .5rem);
    display: grid;
    justify-items: center;
    align-content: end;
    pointer-events: none;
    /*padding: 25px 0;*/

    margin: 25vh 0;
}

.faq > .title {
    justify-self: center;
    align-self: center;
    font-size: var(--font-size-xlarge);
    font-family: var(--font-family-global), serif;
    color: var(--text-color-body);
    text-align: center;
    margin-bottom: 12.5vh;
}

.faq .accordion {
    width: 50%;

    pointer-events: auto;
    /*box-shadow: var(--box-shadow-global);*/
}

.accordion-button:focus {
    box-shadow: none;
    /*border: 1px solid var(--body-color);*/
}

.accordion-body {
    background-color: rgba(var(--body-color-lighter-rgb), .25);
    /*border: 1px solid var(--body-color-lighter);*/
    color: rgb(var(--text-color-body-rgb), .75);
    font-family: var(--font-family-global);
}

.accordion-body span {
    font-family: var(--font-family-global);
}

.accordion-item {
    border-color: var(--body-color);
    background-color: unset;
}

.accordion-button {
    background-color: rgba(var(--body-color-lighter-rgb), .5);
    /*border: 1px solid var(--body-color-darker);*/
    /*color: rgba(var(--text-color-body-rgb), .5);*/
    color: var(--body-color-light);
    opacity: .5;
    font-family: var(--font-family-global);
    /*margin: 1px;*/
}

.accordion-button:hover {
    opacity: 1;
}

.accordion-button:not(.collapsed) {
    border: var(--body-color);
    background-color: var(--body-color);
    color: var(--body-color-light);
    box-shadow: unset;
    opacity: 1;
}

.accordion-button::after {
    filter: contrast(0);
}

@media screen and (max-width: 1024px) {
    .faq .accordion {
        width: 100vw;
    }
}