:root {
      --header-image: url('bannerupdated.png');
      --body-bg-image: url('background.png');
      --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: 1150px;
     }
    #container2 {
      max-width: 900px;
      margin: 0 auto;
      color: #e9ec05;
      background-color: #252501;
     
     
  }

 
  #container a {
      color: #e9ec05;
      font-weight:
     
  }

  #header {
      width: 100%;
      background-color: #5e28ff;

      height: 150px;
      background-image: var(--header-image);
      background-size: 100%;
      border-bottom: 1px solid #00027e;
      border-radius: 10px;
    
  }

 
  #navbar {
      height: 40px;
      background-color: #0b092d;
      width: 100%;
      border-bottom: 1px solid #00027e;
      border-radius: 10px;
  }

  #navbar ul {
      display: flex;
      padding: 0;
      margin: 0;
      list-style-type: none;
      justify-content: space-evenly;
  }

  #navbar li {
      padding-top: 10px;
  }


  #navbar li a {
      color: #ffda06f5;
      font-weight: 800;
      text-decoration: none;
     
  }
   img {

    max-width: 100%;

    height: auto;

}


  
  #navbar li a:hover {
      color: #f30c0c;
      text-decoration: underline;
  }

  #flex {
      display: flex;
      
  }

  
  aside {
      background-color: #020314;
      width: 400px;
      padding: 20px;
      font-size: smaller;
      border-radius: 10px;
     
  }


    main {
      background-color: #230363;
      flex: 1;
      padding: 20px;
      order: 2;
      border-radius: 10px;
       border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
 }



  */ #leftSidebar {
      order: 1;
  }

  #rightSidebar {
      order: 3;
  }

  footer {
      background-color: #0b092d;
    width: 100%;
      height: 40px;
      padding: 10px;
      text-align: center;
      border-radius: 10px;
       
  }

  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;
  }
  .box2 {
      background-color: #000314;
      border: solid 1px #630202;
      border-radius: 10px;
      text-align: center;

  }
  .titlebox {
      background-color: #021163;
      border: 3px solid #e20000;
      border-style: dotted;
      padding: 10px;
      border-radius: 10px;
    display: inline-block;

  
  }


  #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;
      }
  }
  #drmarioborder {
 border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
  margin-bottom: 15px;  
  background-color: black;
display: inline-block;
  }

#drmariobordernopad {
 border: 10px solid transparent;
  border-image: url(border.png) 30% round;
  margin-bottom: 15px;  
  background-color: black;
}

#drmarioborder2 {
 border: 16px solid transparent;
  padding: 15px;
  border-image: url(border2.png) 30% round;
  margin-bottom: 15px;  
  background-color: black;
}


hr.drmario {
  border: none; 
  height: 6px; 
  background: url("hr.png") repeat-x center center;
   border-radius: 5px;