:root {
      --header-image: url('bannerupdated.png');
      --body-bg-image: url('blackbg.png');
      --content: #030008;
  }

    p{

   }



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

  @font-face {
      font-family: Nunito;
      src: url('fonts/famicom.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/famicom.ttf');
      font-weight: bold;
      }


  body {
      font-family: 'Nunito', sans-serif;
      /*margin: 0;*/
      background-color: #000000;
  /*background-size: 65px;*/
      color: #fceaff;
      background-image: var(--body-bg-image);
      background-repeat: 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(138, 28, 28);
      height: 40px;
      font-family: nes;
      
  }

  #header p {
    font-size: x-large;
    color: rgb(248, 247, 247);
    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-top: 10px 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(138, 28, 28);; 
  }

  main p {
 line-height: 1.5;
 text-indent: 15px;

  }


   #leftSidebar {
      order: 1;

  }

  #rightSidebar {
      order: 3;
  }

  footer {
      background-color: rgb(138, 28, 28);
      /* footer color */
      width: 100%;
      height: 60px;
      padding: 10px;
      text-align: center; 
    }

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

  h1 {
      font-size: 25px;
  }

  strong {
      color: #ffffff;
  }



  #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;
}

#imagebox {
    float: right;
}

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

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

#warning {
    max-width: 200px;
 border: 3px 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;
 margin-left: 5px;
 margin-right: 5px;
}

#warning b {
 background-color: red;
 color: white;
 text-align: center;
 max-width: 200px;
 padding-left: 48px;
 padding-right: 48px;
  border: 3px solid transparent;
 border-color: red;
 
}
#sweetspot {

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

}

#warning p {
 color: orange;
 text-indent: 0px;
}

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

}

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

#sectionheading b {
    color: rgb(255, 255, 255);
font-size: 36px;
}

#step {
border-bottom: solid transparent;
border-color: rgb(126, 128, 15);
margin-bottom: 20px;
Margin-top: 40px;
font-family: nes;
}
#step b {
    color:rgb(255, 255, 255);
    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;

}