@font-face{
    src: url(fontzz/vanderfont.ttf);
    font-family: vanderfont;
    
  }
  
  @font-face{
    src: url(fontzz/Porkys.ttf);
    font-family: porkys;
    
  }
  
  h1{
    font-size: 210%;
  }
  
  h2{
    font-size: 175%;
  }
  
  h3{
    font-size: 150%;
  }
  
  h4{
    font-size: 145%;
  }
  
  
  body{
    image-rendering: pixelated;
    font-family: vanderfont;
    color: #ff8d60;
    font-size: 160%;
  }
  
  #bg-overlay{
    width: 3000px;
    height: 3000px;
    background-image: url(image/backgrounds/checkeryellow.png);
    background-size: 200px 200px;
    position: fixed;
    top: -1200px;
    transform: rotate(35deg);
    animation: bg-scroll 3s linear infinite;
    z-index: -1;
  }
  
  .title{
    font-family: porkys;
    height: 100px;
    width: 600px;
    background-color: #ffcca866;
    text-shadow: 3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 3px 3px #fff, -3px -3px #fff, 3px -3px #fff, -3px 3px #fff;
    
  }

  
  
  @keyframes bg-scroll{
    0% {
    background-position-x: 0;
}

100% {
    background-position-x: -200px;
}
}


  .pfp{
    width: 200px;
    
  }
  
  #container a{
  color: orangered;  
  transition: ease-out 0.4s;
  }
  
  #container a:hover{
  color: red; 
  font-size: 115%;
  transition: ease-out 0.4s;
  }
  
  #container{
   width: 1200px;
   margin: 50px auto 10px;
   background-color: #fdffeb;
   height: 100%;
   border-radius: 20px;
   border: #ffc178 5px solid;
   filter: drop-shadow(0px 0px 15px #ffc387);
  }
  
      hr{
     color: transparent;
     background-color: transparent;
     width: 90%;
     border-bottom: 6px dashed #ff8d60;
     border-top: none;
     opacity: 30%;

    }
    
    #iconpart{
     left: 72%;
     position: absolute;
    border: #ffc178 5px dashed;
    width: 300px; 
    height: 300px; 
    border-radius: 10px;
      background: url(image/backgrounds/checkeryellow.png);
      background-size: 100px 100px;
      animation: bg-scroll 3s linear infinite;
    }
    
    
    .icon{
     left: 20px;
     position: relative;
     top: 20px;
     border-radius: 50%;
    border: #ffc178 5px dashed;
    width: 250px; 
    height: 250px;
    filter: drop-shadow(0px 2px 0px #ffffff) drop-shadow(0px -2px 0px #ffffff) drop-shadow(2px 0px 0px #ffffff) drop-shadow(-2px 0px 0px #ffffff) drop-shadow(0px 0px 10px #ffc387);
    transition: 0.3s cubic-bezier(0, 0, 0, 0.98);
    }
    
    .icon:hover{
    width: 260px; 
    height: 260px; 
    transition: 0.3s cubic-bezier(0, 0, 0, 0.98);
      
    }
    
    .fuckasstext{
    margin-left: 20px;
    text-wrap: wrap;
    top: 50px;
    width: 800px;
    border: #ffc178 5px dashed;
    background: url(image/backgrounds/lightyellowchecker.png);
    color: #ff6528;
}

.button2{
  font-family: porkys;
  text-size: 120%;
  width: 170px;
  height: 40px;
  border: #ffc178 4px solid;
  margin-left: 70px;
  border-radius: 10px;
  background: url(image/backgrounds/lightyellowchecker.png);
  text-align: center
}

a{
 text-size: 140%;
  text-decoration: none;
  transition: none;
  color: #ff8d60;
  text-wrap: wrap;
}


mark{
 background-color: #ffc38766;
 color: orangered;
}