/* MOOSSICIAN FOR game.html */

#me {
    transform: translate3d(0,72vmin,-48vmin);
}

#me >div {
    position: absolute;
    transition: transform 0.5s;
}

#me .bod {
    width: 10vmin;
    height: 10vmin;
    margin: -12vmin 0 0 -5vmin;
    background: radial-gradient(ellipse at 50% 30%, #c98 25%, #821 80%);
    border-radius: 4.5vmin 4.5vmin 3vmin 3vmin;
}
body.n #me .bod { transform: rotate3d(1,0,0,20deg)  translateY(1vmin);
    background: radial-gradient(ellipse at 50% 90%, #610 25%, #821 80%); }
body.e #me .bod { transform: rotate3d(0,1,0,-15deg) skew(-2deg, 0); }
body.s #me .bod { transform: rotate3d(1,0,0,-20deg) translate3d(0,1vmin,0); }
body.w #me .bod { transform: rotate3d(0,1,0,15deg) skew(2deg, 0); }

#me .leg {
    position: absolute;
    width: 2vmin;
    height: 3.5vmin;
    margin-top: -4vmin;
    border-radius: 1vmin;
    background: radial-gradient(ellipse at 50% 30%, #931 25%, #821 80%);
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    transition: margin 0.5s;
}
#me .left.leg {
    margin-left: -4vmin;
}
#me .right.leg {
    margin-left: 2.5vmin;
}
body.e #me .left.leg,
body.w #me .left.leg {
    margin-left: -3.5vmin;
}
body.e #me .right.leg,
body.w #me .right.leg {
    margin-left: 2vmin;
}
body.n #me .left.leg,
body.e #me .left.leg,
body.s #me .left.leg,
body.w #me .left.leg {
    animation-name: left-leg;
}
body.n #me .right.leg,
body.e #me .right.leg,
body.s #me .right.leg,
body.w #me .right.leg {
    animation-name: right-leg;
}
@keyframes left-leg {
    0%   { margin-top:-4vmin; }
    50%  { margin-top:-4.5vmin; }
    100% { margin-top:-4vmin; }
}
@keyframes right-leg {
    0%   { margin-top:-4.5vmin; }
    50%  { margin-top:-4vmin; }
    100% { margin-top:-4.5vmin; }
}


#me .hed {
    width: 5vmin;
    height: 7vmin;
    margin: -14vmin 0 0 -2.5vmin;
    background: radial-gradient(ellipse at 50% 80%, #eba 25%, #821 50%);
    box-shadow: rgba(90,10,0,0.6) 0 0.6vmin 0.2vmin;
    border-radius: 2.5vmin;
    transform: translate3d(0,0,3vmin);
    transition: transform 0.2s;
}
body.n #me .hed { transform: translate3d(0,1.5vmin,-3vmin); z-index:-1;
    background: radial-gradient(ellipse at 50% 90%, #821 25%, #610 80%); }
body.e #me .hed { transform: translate3d(1vmin,0,3vmin) }
body.s #me .hed { transform: translate3d(0,1.5vmin,3vmin) }
body.w #me .hed { transform: translate3d(-1vmin,0,3vmin) }

#me .hed .eye {
    position: absolute;
    width: 1vmin;
    height: 1vmin;
    border-radius: 1vmin;
    background: radial-gradient(ellipse at 30% 30%, #ccc 10%, #000 20%);
}
body.n #me .hed .eye { display:none; }
#me .hed .eye {
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-name: blink;
}
#me .hed .left.eye {
    margin: 1vmin 0;
}
#me .hed .right.eye {
    margin: 1vmin 4vmin;
}
@keyframes blink {
    19%  { margin-top:1vmin; height: 1vmin }
    20%  { margin-top:1.5vmin; height: 0.2vmin }
    21%  { margin-top:1vmin; height: 1vmin }
    43%  { margin-top:1vmin; height: 1vmin }
    44%  { margin-top:1.5vmin; height: 0.2vmin }
    45%  { margin-top:1vmin; height: 1vmin }
    92%  { margin-top:1vmin; height: 1vmin }
    93%  { margin-top:1.5vmin; height: 0.2vmin }
    94%  { margin-top:1vmin; height: 1vmin }
}

#me .hed .antler {
    position: absolute;
    width: 10vmin;
    height: 1vmin;
    border-radius: 1vmin;
    margin: -0.5vmin 0 0 -2.5vmin;
    background: radial-gradient(ellipse at 50% 30%, #c98 25%, #821 80%);
}