:root {
    --White: hsl(0, 0%, 100%);
    --LightPink: hsl(275, 100%, 97%);
    --GrayishPurple: hsl(292, 16%, 49%);
    --DarkPurple: hsl(292, 42%, 14%);
    --HoverPurple: hsl(281, 83%, 54%);
}

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

body {
    font-family: "Work Sans", sans-serif;
    font-size: 1rem;
    background-color: var(--LightPink);
    background-image: url("../assets/images/background-pattern-mobile.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    display: grid;
    place-content: center;
    min-height: 100vh;
    padding: 6rem 1rem;
}
main {
    background-color: var(--White);
    padding: 0.5rem 2rem;
    border-radius: 0.8rem;
}
h1 {
    color: var(--DarkPurple);
}
p {
    display: none;
    color: var(--GrayishPurple);
}
p.visible {
    display: block;
}
h2 {
    font-weight: 550;
    color: var(--DarkPurple);
}

/* icon styling*/
.plus-icon {
    width: 2.5rem;
}

/* Header container styling */
.top-section {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
.star-container {
    align-self: center;
}


/* faq section container styling */
.faq-section {
    display: flex;
    flex-direction: column;
}
.faq-accordion {
    display: flex;
    gap: 2rem;
}
.plus-container {
    align-self: center;
}


/* 700px to 899px styling */
@media (min-width: 43.75rem) and (max-width: 56.18rem) {
    body {
        padding: 0 1rem;
    }
    h1 {
        font-size: 3rem;
    }
    .plus-container {
        display: flex;
        margin-left: auto;
    }
}

/* 900px and above styling */
@media (min-width: 56.25rem) {
    body{
        background-image: url("../assets/images/background-pattern-desktop.svg");
        padding: 1rem 3rem;
    }
    main {
        padding: 1.5rem 4rem;
    }
    h1 {
        font-size: 4rem;
    }
    h2:hover {
        color: var(--HoverPurple);
        cursor: pointer;
    }
    .plus-container {
        display: flex;
        margin-left: auto;
    }

    /* faq tab styling */
    .faq-question:focus {
        background-color: var(--LightPink);
        outline: none;
    }
}