:root {
      --header-image: url('banner.bmp');
      --body-bg-image: url('blkwarp.gif');

      /* colors */
      --content: #4d2d7c;
  }


  @font-face {
      font-family: Nunito;
      src: url('fonts/arcade.TTF');
  }

  @font-face {
      font-family: Nunito;
      src: url('fonts/arcade.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: #0b0a52;
  
      background-size: 65px;
      color: #fceaff;
      background-image: var(--body-bg-image);
  }

 p{
   
   line-height: 1.4;
}

  * {
      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: #e9ec05;
      font-weight:
     
  }

  #header {
      width: 100%;
      background-color: #5e28ff;
      /* header color here! */
      height: 150px;
      background-image: var(--header-image);
      background-size: 100%;
  }

  /* navigation section!! */
  #navbar {
      height: 40px;
      background-color: #0b092d;
      /* 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: #ffda06f5;
      /* 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: #020314;
      width: 200px;
      padding: 20px;
      font-size: smaller;
     
  }


  main {
      background-color: #230363;
      flex: 1;
      padding: 20px;
      order: 2;
  }


  */ #leftSidebar {
      order: 1;
  }

  #rightSidebar {
      order: 3;
  }

  footer {
      background-color: #0b092d;
      /* footer color */
      width: 100%;
      height: 65px;
      padding: 10px;
      text-align: center;
       
  }

  h1,
  h2,
  h3 {
      color: #f3f564;
  }

  h1 {
      font-size: 25px;
  }

  strong {
      /* Arcade Font */
      color: #f3f564;
  }

  /* news box */
  .box {
      background-color: #030e50;
      border: 3px solid #e20000;
      padding: 10px;
  }

  /* CSS for extras */

  #topBar {
      width: 100%;
      height: 30px;
      padding: 10px;
      font-size: smaller;
      background-color: #08031fad;
  }


  @media only screen and (max-width: 800px) {
      #flex {
          flex-wrap: wrap;
      }

      aside {
          width: 100%;
      }

      /* item order/size adjustment
*/
      main {
          order: 1;
      }

      #leftSidebar {
          order: 2;
      }

      #rightSidebar {
          order: 3;
      }

      #navbar ul {
          flex-wrap: wrap;
      }
  }