body {
  
  background-image: url(https://typoraccoon.neocities.org/gif/stars.gif);
  font-family: monospace;
  font-size: 20px;
  color: white;
  cursor: url(https://typoraccoon.neocities.org/images/pointer.png), auto;

}

h1 {
  
  font-family:'daft';
  }

.yellow {
  color: #fff000;
  }

  
  .jolt{
     z-index: 10;
    bottom: 0;
       right: 0;
       position: fixed;
    }
    
.porygon{
      bottom: 0;
      left: 0;
      position: fixed;
      z-index:26;
    }
      
  .center{
    
    text-align: center;
    
    }
    
.border {
  z-index:20;
  border-style: inset;
  width:98%;
  height: 90px;
  background: linear-gradient(#000000, blue);
  text-align: center;
  border: 10px ridge #fff000;
  position: fixed;
  
}

.zoom {
  
  transition: transform .2s;
  
  }
  .zoom:hover {
  transform: scale(1.1);
  }
      .abc:hover .overlay{
opacity:1;
    }

    .overlay{

      opacity:0;
      transition: .1s ease;
      position:relative;
    }
    .abc{
position:relative;
width:100px;
align-items:center;
display:inline-block;
border-radius:10px;
    }
.words {
text-align:center;
position:absolute;
bottom:40px;
left:22px;
font-weight:bold;
color:#0000ee;
font-size:15px;
}

.goofy {
  z-index:0;
color:white;
font-family:sans-serif;
text-align: center;
  width: 56px;
  height: 56px;
  background-color: blue;
  position: relative;
  animation-name: go;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  
}

@keyframes go {
  0%   {background-color:red; left:5%;}
  20%  {background-color:blue; }
  40%  {background-color:yellow; left:95%;}
  60%  {background-color:grey;}
  80% {background-color:green;}
  100% {background-color:red; left:5%;}

}
  .goofy:hover{
    animation-play-state: paused;
    }
.jump {
  width:70px;
  position: relative;
  animation-name: yippee;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes yippee {
  0%   {left:30%;}
  50%  {left:60%;}
  100% {left:30%;}
}

.flip {
    z-index:0;
  width:200px;
  position:relative;
  animation-name:flip;
  animation-duration:10s;
  animation-iteration-count: infinite;
  
  }
  
  @keyframes flip {
    0% {left:4%; transform: scalex(1);}
    1%{left:4%; transform: scalex(1);}
    50%{left:80%; transform: scalex(1);}
51%{left:80%; transform: scalex(-1);}
99%{left:4%; transform: scalex(-1);}
    100%{left:4%; transform: scalex(1);}
    
    }

.warning1 {
  position:fixed;
  z-index:23;
  right: -200px;
  transform:rotate(20deg);
  }

.wanring2 {
   position:fixed;
  z-index:24;
  left: -330px;
  transform:rotate(-70deg);
  }
  
  .wanring3 {
      position:fixed;
  z-index:25;
  left: -220px;
  transform:rotate(-10deg);
    
    }
.penguin{
  position:fixed;
  right:20px;
  top:18px;
  width:100px;
  z-index:26;
  
  }


::-webkit-scrollbar{
width: 20px;
height: 10px;
}
::-webkit-scrollbar-thumb{
background: #000000;
border: 6px ridge #fff000;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover{
background: #0000ee;
}
::-webkit-scrollbar-track{
background: #000000;
border-radius: 0px;
box-shadow: inset 0px 0px 0px 0px #E0E0E0;
}