<div class="wrap">
  <div class="zombie">
    <div class="headThing">
      <div class="brain"></div>
    </div>
    <div class="Zline"></div>
    <div class="Zeye"></div>
    <div class="Znose"></div>
    <div class="Zear"></div>
    <div class="Zmouth">
      <div class="Zteeth"></div>
      <div class="Zblood"></div>
    </div>
  </div>
  
  <div class="wolf">
    <div class="Wline"></div>
    <div class="Weye"></div>
    <div class="Wnose"></div>
    <div class="Wmouth"></div>
    <div class="Wear"></div>
    <div class="WearTwo"></div>
  </div>
  
  <div class="vam">
    <div class="Veye"></div>
    <div class="Vear"></div>
    <div class="VearTwo"></div>
    <div class="Veye"></div>
    <div class="Vnose"></div>
    <div class="Vmouth"></div>
    <div class="Vblood"></div>
  </div>
</div>




<script src='https://use.edgefonts.net/creepster.js'></script>

body, html {
  background-color: #999; 
  margin: 0px; 
  padding: 0px; 
  zoom: 120%;
}

.zombie {
  width: 100px; 
  height: 100px; 
  background-color: #CFD665; 
  border-radius: 100%; 
  position: absolute; 
  margin-left: -44px; 
  margin-top: -128px; 
  box-shadow: inset 9px 0px 0px #B7B849, 0px 0px 25px rgba(0,0,0,0.5); 
}

.zombie:hover {
  cursor: pointer;
}

.zombie:hover .Zblood:after {
  height: 22px; 
}

.zombie:hover .Zblood:before {
  height: 16px; 
}

.headThing {
  width: 25px; 
  height: 28px; 
  position: absolute; 
  background-color: #999; 
  border-radius: 100%; 
  margin-left: 55px; 
  margin-top: -10px; 
  overflow: hidden; 
}

.brain {
  content: ' '; 
  width: 90px; 
  height: 90px; 
  margin-left: 0px; 
  margin-top: 0px; 
  position: absolute;
  background-color: #FE98A6; 
  border-radius: 100%; 
  margin-top: 13px; 
  margin-left: -50px; 
}

.Zline {
  width: 29px; 
  height: 4px; 
  background-color: #B7B849; 
  position: absolute; 
  margin-left: 37px; 
  margin-top: 20px; 
}

.Zline:before {
  content: ' '; 
  width: 42px; 
  height: 4px; 
  background-color: #B7B849; 
  position: absolute; 
  margin-left: -7px; 
  margin-top: 10px; 
}

.Zeye {
  width: 12px; 
  height: 12px; 
  background-color: #FEFEFE; 
  border-radius: 100%; 
  position: absolute; 
  margin-top: 40px; 
  margin-left: 20px; 
  border: 4px solid #B7B849; 
}

.Zeye:after {
  content: ' '; 
  width: 12px; 
  height: 12px; 
  background-color: #FEFEFE; 
  border-radius: 100%; 
  position: absolute; 
  margin-top: -4px; 
  margin-left: 40px; 
  border: 4px solid #B7B849; 
}

.Znose {
  width: 7px; 
  height: 7px; 
  background-color: #252524; 
  border-radius: 100%; 
  position: absolute; 
  margin-top: 63px; 
  margin-left: 42px; 
}

.Znose:after {
  content: ' '; 
  width: 7px; 
  height: 7px; 
  background-color: #252524; 
  border-radius: 100%; 
  position: absolute; 
  margin-top: 0px; 
  margin-left: 13px; 
}
 
.Zear {
  width: 17px; 
  height: 22px; 
  background-color: #B7B849; 
  border-radius: 20px 0px 0px 20px; 
  position: absolute; 
  margin-left: -10px; 
  margin-top: 47px; 
}

.Zear:before {
  content: ' '; 
  width: 17px; 
  height: 22px; 
  background-color: #CFD665; 
  border-radius: 0px 20px 20px 0px; 
  position: absolute; 
  margin-left: 104px; 
  margin-top: 0px; 
}

.Zmouth {
  width: 40px; 
  height: 12px; 
  background-color: #252524; 
  border-radius: 4px; 
  position: absolute; 
  margin-left: 32px; 
  margin-top: 75px; 
}

.Zteeth {
  width: 5px; 
  height: 3px; 
  background-color: #FEFEFE; 
  position: absolute; 
  margin-left: 10px; 
  margin-top: 0px; 
}

.Zteeth:after {
  content: ' '; 
  width: 5px; 
  height: 3px; 
  background-color: #FEFEFE; 
  position: absolute; 
  margin-left: 14px; 
  margin-top: 0px; 
}

.Zteeth:before {
  content: ' '; 
  width: 5px; 
  height: 3px; 
  background-color: #FEFEFE; 
  position: absolute; 
  margin-left: 5px; 
  margin-top: 9px; 
}

