<!-- A loose HTML + CSS translation of Dribble shot "Cycling" by Moncho Massé --> 

<!-- Box to contain the bike -->
<div class="box">
  <!-- The Whole Bike --> 
  <div class="bike">
    <!-- Components of the bike --> 
    <!-- Back wheel --> 
    <div class="back-wheel">
      <!-- Inside the wheel -->
      <div class="cassette">
        <!-- Spokes ~ the numbers are clock number orientation-->
        <div class="_12-6"></div>
        <div class="_1-7"></div>
        <div class="_2-8"></div>
        <div class="_3-9"></div> 
        <div class="_4-10"></div> 
        <div class="_5-11"></div> 
      </div> 
    </div>
    <div class="hub"></div>
    
    <!-- Front wheel --> 
    <div class="front-wheel">
     <!-- Inside the wheel -->
      <div class="cassette">
        <!-- Spokes -->
        <div class="_12-6"></div>
        <div class="_1-7"></div>
        <div class="_2-8"></div>
        <div class="_3-9"></div> 
        <div class="_4-10"></div> 
        <div class="_5-11"></div> 
        <div class="_6-12"></div> 
      </div> 
    </div>
    
    <!-- Handlebar -->
    <div class="handlebar">
      <div class="bar headset"></div>
      <div class="bar stem"></div>
      <div class="bar hb1"></div>
      <dv class="bar hb2"></div> 
    </div>
    
    <!-- Seat -->
    <div class="seat">
    </div>
    
    <!-- Bike frame --> 
    <div class="body-frame">
      <div class="bk-upper"></div>
      <div class="bk-lower"></div>
      <div class="fr-upper"></div>
      <div class="fr-lower"></div>
      <div class="seat-frame">
        <div class="seatpost"></div>
      </div>
      <div class="handlebar-frame"></div>
    </div>
     
    
    <!-- Crankset --> 
    <div class="crank">
    </div>
  
    <div class="crankset">
    </div>
    
    <!-- Chain -->
    <div class="chain-upp"></div> 
    <div class="chain-lo"></div> 
    
    <!-- Bike Shadow -->
  <div class="bike-shadow"></div> 
    
     <!-- Streaks of ground-light --> 
  <div class="streak1"></div>
  <div class="streak2"></div>
  <div class="streak3"></div>
  <div class="streak4"></div>
  
      
  <!--Girl-->
  <div class="girl">
    <!--HEAD-->
    <div class="face">
      <div class="l-eye"></div>
      <div class="r-eye"></div>
      <div class="nose"></div>
      <div class="mouth"></div>
      <div class="ear">
        <div class="ear-shadow"></div>
      </div>
      <div class="l-cheek"></div>
      <div class="r-hair"></div> 
      <div class="l-hair"></div>
      <div class="jaw-shadow"></div>
    </div> 
    
    <div class="ponytail"></div>
    
     <div class="neck">
       <div class="neck-shadow"></div>
     </div>
    
    
    <!-- TORSO --> 
    <div class="belly">
      <div class="back-shadow"></div>
    </div>
    <div class="pelvic-reg"></div>
    
    <div class="chest">
      <!-- ARMS --> 
      <div class="r-arm">
        <div class="r-sleeve"></div>
        <div class="r-a-shadow"></div>
      </div>  
      
      
       </div>
    
    <div class="l-arm"> 
       <div class="l-sleeve"></div>
      <div class="l-a-shadow"></div>  
    </div>
    
    <!-- Legs -->
    <!-- Right Leg -->
    <div class="r-thigh">
      <div class="r-pants"></div> 
      <div class="r-shadow"></div>
      <div class="r-calf">
        <!-- Sock --> 
        <div class="sock">
          <div class="blue-top"></div>
          <!-- Shoe --> 
          <div class="shoe-base">
            <div class="shoe-lining"></div>
            <div class="toecap"></div> 
            <div class="heelcap"></div>
            <div class="shoetongue"></div>
            <div class="lace1"></div>
            <div class="lace2"></div> 
            <div class="pedal"></div>
          </div>
        </div>
      </div> 
    </div>
    
    <!-- Left Leg --> 
     <div class="l-thigh">
       <div class="l-shadow"></div>
      <div class="l-calf">
        <div class="darker sock">
          <div class="blue-top" id="dark-blue"></div>
          <div class="shoe-base">
            <div class="shoe-lining"></div>
            <div class="toecap"></div>
            <div class="heelcap"></div> 
            <div class="shoetongue"></div>
            <div class="lace lace1"></div>
            <div class="lace lace2"></div>
            <div class="pedal"></div>
          </div>
        </div>
      </div>
      <div class="l-pants"></div> 
     </div>
  
  
    
    
  <!-- End of Girl -->   
  </div>
    
    
    
  <!-- End of Bike -->  
  </div>
  
  <!-- Environment --> 
  <!-- Wind --> 
  <div class="w1"></div>
  <div class="w2"></div>
  <div class="w3"></div>

