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;
    }
}