:root {
      --header-image: url('bannergb.png');
      --body-bg-image: url('background1989.png');

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

  p{
   text-indent:30px;
   line-height: 1.3;
   font-size: medium;
}

  @font-face {
      font-family: Nunito;
      src: url('none');
  }

  @font-face {
      font-family: Nunito;
      src: url('');
      font-weight: bold;
      
  }

  @font-face {
      font-family: Nunito;
      src: url('');
      font-style: italic;
  }

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

  body {
      font-family: 'Nunito', sans-serif;
      margin: 0;
      background-color: #0b0a52;
      color: #fceaff;
      background-image: var(--body-bg-image);
      background-size: 100%;
  }

  * {
      box-sizing: border-box;
  }

  #container {
      max-width: 1200px;
      margin: 0 auto;
     
  }
    #container2 {
      max-width: 900px;
      margin: 0 auto;
      color: #e9ec05;
      background-color: #252501;
     
     
  }

  /* the area below is for all links on your page
EXCEPT for the navigation */
  #container a {
      color: #e9ec05;
      font-weight:
     
  }

  #header {
      width: 100%;
      background-color: #5e28ff;
      /* header color here! */
      height: 150px;
      background-image: var(--header-image);
      background-size: 100%;
      
    
  }

  /* navigation section!! */
  #navbar {
      height: 50px;
      background-color: #23092d;
      width: auto;
      
      
      
      
  }

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

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

  /* top menu links*/
  #navbar li a {
      color: #ffda06f5;
      font-weight: 800;
      text-decoration: none;
      
  }
   img {
max-width: 100%;
height: auto;
border-radius: 10px;
       border: 10px solid transparent;
  border-image: url(border2.png) 30% round;
  }

img.aside {
max-width: 100%;
height: auto;
}

.noborder {
max-width: 100%;
height: auto;
border: none !important;
}

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

  #flex {
      display: flex;
      
  }

  
  aside {
      background-color: #0d0214c0;
      width: 250px;
      padding-left: 15px;
      padding-bottom: 15px;
      padding-right: 15px;
      padding-top: 5px;
      font-size: smaller;
      
      
     
  }


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


  #rightSidebar {
      order: 3;
  }

  footer {
      background-color: #1c0129ee;
      max-width: 100%;
      height: 50px;
      text-align: center;
       border-radius: 10px;
       border-left: 10px solid transparent;
       border-right: 10px solid transparent;
       border-top: 10px solid transparent;
      padding: 10px;
  border-image: url(border1989.png) 30% round;
  margin-bottom: px;  

b {
  font-weight: 900;
}
     
       
  }

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

  h1 {
      font-size: 25px;
  }

strong {
 
  font-family: 'Arcade', sans-serif;
  font-weight: normal;
  text-shadow: none !important
}

  /* divs */
#drmarioborder {
 border: 10px solid transparent;
  padding: 2px;
  border-image: url(border1989.png) 30% round;  
  background-color: black;
  max-width: %;
  
}
#drmarioborder2 {
 border: 16px solid transparent;
  padding: 5px;
  border-image: url(border2.png) 30% round;
  margin-bottom: 15px;  
  background-color: black;
  display: inline-block;
  
}


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

  .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;

  
  }

  /* CSS for extras */

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

      #leftSidebar {
          order: 1;
      }

      #rightSidebar {
          order: 3;
      }

      #navbar ul {
          flex-wrap: wrap;
      }
  }
  .border{
max-width: 100%;
height: auto;
border-radius: 10px;
border: 10px solid transparent;
border-image: url(layout/css/article/border2.png) 30% round;
}
.no-indent {
  text-indent: 0;
  line-height: 0.5;
}
.noborder {
max-width: 100%;
height: auto;
border: none !important;
border-radius: 0px;
}
  /*slideshow code*/

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 250px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  padding: 5px;
  font-weight: bold;
  user-select: none;
  text-align: center;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}
.prev {
  left: 0;
 
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  ;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: smaller;
  padding: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 22px;
  padding: 8px 12px;
  text-align: center;
  
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}