.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

html, body {
    background-color: #F9EEFF;
    /* margin: 0; */
    padding: 10px;
}

@font-face {
    font-family: "WorkSans-Bold";
    src: url('assets/fonts/static/WorkSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: "WorkSans-Regular";
    src: url('assets/fonts/static/WorkSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "WorkSans-SemiBold";
    src: url('assets/fonts/static/WorkSans-SemiBold.ttf') format('truetype');
}

.img-bg{
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh; 
    object-fit: cover; 
    z-index: 1; 
}

p, h1 {
    display: flex;
    justify-content: space-between;
    font-family: 'WorkSans-SemiBold';
}

button {
    border: none;
    cursor: pointer;
    appearance: none;
    background-color: inherit;
    text-align: center;
}

b {
    color: hsl(292, 42%, 14%);
    display: flex;
    align-items: center; 
    text-align: center;
    cursor: pointer;
}
b:hover {
    color: #AD28E9;
}

#hiddenText-btn1, #hiddenText-btn2 ,#hiddenText-btn3, #hiddenText-btn4 {
    display: none; 
    margin-top: 10px;
    opacity: 0.7;
    margin: 10px;
    line-height:25px;
    font-family: 'WorkSans-Regular';
}

.main-content { 
    padding-top : 80px;
    max-width: 700px;
    justify-content: center; 
    align-items: center;
    width: 100%;
    height: 100%;
    
    margin: auto;
    position: relative;
    z-index: 2;
}

.box {
    margin: 10px;
    padding: 30px;
    background-color: white;
    border-radius: 15px;
}

.box-B,.box-C,.box-D{
    border-top: 1px solid rgb(140, 105, 145, .1);
}

.FAQ p {
    font-size: 55px; 
    justify-content:left;
    margin-block: 10px;
    font-family: 'WorkSans-Bold'; 
}