<div class="main">
  <div class="captain">
    <span class="shadow"></span>
    <div class="head">
      <div class="face">
        <span class="mouth"></span>
        <span class="chin"></span>
      </div>
      <div class="a">
        <span class="center"></span>
        <span class="left"></span>
        <span class="right"></span>
      </div>
      <div class="eye left"><span></span></div>
      <div class="eye right"><span></span></div>
    </div>
    <div class="body">
      <span class="armpit left"></span>
      <span class="armpit right"></span>
      <span class="neck"></span>
      <div class="torso">
        <div class="star"><span></span><span></span><span></span><span></span><span></span></div>
        <span class="left"></span>
        <span class="right"></span>
      </div>
      <div class="belly">
        <span class="left"></span>
        <span class="right"></span>
      </div>
    </div>
    <div class="panties">
      <span class="stick"></span>
    </div>
    <div class="belt">
      <span class="left"></span>
      <span class="right"></span>
    </div>
    <div class="legs">
      <div class="leg left">
        <span class="thigh"></span>
        <span class="knee"></span>
        <span class="tibia"></span>
        <span class="foot"></span>
      </div>
      <div class="leg right">
        <span class="thigh"></span>
        <span class="knee"></span>
        <span class="tibia"></span>
        <span class="foot"></span>
      </div>
    </div>
    <div class="arms">
  	  <div class="arm left">
        <span class="ell"></span>
        <div class="hand">
          <span class="thumb"></span>
          <span class="finger one"></span>
          <span class="finger two"></span>
          <span class="finger three"></span>
        </div>
      </div>
      <div class="arm right">
        <span class="ell"></span>
        <div class="hand">
          <span class="thumb"></span>
          <span class="finger one"></span>
          <span class="finger two"></span>
          <span class="finger three"></span>
          <div class="shield">
            <span class="bullet one"></span>
            <span class="bullet two"></span>
            <span class="bullet three"></span>
            <span class="bullet four"></span>
            <span class="circle one"></span>
            <span class="circle two"></span>
            <div class="circle three">
              <div class="star"><span></span><span></span><span></span><span></span><span></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<p class="text">Design by <a href="https://dribbble.com/shots/2282355--aptain-America" target="_blank">mihkonyev</a></p>