<!-- End of box -->   
</div> 

$bg-color: #ffd41c;

// Bike color variables
$btwn-spoke: none; 
$tire: #424242;
$wheel-lining: #FFF; 
$spoke: grey;
$bike-frame: #ed9a18; 
$seat: #424242; 
$handlebar-bottom:#d6d6d6; 
$handlebar-tip:#0073b5;  
$handlebar-middle: $seat;

// Girl color variables
$pelvic: #0073b5; 
$belly: #ffbd29; 
$chest: #ffbd29;
$back-shadow: #ecb634; 
//Leg
$leg: #bd5239;
$l-leg: #9c4231; 
$thigh: #bd5239; 
$r-pants: #0073b5;
$l-pants: #066da2;
$shadow: #8a3828; //For both arms & legs
//Arm
$arm-sleeve: #ed9a18;
$r-arm: #bd5239; 
$l-arm: #9c4231;
// Head & neck 
$face: #bd5239;
$eyes: #390000; 
$cheek: #d36a69;
$nose: #a5422b; 
$hair: #390000; 
$neck-shadow: #8a3828; 
$face-shadow: #9c4231; 
$neck: #a5422b;
//Sock and shoe variables 
$sock: white; 
$blue-top: #0073b5;
$l-blue-top: #006aad;
$shoe-base: #0073b5;
$shoe-lining: white; 
$tip: #006aad; 
$lace: white; 

