/* 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." */



body {
  cursor: url(), default;
}

            :root {
                --header-image: url('forest3.jpg');

                /* colors */
                --content: #34560c;
            }

 
 /* this is the style for the title font */
 
pre {
  font-family:pixel2;
  color:#B5CEAC;
  text-align: center;
  font-size:150%;
  
  }
  

  
  
p {
  border: 2px solid #6e817d;
  border-radius: 8px;
  background-color: #000;
  color: #B5CEAC;
  text-align: center;
  font-family: pixel;
  font-size: 18px;
  margin: auto;
  height: auto;
  width: 70%;
  padding: 5px;
  
  }






  /* this is the centering for the title */
            
  .relative1 {
    position: absolute;
    top: -200px;
    right: 150px;
    

 
  }
  
  .relative2 {
    position: absolute;
    top: -460px;
    right: 7px;

}

.box3 {
width: 480px;
}

  /* nav bouncing animation */

.bouncing:hover {
  
   animation: bounce 1.3s infinite;
}

        @keyframes bounce {
    0%,  
    100% {
        transform: translateY(0);
    }    
    50% {
        transform: translateY(-5px);
    }
}


  
              /* FONTS BELOW */

            @font-face {
                font-family: pixel;
                src: url('./PixelOperator.ttf');
            }

            @font-face {
                font-family: pixel;
                src: url('./PixelOperator-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: pixel;
                src: url('./PixelOperator.ttf');
                font-style: italic;
            }

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

            @font-face {
              font-family: pixel2;
              src: url(./nightmarealley.ttf);
            }
            
            @font-face {
              font-family: creepy;
              src: url(./creepycrawlers.ttf);
            }
            
            
.miniheader{
  width: 100px;
  max-width: 100%;
}

      /* size of da pokemon */

      .pokemon {
        width: 10px;
        height: 10px;
      }

 .box1 {
      border: 3px groove #34560c;
      padding: 10px;
      height: 500px;
      max-width: 100%;
      position: relative;
  }
  
  
  /* aside box styling */
            
  .updatebox {
     background-image: url('green_paper.jpg');
     background-size: 100%;
     opacity: 0.8;
     border: 5px solid #129f5a;
     border-radius: 10px;
     padding-left: 35px;
     overflow: auto;
     height: 300px;
     color: #100761
  }
  
  .updatebox li {
    font-size: 18px;
    padding: 6px;
  }
            
  .blogbox {
     background-color: #5ada89;
     border: 5px solid #129f5a;
     border-radius: 10px;
     padding: 10px;
     overflow: auto;
     height: 300px;
  }
  
  .todolist {
     background-image: url('paper_bg.webp');
     opacity: 0.8;
     border: 5px solid #129f5a;
     border-radius: 10px;
     padding-left: 10px;
     overflow: auto;
     height: 300px;
  }
  
  .todolist li {
    font-size: 18px;
    padding: 6px;
  }
  
  .chat_box {
    flex-wrap: wrap;
    overflow: auto;
width: 50%; min-height: 400px;
display: inline-flex;
    
  }
  
  .pokemon_box {
     flex-wrap: wrap;
     overflow: auto;
     max-width: 100%;
     width: 400px;
     height: 355px;
     background-color: black;
     border: 5px solid #6e817d;
     border-radius: 10px;
     display: inline-flex;
     vertical-align: top
  }
  
    .pokemon_box::-webkit-scrollbar {
  width: 12px;
}

.pokemon_box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #6e817d; 
    border-radius: 10px;
}

.pokemon_box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #5ada89; 
}

  
  
  .center {
    display: block;
    margin: 0 auto;
    width: 40%;
  
}