.center{text-align: center;}

#letters{
  
  font-size: 50px;
  position: absolute;
  top: 250px;
     font-family: creepster;

  right: 50px;
  width: 350px;
  
  -webkit-animation: change 5s linear infinite;
  -moz-animation: change 5s linear infinite;
  -ms-animation: change 5s linear infinite;
  -webkit-animation-delay: 2700ms;
}
@-webkit-keyframes change{
  0%{
    opacity: 1;
  }25%{
    opacity: 0;
  }50%{
    opacity: 0;
  }100%{
    opacity: 1;
  }
}
@-moz-keyframes change{
  0%{
    opacity: 1;
  }25%{
    opacity: 0;
  }50%{
    opacity: 0;
  }100%{
    opacity: 1;
  }
}
@-ms-keyframes change{
  0%{
    opacity: 1;
  }25%{
    opacity: 0;
  }50%{
    opacity: 0;
  }100%{
    opacity: 1;
  }
}

body{

 display: block;
 width: 100%;
 /*height: 750px;*/
  
}
#spider1{
  border: 3px solid black;
  width: 100px;
  height: 75px;
  border-radius: 50% 50%;
  box-shadow: inset 0px 0px 70px 0px black;
  position: absolute;
  top: -150px;
  left: 409px;
  z-index: 98;
  
  -webkit-animation: down 5s linear infinite;
  -moz-animation: down 5s linear infinite;
  -ms-animation: down 5s linear infinite;
  -webkit-animation-delay: 2000ms;
}
@-webkit-keyframes down{
  0%{
    top: -350px;
    
  }50%{
    top: 350px;
  }
  100%{
    top: -150px;
  }
}
@-moz-keyframes down{
  0%{
    top: -350px;
    
  }
  25%{
    top:200px;
    
  }
  50%{
    top:400px;
    
  }
  100%{
    top:-700px;
    
  }
}
@-ms-keyframes down{
  0%{
    top: -350px;
    
  }
  25%{
    top:200px;
   }
  50%{
    top:400px;
    
  }
  100%{
    top:-700px;
    
  }
}
#eye{
  border: 4px solid black;
  width: 40px;
  height: 30px;
  background: white;
  border-radius: 50% 50%;
  position: absolute;
  top: -1px;
  left: 3px;
}
#eye:after{
  content: "";
  display: block;
  border: 4px solid black;
  width: 40px;
  height: 30px;
  background: white;
  border-radius: 50% 50%;
  position: absolute;
  top: -5px;
  left: 50px;
}
#pupil{
  border: 5px solid black;
  width: 2px;
  height: 2px;
  border-radius: 100%;
 background: black;
  position: absolute;
  top: -5px;
  left: 22px;
  box-shadow: 40px 1px 0px 0px black;
  z-index: 999;
  -webkit-animation: move 2s linear infinite;
  -moz-animation: move 2s linear infinite;
  -ms-animation: move 2s linear infinite;
}
@-webkit-keyframes move{
  0%{
    left: 22px;
  }
  25%{
    left: 37px;
  }
  50%{
    left: 10px;
  }
  75%{
    left: 15px;
  }100%{
    left: 22px;
  }
}
@-moz-keyframes move{
  0%{
    left: 22px;
  }
  25%{
    left: 37px;
  }
  50%{
    left: 10px;
  }
  75%{
    left: 15px;
  }100%{
    left: 22px;
  }
}
@-ms-keyframes move{
  0%{
    left: 22px;
  }
  25%{
    left: 37px;
  }
  50%{
    left: 10px;
  }
  75%{
    left: 15px;
  }100%{
    left: 22px;
  }
}
/*LEGS!!*/
#leg{
  -webkit-transform: rotate(-50deg);
  -moz-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  position: absolute;
  top: -14px;
  left: 94px;
  z-index: -998;
}
#leg p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg p:nth-child(2){
  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}




#leg2{
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  position: absolute;
  top: 17px;
  left: 101px;
  
}
#leg2 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg2 p:nth-child(2){
  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}





#leg3{
  -webkit-transform: rotate(13deg);
  -moz-transform: rotate(13deg);
  -ms-transform: rotate(13deg);
  position: absolute;
  top: 45px;
  left: 91px;
  
}
#leg3 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg3 p:nth-child(2){
  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}


#leg4{
  -webkit-transform: rotatey(180deg)
    rotatez(-50deg);
  -moz-transform: rotatey(180deg)
    rotatez(-50deg);
  -ms-transform: rotatey(180deg)
    rotatez(-50deg);
  position: absolute;
  top: -14px;
  left: -33px;
  z-index: -998;
}
#leg4 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg4 p:nth-child(2){
  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}





#leg5{
  -webkit-transform: rotatey(180deg)
    rotatez(-20deg);
  -moz-transform: rotatey(180deg)
    rotatez(-24deg);
  -ms-transform: rotatey(180deg)
    rotatez(-24deg);
  position: absolute;
  top: 13px;
  left: -47px;
  z-index: -998;
}
#leg5 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg5 p:nth-child(2){
  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}

#leg6{
  -webkit-transform: rotatey(180deg)
    rotatez(15deg);
  -moz-transform: rotatey(180deg)
    rotatez(-50deg);
  -ms-transform: rotatey(180deg)
    rotatez(-50deg);
  position: absolute;
  top: 42px;
  left: -38px;
  
}
#leg6 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg6 p:nth-child(2){
  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}
#string{
  border: 2px solid black;
  height: 430px;
  width: 0px;
  position: absolute;
  top: -432px;
  left: 47px;
  -webkit-animation: down2 5s linear infinite;
  -webkit-animation-delay: 2000ms;
  position: absolute;
  

}