/* Navigation
------------------------------------------*/

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height:100%;
    width:0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgba(100, 189, 230, 0.8); /* Bluey fallback color */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.6s; /* 0.6 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    left:10%;
    top: 10%; /* 10% from the top */
    width: 40%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 10%; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }
  
  
  /* The navigation links inside the overlay */
  .overlay a {
    padding: 10% 10% 10% 20%;
    text-decoration: none;
    font-size: 3vw;
    color:rgba(224, 243, 252, 0.877); 
    display: block; /* Display block instead of inline */
  }
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color:rgb(255, 255, 255);
    transition: 0.7s;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 8%;
    right: 6%;
    font-size: 5vw;
  }
  /* Hamburger Nav element */
  span {
  font-size:2em;
  visibility: visible;
  color: rgb(255, 255, 255); 
  left:0;
  margin-left:1%;
  margin-top:0%;
  display:flex;
  margin-right:1%;
  }
  
  span:hover{
  color:rgb(100, 178, 230); 
  transition: 0.2s;
  }
  
  header                                                                                                                                                                                                                                                                                           {
   font-family: 'Open Sans', monospace;
  }
  
  nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
  
  /* Navigation */
  ul {
    display:flex;
    top:0%;
    position:absolute;
    z-index: 7;
    width: 100%;
    height: 10%;
    font-family: 'Open Sans', monospace;
    font-size: 1.8vw;
    letter-spacing: 0;
    background-color:rgba(104, 201, 239);
    border-bottom: 5px solid rgb(255, 255, 255);
  }
  
  /* positioning of page elements */

  li {
    float:right;
  }
  
  .quiz{
    padding:0% 1% 10% 0%;
  }
  .learnmorenav {
    padding: 0% 10% 0% 50%;
  }
  .homenav {
    padding: 0% 10% 0% 50%;
  }
  
  li a {
    float:right;
    padding: 20px 20px 20px 20px;
    display: block;
    color:rgb(255, 255, 255);
    font-weight: bold;
    text-decoration: none;
  }
  
  li a:hover {
    background-color:rgba(39, 168, 228, 0.877) ;
  }


      /* media queries for text size, hamburger nav size, and navigation size 
    ------------------------------------------*/
  
  @media screen and (max-width:600px) {
      span{visibility:visible;}
      nav{visibility:hidden;}
  }
  
  @media screen and (max-width:1800px) {
    nav{visibility:visible;}
  }

  @media only screen and (max-width: 800px) {
    span {
      font-size:4em;
    }
  }

   @media only screen and (max-width: 800px) {
    a {
      font-size:3vw;
    }
  }


    /* Body 
    ------------------------------------------*/
  body{
    background-color:rgba(104, 201, 239, 0.877);
  }
  .wrapper{
      font-family: 'Open Sans', monospace;
  }
h1{
    top:20%;
    width:30%;
    font-size:3.5vw;
    float:left;
    padding:10% 5% 10% 15%;
    color:white;
    position: absolute;
}

h1:hover{
  color:aliceblue;
  transition:0.5s;
}

p{
    color:white;
    font-size:1.5vw;
}

/*quiz*/


.questions{
    float:right;
    padding-top:10%;
    margin: 0 2% 2% 2%;
}
#quiz{
    width:100%;
}
#button{
    padding: 2% 2% 2% 2%;
    margin:5% 2% 2% 2%;
}

#after_submit{

    visibility:hidden;

}


#button{

    margin-top:5%;

    background-color: rgb(79, 188, 24);

    font-size:1vw;

}



#button:hover{
    background:rgb(200, 238, 175);
}

/* media quesries for quiz text size, title dissappear and quiz positioning*/


@media only screen and (max-width: 700px) {
  p {
    font-size:3vw;
  }
}
@media only screen and (max-width: 700px) {
  div.h1 {
    display: none;
  }
}

@media only screen and (max-width: 700px) {
  #quiz {
    width:100%;
    padding-top:10%;
    padding-right:30%;
  }
}
@media only screen and (max-width: 700px) {
  #button {
    font-size:2vw;
  }
}