* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family:'Playfair Display', serif;
}

body {
  background: #EEF0EB;
}

/*Styling of the header*/
.image-header {
  height: 60vh;
  max-width: 100%;
  border-bottom: 2px solid #000000;
  background-image: url('img/bookshelf.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-text {
  margin: 1rem;
  text-align: center;
  background-color: rgba(250, 136, 136, 0.5);
  padding: 1rem;
  border-radius: 5px;
}


.header-text h1 {
  color: #A1C084;
  font-size: 3rem;
  font-family: 'Lora', serif;
  text-shadow: 4px 4px 8px #000000;
}

.header-text p {
  color: #C4F4C7;
  font-size: 1.5rem;
  text-shadow: 3px 3px 8px #000000;
} 

/*Main styling*/

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*Styling of the form */

.form-container {
  max-width: 25rem;
  padding: 10px;
  margin: 1.5rem;
  background-color: #C2B8B2;
  align-self: center;
  justify-self: center;
  border: 2px solid #3A435E;
  border-radius: 5px;
}

.form-container h3 {
  font-size: 1.2rem;
  padding: 2rem 0.5rem 0 0.5rem;
  text-align: center;
  color: #370926;
  text-shadow: 2px 2px 3px #F5F5F5;
}

.form {
  padding: 1rem; 
}

label {
  font-size: 1rem;
  margin: 1rem;
  display: flex;
  flex-direction: column;
}

.personal-input {
  max-width: 250px;
}

input { 
  border: none;
  padding: 5px;
  border-radius: 5px;
}

input[type=radio] {
  margin-top: 10px;
}

input:focus {
  background-color: #e3fae5;
}

input:valid {
  border: 2px solid #0B5D1E;
}

button {
  width: 8rem;
  height: 3rem;
  border-radius: 50px;
  color: #FFFFFF;
  background-color: #6D2E46;
  padding: 1rem;
  margin: 1rem;
  text-transform: uppercase;
  box-shadow: 2px 2px 3px #3A435E;
  cursor: pointer;
}

 button:hover {
   box-shadow: none;
 }


 /*Styling of accordion*/

 .accordion {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 25rem;
   background-color: #C2B8B2;
   margin-bottom: 1.5rem;
   margin-top: 1rem;
   cursor: pointer;
   border: 2px solid #3A435E;
   border-radius: 5px;
 }

 .accordion h1 {
   color: #370926;
   font-size: 1.8rem;
   margin-top: 1rem;
   text-shadow: 3px 3px 5px #F5F5F5;
 }

 .accordion-element {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 1rem;
   gap: 0.5rem;
 }

 .accordion .accordion-element .question{
  position: relative;
}

 .question {
   width: 300px;
   color: #FFFFFF;
   background-color: #884B58;
   padding: 0.6rem;
   font-size: 15px;
   text-align:left;
   border: 2px solid #6D2E46;
 }

 .accordion .accordion-element .question::before{
   content:"+";
   position: absolute;
   right: 4px;
   padding-bottom: 15px;
   padding-right: 5px;
 }

 .accordion .accordion-element .question.active::before {
  content: "-";
}

 .answer {
   display: none;
   color: #370926;
   font-size: 14px;
   height: 70px;
   padding: 10px;
   text-align: center;
 }

 .active {
   background-color:#884B58;
   filter: opacity(90%);
   border: none;
 }

 .active + .answer {
   display: block;
   height: auto;
 }

/* Media queries for tablet */
@media screen and (min-width:668px) {
  .main-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
  }

  .header-text h1 {
    font-size: 3.5rem;
  }

  .header-text p {
    font-size: 2rem;
  }

  .form-container h3{
    font-size: 1.4rem;
  }

  .accordion h1 {
    font-size: 2rem;
  }

  .accordion-element {
    margin-bottom: 3rem;
  }
}

@media screen and (min-width:1024px) {
  .header-text h1 {
    font-size: 4rem;
  }

  .header-text p {
    font-size: 2.5rem;
  }

  .form-container h3 {
    font-size: 1.8rem;
  }
  
  .accordion h1 {
    font-size: 2.3rem;
  }
}