@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: "Work Sans", sans-serif;
}
/* 
   background-image: url("/assets/images/background-pattern-desktop.svg");
 */
body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-color: hsl(275, 100%, 97%);
   background-image: url("../assets/images/background-pattern-desktop.svg");
   background-repeat: no-repeat;
   background-size: 100%;
}
.container {
   border: 1px solid black;
   border-radius: 15px;
   background-color: hsl(0, 100%, 100%);
   width: 550px;
   padding: 30px;
}
.head {
   display: flex;
   align-items: center;
   text-align: center;
   margin-bottom: 20px;
}
.head img {
   width: 30px;
   margin-right: 10px;
}
.head h1 {
   color: hsl(292, 42%, 14%);
}
/* Section */
.question-answer {
   margin: 20px 0;
}
.question-answer .section {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
}
.section p {
   color: hsl(292, 42%, 14%);
   font-weight: 700;
   cursor: pointer;
}
.section p:hover {
   color: hsl(293, 52%, 57%);
}
.section img {
   cursor: pointer;
}
.plus {
   display: flex;
}
.section .minus {
   display: none;
}
.question-answer .hidden-paragraph {
   opacity: 0;
   visibility: hidden;
   color: hsl(279, 23%, 49%);
   max-height: 0;
   overflow: hidden;
   transition: all 0.3s ease-out;
}

.question-answer .hidden-paragraph.active {
   opacity: 1;
   visibility: visible;
   max-height: 200px;
   transition: all 0.3s ease-in;
}

.space {
   border-bottom: 1px solid rgb(242, 241, 241);
}

@media (max-width: 550px) {
   body {
      background-image: url("../assets/images/background-pattern-mobile.svg");
   }
   .container {
      width: 350px;
   }
}