


:root {
      --header-image: url('bannergreen.bmp');
      --body-bg-image: url('blkwarp.gif');

      /* colors */
      --content: #4d2d7c;
  }

  p{
   text-indent:50px;
   line-height: 1.5;
}

  @font-face {
      font-family: Nunito;
      src: url('none');
  }

  @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);
  }

  * {
      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: #0dec05;
      font-weight:
     
  }

  #header {
      width: 100%;
      background-color: #000000;
      /* header color here! */
      height: 150px;
      background-image: var(--header-image);
      background-size: 100%;
      
  }

  /* navigation section!! */
  #navbar {
      height: 40px;
      background-color: #000000;
      /* 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: ##25ee0a;
      /* color of link */
      font-weight: 800;
      text-decoration: none;
      /*no underline */
      
  }

  
  #navbar li a:hover {
      color: #eb0cf3;
      text-decoration: underline;
      
  }

  #flex {
      display: flex;
  }

  
  aside {
      background-color: #000000;
      width: 200px;
      padding: 20px;
      font-size: smaller;
     
  }


  main {
      background-color: #000000;
      flex: 1;
      padding: 20px;
      order: 2;
      border: 3px solid #047e00;
      padding: 10px;
  }


  */ #leftSidebar {
      order: 1;
  }

  #rightSidebar {
      order: 3;
  }

  footer {
      background-color: #092d0e;
      /* footer color */
      width: 100%;
      height: 40px;
      padding: 10px;
      text-align: center;
       
  }

  h1,
  h2,
  h3 {
      color: #25ee0a;
  }

  h1 {
      font-size: 25px;
  }

  strong {
      /* Arcade Font */
      color: #86f564;
  }

  /* news box */
  .box {
      background-color: #000000;
      border: 3px solid #047e00;
      padding: 10px;
  }

  /* CSS for extras */

  #topBar {
      width: 100%;
      height: 30px;
      padding: 10px;
      font-size: smaller;
      background-color: #000000;
  }


  @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;
      }
  }