/* CUSTOM FONTS */

@font-face {
    font-family: Work Sans;
    src: url("../assets/fonts/WorkSans-VariableFont_wght.ttf");
}

/* MOBILE LAYOUT */

html {
    width: 100%;
    height: 140%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 16px;
}

main {
    width: 100%;
    height: 100%;
    position: relative;
}

h1,
p {
    margin: 0;
}

.background-pattern-container {
    height: 40%;
    background-image: url("../assets/images/background-pattern-mobile.svg");
    background-size: cover;
}

.background-container {
    height: 60%;
    background-color: hsl(275, 100%, 97%);
}

#faq-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    height: fit-content;
    padding: 20px;
    border-radius: 7.5px;
    box-sizing: border-box;
    font-family: Work Sans;
    color: hsl(292, 42%, 14%);
    background-color: hsl(0, 100%, 100%);
    box-shadow: 5px 5px 30px 1px hsl(292, 16%, 49%);
}

#title-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

img[alt="A star icon"] {
    width: 25px;
    height: 26px;
}

.question-container {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 20px 0;
    border-bottom: 1px solid lightgray;
}

.question-container:nth-child(8) {
    border-bottom: none;
}

.question {
    width: 90%;
    border: none;
    background: none;
    font-family: Work Sans;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    color: hsl(292, 42%, 14%);
    transition: color 0.5s;
}

.question:hover {
    cursor: pointer;
    color: #ad28eb;
}

.icon-container {
    width: 10%;
}

img[alt="A plus icon"],
img[alt="A minus icon"] {
    width: 30px;
    height: 31px;
}

img[alt="A plus icon"]:hover,
img[alt="A minus icon"]:hover {
    cursor: pointer;
}

.answer {
    color: hsl(292, 16%, 49%);
}

/* DESKTOP LAYOUT */

@media screen and (min-width: 840px) {
    html {
        height: 100%;
    }
    .background-pattern-container {
        background-image: url("../assets/images/background-pattern-desktop.svg");
    }
    #faq-container {
        max-width: 600px;
        border-radius: 15px;
    }
    #title-container > h1 {
        font-size: 45px;
    }
    img[alt="A star icon"] {
        width: 38px;
        height: 39px;
    }
}