html{
height: 100%;
background-image: linear-gradient(rgba(23,64,109,1), rgba(23,64,109,0.5)); 
}


  @media (max-aspect-ratio: 9/16 ) {
    
    .sidenav {
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #009DD9;
      overflow-x: hidden;
      padding-top: 0px;
      transition: all .3s linear;
      transform: translate(-100%);
    }
  
    .show-sidenav{
      transform: translate(0);
    }
    
    .sidenav a {
      padding: 4px 8px 1px 16px;
      text-decoration: none;
      font-size: 40px;
      color: Black;
      display: block;
    }
   .sidenav li {
      padding: 6px;
      text-decoration: none;
      font-size: 20px;
      color: Black;
      display: block;
    }

    .fa-arrow-left{
      font-size: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 85%;
      opacity: 1;
    }
  
    .fa-arrow-left:hover{
      color: whitesmoke;
    }
  
    .fa-arrow-right{
      font-size: 1.5rem;
      position: absolute;
      align-items: left;
      z-index: 0;
      opacity: 1;
    }
  
    .fa-arrow-right:hover{
      color: whitesmoke;
    }

  
  }

  @media (min-aspect-ratio: 16/9) {

    .sidenav {
      height: 100%;
      width: 200px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #009DD9;
      overflow-x: hidden;
      padding-top: 0px;
      opacity: 1;
    }
    
    .sidenav a {
      padding: 4px 8px 1px 16px;
      text-decoration: none;
      font-size: 30px;
      color: Black;
      display: block;
      opacity: 1;
    }
   .sidenav li {
      padding: 6px;
      text-decoration: none;
      font-size: 15px;
      color: Black;
      display: block;
      opacity: 1;
    }
    
    .fa-arrow-left{
      font-size: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .5rem 10rem;
      opacity: 0;
    }
  
    .fa-arrow-left:hover{
      color: whitesmoke;
    }
  
    .fa-arrow-right{
      font-size: 1.5rem;
      position: absolute;
      align-items: left;
      z-index: 0;
      opacity: 0;
    }
  
    .fa-arrow-right:hover{
      color: whitesmoke;
    }
  }

  .main {
    margin-left: 200px; /* Same as the width of the sidenav */
    font-size: 18px; /* Increased text to enable scrolling */
    padding: 0px 10px;
    align-items: center;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

h1{
    font-size: 50px;
    text-align: center;
    padding: 60px 0;

}

.link{
  color: azure;
}