/* Generic transform */
@mixin transform($transforms) {
       -moz-transform: $transforms;
       -o-transform: $transforms;
       -ms-transform: $transforms;
       -webkit-transform: $transforms;
       transform: $transforms;
}
/* Rotation */
@mixin rotate($deg) {
  @include transform(rotate(#{$deg}deg));
}

/* Translation */  
@mixin translate($x, $y) {
  @include transform(translate((#{$x}px), (#{$y}px))); 
}
 
/* Generic animation */ 
 @mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }  
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }  
    @keyframes #{$animation-name} {
        @content;
    }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}

body {
  background: $bg-color; 
}

.box {
  position: relative; 
  margin: auto;
  margin-top: 10%; 
  width: 890px; 
  height: 588px; 
  border: solid 4px none; 
}

.bike {
  position: absolute; 
  
}
/* Wheels */
%wheel {
  position: absolute; 
  border-radius:50%; 
  width: 200px; 
  height: 200px; 
  background:$btwn-spoke; 
  border: 12px solid $tire;
  box-shadow: inset 0px 0px 0px 5px $wheel-lining;
  top: 350px;  
  z-index: 2;
}

/* Back wheel */ 
.back-wheel {
  @extend %wheel; 
  left: 20px; 
}

/* Front wheel*/ 
.front-wheel {
  @extend %wheel; 
  left: 440px; 
}

/*ROTATION ANIMATION for CASSETTE & SPOKES ~ CW*/
@include keyframes(rotation) {
		from {
				@include rotate(-359);
    }
		to {
        @include rotate(0);
		}
}

/* Cassette for both front and back wheel */ 
.cassette {
  position: absolute; 
  background: white; 
  border-radius: 50%; 
  border: 4px solid black;
  width: 20px; 
  height: 20px; 
  top: 88px; 
  left: 86px; 
  z-index: 2; 
  @include animation('rotation 1s infinite linear')
}

/* Spokes */
%spokes {
  position: absolute; 
  background: $spoke; 
  width: 2px; 
  height: 190px; 
  top: -87px; 
  left: 9px;
  z-index:1; 
}

/* 360deg/12 hrs = 30deg between each hour number change */
._12-6 {
 @extend %spokes;
}

._1-7 {
 @extend %spokes;
 @include rotate(30);  
}

._2-8 {
 @extend %spokes;
 @include rotate(60); 
}

._3-9 {
 @extend %spokes;
 @include rotate(90); 
}

._4-10 {
  @extend %spokes;
 @include rotate(120); 
}

._5-11 {
 @extend %spokes;
 @include rotate(150); 
}

/*Bike Body Frame ~6 parts */
%frame {
  position: absolute; 
  background: $bike-frame;
  height: 14px;  
  z-index: 3; 
  border-radius: 20px;   
}

.bk-lower {
  top: 465px; 
  left: 125px;  
  @include rotate(3);
  @extend %frame;
  width: 185px; 
}

.bk-upper {
  @extend %frame;
  @include rotate(-50); 
  width: 200px; 
  top: 385px; 
  left: 90px; 
  
}

.fr-lower {
  @extend %frame;
  width: 260px;
  @include rotate(-40);  
  top: 390px;
  left: 272px; 
}

.fr-upper {
  @extend %frame; 
  width: 250px;
  top: 295px; 
  left: 244px; 
  @include rotate(-10);
}

.seat-frame {
  @extend %frame; 
  width: 235px; 
  top: 365px; 
  left: 148px; 
  @include rotate(-111); 
  
}

.handlebar-frame {
  @extend %frame;
  width: 270px; 
  top: 340px; 
  left: 375px;
  @include rotate(-110);
}

/*seatpost ~ tipped white */ 
.seatpost {
  position: absolute; 
  width: 40px; 
  height: 14px; 
  background: $handlebar-bottom;
  z-index: 5; 
  left: 190px; 
}

/* Seat */ 
.seat {
  position: absolute; 
  background: $seat; 
  width: 90px; 
  height: 40px;
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 120px; 
  border-top-left-radius: 40px; 
  border-top-right-radius: 20px; 
  top: 245px; 
  left: 185px;
  z-index: 4;
}

/* HEADSET and HANDLEBAR section, in order from bottom to top*/ 
.bar {
  position: absolute; 
  z-index: 4;
  border-radius: 10px; 
  width: 15px;   
}
.headset {
  background: $handlebar-bottom;
  height: 65px; 
  top: 213px;
  left: 466px; 
  @include rotate(-20);  
}

.stem {
  background: $handlebar-middle;
  height: 35px; 
  top: 190px;
  left: 460px; 
  @include rotate(25); 
}

.hb1 {
  background: $handlebar-middle;
  height: 75px; 
  top: 160px; 
  left: 435px;
  @include rotate(90);  
}

.hb2 {
 background: $handlebar-tip;
 height: 50px; 
 top: 172.75px; 
 left: 415px;
  @include rotate(90); 
}


/* Crankset & crank */ 
.crankset {
  position: absolute;
  border: 5px solid #dedede;
  background: none; 
  border-radius: 50%; 
  width: 45px; 
  height: 45px; 
  left: 275px;
  top: 445px; 
  z-index: 5; 
  }

/*ROTATION ANIMATION for CRANK ~ CW*/
@include keyframes(crank-rot) {
		from {
				@include rotate(-359);
    }
		to {
        @include rotate(0);
		}
} 

.crank {
  position: absolute; 
  background: #dedede; 
  width: 5px; 
  height: 45px; 
  left: 305px;
  top: 425px; 
  z-index: 5;
  transform-origin: bottom left;
  @include rotate(25);
  @include animation('crank-rot 1s infinite linear'); 
}


/* Hub */ 
.hub {
  position: absolute; 
  background: none; 
  border: 4px solid #d6d6d6; /* grey-tinged white */ 
  border-radius: 50%;
  width: 15px; 
  height: 15px;
  top: 452px; 
  left: 120px;
  z-index: 5; 
}

/*Chains*/
%chain {
  position: absolute; 
  background: #353535; 
  width: 180px; 
  height: 3px;
  z-index: 4; 
}
.chain-upp {
  top: 448px;
  left: 130px; 
  z-index: 4;
  @extend %chain;
  @include rotate(-1); 
}

.chain-lo{
  top: 486px;
  left: 125px; 
  z-index: 4; 
  @extend %chain;
  @include rotate(7); 
}

/* Bike Shadow */
.bike-shadow {
  position: absolute; 
  background: #f5cc1b;
  border-radius: 20px; 
  width: 800px; 
  height: 28px; 
  top: 555px; 
  left: -60px;
  z-index: 1; 
  
}

/* Streaks of light on the ground */ 
%ground-streak{
  position: absolute;
  background: white; 
  border-radius: 20px; 
  height: 5px; 
  opacity: 0.8;
}

@include keyframes(moveStreak) {
		from { 
      @include translate(-320, 0);
      //transform: translateX(200px);
    }
		to {
      @include translate(-800, 0);
      //transform: translateX(-400px);
		}
}

.streak1 {
  width: 50px; 
  top:500px ;
  left: 200px;
  @extend %ground-streak; 
  @include animation('moveStreak 0.55s infinite ease-in');
}

.streak2 {
  width: 80px; 
  top:520px ;
  left: 300px;
  @extend %ground-streak; 
  @include animation('moveStreak 0.8s infinite ease-in');
}

.streak3 {
  width: 30px; 
  top:500px ;
  left: 380px;  
  @extend %ground-streak; 
  @include animation('moveStreak 0.45s infinite ease-in');
}

.streak4 {
   width: 120px; 
  top:530px ;
  left: 280px;
  @extend %ground-streak; 
  @include animation('moveStreak 0.3s infinite ease-in');
}


/*------------- START OF STYLING FOR GIRL ------------------------*/ 
//z-index equal to or higher than 5

.girl {
  position: absolute; 
}

/*TORSO */ 
.chest {
  position: absolute; 
  background: $chest; 
  width: 80px; 
  height: 85px; 
  border-radius: 35px; 
  left: 235px; 
  top: 75px; 
  z-index: 4;
  @include rotate(20); 
  @include animation('movechest 1s infinite linear');
   box-shadow: inset 4px 5px 0px 0px $back-shadow; 
  
}

@include keyframes(movechest) {
		 0% {
				@include translate(-4,0);
    }
		20% {
        @include translate(3,-2);
		}
  40% {
       @include translate(8,-6);
  }  
  80% {
    @include translate(3,-2);
  }
  100% {
    @include translate(-4,0);
  }
} 


@include keyframes(movebelly) {
		 0%, 100% {
       transform: translate(-4px,0px) rotate(20deg);
       -webkit-transform: translate(-4px,0px) rotate(20deg);
       -moz-transform: translate(-4px,0px) rotate(20deg);
       -ms-transform: translate(-4px,0px) rotate(20deg);
    }
		20%, 80% {
       transform: translate(3px,-2px) rotate(20deg);
       -webkit-transform: translate(3px,-2px) rotate(20deg); 
      -moz-transform: translate(3px,-2px) rotate(20deg); 
       -ms-transform: translate(3px,-2px) rotate(20deg); 
		}
  40% {
      transform: translate(8px,-6px) rotate(20deg);
      -webkit-transform: translate(8px,-6px) rotate(20deg); 
      -moz-transform: translate(8px,-6px) rotate(20deg); 
       -ms-transform: translate(8px,-6px) rotate(20deg);  
  }  
} 

.belly {
  position: absolute; 
  background: $chest; 
  width: 70px; 
  height: 68px; 
  border-radius: 10px; 
  left: 220px; 
  top: 133px; 
  z-index: 5;
  @include animation('movebelly 1s infinite linear');
  
}

.back-shadow {
  position: absolute; 
  background: $back-shadow;
  height: 100%;
  width: 10%; 
}

/* Right Arm */
.r-arm {
  position: absolute; 
  background: $r-arm; 
  width: 25px; 
  height: 210px; 
  border-radius: 20px;
  left: 89px; 
  top: -32px; 
  @include rotate(-60);
 
}

.r-sleeve {
  position: absolute; 
  background: $arm-sleeve; 
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px; 
  width: 40px; 
  height: 55px; 
  left:-8px; 
   
}

.r-a-shadow {
  position: absolute; 
  background: $shadow; 
  height: 5%; 
  width: 100%;
  top: 26%; 
}

/* LEFT ARM */
@include keyframes(moveleftarm) {
		 0%, 100% {
       transform: translate(-4px,0px) rotate(-55deg);
       -webkit-transform: translate(-4px,0px) rotate(-55deg);
       -moz-transform: translate(-4px,0px) rotate(-55deg);
    }
		20%, 80% {
       transform: translate(3px,-2px) rotate(-55deg);
       -webkit-transform: translate(3px,-2px) rotate(-55deg);
      -moz-transform: translate(3px,-2px) rotate(-55deg);
      }
  40% {
      transform: translate(8px,-1px) rotate(-55deg);
      -webkit-transform: translate(8px,-1px) rotate(-55deg);
     -moz-transform: translate(8px,-1px) rotate(-55deg);
  }  
} 

.l-arm {
  position: absolute; 
  background: $l-arm; 
  width: 25px; 
  height: 190px; 
  border-radius: 20px;
  left: 360px; 
  top: 51px; 
  z-index: 1; 
  @include animation('moveleftarm 1s infinite linear'); 

}


.l-sleeve {
  position: absolute; 
  background: $arm-sleeve; 
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px; 
  width: 30px; 
  height: 50px; 
 
}

.l-a-shadow {
  position: absolute; 
  background: $shadow; 
  width: 100%; 
  height: 5%; 
  top: 25%; 
}

.pelvic-reg {
  position: absolute; 
  background: $pelvic; 
  border-radius: 40px; 
  width: 95px; 
  height: 80px; 
  top: 185px;
  left: 185px; 
  z-index: 4; 
  @include animation('movechest 1s infinite linear');
  
}

/* RIGHT LEG */ 

/*ROTATION ANIMATION for Right THIGH~ CW*/
@include keyframes(thigh-rot) {
		0%, 100% {
				@include rotate(-78);
    }
    50% {
       @include rotate(-35);
    }  
} 


.r-thigh {
  position: absolute; 
  background: $thigh; 
  border-top-left-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 20px; 
  width: 33px; 
  height: 190px;
  top: 230px; 
  left: 194px; 
  @include rotate(-75);
  z-index: 6; 
  transform-origin: left top;
 @include animation('thigh-rot 1s infinite linear'); 
    
}


.r-pants {
  position: absolute; 
  background: $r-pants; 
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px; 
  width: 58px; 
  height: 125px; 
  left: -10px;    
}

.r-shadow {
  position: absolute; 
  background: $shadow; 
  width: 100%; 
  height: 7%; 
  top: 65%; 
}

/*ROTATION ANIMATION for Right CALF ~ CW*/
@include keyframes(right-calf-rot) {
 0%, 100% {
    @include rotate(80); 
  }
  20% {
    @include rotate(60);     
  }
  40% {
    @include rotate(50);
  }
  80% {
    @include rotate(110);
  }
   90% {
    @include rotate(100);
  }
    95% {
    @include rotate(90);
  }
}


.r-calf {
  position: absolute; 
  background: $leg; 
  border-radius: 40px; 
  width: 34px; 
  height: 170px; 
   //top is in the left direction
  top: 157.5px; 
   //left is in the up direction
  left: 21px;
  @include rotate(95); 
  @include animation('right-calf-rot 1s infinite linear'); 
  transform-origin: left top; 
}

/* LEFT LEG */
/*ROTATION ANIMATION for LEFT THIGH~ CW*/
@include keyframes(left-thigh-rot) {
		0%, 100% {
				@include rotate(-25);
    }
    50% {
       @include rotate(-70);
    }   
} 


.l-thigh {
  position: absolute; 
  background: $l-leg; 
  border-radius: 40px; 
  width: 34px; 
  height: 185px; 
  top: 218px; 
  left: 215px; 
  @include rotate(-22);
  z-index: 1; 
  transform-origin: left top; 
 @include animation('left-thigh-rot 1s infinite linear'); 
    
}

.l-pants {
  position: absolute; 
  background: $l-pants; 
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px; 
  width: 55px; 
  height: 124px; 
  left: -10px;    
}

.l-shadow {
  position: absolute; 
  background: $shadow; 
  width: 100%; 
  height: 7%; 
  top: 65%; 
}

/*ROTATION ANIMATION for Left CALF ~ CW*/
@include keyframes(left-calf-rot) {
 0%, 100% {
    @include rotate(45); 
  }
  38% {
    @include rotate(110);
  }
  70% {
    @include rotate(55);
  }
}


.l-calf {
  position: absolute; 
  background: $l-leg; 
  border-radius: 40px; 
  width: 34px; 
  height: 170px; 
  top: 153px; // to the left 
  left: 21px;  
  @include rotate(30); 
 @include animation('left-calf-rot 1s infinite linear'); 
  transform-origin: left top; 
}

/* Socks & shoes */ 
.sock {
  position: absolute; 
  background: $sock; 
  border-radius: 10px; 
  width: 100%; 
  height: 140px; 
  top: 40px;  
}

/* darker colored sock on left leg ~ shadow */
.darker {
  background: #dedede; 
}

/*blue stripe on sock*/
.blue-top {
  position: absolute; 
  background: $blue-top;
  width: 100%; 
  height: 30px;  
}

#dark-blue {
  background: $l-blue-top; 
}

