/* CSS */
/* Box Model Hack */
*{
  box-sizing: border-box;
}
/*******************************************/

/* BODY */
body{
  max-width: 100%;
  max-height: 100vh;
  font-size: 62.5%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(115, 115, 115, 0.7)),url('img/BG.jpeg');
  background-size: cover;
  background-attachment: fixed;
  line-height: 1.15;
}

/* HEADER */

header{
  /* border: 2px solid black; */
  /* margin: 1rem 0 0 0; */
  text-align: center;
  font-size: 2.5rem;
  color: white;
  text-shadow: 2px 2px 5px rgb(0, 0, 0);
  background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,0));
  letter-spacing: .25rem;
}
header h1{
  font-size: 1.5rem;
  margin-top: .25rem;
}

header>img {
  max-height: 3em;
  
}

/* MAIN */
main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* border: 2px solid black; */
  margin: 5 0;
  text-align: center;
}

main>button {
  background: linear-gradient(0.25turn, rgba(5, 110, 238, 0.633), rgba(240, 18, 18, 0.3));
  margin: 2% auto;
  padding: 0.75rem;
  color: white;
  font-weight: bold;
  border: 2px solid white;
  border-radius: 25%;
  transition: 0.25s ease-in;
  box-shadow: 1px 1px 10px rgb(255, 255, 255);
}

main>button:hover {
  background-color: green;
  cursor: pointer;
}

main>section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 2px solid white;
  border-radius: 6rem;
  /* min-height: 10rem; */
  padding: 1% 0;
  margin: 0 0 1% 0;
  color: white;
  background: linear-gradient(0.25turn, rgba(0,0,0,.8), rgba(0,0,0,.6))
}

section h2{
  margin: 2% 5%;
  font-size: 1.5rem;
}

section h3{
  margin: 1%;
  font-size: 1.15rem;
}

img {
  display: block;
  margin: 0 auto;
  max-height: 225px;
  border-radius: 10%;
}

/*CLASSES*/

.hidden{
  display: none;
}

/* MEDIA QUERIES */

@media (max-width:480px) {
  body{
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(115, 115, 115, 0.7)),url('img/BG.jpeg');
    /* background-size: cover; */
    background-attachment:fixed;
    background-position: 30%;
    background-repeat: no-repeat;
    line-height: 1.15;
  }

  header{
    margin: 0 0 0.5rem 0;
  }


  header>img {
    max-height: 2em;
    border-radius: none;
    
  }

  main>button {
    margin: 4% auto;
  }

  main>section{
    margin-top: 4%;
    margin-bottom: 4%;
  }

  section h2{
    font-size: 1.25rem;
    margin: 5% 5%;
  }



  .image-container img {
    max-width: 100%;
    max-height: fit-content;
    border-radius: 10%;
    margin: 5% auto;
  }

 
  
}

@media (max-width:390px) {

  main>button {
    margin: 2% auto 2% auto;
  }

  main>section{
    margin-top: 2%;
    margin-bottom: 1%;
  }

  section h2{
    font-size: 1.25rem;
    margin: 6% 10%;
  }


}

/* IDS */

/* #WW {
  visibility: hidden;
}

#JP {
  visibility: hidden;
}

#GF {
  visibility: hidden;
} */