* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --White: hsl(0, 0%, 100%);
   --Light-pink: hsl(275, 100%, 97%);
   --Grayish-purple: hsl(292, 16%, 49%);
   --Dark-purple: hsl(292, 42%, 14%);
   --Purple: hsl(281, 83%, 54%);
}

body {
   height: 100vh;
   background-color: var(--Light-pink);
   background-image: url(./assets/images/background-pattern-desktop.svg);
   background-repeat: no-repeat;
   background-size: contain;
   font-size: 1rem;
   font-family: 'Work Sans', sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1rem;
}

main {
   background-color: var(--White);
   width: 600px;
   padding: 2rem;
   border-radius: 1rem;
   -webkit-box-shadow: 0 4px 10px -2px #cccccc;
   -moz-box-shadow: 0 4px 10px -2px #cccccc;
   box-shadow: 0 4px 10px -2px #cccccc;
   overflow: auto;
}

.faq-title {
   display: flex;
   gap: 1.5rem;
   font-size: 1.5rem;
   color: var(--Dark-purple);
   margin-bottom: 1rem;
}

.question-title {
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 0;
   color: var(--Dark-purple);
}

.question-title>h2 {
   font-size: 1.1rem;
}

.question-title:hover {
   cursor: pointer;
   color: var(--Purple);
}

.question-title::after {
   content: url('./assets/images/icon-plus.svg')
}

.question-title.active::after {
   content: url('./assets/images/icon-minus.svg')
}

.answer {
   display: none;
   font-size: .9rem;
   color: var(--Grayish-purple);
   margin-bottom: 1rem;
   line-height: 1.5rem;
}

.answer.active {
   display: block;
   animation: slideDown .5s forwards;
   width: 90%;
}

.plus-icon {
   width: 30px;
   height: 30px;
   background-image: url('./assets/images/icon-plus.svg')
}

.minus-icon {
   width: 30px;
   height: 30px;
   background-image: url('./assets/images/icon-minus.svg')
}

@keyframes slideDown {
   from {
      opacity: 0;
      max-height: 0;
   }

   to {
      opacity: 1;
      max-height: 200px;
   }
}

hr {
   border: 1px solid var(--Light-pink);
}

@media screen and (max-width: 500px) {
   body {
      background-image: url(./assets/images/background-pattern-mobile.svg);
   }

   main {
      width: 350px;
   }
}