  :root {
      --header-image: url('gbcambanner.png');
      --body-bg-image: url('gbcambackground.png');

      /* colors */
      --content: #2a175f;
  }

  p{
   text-indent:40px;
    line-height: 1.3;
}

  @font-face {
      font-family: Nunito;
      src: url('none');
  }

  @font-face {
      font-family: Nunito;
      src: url('fonts/game_boy_1989.ttf');
      font-weight: bold;
  }

  @font-face {
      font-family: Nunito;
      src: url('fonts/Azula.ttf');
      font-style: italic;
  }

  @font-face {
      font-family: Nunito;
      src: url('fonts/Azula.ttf');
      font-style: italic;
      font-weight: bold;
  }

  body {
      font-family: 'Nunito', sans-serif;
      margin: 0;
      background-color: #1e2020;
  
      background-size: 100px;
      color: #fceaff;
      background-image: var(--body-bg-image);
  }

  * {
      box-sizing: border-box;
  }

  #container {
      max-width: 900px;
      margin: 0 auto;
     
  }

  /* the area below is for all links on your page
EXCEPT for the navigation */
  #container a {
      color: #ec0505;
      font-weight:
     
  }

  #header {
      width: 100%;
      background-color: #232829;
      /* header color here! */
      height: 150px;
      background-image: var(--header-image);
      background-size: 100%;
  }

  /* navigation section!! */
  #navbar {
      height: 40px;
      background-color: #1b1b20;
      /* navbar color */
      width: 100%;
  }

  #navbar ul {
      display: flex;
      padding: 0;
      margin: 0;
      list-style-type: none;
      justify-content: space-evenly;
  }

  #navbar li {
      padding-top: 10px;
  }

  /* top menu links*/
  #navbar li a {
      color: #c9c3c3;
      /* color of link */
      font-weight: 800;
      text-decoration: none;
      /*no underline */
  }

  
  #navbar li a:hover {
      color: #f30c0c;
      text-decoration: underline;
  }

  #flex {
      display: flex;
  }

  
  aside {
      background-color: #08080e;
      width: 190px;
      padding: 15px;
      font-size: smaller;
     
  }


  main {
      background-color: #060607fb;
      flex: 1;
      padding: 20px;
      order: 2;
  }


  */ #leftSidebar {
      order: 1;
  }

  #rightSidebar {
      order: 3;
  }

  footer {
      background-color: #141416;
      /* footer color */
      width: 100%;
      height: 40px;
      padding: 10px;
      text-align: center;
       
  }

  h1,
  h2,
  h3 {
      color: #c0b1b1;
  }

  h1 {
      font-size: 25px;
  }

  strong {
      /* Arcade Font */
      color: #f3f564;
  }

  .box {
      background-color: #0e0f11;
      border: 1px solid #e20000;
      padding: 1px;
  }
 img {

    max-width: 100%;

    height: auto;

}
  /* CSS for extras */

  #topBar {
      width: 100%;
      height: 30px;
      padding: 10px;
      font-size: smaller;
      background-color: #1a1822ad;
  }


  @media only screen and (max-width: 1000px) {
      #flex {
          flex-wrap: wrap;
      }

      aside {
          width: 1%;
      }

      main {
          order: 1;
      }

      #leftSidebar {
          order: 2;
      }

      #rightSidebar {
          order: 3;
      }

      #navbar ul {
          flex-wrap: wrap;
      }
  }

  .fixed-div {
  position: fixed; 
  top: 170px;      
  left: 90px;     
}
.quicknav {
        position: sticky;
        top: 0;
        background-color: rgba(22, 16, 20, 0.158);
        padding: 10px;
        border: 2px solid rgb(82, 72, 72);
    }
hr {border-color: #c0b1b1;}     