.shoe-base {
  position: absolute; 
  background: $shoe-base;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 10px; 
  width: 215%;
  height: 22px;
  top: 115px;
  left: -8px; 
  }

.shoe-lining {
  position: absolute; 
  width: 100%; 
  height: 25%; 
  background: $shoe-lining;
  top: 90%; 
}

.toecap {
  position: absolute; 
  background: $tip; 
  border-top-left-radius: 30px; 
  border-top-right-radius: 30px; 
  width: 40%; 
  height: 85%; 
  top: 8%; 
  right: 1px; 
}

.heelcap {
  position: absolute; 
  height: 50%; 
  width: 30%; 
  background: $shoe-base; 
  top: -40%; 
}

.shoetongue {
  position: absolute;
  height: 90%; 
  width: 30%; 
  background: $shoe-base; 
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px; 
  top: -85%; 
  left: 28%; 
}

%lace {
  position: absolute;
  height: 12%; 
  width: 40%; 
  background: $lace;   
}

.lace1 {
 @extend %lace;
 left: 25%;
 top: -35%;
}

.lace2 {
  @extend %lace;
  left: 25%; 
  top: -20%;
}

.pedal {
  position: absolute; 
  background: $seat; 
  border-radius: 40px; 
  width: 50%; 
  height: 40%; 
  top: 133%; 
  left: 20%; 
  transform-origin: left top;
  @include rotate(-5);
  
 }

