body {
    margin: 0;
    background-color: #e9ebee;
  }
  
  #navbar {
    display: grid;
    min-height: 50px;
    grid-auto-flow: column;
    background-color: #fcfcfc;
    grid-gap: 1.5em;
    padding: 0 40px;
    -webkit-box-shadow: -1px 4px 5px 0px rgba(209, 205, 209, 1);
    -moz-box-shadow: -1px 4px 5px 0px rgba(209, 205, 209, 1);
    box-shadow: -1px 4px 5px 0px rgba(209, 205, 209, 1);
  }
  
  #navbar a {
    text-decoration: none;
  }
  
  #logo {
    
    display: grid;
    justify-content: start;
    align-content: center;
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px grey;
  }
  
  .logo span {
    color: #bead96;
  }
  
  #links {
    display: grid;
    justify-content: right;
    align-content: center;
    grid-auto-flow: column;
    grid-gap: 1.5em;
    font-family: "Open Sans", sans-serif;
  }
  
  #links a {
    text-decoration: none;
    color: #333;
    text-transform: uppercase;
    font-weight: bold;
  }
  
  #links a:hover {
    color: #0474bc;
  }
  
  .mobile-btn-text {
    align-self: center;
    float: right;
    vertical-align: baseline;
    text-align: right;
    font-family: "Open Sans", sans-serif;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
  }
  
  .mobile-btn {
    align-self: center;
    float: right;
    vertical-align: baseline;
    text-align: right;
    font-size: 30px;
    font-family: "Open Sans", sans-serif;
    cursor: pointer;
    font-weight: bold;
    text-shadow: -1px 1px 1px grey;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  }
  
  /* =======================
  ******* Mobile Menu ******
  ========================*/
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.25s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 8px 60px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #fff;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  a {
    font-family: "Open Sans", sans-serif;
  }
  
  /*  Extra Small  */
  @media (min-width:0px) and (max-width:278px) {
    #links, .mobile-menu {
      display: none;
    }
    body section, body #section {
        margin: 4px 4px;
    }
    body #navbar {
        min-height: 50px;
    }
    #moreInfo {
        padding: 0px 20px;
    }
    body #camp > section {
        width:85%;
    }
    #camp h2 {
        display: none;
    }
    .mobile-btn {
      text-align: center;
    }
  
    #logo {
      display: none;
      grid-template-columns: auto auto;
      grid-gap: 5px;
    }
  
  }
  
  /* Small Mobile to Mobile */
  @media (min-width:278px) and (max-width:391px) {
    #links, .mobile-menu, body #navBlocks {
      display: none;
    }
    body #navbar {
        min-height: 50px;
    }
    body section, body #section {
        margin: -1px 4px;
    }

    body #moreInfo {
        padding: 0px 20px;
    }
    
    body #camp > section {
        width:85%;
    }
    #camp h2 {
        display: none;
    }
    #logo {
      display: inline-grid;
      align-items: center;
      grid-template-columns: auto auto;
      grid-gap: 0px;
      font-size: 24px;
    }
  
    .mobile-btn {
      font-size: 24px;
    }
  
  }
  
  /* Mobile to Tablet  */
  @media (min-width:392px) and (max-width:474px) {
    #links, .mobile-menu, body #navBlocks {
      display: none;
    }
    body #legionHeader {
        margin: 0px;
    }
    body #navbar {
        min-height: 50px;
    }
    body #moreInfo {
        padding: 0px 20px;
    }
    body #camp > section {
        width:85%;
    }
    #camp h2 {
        display: none;
    }
  
    #logo {
      display: inline-grid;
      align-items: center;
      grid-template-columns: auto auto;
      grid-gap: 70px;
    }
  
  }
  
  /* Tablet to Desktop */
  @media (min-width:475px) {
    .mobile-btn, .mobile-btn-text {
      display: none;
    }
  
  }

body,
.wrapper {
  /* Break the flow */
  position: absolute;
  top: 0px;

  /* Give them all the available space */
  width: 100%;
  height: 100%;

  /* Remove the margins if any */
  margin: 0;

  /* Allow them to scroll down the document */
  /* overflow-y: hidden; */
}

.body {
  /* Sending body at the bottom of the stack */
  z-index: -2;
}

.wrapper {
  /* Making the wrapper stack above the body */
  z-index: -1;
}