/* Google Font- Work Sans */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.work-sans-400 {
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.work-sans-600 {
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.work-sans-700 {
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}
/* Reset Styles */
* {
    padding:0;
    margin:0;
    box-sizing:border-box;
    text-decoration:none;
}



/* Variables */
:root {
    --white:hsl(0, 100%, 100%);
    --purple-100:hsl(275, 100%, 97%);
    --purple-600:hsl(292, 16%, 49%);
    --purple-950:hsl(292, 42%, 14%);
    --purple-bright:hsl(281, 83%, 47%);
    --purple-shadow:hsla(286, 46%, 29%, 0.25);
}

/* Body */
body {
    background-image:url(assets/images/background-pattern-mobile.svg);
    background-repeat:no-repeat;
    background-size:100%;
    background-position:top center;
    background-color:var(--purple-100);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:100vh;
}

/* Main Styles */

main {
    width:clamp(20.000rem, calc(13.816rem + 26.316vw), 37.500rem);
    height:auto;
    background-color:var(--white);
    border-radius:10px;
    align-content:center;
    padding:3%;
    font-size:0.9rem;
    box-shadow:var(--purple-shadow) 2px 2px 40px;
}

.faq-title {
    display:flex;
}

h1 {
    color:var(--purple-950);
    padding:5%;
    font-size:clamp(2.000rem, calc(1.647rem + 1.504vw), 3.000rem);
}

/* FAQ Styles */ 

.faq-btn {
    color:var(--purple-950);
    font-size:1rem;
    background-color:transparent;
    text-align:left;
    cursor: pointer;
    padding:1.25rem;
    padding-right:1.5rem;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    position:relative;
}

.faq-btn:hover, 
.active {
 color:var(--purple-bright);
}

.question-block {
    border-bottom:1px solid #E5E5E5;
    padding:2% 0%;
}

.faq-btn::after {
  content:url("assets/images/icon-plus.svg"); 
  position:absolute;
  top:25%;
  left:92%;
}

.active::after {
  content:url("assets/images/icon-minus.svg");
} 

div.answer {
    padding:0.25rem 1rem;
    display:none; 
    overflow:hidden;
}

div.answer p {
    color:#a9a8a8;
}

/* Footer */
.attribution { 
    font-size: 11px; text-align: center; 
}

.attribution a { 
        color: hsl(228, 45%, 44%); 
}

/*========================
    Mobile Styles 375px
========================*/
@media screen and (max-width:1080px) {
    main {
        padding:5%;
    }
}


/*========================
    Desktop Styles 1440px
=========================*/
@media screen and (min-width:1081px) {
    body {
        background-image:url(assets/images/background-pattern-desktop.svg);
        background-size:100% auto;
        background-position:top center;
    }
}