body{
  margin:0;
  color:#444;
  background:#ffff33;
  font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.halloween .head .skull:before,
.halloween .head .skull:after,
.halloween .eyes .eye:before,
.halloween .body:before,
.halloween .body:after,
.halloween .legs:before{
  content:'';
  position:absolute;
}
.halloween{
  top:50%;
  left:50%;
  width:30px;
  height:44px;
  position:fixed;
  margin-top:-22px;
  margin-left:-15px;
  animation:move 3s infinite;
}
.halloween .head{
  z-index:1;
  width:25px;
  height:25px;
  background:#444;
  border-radius:50%;
  position:relative;
}
.halloween .head .skull{
  left:2px;
  bottom:2px;
  width:16px;
  height:16px;
  color:#f9f9f9;
  border-radius:50%;
  background:#f9f9f9;
  position:absolute;
  animation:skull 3s infinite;
}
.halloween .head .skull:before{
  top:9px;
  width:0;
  left:50%;
  height:0;
  z-index:1;
  margin-left:-2px;
  border:2px solid transparent;
  border-bottom:2px solid #444;
}
.halloween .head .skull:after{
  top:14px;
  left:50%;
  width:1px;
  height:4px;
  margin-left:-1px;
  background:#f9f9f9;
  box-shadow: 2px 0,-2px 0,4px 0,-4px 0,
        -3px -2px,-1px -2px,1px -2px,3px -2px
}
.halloween .eyes{
  width:inherit;
  height:inherit;
  overflow:hidden;
  border-radius:50%;
  position:relative;
}
.halloween .eyes .eye{
  top:5px;
  width:5px;
  height:5px;
  position:absolute;
  border-radius:50%;
  background:#f8cd22;
  border:1px solid #444;
  border-right:2px solid #444;
}
.halloween .eyes .eye:before{
  top:-1px;
  left:-1px;
  width:5px;
  height:3px;
  background:#f9f9f9;
  border-radius:5px 5px 0 0;
  animation:eyes 3s infinite;
}
.halloween .eyes .eye.eye-left{
  left:1px;
}
.halloween .eyes .eye.eye-right{
  right:1px;
}
.halloween .body{
  top:-3px;
  width:24px;
  height:17px;
  background:#444;
  position:relative;
  border-radius:10px 10px 2px 2px;
}
.halloween .body:before,
.halloween .body:after{
  top:3px;
  width:4px;
  height:12px;
  background:#444;
}
.halloween .body:before{
  left:-1px;
  border-radius:100% 0 0 2px;
  transform:rotate(10deg);
  animation:hand-left 3s infinite;
}
.halloween .body:after{
  right:-1px;
  border-radius:0 100% 2px 0;
  transform:rotate(-10deg);
  animation:hand-right 3s infinite;
}
.halloween .legs{
  top:-3px;
  left:50%;
  width:21px;
  height:10px;
  overflow:hidden;
  margin-left:-13px;
  position:relative;
  border-bottom:1px solid rgba(0,0,0,.2);
}
.halloween .legs:before{
  top:0;
  left:-7px;
  width:60px;
  height:10px;
  background-image:linear-gradient(-495deg, #444 4px,transparent 0), linear-gradient(-45deg, transparent 4px, #444 0);
  background-size:4px 8px;
  background-repeat:repeat-x;
  animation:legs 3s infinite;
}
@keyframes move{
  0%{
    transform:translateX(0)
  }
  50%{
    transform:translateX(15px)
  }
  100%{
    transform:translateX(0)
  }
}
@keyframes skull{
  0%{
    transform:translate(0,0)
  }
  25%{
    transform:translate(2px,1px)
  }
  75%{
    transform:translate(3px,-1px)
  }
  100%{
    transform:translate(0,0)
  }
}
@keyframes eyes{
  0%{
    top:-5px;
    border-radius:50%;
  }
  50%{
    top:-1px;
    border-radius:5px 5px 0 0;
  }
  100%{
    top:-5px;
    border-radius:50%;
  }
}
@keyframes legs{
  0%{
    left:-7px;
  }
  50%{
    left:-25px;
  }
  100%{
    left:-7px;
  }
}
@keyframes hand-left{
  0%{
    left:1px;
  }
  50%{
    left:-2px;
  }
  100%{
    left:1px;
  }
}
@keyframes hand-right{
  0%{
    right:1px;
  }
  50%{
    right:-2px;
  }
  100%{
    right:1px;
  }
}