/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* .html {
  

  } */


  body {
    font-size: 20px;
    background-image: url(/graphics/wallpaper/pinkonwhitedots.gif); 
    background-size: 20px;
    line-height: 20px;
    word-spacing:2px;
    padding: 0px;
  }
  
  .html, body a {
      color: #ff9a20;
      text-decoration: none;
      font-weight: bold;
    }
    
    .html, body a:hover {
      color: #ff0084;
      
    }
  
  .div {
    line-height: 23px;
  }
  


   /* WRAPPERS */
  



   /*.big-wrappa {
    height: auto;
    width: 650px;
    padding:5px;
    margin:0px; 


  
}*/


  



  

  /* BODY */
  
  .top-container {
    background-color: #ffffff9c;
    height: auto; 
    width: 670px;
   /* border: 1px dashed #fa38a3; */
    display: flex; 
    column-gap: 20px;

  }


  /* BODY CONTAINERS */

  .body-container1 {
    background-image: url(/graphics/wallpaper/pink-white-menu.gif);
    height: auto; 
    width: 95%;
    padding: 10px;
    display: inline-block;

  }


  .welcome-container {
    background-color: #ffffffc6;
    height: auto; 
    width: 95%;
    padding: 10px;
    display: inline-block;

  }


  .frame-container1 {
    background-color: #ffffffc6;
    height: 720px; 
    width: 95%;
    padding: 10px;
    margin-top: 20px;
    display: inline-block;

  }


  .footer {
    background-color: #ffffffc6;
    background-image: url(/graphics/wallpaper/p-gingham.png);
    background-size: 200px;
    height: auto; 
    width: 650px;
    padding: 10px;
    margin-top: 20px;
    display: block;
    border:#fa38a3 2px dashed;

  }





  
  /*FLEXBOXES*/
  
  .sidenav {
  background-size: 200px;
  flex: 5;
  padding: 5px;
  
  }
  
  .content {
    /*background-color: lightblue;*/
    padding: 10px;
    flex: 5;
  }

  .spacer {

    padding: 10px;
    flex: 5;
  }
  
  
  
  
  
  
  /*WRAPPERS*/
  
  
  .wrappa{
    width: 670px;
    margin-bottom: 0px;
    border: 2px solid #fa38a3; 
    background-image: url(/graphics/wallpaper/hellokitty.jpg);
    background-size: 200px;
    padding-top: 5px;  
    padding-bottom: 5px;  
  }
  
  
  
  
  /*FONTS*/
  
  @font-face {
    src: url(/fonts/FiveFontsatFreddys.ttf);
    font-family: div; 
  }
    body,html { 
    font-family: div;
    color: #2e3a10;
    font-size: 8px;
    }



          @font-face {
            src: url(/fonts/KiwiSoda.ttf);
            font-family: header2; 
          }
            h2 { 
            font-family: header2;
            color: #dc753a;
            border-bottom: #c1c6bf67 1px dashed;
            border-left:#ff92d5 7px solid;
            padding-left: 5px;
            padding-bottom: 10px;
            background-color: white;
            background-size: 100px;
            font-size: 15px;
            }


            @font-face {
              src: url(/fonts/shine.ttf);
              font-family: header4;
            }
              h4 {
              font-family: header4;
              color: white;
              font-size: 100px;
              font-weight: bold;
              text-align: center; 
              }
  
  
  
  /*BULLETPOINTS*/
  
  li { list-style-image: url(/graphics/minis/planta.gif); 
  text-align: left;
  line-height: 23px;} 
  
  
  
  
  
  
    /** SCROLLBAR **/
  
  /* width */
  ::-webkit-scrollbar {
    width: 2px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: white; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #ff9616; 
  }