/* the + sign is used to select the sibling that comes immediately next to the element you selected.
in this case it is the div with the answer class next to the div with the active class.
this can be used for the FAQ-accordion. read more here: https://www.w3schools.com/css/css_combinators.asp */

* {
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-boz-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

header span {
  filter: invert(44%) sepia(95%) saturate(1177%) hue-rotate(202deg) brightness(101%) contrast(102%) ;
}

header h1 {
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
}

header img {
  filter: invert(58%) sepia(20%) saturate(1077%) hue-rotate(196deg) brightness(102%) contrast(104%) drop-shadow( 3px 3px 2px rgba(0, 0, 0, .1));
  margin-bottom: -10px;
}

.back-video {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100vh; /*Anpassar så höjden alltid är full screen */
  z-index: -1;
  object-fit: cover;
  overflow: hidden;
}

header h1 {
  color: white;
  font-size: 100px;
  text-align: start;
  margin: 10px 0 0 200px;
}

header h2 {
  color: white;
  text-align: start;
  margin-left: 350px;
  margin-top: -10px;
}

/* CONTAINER FOR FORM AND ACCORDION */
.container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  z-index: 1;
}

/* FORM */
form {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  padding-top: 40px;
  border-radius: 20px;
  grid-column-start: 2;
}

form h1 {
  margin: -10px;
}

input {
  padding: 10px 30px;
  color: #555;
  border: none;
  outline:none;
  background: none;
  font-size: 18px;
  color: #555;
  cursor: pointer;
  opacity: 1;
}


input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}


fieldset {
  border: none;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkmark {
  position: absolute;
  top: 4px;
  left: 10px;
  height: 18px;
  width: 18px;
  background-color: #ccc;
  border-radius: 5px;
}

.checkbox:hover input ~ .checkmark {
  background-color: #8D9AFF;
}

.checkbox input:checked ~ .checkmark {
  background-color: #8D9AFF;
  display: block;
}

.checkbox input:checked ~ .checkmark:after {
  display: block;
}


.backdrop {
  box-shadow:
  0px 0px 2px #5f5f5f, 0px 0px 0px 5px #ecf0f3,8px 8px 15px #a7aaaf,
  -8px -8px 15px #ffffff;
  box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #ffffff;;
  border-radius: 30px;
  margin: 20px;
}

button {
  margin: 30px;
  padding: 10px 60px;
  border-radius: 20px;
  background-color: #8D9AFF;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 20px;
  color: white;
  background: #8D9AFF;
  box-shadow: 3px 3px 8px #b1b1b1,
              -3px -3px 8px #ffffff;
  transition: 0.5s;
}

button:hover {
  background: #a3aeff;
}

button:active {
  background:#707bcc;
}


select {
  width: 70%;
  opacity: .9;
  color: #555;
  font-family: poppins;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 30px;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: 
    0px 0px 2px #5f5f5f,
    0px 0px 0px 5px #ecf0f3,
    8px 8px 15px #a7aaaf,
    -8px -8px 15px #fff;
  margin: 20px;
    box-shadow: inset 1px 1px 1px 1px #fff,
                  inset -2px -2px 1px 1px #cbced1;;
}

select:focus, select:active, select::after {
  outline: 2px solid #8D9AFF; 
}


/* ACCORDION */

.accordion h2 {
  margin: 40px 0 40px 0;
}

.accordion {
  background-color: rgba(255, 255, 255, 0.9);
  width: 80%;
  border-radius: 20px;
  grid-column-start: 3;
  text-align: center;
}

.active + .answer {
  /* some styling here */
  display: block;
  border-top: hidden;
 
  
}

.question.active img {
  transform: rotate(90deg);
  transition: 0.4s ease;
}

.answer {
  display: none;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 
    0px 0px 2px #5f5f5f,
    0px 0px 0px 5px #ecf0f3,
    8px 8px 15px #a7aaaf,
    -8px -8px 15px #ffffff;
  margin: 20px;
  box-shadow: inset 8px 8px 8px #cbced1,
              inset -8px -8px 8px #ffffff;
}

.question {
  cursor: pointer;
  padding: 20px;
  font-weight: 400;
  font-size: 16px;
  border-radius: 20px;
  display: flex;
  gap: 40px;
  box-shadow: 
    0px 0px 2px #5f5f5f,
    0px 0px 0px 5px #ecf0f3,
    8px 8px 15px #a7aaaf,
    -8px -8px 15px #ffffff;
  margin: 20px;
  box-shadow: inset 1px 1px 1px 1px #fff,
                  inset -2px -2px 1px 1px #cbced1;;
}


/* DESKTOP */
@media (min-width:1025px) {

  .container {
    display: flex;
    justify-content: center;
  }

  form, .accordion {
    width: 30%;
  }

}

@media (min-width:1600px) {
  .container {
    transform: scale(0.9);
    margin: -20px 200px;
    gap: 100px;
  }
}

/* TABLET */
@media (min-width:668px) and (max-width:1024px) {

    header h1, header h2 {
      text-align: center;
      margin: 0;
    }

    .container {
      margin: 150px 50px;
      display: flex;
      justify-content: space-around;
      gap: 20px;
    }
    footer {
      margin-top: -120px;
    }
  }

/* MOBILE */
@media (max-width:667px) {
  * {
    margin: 0;
    height: auto;
  }  

  body {
    background: #3c416669;
  }
  
  .back-video {
      width: 100%;
      height: 32vh;
      position: absolute;
    }

    header {
      background-size: cover;
      padding: 55px;
      
    }

    header h1, header h2 {
      margin: 0;
      line-height: 70px;
      text-align: center;
    }

    header h1 {
      font-size: 40px;
    }

    header img {
      width: 50px; 
      height: auto;
    }

    header h2 {
      font-size: 20px;
    }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 1px;
  }

  form h1 {
    margin: -10px 0 10px 0;
  }

  fieldset p{
    margin: 20px 0;
  }

  .accordion, form {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0;
    margin-bottom: 5px;
  }

  footer {
    color: #000;
  }
  }

 
  footer {
    display: flex;
    justify-content: center;
    text-align: center;
    color: #fff;
  }