/* HEAD & NECK */
@include keyframes(movehead) {
		0%, 100% {
				@include translate(-4,0);
    }
		40% {
        @include translate(8,-3);
    } 
}

@include keyframes(moveneck) {
		 0%, 100% {
       transform: translate(-4px,0px) rotate(20deg);
       -webkit-transform: translate(-4px,0px) rotate(20deg);
       -moz-transform: translate(-4px,0px) rotate(20deg);
       -ms-transform: translate(-4px,0px) rotate(20deg);
    }
		20%, 80% {
       transform: translate(3px,-2px) rotate(20deg);
       -webkit-transform: translate(3px,-2px) rotate(20deg);
       -moz-transform: translate(3px,-2px) rotate(20deg);
       -ms-transform: translate(3px,-2px) rotate(20deg);
		}
  40% {
      transform: translate(8px,-6px) rotate(20deg);
      -webkit-transform: translate(8px,-6px) rotate(20deg);
       -moz-transform: translate(8px,-6px) rotate(20deg);
       -ms-transform: translate(8px,-6px) rotate(20deg);
  }  
} 

.neck {
  position: absolute; 
  background: $neck; 
  border-radius: 20px; 
  width: 26px; 
  height: 40px;
  left: 280px; 
  top: 50px; 
  z-index: 5;
  @include animation('moveneck 1s infinite ease-in');
}

