/* Fixed sidenav, full height */
.sidenav {
    width: 33vw;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    /*background-color: rgb(22, 22, 22);*/
  }
  
  /* Style the sidenav links and the dropdown button */
  .sidenav a, .dropdown-btn {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    border: none;
    background: #1c1e20;
    width:100%;
    text-align: left;
    cursor: pointer;
    outline: none;
  }

  .top {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
  }

  .bottom {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
  
  /* On mouse-over */
  .sidenav a:hover, .dropdown-btn:hover {
    color: #aa77ff;
  }
  
  /* 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;
  }
  
  /* Optional: Style the caret down icon */
  .fa-caret-down {
    float: right;
    padding-right: 8px;
  }

  .text-purple {
      color: #aa77ff;
  }

  @media only screen and (max-width: 820px) {
    .sidenav a, .dropdown-btn {
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 20px;
      color: #818181;
      display: block;
      border: none;
      background: #1c1e20;
      width:100%;
      text-align: left;
      cursor: pointer;
      outline: none;
    }

    .sidenav {
      width: 95vw;
      padding-top: 30px;
      padding-left: 50px;
      padding-right: 30px;
      padding-bottom: 2px;
      /*background-color: rgb(22, 22, 22);*/
    }

    .mobile{
      display: block;
    }

    .nonmobile{
      display: none;
    }
  }

  @media only screen and (min-width: 820px) {
    .sidenav {
      width: 33vw;
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      /*background-color: rgb(22, 22, 22);*/
    }
    
    /* Style the sidenav links and the dropdown button */
    .sidenav a, .dropdown-btn {
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 20px;
      color: #818181;
      display: block;
      border: none;
      background: #1c1e20;
      width:100%;
      text-align: left;
      cursor: pointer;
      outline: none;
    }
  
  
    .mobile{
      display:none;
    }
    
    .nonmobile{
      display:block;
    }
  }