@media(min-width:768px) {
    .sidenav {
        display: none;
    }
    .fa.fa-bars {
        display: none;
    }
    
}

@media (max-width: 768px) {
    /* Fixed sidenav, full height */
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #1a73e8;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  
    .sidenav .closebtn {
      font-size: 15px;
      margin-left: 212px;
      cursor: pointer;
    }
  
    /* Style the sidenav links and the dropdown button */
    .sidenav a, .dropdown-btn {
      padding: 10px 8px 6px 16px;
      text-decoration: none;
      font-size: 15px;
      color: #ffffffd0;
      display: block;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      outline: none;
    }
  
    /* On mouse-over */
    .sidenav a:hover, .dropdown-btn:hover {
      color: #f5f5f576;
    }
  
    /* Main content */
    .main {
      margin-left: 200px; /* Same as the width of the sidenav */
      font-size: 20px; /* Increased text to enable scrolling */
      padding: 10px 10px;
    }
  
    /* Add an active class to the active dropdown button */
    .active {
      background-color: rgba(6, 10, 91, 0.181);
      color: white;
    }
  
    /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
    .dropdown-container {
      display: none;
      background-color: rgba(6, 10, 91, 0.181);
      padding-left: 5px;
      padding-right: 5px;
    }
  
    /* Optional: Style the caret down icon */
    .fa-caret-down {
      float: right;
      padding-right: 5px;
    }
  }