@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Raleway:wght@100&family=Roboto:wght@100&display=swap');

* {
  box-sizing: border-box; 
  text-rendering:optimizeLegibility;
  font-family:'Oswald', sans-serif;;
}

body{
  margin:0
}

header{
  width: 100%;
  height: 80vh;
  min-height: 200px;
  position:relative;
  z-index:-1;
}

.backgroundvideo{
  position: absolute;
  left:0;
  top:0;
  width:100%; 
  height:100%;
  object-fit:cover;
  z-index:0;   
}

h1{
   position: absolute;
   color:whitesmoke; 
   font-size: 12vh; 
   text-shadow: 
   2px 2px black; 
   border: 5px solid thistle;
   z-index:1;
   left:0;
   top:30%;
   margin:0;
   max-width: 100%;
}

.maincontent /* Using flexbod to align signup and FAQ sections*/{
  display:flex; 
  justify-content: space-evenly; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 20px; 
  background-color: whitesmoke;
}

h2{
  text-align: center; margin:5px;
}

.signup /* Styling for the signup box*/ {
  width:30%; 
  background-color: rgb(235, 220, 235); 
  border-radius: 2%; 
  margin: 30px;
  padding:20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.signup:hover{
  background-color:thistle;
}

form{
  display:flex; 
  flex-direction: column; 
  padding:0 30px 30px 30px; 
  align-items:flex-start;
}


.textfields{
  display:flex; 
  flex-direction:
  column; width:100%;
}
 
#name, #email {
  background-color: whitesmoke; 
  width:100%; 
  border-radius: 10px; 
  border:0; 
  padding:10px; 
  margin:10px; 
  box-shadow: 2px 2px 15px 4px thistle;
}

.checkbox{
  display:flex; 
  flex-direction:column;
}

.button{
  align-self: center;
}

button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: rgb(148, 97, 148);
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button:hover {
  background-color: lightyellow; 
  color:rgb(121, 45, 121);
}

button:active {
  background-color: rgb(206, 138, 149);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

label{
  padding:5px;
}

.terms{
  padding:20px;
}



.accordion /* Styling for the FAQ-section */{
  width: 30%;
  padding:20px;
  border: 2px solid thistle;
  border-radius: 2%; 
  margin: 30px; 
  background-color: rgb(235, 220, 235);}

.accordion:hover{
  background-color:thistle;
}

.answer{
 /* Using height and opacity instead of display:none to be able to add transition */
  height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: all 1s ease-in-out;
  background-color: rgb(235, 220, 235); 
  padding: 10px;
}

.active + .answer {
  opacity: 1;
  height: 80px; 
  margin:0;
}

.question{
  background-color: whitesmoke; 
  box-shadow: 2px 2px 15px 4px thistle; 
  padding: 20px; margin-bottom:0; 
  cursor:pointer;
}

.question:after {
  content: '\25C0'; /* Unicode character for the triangel*/
  font-size: 15px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active::after{ content: "\25BC"; /* Unicode character for the triangel*/
}

@media only screen and (max-width: 600px) /* For mobile*/ {
  
  header{
    height:60vh;
  }
  
   h1{
     font-size: 7vh;
  }

  .maincontent{
    display:flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
  }

  .signup {
    width:80%
  }
  
  .accordion{
    width:80%
  }
  
  h2{
    font-size: 20px;
  }
}

@media only screen and (min-device-width: 600px) and (max-device-width: 1024px)/* For ipad*/{

  .signup{
  width:40%
  }

  .accordion{
  width:40%
  }

  h1 {
  font-size: 10vh;
  }
}