.Zblood {
  width: 25px; 
  height: 4px; 
  background-color: #993D47; 
  border-bottom-left-radius: 7px; 
  position: absolute; 
  margin-left: 8px; 
  margin-top: 12px; 
}

.Zblood:after {
  content: ' '; 
  width: 7px; 
  height: 10px; 
  background-color: #993D47; 
  border-radius: 7px; 
  position: absolute; 
  margin-left: 18px; 
  margin-top: 0px; 
  transition: all 0.3s linear; 
}

.Zblood:before {
  content: ' '; 
  width: 7px; 
  height: 4px; 
  background-color: #993D47; 
  border-radius: 7px; 
  position: absolute; 
  margin-left: 4px; 
  margin-top: 0px; 
  transition: all 0.3s linear; 
}

.wrap {
  width: 10px; 
  height: 10px; 
  display: block; 
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

h1 {
  color: white; 
  font-family: creepster; 
  text-indent: 10px; 
  line-height: 10px; 
  font-size: 25px; 
}

.wolf {
  width: 87px; 
  height: 87px; 
  background-color: #FEB672; 
  border-radius: 100%; 
  position: absolute; 
  margin-left: -122px; 
  margin-top: -20px; 
  border: 9px solid #8D3B44; 
  box-shadow: inset 9px 0px 0px rgba(0,0,0,0.15), 0px 0px 25px rgba(0,0,0,0.5); 
}

.wolf:hover {
  cursor: pointer;
}

.wolf:after {
  content: ' '; 
  width: 0px; 
  height: 0px; 
  position: absolute; 
  margin-left: 35px; 
  margin-top: 0px; 
  border: 9px solid transparent; 
  border-top: 9px solid #8D3B44; 
}

.wolf:hover .Wmouth {
  height: 9px; 
  border-radius: 0px 0px 3px 3px; 
  margin-top: 73px; 
}

.wolf:hover .Weye {
  background-color: #F64E5D; 
}

.wolf:hover .Weye:after {
  background-color: #F64E5D; 
}

.Wline {
  width: 29px; 
  height: 4px; 
  background-color: #E19C65;
  position: absolute; 
  margin-left: 30px; 
  margin-top: 20px; 
}

.Wline:before {
  content: ' '; 
  width: 42px; 
  height: 4px; 
  background-color: #E19C65;
  position: absolute; 
  margin-left: -7px; 
  margin-top: 10px; 
}

.Weye {
  width: 12px; 
  height: 12px; 
  background-color: #FEFEFE; 
  border-radius: 100%; 
  position: absolute; 
  margin-top: 43px; 
  margin-left: 15px; 
  transition: all 0.2s linear; 
}

.Weye:after {
  content: ' '; 
  width: 12px; 
  height: 12px; 
  background-color: #FEFEFE; 
  border-radius: 100%; 
  position: absolute; 
  margin-top: 0px; 
  margin-left: 46px; 
}

.Wnose {
  width: 21px; 
  height: 8px; 
  background-color: #252524; 
  position: absolute; 
  margin-top: 53px; 
  margin-left: 34px; 
  border-radius: 5px 5px 0px 0px; 
}

.Wnose:after {
  content: ' '; 
  width: 7px; 
  height: 4px; 
  background-color: #252524; 
  position: absolute; 
  margin-top: 8px; 
  margin-left: 0px; 
  border-radius: 0px 0px 5px 5px; 
  box-shadow: 14px 0px 0px #252524; 
}

.Wnose:before {
  content: ' '; 
  width: 7px; 
  height: 7px; 
  background-color: #252524; 
  position: absolute; 
  margin-top: 8px; 
  margin-left: 7px; 
  border-radius: 0px 0px 5px 5px; 
}

.Wmouth {
  width: 35px; 
  height: 4px; 
  background-color: #E19C65;
  position: absolute; 
  margin-top: 74px; 
  margin-left: 27px; 
  transition: all 0.2s linear; 
}

.Wmouth:before {
  content: ' '; 
  width: 0px; 
  height: 0px; 
  border: 5px solid transparent; 
  border-bottom: 7px solid #FEFEFE; 
  position: absolute; 
  margin-top: -12px; 
  margin-left: 0px; 
}

.Wmouth:after {
  content: ' '; 
  width: 0px; 
  height: 0px; 
  border: 5px solid transparent; 
  border-bottom: 7px solid #FEFEFE; 
  position: absolute; 
  margin-top: -12px; 
  margin-left: 25px; 
}

.Wear {
  height: 25px; 
  width: 18px; 
  background-color: #FEB672; 
  position: absolute; 
  margin-left: -22px; 
  margin-top: 33px; 
  z-index: -1; 
  border-bottom-left-radius: 20px; 
}

.Wear:after {
  content: ' '; 
  height: 0px; 
  width: 0px; 
  position: absolute; 
  margin-left: 0px; 
  margin-top: -18px; 
  border: 12px solid transparent; 
  border-bottom: 12px solid #FEB672; 
  border-left: 12px solid #FEB672; 
}

.WearTwo {
  height: 25px; 
  width: 18px; 
  background-color: #FEB672; 
  position: absolute; 
  margin-left: 92px; 
  margin-top: 33px; 
  z-index: -1; 
  border-bottom-right-radius: 20px; 
}

.WearTwo:after {
  content: ' '; 
  height: 0px; 
  width: 0px; 
  position: absolute; 
  margin-left: -6px; 
  margin-top: -18px; 
  border: 12px solid transparent; 
  border-bottom: 12px solid #FEB672; 
  border-right: 12px solid #FEB672; 
}

.vam {
  width: 100px; 
  height: 100px; 
  background-color: #FEFEFE; 
  border-radius: 100%; 
  position: absolute; 
  margin-left: 40px; 
  margin-top: -11px; 
  box-shadow: inset 9px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 25px rgba(0,0,0,0.5); 
}

.vam:hover {
  cursor: pointer;
}

.vam:hover .Vblood {
  animation: blood 0.3s infinite linear; 
}

.Veye {
  width: 11px; 
  height: 11px; 
  background-color: ; 
}

.Vear {
  height: 25px; 
  width: 18px; 
  background-color: #cbcbcb; 
  position: absolute; 
  margin-left: -13px; 
  margin-top: 33px; 
  z-index: -1; 
  border-bottom-left-radius: 20px; 
}

.Vear:after {
  content: ' '; 
  height: 0px; 
  width: 0px; 
  position: absolute; 
  margin-left: 0px; 
  margin-top: -18px; 
  border: 12px solid transparent; 
  border-bottom: 12px solid #cbcbcb; 
  border-left: 12px solid #cbcbcb; 
}

.VearTwo {
  height: 25px; 
  width: 18px; 
  background-color: #FEFEFE; 
  position: absolute; 
  margin-left: 94px; 
  margin-top: 33px; 
  z-index: -1; 
  border-bottom-right-radius: 20px; 
}

.VearTwo:after {
  content: ' '; 
  height: 0px; 
  width: 0px; 
  position: absolute; 
  margin-left: -6px; 
  margin-top: -18px; 
  border: 12px solid transparent; 
  border-bottom: 12px solid #FEFEFE; 
  border-right: 12px solid #FEFEFE; 
}

.Veye {
  width: 12px; 
  height: 12px; 
  background-color: #F64E5D; 
  border-radius: 100%; 
  position: absolute; 
  margin-top: 43px; 
  margin-left: 23px; 
  transition: all 0.2s linear; 
}

.Veye:after {
  content: ' '; 
  width: 12px; 
  height: 12px; 
  background-color: #F64E5D; 
  border-radius: 100%; 
  position: absolute; 
  margin-top: 0px; 
  margin-left: 46px; 
}

.Vnose {
  width: 0px; 
  height: 0px; 
  border: 10px solid transparent; 
  border-bottom: 8px solid #cbcbcb; 
  position: absolute; 
  margin-top: 48px; 
  margin-left: 42px; 
}

.Vmouth {
  width: 38px; 
  height: 12px; 
  background-color: #252524; 
  position: absolute; 
  margin-top: 75px; 
  margin-left: 34px; 
  border-radius: 0px 0px 10px 10px; 
}

.Vmouth:before {
  content: ' '; 
  height: 0px; 
  width: 0px; 
  position: absolute; 
  margin-left: 5px; 
  margin-top: 0px; 
  border: 5px solid transparent; 
  border-top: 5px solid #E09F31; 
}

.Vmouth:after {
  content: ' '; 
  height: 0px; 
  width: 0px; 
  position: absolute; 
  margin-left: 22px; 
  margin-top: 0px; 
  border: 5px solid transparent; 
  border-top: 5px solid #E09F31; 
}

.Vblood {
  width: 10px; 
  height: 10px; 
  background-color: #F64E5D; 
  border-radius: 0px 10px 10px 10px; 
  transform: rotate(45deg); 
  margin-left: 56px; 
  margin-top: 93px; 
  position: absolute; 
}

@keyframes blood {
  to {
    margin-top: 120px; 
  }
}

/* The End */

h1 {
  
  font-size: 44px; 
  
}

.particles {
  width: 135px; 
  height: 45px; 
  background-color: lightgray; 
  top: 0px; 
  right: 0px; 
  position: fixed; 
  line-height: 22px; 
  font-size: 20px; 
  padding: 10px; 
  border-bottom-left-radius: 10px; 
  font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', Roboto, Arial, Sans-serif; 
  color: #151B1F; 
  text-align: center; 
}

a {
  color: #1abc9c; 
}

/*

inspiration:

dribbble.com/shots/1286749-Hallowiener?

*/