body,html{height:100%;width:100%;overflow:hidden}
body{font:normal normal 14px/19px Arial,sans-serif;letter-spacing:1px;margin:0;background:#FFD095}
::-moz-selection{background:#444444;color:#FFD095}
::selection{background:#444444;color:#FFD095}
.text{position:absolute;bottom:20px;left:25px;color:#444444;font-family:Arial,sans-serif;text-transform:uppercase;font-size:14px;line-height:28px;font-weight:bold;letter-spacing:2px;z-index:99}
a{color:#E14240;text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
p{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}
.main{position:absolute;width:40;height:440px;top:50%;left:50%;margin-left:-20px;margin-top:-220px}
@media (max-width:540px){.main{-webkit-transform:scale(0.75);transform:scale(0.75)}}
@media (max-width:420px){.main{-webkit-transform:scale(0.5);transform:scale(0.5)}}
.captain{position:relative;width:40px;height:400px}
.captain .shadow{position:absolute;bottom:-10px;left:-80px;width:200px;height:15px;background:#F0BD7B;border-radius:15px}
.captain .head{position:absolute;top:0;left:0;width:40px;height:90px;background:#2A84AE;border-radius:20px 20px 0 0}
.captain .head .a{position:absolute;top:10px;left:50%;width:6px;margin-left:-3px}
.captain .head .a span{position:absolute;top:0;width:2px;height:10px;background:#FFFFFF}
.captain .head .a .left{right:0;-webkit-transform:rotate(-22deg);transform:rotate(-22deg);border-radius:2px 2px 0 3px}
.captain .head .a .right{left:0;-webkit-transform:rotate(22deg);transform:rotate(22deg);border-radius:2px 2px 3px 0}
.captain .head .a .center{top:4px;left:2px;height:6px;-webkit-transform:rotate(90deg);transform:rotate(90deg);border-radius:2px}
.captain .head .eye{position:absolute;top:26px;width:12px;height:10px;background:#F29688;border-radius:10px 10px 0 0}
.captain .head .eye.left{left:6px}
.captain .head .eye.right{right:6px}
.captain .head .eye span{position:absolute;bottom:2px;width:5px;height:3px;background:#344755;border-radius:3px 3px 1px 1px}
.captain .head .eye.left span{right:2px}
.captain .head .eye.right span{left:2px}
.captain .head .face{position:absolute;top:44px;left:4px;width:32px;height:34px;background:#F29688}
.captain .head .face .chin{position:absolute;bottom:0;left:10px;width:12px;height:3px;background:#2A84AE;border-radius:6px 6px 0 0}
.captain .head .face .mouth{position:absolute;top:3px;left:6px;width:20px;height:10px;background:#FFFFFF;border-radius:0 0 10px 10px}
.captain .body{position:absolute;top:90px;left:0;width:40px;height:70px}
.captain .body .torso{position:absolute;top:0;left:0;width:40px;height:70px;background:#2A84AE}
.captain .body .torso .left{position:absolute;top:0;left:-14px;width:14px;height:50px;background:#296394}
.captain .body .torso .right{position:absolute;top:0;right:-14px;width:14px;height:50px;background:#296394}
.captain .body .neck{position:absolute;top:0;left:-28px;width:96px;height:50px;background:#2A84AE}
.captain .body .belly{position:absolute;bottom:0;left:0x;width:40px;height:20px;background:#FFF5B8}
.captain .body .belly .left{position:absolute;top:0;left:-14px;width:14px;height:13px;background:#E14240}
.captain .body .belly .right{position:absolute;top:0;right:-14px;width:14px;height:13px;background:#E14240}
.captain .body .armpit.left{position:absolute;top:-6px;left:-35px;width:40px;height:80px;background:#2A84AE;border-radius:40px 40px 0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.captain .body .armpit.left::before{content:"";position:absolute;bottom:0;left:0;width:40px;height:38px;background:#FFF5B8}
.captain .body .armpit.left::after{content:"";position:absolute;bottom:0;left:0;width:40px;height:19px;background:#E14240}
.captain .body .armpit.right{position:absolute;top:-6px;right:-35px;width:40px;height:80px;background:#2A84AE;border-radius:40px 40px 0 0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.captain .body .armpit.right::before{content:"";position:absolute;bottom:0;right:0;width:40px;height:38px;background:#FFF5B8}
.captain .body .armpit.right::after{content:"";position:absolute;bottom:0;right:0;width:40px;height:19px;background:#E14240}
.captain .panties{position:absolute;top:160px;left:-5px;width:50px;height:32px;background:#2A84AE;border-radius:5px 5px 0 0}
.captain .panties .stick{position:absolute;top:8px;left:-8px;width:8px;height:48px;background:#1A5479;border-radius:16px 0 8px 8px}
.captain .belt{position:absolute;top:158px;left:-5px;width:50px;height:6px;background:#1A5479;border-radius:5px}
.captain .belt span{position:absolute;top:0;width:24px;height:10px;background:#296394;border-radius:3px}
.captain .belt span.left{left:-4px}
.captain .belt span.right{right:-4px}
.captain .legs{position:absolute;top:190px;left:-5px;width:50px}
.captain .legs .leg{position:absolute;top:0;width:20px;height:126px;background:#2A84AE}
.captain .legs .leg.left{left:0}
.captain .legs .leg.right{right:0}
.captain .legs .leg .thigh{position:absolute;top:0;width:20px;height:86px;background:#296393;border-radius:10px}
.captain .legs .leg .knee{position:absolute;top:86px;width:20px;height:30px;background:#2A84AE}
.captain .legs .leg .tibia{position:absolute;top:116px;width:20px;height:86px;background:#296393;border-radius:10px 10px 0 0}
.captain .legs .leg .foot{position:absolute;top:202px;width:45px;height:10px;background:#1A5479;border-radius:0 5px 5px 10px}
.captain .legs .leg.left .foot{right:0;border-radius:5px 0 5px 5px}
.captain .legs .leg.right .foot{left:0;border-radius:0 5px 5px 5px}
.captain .arms{position:absolute;top:104px;left:-50px;width:140px}
.captain .arms .arm{position:absolute;top:0;width:24px;height:130px;background:#296393;border-radius:24px 24px 0 0}
.captain .arms .arm.left{left:0}
.captain .arms .arm.right{right:0;height:70px}
.captain .arms .arm .ell{position:absolute;top:45px;width:7px;height:54px;background:#1A5479}
.captain .arms .arm.left .ell{left:0;border-radius:0 7px 7px 0}
.captain .arms .arm.right .ell{right:0;border-radius:7px 0 0 7px}
.captain .arms .arm .hand{position:absolute;bottom:-23px;width:24px;height:24px;background:#1A5479}
.captain .arms .arm .hand .thumb{position:absolute;top:0;width:8px;height:24px;background:#1A5479}
.captain .arms .arm.left .hand .thumb{right:-7px;border-radius:0 8px 8px 0}
.captain .arms .arm.right .hand .thumb{left:-7px;border-radius:8px 0 0 8px}
.captain .arms .arm .hand .finger{position:absolute;top:23px;left:0;width:8px;height:22px;background:#1A5479;border-radius:0 0 8px 8px}
.captain .arms .arm .hand .finger.one{left:0}
.captain .arms .arm .hand .finger.two{left:8px}
.captain .arms .arm .hand .finger.two::before{content:"";position:absolute;top:0;left:0;width:1px;height:18px;background:#296393}
.captain .arms .arm .hand .finger.three{left:16px}
.captain .arms .arm .hand .finger.three::before{content:"";position:absolute;top:0;left:-1px;width:1px;height:18px;background:#296393}
.captain .arms .arm .hand .shield{position:absolute;top:16px;left:-2px;width:142px;height:142px;margin-top:-71px;margin-left:-71px;background:#E14240;border-radius:50%}
.captain .arms .arm .hand .shield .circle.one{position:absolute;top:15px;left:15px;width:112px;height:112px;background:#FFFFFF;border-radius:50%}
.captain .arms .arm .hand .shield .circle.two{position:absolute;top:30px;left:30px;width:82px;height:82px;background:#E14240;border-radius:50%}
.captain .arms .arm .hand .shield .circle.three{position:absolute;top:45px;left:45px;width:52px;height:52px;background:#296393;border-radius:50%}
.captain .star{position:absolute;left:50%;margin-left:0;margin-top:-8px;top:50%}
.captain .star span{position:absolute;left:50%;top:50%;border-bottom:16px solid #FFFFFF;border-left:8px solid transparent;border-right:8px solid transparent;width:0;height:0;margin-left:-8px;margin-top:-8px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}
.captain .star span:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.captain .star span:nth-child(2){-webkit-transform:rotate(72deg);transform:rotate(72deg)}
.captain .star span:nth-child(3){-webkit-transform:rotate(144deg);transform:rotate(144deg)}
.captain .star span:nth-child(4){-webkit-transform:rotate(216deg);transform:rotate(216deg)}
.captain .star span:nth-child(5){-webkit-transform:rotate(288deg);transform:rotate(288deg)}
.captain .body .torso .star{margin-top:-12px}
.captain:hover .arms .arm.right{top:-52px;right:-52px;height:130px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}
.captain:hover .head .eye.left span{right:0px}
.captain:hover .head .eye.right span{left:5px}
.captain:hover .arms .arm.right .hand .thumb,
.captain:hover .arms .arm.right .hand .finger,
.captain:hover .arms .arm.right .hand .shield .star{display:none}
.captain:hover .arms .arm.right .hand .shield{top:90px;left:12px;width:142px;height:18px;border-radius:0 0 50% 50% / 0 0 100% 100%}
.captain:hover .arms .arm.right .hand .shield .circle.one{top:6px;left:5px;width:132px;height:14px;border-radius:0 0 50% 50% / 0 0 100% 100%}
.captain:hover .arms .arm.right .hand .shield .circle.two{top:13px;left:16px;width:112px;height:10px;border-radius:0 0 50% 50% / 0 0 100% 100%}
.captain:hover .arms .arm.right .hand .shield .circle.three{top:19px;left:32px;width:78px;height:5px;border-radius:0 0 50% 50% / 0 0 100% 100%}
.captain .head .eye span{-webkit-animation:animation 10s infinite ease-in-out;animation:animation 10s infinite ease-in-out}
@-webkit-keyframes animation{0%,3%,6%,48%,51%,53%,100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}5%,50%,52%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}}
@keyframes animation{0%,3%,6%,48%,51%,53%,100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}5%,50%,52%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}}
.captain:hover .head .face .mouth{-webkit-animation:animMouth 10s infinite ease-in-out;animation:animMouth 10s infinite ease-in-out}
@-webkit-keyframes animMouth{0%,23%,100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}3%,20%{-webkit-transform:rotateX(70deg);transform:rotateX(70deg)}}
@keyframes animMouth{0%,23%,100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}3%,20%{-webkit-transform:rotateX(70deg);transform:rotateX(70deg)}}
.captain:hover .bullet{position:absolute;width:6px;height:14px;background:#FAFDFC;border-radius:3px 3px 0 0}
.captain:hover .bullet::before{content:"";position:absolute;top:12px;right:0;width:6px;height:32px;background:rgba(255,255,255,1);background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)}
.captain:hover .bullet.one{top:25px;right:50%}
.captain:hover .bullet.two{top:25px;right:20%}
.captain:hover .bullet.three{top:25px;right:40%}
.captain:hover .bullet.four{top:25px;right:60%}
.captain:hover .bullet.one{-webkit-animation:animBulletOne 1.25s infinite;animation:animBulletOne 1.25s infinite}
@-webkit-keyframes animBulletOne{0%,4%,54%{opacity:0;-webkit-transform:translate(0,220px) rotate(0deg);transform:translate(0,220px) rotate(0deg)}12%,62%{opacity:1;-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}12.1%,62.1%{opacity:1;-webkit-transform:translate(-15px,15px) rotate(-135deg);transform:translate(-15px,15px) rotate(-135deg)}22%,72.5%,100%{opacity:0;-webkit-transform:translate(-220px,220px) rotate(-135deg);transform:translate(-220px,220px) rotate(-135deg)}}
@keyframes animBulletOne{0%,4%,54%{opacity:0;-webkit-transform:translate(0,220px) rotate(0deg);transform:translate(0,220px) rotate(0deg)}12%,62%{opacity:1;-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}12.1%,62.1%{opacity:1;-webkit-transform:translate(-15px,15px) rotate(-135deg);transform:translate(-15px,15px) rotate(-135deg)}22%,72.5%,100%{opacity:0;-webkit-transform:translate(-220px,220px) rotate(-135deg);transform:translate(-220px,220px) rotate(-135deg)}}
.captain:hover .bullet.two{-webkit-animation:animBulletTwo 1.25s infinite;animation:animBulletTwo 1.25s infinite}
@-webkit-keyframes animBulletTwo{0%,12%,42%{opacity:0;-webkit-transform:translate(0,220px) rotate(0deg);transform:translate(0,220px) rotate(0deg)}20%,50%{opacity:1;-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}20.1%,50.1%{opacity:1;-webkit-transform:translate(15px,15px) rotate(135deg);transform:translate(15px,15px) rotate(135deg)}30%,60%,100%{opacity:0;-webkit-transform:translate(220px,220px) rotate(135deg);transform:translate(220px,220px) rotate(135deg)}}
@keyframes animBulletTwo{0%,12%,42%{opacity:0;-webkit-transform:translate(0,220px) rotate(0deg);transform:translate(0,220px) rotate(0deg)}20%,50%{opacity:1;-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}20.1%,50.1%{opacity:1;-webkit-transform:translate(15px,15px) rotate(135deg);transform:translate(15px,15px) rotate(135deg)}30%,60%,100%{opacity:0;-webkit-transform:translate(220px,220px) rotate(135deg);transform:translate(220px,220px) rotate(135deg)}}
.captain:hover .bullet.three{-webkit-animation:animBulletThree 1.25s infinite;animation:animBulletThree 1.25s infinite}
@-webkit-keyframes animBulletThree{0%,27%,77%{opacity:0;-webkit-transform:translate(0,220px) rotate(0deg);transform:translate(0,220px) rotate(0deg)}35%,85%{opacity:1;-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}35.1%,85.1%{opacity:1;-webkit-transform:translate(15px,15px) rotate(135deg);transform:translate(15px,15px) rotate(135deg)}45%,95%,100%{opacity:0;-webkit-transform:translate(220px,220px) rotate(135deg);transform:translate(220px,220px) rotate(135deg)}}
@keyframes animBulletThree{0%,27%,77%{opacity:0;-webkit-transform:translate(0,220px) rotate(0deg);transform:translate(0,220px) rotate(0deg)}35%,85%{opacity:1;-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}35.1%,85.1%{opacity:1;-webkit-transform:translate(15px,15px) rotate(135deg);transform:translate(15px,15px) rotate(135deg)}45%,95%,100%{opacity:0;-webkit-transform:translate(220px,220px) rotate(135deg);transform:translate(220px,220px) rotate(135deg)}}
.captain:hover .bullet.four{-webkit-animation:animBulletFour 1.25s infinite;animation:animBulletFour 1.25s infinite}
@-webkit-keyframes animBulletFour{0%,32%,72%{opacity:0;-webkit-transform:translate(0,220px) rotate(0deg);transform:translate(0,220px) rotate(0deg)}40%,80%{opacity:1;-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}40.1%,80.1%{opacity:1;-webkit-transform:translate(-15px,15px) rotate(-135deg);transform:translate(-15px,15px) rotate(-135deg)}50%,90%,100%{opacity:0;-webkit-transform:translate(-220px,220px) rotate(-135deg);transform:translate(-220px,220px) rotate(-135deg)}}
@keyframes animBulletFour{0%,32%,72%{opacity:0;-webkit-transform:translate(0,220px) rotate(0deg);transform:translate(0,220px) rotate(0deg)}40%,80%{opacity:1;-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}40.1%,80.1%{opacity:1;-webkit-transform:translate(-15px,15px) rotate(-135deg);transform:translate(-15px,15px) rotate(-135deg)}50%,90%,100%{opacity:0;-webkit-transform:translate(-220px,220px) rotate(-135deg);transform:translate(-220px,220px) rotate(-135deg)}}
.captain:hover .arms .arm.right .hand .shield{-webkit-animation:animShield 1.25s infinite;animation:animShield 1.25s infinite}
@-webkit-keyframes animShield{0%,2%,8%,16%,31%,36%,46%,58%,76%,81%,86%,100%{-webkit-transform:translate(0,0);transform:translate(0,0)}12%,20%,30%,40%,35%,62%,80%,85%{-webkit-transform:translate(0,-2px);transform:translate(0,-2px)}}
@keyframes animShield{0%,2%,8%,16%,31%,36%,46%,58%,76%,81%,86%,100%{-webkit-transform:translate(0,0);transform:translate(0,0)}12%,20%,30%,40%,35%,62%,80%,85%{-webkit-transform:translate(0,-2px);transform:translate(0,-2px)}}