body {
      font-family: "Manrope", sans-serif;
      margin: 0px;
  }

  /* The sidenav */
  .sidenav {
      height: 100%;
      width: 230px;
      position: fixed;
      z-index: 1;
      background-color: #0E3331;
      overflow-x: hidden;
      padding-top: 20px;
      clear: left;
      margin-top: 30px;
  }

  /* Page content */
  .main {
      margin-left: 230px;
      /* Same as the width of the sidenav */
      padding: 0px 10px;
      padding-top: 30px;
  }

  .main-footer {
      margin-left: 230px;
      padding: 0px 10px;
      padding-top: 30px;
      font-size: x-small;
  }

  .masthead {
      margin-left: 230px;
      /* Same as the width of the sidenav */
  }

  .err-main {
      margin-left: 100px;
      /* Same as the width of the sidenav */
      padding: 0px 10px;
      padding-top: 30px;
  }

  .err-main-footer {
      margin-left: 100px;
      padding: 0px 10px;
      padding-top: 30px;
      font-size: x-small;
  }

  .err-masthead {
      margin-left: 100px;
      /* Same as the width of the sidenav */
  }

  .top-banner {
      color: #0E3331;
      background-color: #dbdac5;
      margin-top: 0px;
      margin-bottom: 0px;
      padding-top: 10px;
      text-align: center;
      z-index: 1;
      width: 100%;
      height: 20px;
      position: fixed;
  }

  .top-banner-cell-div {
      display: table-cell;
      vertical-align: top;
      background-color: #0E3331;
  }

  /* The navigation menu links */
  .sidenav a,
  .dropdown-btn {
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 20px;
      color: #dbdac5;
      display: block;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      outline: none;
  }

  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover,
  .dropdown-btn:hover {
      color: #f1f1f1;
  }

  /* Add an active class to the active dropdown button */
  .active {
      background-color: #0E3331;
      color: white;
  }

  .dropdown-container {
      display: none;
      background-color: #0E3331;
      padding-left: 8px;
  }

  .fa-caret-down {
      float: right;
      padding-right: 8px;
  }

  /* This class is used to clear both directions, and start the next div below the current */
  .clearfix {
      clear: both;
      visibility: hidden;
      height: 0;
  }


  a.image_button_large {
      display: inline-block;
      padding: 0.46em 1.6em;
      border: 0.1em solid #000000;
      margin: 5px;
      border-radius: 0.12em;
      box-sizing: border-box;
      text-decoration: none;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      color: #000000;
      text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
      background-color: #FFFFFF;
      text-align: center;
      transition: all 0.15s;
      width: 300px;
  }

  a.image_button_large:hover {
      text-shadow: 0 0 2em rgba(255, 255, 255, 1);
      color: #FFFFFF;
      border-color: #FFFFFF;
  }

  @media all and (max-width:30em) {
      a.image_button_large {
          display: block;
          margin: 0.4em auto;
      }
  }


  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
      .sidenav {
          padding-top: 15px;
      }

      .sidenav a {
          font-size: 18px;
      }
  }