.blue { margin-left: 175px; }
.blue .header-outside::before,
{ background: hsl(220, 90%, 50%); }
.green { margin-top: 150px; }
.green .header-outside::before,
{ background: hsl(110, 90%, 50%); }
.purple { margin-top: 150px; margin-left: 175px; }
.purple .header-outside::before,
{ background: hsl(270, 90%, 50%); }
position:absolute;left:0;top:0;z-index:1;
background: hsl(0, 90%, 50%);
border-radius:30px 10px 20px 20px/15px 30px 5px 10px;
.body::before{content:' ';position:absolute;left:4px;top:10px;z-index:5;
background: hsl(0, 90%, 50%);
.header-outside::before{content:' ';position:absolute;left:106px;top:93px;z-index:5;
background: hsl(0, 90%, 50%);
border-radius:0 0 12px 0/0 0 12px 0;
-webkit-transform:rotateZ(-36deg);
position:absolute;bottom:-5px;left:8px;z-index:2;
-webkit-transform:rotateZ(14deg) skew(-16deg);
background: hsl(0, 90%, 50%);
border-radius:0px 26px 20px 3px/0px 8px 8px 5px;
position:absolute;left:30px;bottom:-2px;z-index:1;
background: hsl(0, 90%, 50%);
border-radius:12px 12px 18px 4px/8px 6px 6px 2px;
position:absolute;top:0;left:24px;z-index:-1;
border-radius:2px 16px 12px 0/2px 18px 10px 0;
position:absolute;left:6px;top:20px;z-index:2;
background: hsl(0, 90%, 50%);
border-radius:66px 34px 45px 55px/70px 60px 20px 30px;
.face{position:absolute;left:-5px;bottom:0;
border-radius:30px 0 6px 10px/16px 50px 20px 5px;
.face::before{content:' ';position:absolute;right:-12px;bottom:10px;
border-radius:8px 12px 8px 10px/10px 50px 20px 5px;
-webkit-transform:rotateZ(5deg);
.eyes{position:absolute;left:8px;top:39px;
border-bottom:4px solid #000;
border-radius:2px 2px 15px 15px;
-webkit-transform:rotateZ(10deg);
.eyes::before{content:' ';position:absolute;left:15px;top:-30px;
border-radius:4px/3px 3px 1px 1px;
.eyes::after{content:' ';position:absolute;left:17px;top:-27px;
border-radius:3px/3px 3px 1px 1px;
.nose{position:absolute;left:0;top:84px;z-index:5;
position:absolute;left:62px;top:6px;z-index:5;
background: hsl(0, 90%, 50%);
border-radius:10px 36px 36px 10px/23px 34px 6px 23px;
-webkit-transform:rotateZ(50deg);
.ears::before{content:' ';position:absolute;bottom:-6px;right:-6px;
background: hsl(0, 90%, 50%);
-webkit-transform:rotateZ(-30deg);
.ears::after{content:' ';position:absolute;top:11px;left:4px;
border-radius:2px 3px 1px 4px/16px 16px 6px 6px;
-webkit-transform:rotateZ(-8deg);
.ears.behide{left:54px;top:7px;z-index:-1;
-webkit-transform:rotateZ(55deg);
.ears.behide::after{display:none;}
.shadow{position:absolute;bottom:16px;left:20px;z-index:0;}
.shadow::after{content:' ';position:absolute;
.shadow::before{left:8px;top:0px;
.shadow::after{left:80px;top:0px;
.body-outside{position:absolute;top:80px;left:100px;z-index:1;
position:absolute;top:0;left:0;z-index:2;
width:118px;height:120px;
.ali{position:absolute;top:100px;left:100px;
height:120px;width:200px;-webkit-transform:translateX(300px);
-webkit-animation:ali 6s 0.4s infinite;
-webkit-animation:head 0.6s infinite;
-webkit-animation:ears 0.6s infinite;
-webkit-animation:ears-behide 0.6s infinite;
-webkit-animation:body 0.6s infinite;
-webkit-animation:foot 0.6s infinite;
-webkit-animation:shadow 0.6s infinite;
0%{-webkit-transform:rotateZ(2deg)}
70%{-webkit-transform:rotateZ(-2deg)}
100%{-webkit-transform:rotateZ(2deg)}
0%{-webkit-transform:translateX(1px) rotateZ(-8deg) scaleY(1);}
70%{-webkit-transform:translateX(-3px) translateY(-1px) rotateZ(0deg) scaleY(1.1);}
100%{-webkit-transform:translateX(1px) rotateZ(-8deg) scaleY(1);}
0%{-webkit-transform:translateX(0) rotateZ(2deg);}
70%{-webkit-transform:translateX(-4px) rotateZ(20deg);}
100%{-webkit-transform:translateX(0) rotateZ(2deg);}
0%{-webkit-transform:translateX(3px) translateY(3px) rotateZ(60deg);}
70%{-webkit-transform:translateX(0) translateY(0px) rotateZ(50deg);}
100%{-webkit-transform:translateX(3px) translateY(3px) rotateZ(60deg);}
@-webkit-keyframes ears-behide{
0%{-webkit-transform:translateX(1px) translateY(2px) rotateZ(60deg);}
70%{-webkit-transform:translateX(0) translateY(0px) rotateZ(50deg);}
100%{-webkit-transform:translateX(1px) translateY(2px) rotateZ(60deg);}
@-webkit-keyframes shadow{
0%{-webkit-transform:translateX(-5px) translateY(-1px);}
70%{-webkit-transform:translateX(0) translateY(1px);}
100%{-webkit-transform:translateX(-5px) translateY(-1px);}
0%{-webkit-transform:translateX(300px)}
10%{-webkit-transform:translateX(270px)}
20%{-webkit-transform:translateX(240px)}
30%{-webkit-transform:translateX(210px)}
40%{-webkit-transform:translateX(180px)}
50%{-webkit-transform:translateX(150px)}
60%{-webkit-transform:translateX(120px)}
70%{-webkit-transform:translateX(90px)}
80%{-webkit-transform:translateX(60px)}
90%{-webkit-transform:translateX(30px)}
100%{-webkit-transform:translateX(0px)}