/* 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 */

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: bisque;

}

.active + .answer {
  /* some styling here */

  display:block;

}

/* background: url(sweettexture.jpg); */

.answer {
  display:none;

}

.header {
  width: 100%;
  height: 400px;
  background-image: url(./dogs.jpeg);
  background-size: cover;
  
}

.mainpage {
  display: grid;
  grid-template-columns: 1fr;
}

p {
  color:black;
  font-size: 18px;
}

.company-name {
  display: flex;
  align-content: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;

}

.form {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 5px;
  background-color: rgb(245, 232, 221);
}

.accordion {
  display: flex;
  flex-direction: column;
  padding: 5px;
  margin: 5px;
  background-color: rgb(245, 232, 221);
}

input {
  display: block;
  margin-bottom: 20px;
  width: 50%;
 

}

label {
  display: block;
  margin-top: 20px;
  font-weight: bold;
}

button {
  background-color: orange;
  padding: 14px;
  border-radius: 15%;
  font-size: medium;
}

button:hover {
  background-color: darkgoldenrod;


}

.experience {
 
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: red;
}

.question {
  margin-bottom: 5px;
  background-color: orange;
  font-size: 20px;
  padding: 15px;
  border-radius: 15px;
}

.question:hover {

    background-color: darkgoldenrod;
  
}

.answer {
  margin-bottom: 5px;
  margin-left: 5px;
  text-align: left;
}

h2 {
  font-size: 25px;
}

h3 {
  text-align: center;
  font-size: 15px;


}

@media (min-width:1024px) {
  .mainpage {
    grid-template-columns: 1fr 1fr;
  }
  .header{
    height: 800px;
  }
  .company-name{
    font-size: 40px;
  }
}

@media (min-width:668px) and (max-width:1023px) {
  .header { 
    height: 400px;
  }
}