:root {
    
      --body-bg-image: url('background1.png');

      /* 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/OpenSans-BoldItalic.ttf');
      font-style: italic;
      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);
  }

  * {
      box-sizing: border-box;
  }

  #container {
      max-width: 800px;
     margin: 0 auto;
     
  }
   img {

    max-width: 100%;

    height: auto;

}


  #container a {
     color: fuchsia;
      /* font-weight:*/
     }
  

  #header {
      width: 100%;
      background-color: #000000;
      background-size: 100%;
  }
  #header b{
    margin-left: 15px;
    font-size: 32px;
    color: fuchsia;
  }

  #navbar {


   height: auto;
      min-height: 30px;
      padding: 0px;
      background-color: #0b092d;
      width: 100%;
      
  }

  #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: #1b1616;
    
    }

  #navbar li {
    
      float: left;
      
     
}

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

  #navbar li a.active {
  background-color: #06051b;
  color: #f30c0c;
 
}
  
  #navbar li a:hover:not(.active)  {
      color: #f30c0c;
      text-decoration: underline;
      background-color: #06051b;
     
  }

  #flex {
      display: flex;
  }

  
  aside {
      background-color: #020314c2;
      width: 200px;
      padding: 20px;
      font-size: smaller;
     
  }


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


  */ #leftSidebar {
      order: 1;

  }

  #rightSidebar {
      order: 3;
  }

  footer {
      background-color: #000000;
      /* footer color */
      width: 100%;
      height: 40px;
      padding: 10px;
      text-align: center;
      

      
  }

  h1,
  h2,
  h3 {
      color: fuchsia;
  }

  h1 {
      font-size: 25px;
  }

  strong {
      /* Arcade Font */
      color: fuchsia;
  }

  /* 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;
      }

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

#status{
border: 2px solid transparent;
border-color: fuchsia;
border-radius: 10px;
margin-right: 20px;
/*margin-left: 3px;*/
margin-bottom: 20px;
margin-top:  10px;
padding-top: 2px;
padding-left: 2px;
padding-right: 5px;
padding-bottom: 2px;
float: left;
max-width: 400px;
    max-height: 240px;
}

#status p {
line-height: 0.3;
font-size: smaller;
}
#status b {
font-size: smaller;
}

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

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

#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: 2px solid transparent;
border-color: fuchsia;
border-radius: 10px;
margin-bottom: 20px;
/*Margin-top: 40px;
border-image: url(border.png) 30% round;*/
}
#sectionheading b {
    color:fuchsia;
font-size: 24px;
}

#step {
border-bottom: solid transparent;
border-color: rgb(115, 105, 255);
margin-bottom: 20px;
Margin-top: 40px;
}
#step b {
    color: rgb(115, 105, 255);;
}



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