.face {
  position: absolute; 
  background: $face; 
  width: 95px; 
  height: 100px; 
  border-radius: 50%; 
  left: 266px;
  top: -35px; 
  z-index: 6; 
  @include animation('movehead 1s infinite ease-in');
  
}

%eye {
  position: absolute; 
  background: none; 
  width: 20px; 
  height: 15px; 
  border-radius: 50%; 
}

.l-eye {
  @extend %eye;  
  box-shadow: inset 0.5px 3px 0px 0px $eyes;
  left: 42px; 
  top: 39px; 
  
}

.r-eye {
  @extend %eye; 
  box-shadow: inset 0.3px 3px 0px 0px $eyes;
  left: 74px; 
  top: 40px;  
}

.l-cheek {
  position: absolute; 
  background: $cheek;
  border-radius: 50%; 
  width: 18px; 
  height: 18px; 
  top: 52px;
  left: 21px; 
  
}

.mouth {
  position: absolute; 
  width: 20px; 
  height: 8%; 
  border-bottom-right-radius: 20px; 
  border-bottom-left-radius: 20px; 
  border: 2px solid #e299a4; 
  background: white; 
  top: 65px;
  left: 56px; 
}

.nose {
  position: absolute; 
  background: $nose; 
  width: 10px; 
  height: 6px; 
  border-radius: 20px; 
  top: 53px; 
  left: 64px; 
}

