:root {
      --header-image: url('bannerupdated.png');
      --body-bg-image: url('background2.jpg');

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

    p{
 line-height: 1.5;
   }
   


  @font-face {
      font-family: Nunito;
      src: url('fonts/OpenSans-Regular.ttf');
  }

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

  @font-face {
      font-family: Nunito;
      src: url('fonts/OpenSans-Italic.ttf');
      font-style: italic;
  }

  @font-face {
      font-family: Nunito;
      src: url('fonts/Azula.ttf');
      font-style: italic;
      font-weight: bold;
  }

   @font-face {
      font-family: nes;
      src: url('fonts/nes.ttf');
      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);
      background-repeat: no-repeat;
  background-attachment: fixed;
  }

  * {
      box-sizing: border-box;
  }

  #container {
      max-width: 1150px;
     margin: 0 auto;
     
  }
   img {
max-width: 100%;
height: auto;
}


  #container a {
      color: #e9ec05;
    }
  

  #header {
      width: 100%;
      background-color: rgb(196, 180, 180);
      height: 40px;
      font-family: nes;
      
  }

  #header p {
    font-size: x-large;
    color: red;
    margin-left: 19px;
  }
  

  #navbar {

    height: auto;
      min-height: 30px;
      padding: 0px;
      background-color: grey;
      width: 100%;
      font-family: nes;
      
  }

  #navbar ul {
      display: flex;
      /*These are useful do not remove*/
      padding: 0;
      margin: 0;
      /*These are useful do not remove*/
      list-style-type: none;
       overflow: hidden;
  background-color: rgb(80, 77, 77);
  font-size: x-large;
    
    }

  #navbar li {
    float: left;
}

  #navbar li a {
    display: block;
      color: red;
      font-weight: 800;
      text-decoration: none;
      padding: 10px 20px;
}

  #navbar li a.active {
  background-color: rgb(0, 0, 0);
  color: #f30c0c;
  font-size: x-large;
}
  
  #navbar li a:hover:not(.active)  {
      color: #ff0303;
      text-decoration: underline;
      background-color: rgb(0, 0, 0);
      font-size: x-large;
  }

  #flex {
      display: flex;
  }

  
  aside {
      background-color: rgba(128, 128, 128, 0.075);
      width: 200px;
      padding: 20px;
      font-size: smaller;
      /*border-right: 10px solid transparent;
      border-bottom: 10px solid transparent;*/
      border-top: 20px solid transparent;
      border-color: rgb(80, 77, 77);
  }


  main {
      background-color: #000000;
      flex: 1;
      padding: 20px;
      order: 2;
      border-radius: 3px;
       border-top: 20px solid transparent;
       border-right: 10px solid transparent;
       border-left: 10px solid transparent;
       border-bottom: 10px solid transparent;
  padding: 15px;
  /*border-image: url(border.png) 30% round;?*/
  margin-bottom: px; 
  border-color: rgb(179, 179, 179); 
  }


   #leftSidebar {
      order: 1;

  }

  #rightSidebar {
      order: 3;
  }

  footer {
      background-color: rgb(80, 77, 77);
      /* footer color */
      width: 100%;
      height: 40px;
      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;
  }
.resized-img {
    width: 200px;
    height: auto; /* preserves aspect ratio */
}

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

      aside {
          width: 100%;
      }

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

      #leftSidebar {
          order: 2;
          display:none
      }

      #rightSidebar {
          order: 3;
          display:none
      }

      #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;
}
#drmarioborderboxheader {
 border-top: 10px solid transparent;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
  border-image: url(border.png) 30% round;
  background-color: black;
}

#notice {
    max-width: 400px;
    width: auto;
 border: 2px solid transparent;
 border-color: orangered;
  padding: 0px;
  background-color: rgb(0, 0, 0);
  text-align: center;
  float: right;
  margin-bottom: 15px;
  margin-left: 5px;
  margin-top: 15px;
}

#sideimage {
    max-width: 640px;
    max-height: 480px;
    width: auto;
    height: auto;
     display: block;
    margin: 0 auto;
    float: right;
}

#notice p {
 color: rgb(243, 196, 110);
 padding: 5px;
}

#noticeb {
 background-color: orangered;
 color: white;
 text-align: center;
 max-width: 400px;
 width: auto;
}

#imgfloat { 
float: right;
max-width: 320px;
margin-bottom: 10px;
margin-left: 10px;
border: 2px solid transparent;
 border-color: orangered;

}

#imgfloat p { 
font-size: smaller;
text-align: center;
}

#warning {
    max-width: 400px;
 border: 2px solid transparent;
 border-color: red;
  padding: 0px;
  background-color: black;
  text-align: center;
  float: right;
  margin-bottom: 15px;
  margin-left: 5px;
}

#warning p {
 color: orange;
}

#warningb {
 background-color: red;
 color: white;
 text-align: center;
 max-width: 400px;
}
#sweetspot {

 border: 2px solid transparent;
 border-color: red;
  padding: 0px;
  background-color: black;
  text-align: center;
  margin-bottom: 15px;

}

#warning p {
 color: orange;
}

#sweetspotb {
 background-color: red;
 color: white;
 text-align: center;

}

#sectionheading {
border-bottom: 10px solid transparent;
border-color: rgb(80, 77, 77);
border-radius: 10px;
margin-bottom: 20px;
Margin-top: 40px;
/*border-image: url(border.png) 30% round;*/
font-family: nes;
}

#sectionheading b {
    color: red;
font-size: 36px;
}

#step {
border-bottom: solid transparent;
border-color: rgb(80, 77, 77);
margin-bottom: 20px;
Margin-top: 40px;
font-family: nes;
}
#step b {
    color:red;
    font-size: larger;
}



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

#pageheading {
border-bottom: 10px solid transparent;
border-color: rgb(80, 77, 77);
margin-bottom: 20px;
border-radius: 30px;
/*border-image: url(border.png) 30% round;*/
font-family: nes;
}

#pageheading b {
    color: red;
font-size: 36px;
}

#screenshot {
    border: 5px solid transparent;
    border-color: rgba(245, 245, 245, 0.603);
    border-radius: 15px;
    margin-top: 20px;
    margin-bottom:20px;
    background-color: rgb(189, 188, 188);
 /*max-width: 100%;
    height: auto;
     display: block;*/
}
#screenshot img {
 border-radius: 15px;

}

#quote {

 border: 2px solid transparent;
 border-color: rgba(80, 77, 77, 0.562);
  padding: 0px;
  background-color: black;
  text-align: center;
  margin-bottom: 15px;
   border-radius: 15px;

}