.ear {
  position: absolute; 
  background: $face;
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  top: 39px; 
  left: -4px;   
}


.r-hair{
  position: absolute; 
  background: $hair; 
  width: 40px; 
  height: 30px; 
  border-top-right-radius: 50px; 
  border-bottom-left-radius: 50px; 
  left: 50px;  
}



.l-hair{
  position: absolute; 
  background: $hair; 
  width: 40px; 
  height: 58px; 
  border-top-left-radius: 50px; 
  border-bottom-right-radius: 40px; 
  @include rotate(20);
  left: 10px; 
  top: -7px; 
  
}

@include keyframes(rotate-ponytail) {
  0%, 100% {
    @include rotate(0);
  }
  20% {
    @include rotate(15);
  }   
  90% {
    @include rotate(-5);
  }
}


.ponytail {
  position: absolute; 
  background: $hair;
  border-top-left-radius: 50px; 
  border-bottom-right-radius: 50px; 
  width: 150px; 
  height: 40px;
  left: 140px; 
  top: 1px; 
  z-index: 2; 
  transform-origin: right top;
  @include rotate(-8);
  @include animation('rotate-ponytail 1s infinite linear');
  
}

.neck-shadow {
  position: absolute;
  background: $neck-shadow;
  opacity: .75; 
  border-radius: 40px; 
  width: 8px; 
  height:87%; 
}

.jaw-shadow {
  position: absolute; 
  background: none; 
  box-shadow: 5px 5px 0px 0px $face-shadow;
  border-radius: 50%;
  width:10px; 
  height: 40px; 
  top: 57px;
  left: 16px; 
  @include rotate(-212);
  }
  
  .ear-shadow {
  position: absolute; 
  background: none;
  box-shadow: -3px 0px 0px 0px $face-shadow; 
  border-radius: 50%; 
  width: 100%;
  height: 100%; 
  }
  

/* Wind */ 

@include keyframes (movewind1) {
  0% {
    @include translate(0,100)
  }
  60% {
    @include translate(-600, 200)
  }
  100% {
    @include translate(-2000, 100)
  }
}

@include keyframes (movewind2) {
  0% {
    @include translate(-10,0)
  }
  100% {
    @include translate(-2000, 0)
  }
}

@include keyframes (movewind3) {
  0% {
    @include translate(-10,0)
  }
  50% {
    @include translate(-500, -50)
  }
  100% {
    @include translate(-2000, 0)
  }
}

%wind {
  position: absolute; 
  background: white;
  opacity: 0.5;
  width: 200px; 
  height: 4px;  
  right: 10px; 
}

.w1 {
  @extend %wind;
   top: 50px;
  @include animation(movewind1 0.6s infinite linear);
}

.w2 {
  @extend %wind;
  top: 400px; 
   @include animation(movewind2 1.2s infinite linear);
  z-index: 7;
}

.w3 {
  @extend %wind;
  top: 600px; 
  @include animation(movewind3 0.8s infinite linear);
   z-index: 7;
}