A Pen by David Kivlehan.

Hovergirl.markdown

Hovergirl

Hover Craftie's most awesome employee! Coder by day, superhero by night. (http://hovercraft.ie)

Retro 8bit pixel super-hero - HOVERGIRL -

Inspired by both http://codepen.io/sambeckham/full/yEmpz and http://codepen.io/jordanwade/full/rhlKJ

A Pen by David Kivlehan on CodePen.

License.

index.html

<div class="hovergirl"></div>

style.scss

$hair: #7d5f4f;
$skin: #d7bcaa;
$lips: #ffc0cb;
$costume-primary : red;
$costume-secondary : blue;
$rocket : grey;
$fire-outer: orange;
$fire-inner: yellow;

$pixel-size: .5em;

body {
  //increase font-size to increase size of hovergirl!
  //font-size: 8px;
  font-size: 0.5em;
  background-color: black;
}
.hovergirl {
  //background: red; //the original pixel!
  -webkit-animation: hover 1.5s 0.5s alternate infinite;
  animation: hover 1.5s 1.5s alternate infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  width: $pixel-size;
  height: $pixel-size;
  box-shadow: 
    //from top to bottom
    //HEAD
    //line 1
    $pixel-size * 1 0 0 darken($hair, 7%),
    $pixel-size * 2 0 0 darken($hair, 10%),
    $pixel-size * 3 0 0 darken($hair, 7%),
    $pixel-size * 4 0 0 darken($hair, 10%),   
    //line 2
    $pixel-size * 0 $pixel-size 0 $hair,
    $pixel-size * 1 $pixel-size 0 darken($hair, 7%),
    $pixel-size * 2 $pixel-size 0 darken($hair, 10%),
    $pixel-size * 3 $pixel-size 0 darken($hair, 7%),
    $pixel-size * 4 $pixel-size 0 $hair,
    $pixel-size * 5 $pixel-size 0 darken($hair, 10%),   
    //line 3
    $pixel-size * -1 $pixel-size * 2 0 $hair,
    $pixel-size * 0 $pixel-size * 2 0 darken($hair, 7%),
    $pixel-size * 1 $pixel-size * 2 0 darken($hair, 7%),
    $pixel-size * 2 $pixel-size * 2 0 darken($hair, 10%),
    $pixel-size * 3 $pixel-size * 2 0 darken($hair, 7%),
    $pixel-size * 4 $pixel-size * 2 0 darken($hair, 10%),
    $pixel-size * 5 $pixel-size * 2 0 darken($hair, 10%),  
    //line 4
    $pixel-size *-1 $pixel-size * 3 0 $hair,
    $pixel-size * 0 $pixel-size * 3 0 darken($hair, 7%),
    $pixel-size * 1 $pixel-size * 3 0 darken($skin, 7%),
    $pixel-size * 2 $pixel-size * 3 0 darken($skin, 5%),
    $pixel-size * 3 $pixel-size * 3 0 $skin,
    $pixel-size * 4 $pixel-size * 3 0 $skin,
    $pixel-size * 5 $pixel-size * 3 0 darken($skin, 5%),
    
    //line 5
    $pixel-size *-1 $pixel-size * 4 0 $hair,
    $pixel-size * 0 $pixel-size * 4 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 4 0 $costume-primary,
    $pixel-size * 2 $pixel-size * 4 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 4 0 darken($costume-primary,3%),
    $pixel-size * 4 $pixel-size * 4 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 4 0 $costume-primary,
    
     //line 6
    $pixel-size *-1 $pixel-size * 5 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 5 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 5 0 $costume-primary,
    $pixel-size * 2 $pixel-size * 5 0 darken($costume-primary,3%),
    $pixel-size * 3 $pixel-size * 5 0 white,
    $pixel-size * 4 $pixel-size * 5 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 5 0 white,
    
    //line 7
    $pixel-size *-1 $pixel-size * 6 0 $hair,
    $pixel-size * 0 $pixel-size * 6 0 darken($hair, 7%),
    $pixel-size * 1 $pixel-size * 6 0 darken($skin, 7%),
    $pixel-size * 2 $pixel-size * 6 0 darken($skin, 5%),
    $pixel-size * 3 $pixel-size * 6 0 $skin,
    $pixel-size * 4 $pixel-size * 6 0 darken($skin, 10%),
    $pixel-size * 5 $pixel-size * 6 0 darken($skin, 15%),
    //line 8
    $pixel-size *-1 $pixel-size * 7 0 $hair,
    $pixel-size * 0 $pixel-size * 7 0 darken($hair, 7%),
    $pixel-size * 1 $pixel-size * 7 0 darken($skin, 7%),
    $pixel-size * 2 $pixel-size * 7 0 darken($skin, 5%),
    $pixel-size * 3 $pixel-size * 7 0 $skin,
    $pixel-size * 4 $pixel-size * 7 0 $lips,
    $pixel-size * 5 $pixel-size * 7 0 darken($lips, 5%),
     //line 9
    $pixel-size *-1 $pixel-size * 8 0 $hair,
    $pixel-size * 0 $pixel-size * 8 0 darken($hair, 7%),
    $pixel-size * 1 $pixel-size * 8 0 darken($skin, 7%),
    $pixel-size * 2 $pixel-size * 8 0 darken($skin, 5%),
    $pixel-size * 3 $pixel-size * 8 0 $skin,
    $pixel-size * 4 $pixel-size * 8 0 $lips,
    
    //line 10
    $pixel-size *-1 $pixel-size * 9 0 $hair,
    $pixel-size * 0 $pixel-size * 9 0 darken($hair, 7%),
    $pixel-size * 1 $pixel-size * 9 0 darken($skin, 7%),
    $pixel-size * 2 $pixel-size * 9 0 darken($skin, 5%),
    
    //BODY
    //line 11
    $pixel-size *-1 $pixel-size * 10 0 $hair,
    $pixel-size * 0 $pixel-size * 10 0 darken($costume-primary, 10%),
    $pixel-size * 1 $pixel-size * 10 0 darken($costume-primary, 5%),
    $pixel-size * 2 $pixel-size * 10 0 darken($costume-primary, 5%),
    //line 12
    $pixel-size *-4 $pixel-size * 11 0 $rocket,
    $pixel-size *-3 $pixel-size * 11 0 $costume-primary,
    $pixel-size *-2 $pixel-size * 11 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 11 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 11 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 11 0 $costume-primary,
    $pixel-size * 2 $pixel-size * 11 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 11 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 11 0 $costume-primary,
    //line 13
    $pixel-size *-5 $pixel-size * 12 0 $rocket,
    $pixel-size *-4 $pixel-size * 12 0 $costume-primary,
    $pixel-size *-3 $pixel-size * 12 0 $costume-primary,
    $pixel-size *-2 $pixel-size * 12 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 12 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 12 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 12 0 $costume-secondary,
    $pixel-size * 2 $pixel-size * 12 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 12 0 $costume-secondary,
    $pixel-size * 4 $pixel-size * 12 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 12 0 $costume-primary,
    //line 14
    $pixel-size *-5 $pixel-size * 13 0 $rocket,
    $pixel-size *-4 $pixel-size * 13 0 $costume-primary,
    $pixel-size *-3 $pixel-size * 13 0 $costume-primary,
    $pixel-size *-2 $pixel-size * 13 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 13 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 13 0 darken($costume-primary, 5%),
    $pixel-size * 1 $pixel-size * 13 0 $costume-secondary,
    $pixel-size * 2 $pixel-size * 13 0 darken($costume-primary, 5%),
    $pixel-size * 3 $pixel-size * 13 0 $costume-secondary,
    $pixel-size * 4 $pixel-size * 13 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 13 0 $costume-primary,
    //line 15
    $pixel-size *-5 $pixel-size * 14 0 $rocket,
    $pixel-size *-4 $pixel-size * 14 0 $costume-primary,
    $pixel-size *-3 $pixel-size * 14 0 $costume-primary,
    $pixel-size *-2 $pixel-size * 14 0 darken($costume-primary,10%),
    $pixel-size *-1 $pixel-size * 14 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 14 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 14 0 $costume-secondary,
    $pixel-size * 2 $pixel-size * 14 0 $costume-secondary,
    $pixel-size * 3 $pixel-size * 14 0 $costume-secondary,
    $pixel-size * 4 $pixel-size * 14 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 14 0 $costume-primary,
    $pixel-size * 6 $pixel-size * 14 0 $costume-primary,
    //line 16
    $pixel-size *-5 $pixel-size * 15 0 $rocket,
    $pixel-size *-4 $pixel-size * 15 0 $skin,
    $pixel-size *-3 $pixel-size * 15 0 $skin,
    $pixel-size *-2 $pixel-size * 15 0 darken($costume-primary,10%),
    $pixel-size *-1 $pixel-size * 15 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 15 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 15 0 $costume-secondary,
    $pixel-size * 2 $pixel-size * 15 0 darken($costume-primary, 5%),
    $pixel-size * 3 $pixel-size * 15 0 $costume-secondary,
    $pixel-size * 4 $pixel-size * 15 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 15 0 $costume-primary,
    $pixel-size * 6 $pixel-size * 15 0 $costume-primary,
     //line 17
    $pixel-size *-5 $pixel-size * 16 0 $rocket,
    $pixel-size *-4 $pixel-size * 16 0 darken($skin, 5%),
    $pixel-size *-3 $pixel-size * 16 0 $skin,
    $pixel-size *-2 $pixel-size * 16 0 darken($costume-primary,10%),
    $pixel-size *-1 $pixel-size * 16 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 16 0 darken($costume-primary, 5%),
    $pixel-size * 1 $pixel-size * 16 0 $costume-secondary,
    $pixel-size * 2 $pixel-size * 16 0 darken($costume-primary, 5%),
    $pixel-size * 3 $pixel-size * 16 0 $costume-secondary,
    $pixel-size * 4 $pixel-size * 16 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 16 0 $costume-primary,
    //line 18
    $pixel-size *-5 $pixel-size * 17 0 $rocket,
    $pixel-size *-4 $pixel-size * 17 0 darken($skin, 5%),
    $pixel-size *-3 $pixel-size * 17 0 $skin,
    $pixel-size *-2 $pixel-size * 17 0 darken($costume-primary,10%),
    $pixel-size *-1 $pixel-size * 17 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 17 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 17 0 $costume-primary,
    $pixel-size * 2 $pixel-size * 17 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 17 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 17 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 17 0 $costume-primary,
    //line 19
    $pixel-size *-5 $pixel-size * 18 0 $rocket,
    $pixel-size *-4 $pixel-size * 18 0 $rocket,
    $pixel-size *-3 $pixel-size * 18 0 $skin,
    $pixel-size *-2 $pixel-size * 18 0 $skin,
    $pixel-size *-1 $pixel-size * 18 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 18 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 18 0 $costume-primary,
    $pixel-size * 2 $pixel-size * 18 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 18 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 18 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 18 0 $skin,
    //line 20
    $pixel-size *-5 $pixel-size * 19 0 darken($rocket,5%),
    $pixel-size *-4 $pixel-size * 19 0 $rocket,
    $pixel-size *-3 $pixel-size * 19 0 $skin,
    $pixel-size *-2 $pixel-size * 19 0 $skin,
    $pixel-size *-1 $pixel-size * 19 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 19 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 19 0 $costume-primary,
    $pixel-size * 2 $pixel-size * 19 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 19 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 19 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 19 0 $skin,
    //line 21
    $pixel-size *-5 $pixel-size * 20 0 darken($rocket,10%),
    $pixel-size *-4 $pixel-size * 20 0 darken($rocket,5%),
    $pixel-size *-3 $pixel-size * 20 0 $rocket,
    $pixel-size *-2 $pixel-size * 20 0 $skin,
    $pixel-size *-1 $pixel-size * 20 0 $skin,
    $pixel-size * 0 $pixel-size * 20 0 $costume-secondary,
    $pixel-size * 1 $pixel-size * 20 0 $costume-secondary,
    $pixel-size * 2 $pixel-size * 20 0 $costume-secondary,
    $pixel-size * 3 $pixel-size * 20 0 $costume-secondary,
    $pixel-size * 4 $pixel-size * 20 0 $costume-secondary,
    $pixel-size * 5 $pixel-size * 20 0 $skin,
    //line 22
    $pixel-size *-5 $pixel-size * 21 0 darken($rocket,10%),
    $pixel-size *-4 $pixel-size * 21 0 darken($rocket,10%),
    $pixel-size *-3 $pixel-size * 21 0 darken($rocket,10%),
    $pixel-size *-2 $pixel-size * 21 0 $skin,
    $pixel-size *-1 $pixel-size * 21 0 $skin,
    $pixel-size * 0 $pixel-size * 21 0 $skin,
    $pixel-size * 1 $pixel-size * 21 0 $costume-secondary,
    $pixel-size * 2 $pixel-size * 21 0 $costume-secondary,
    $pixel-size * 3 $pixel-size * 21 0 $costume-secondary,
    $pixel-size * 4 $pixel-size * 21 0 $costume-secondary,
    $pixel-size * 5 $pixel-size * 21 0 $skin,
    //legs
    //line 23
    $pixel-size *-2 $pixel-size * 22 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 22 0 $skin,
    $pixel-size * 0 $pixel-size * 22 0 $skin,
    $pixel-size * 1 $pixel-size * 22 0 $costume-primary,
    $pixel-size * 2 $pixel-size * 22 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 22 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 22 0 $costume-primary,
    $pixel-size * 5 $pixel-size * 22 0 $skin,
    $pixel-size * 6 $pixel-size * 22 0 $skin,
    //line 24
    $pixel-size *-2 $pixel-size * 23 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 23 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 23 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 23 0 darken($costume-primary,10%),
    $pixel-size * 2 $pixel-size * 23 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 23 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 23 0 $costume-primary,    
    //line 25
    $pixel-size *-2 $pixel-size * 24 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 24 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 24 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 24 0 darken($costume-primary,10%),
    $pixel-size * 2 $pixel-size * 24 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 24 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 24 0 $costume-primary,
    //line 26
    $pixel-size *-2 $pixel-size * 25 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 25 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 25 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 25 0 darken($costume-primary,10%),
    $pixel-size * 2 $pixel-size * 25 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 25 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 25 0 $costume-primary,
    //line 27
    $pixel-size *-2 $pixel-size * 26 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 26 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 26 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 26 0 darken($costume-primary,10%),
    $pixel-size * 2 $pixel-size * 26 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 26 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 26 0 $costume-primary,
    //line 28
    $pixel-size *-2 $pixel-size * 27 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 27 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 27 0 $costume-primary,
    $pixel-size * 1 $pixel-size * 27 0 darken($costume-primary,10%),
    $pixel-size * 2 $pixel-size * 27 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 27 0 $costume-primary,
    $pixel-size * 4 $pixel-size * 27 0 $costume-primary,
    //line 29
    $pixel-size *-2 $pixel-size * 28 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 28 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 28 0 darken($costume-primary,3%),
    $pixel-size * 2 $pixel-size * 28 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 28 0 darken($costume-primary,3%),
    //line 30
    $pixel-size *-2 $pixel-size * 29 0 $costume-primary,
    $pixel-size *-1 $pixel-size * 29 0 $costume-primary,
    $pixel-size * 0 $pixel-size * 29 0 darken($costume-primary,7%),
    $pixel-size * 2 $pixel-size * 29 0 $costume-primary,
    $pixel-size * 3 $pixel-size * 29 0 darken($costume-primary,7%),
    //line 31
    $pixel-size *-2 $pixel-size * 30 0 $costume-secondary,
    $pixel-size *-1 $pixel-size * 30 0 $costume-secondary,
    $pixel-size * 0 $pixel-size * 30 0 $costume-secondary,
    $pixel-size * 1 $pixel-size * 30 0 darken($costume-secondary,10%),
    $pixel-size * 2 $pixel-size * 30 0 $costume-secondary,
    $pixel-size * 3 $pixel-size * 30 0 $costume-secondary,
    //line 32
    $pixel-size *-2 $pixel-size * 31 0 $costume-secondary,
    $pixel-size *-1 $pixel-size * 31 0 $costume-secondary,
    $pixel-size * 0 $pixel-size * 31 0 $costume-secondary,
    $pixel-size * 1 $pixel-size * 31 0 darken($costume-secondary,10%),
    $pixel-size * 2 $pixel-size * 31 0 $costume-secondary,
    $pixel-size * 3 $pixel-size * 31 0 $costume-secondary,
    //line 33
    $pixel-size *-2 $pixel-size * 32 0 $costume-secondary,
    $pixel-size *-1 $pixel-size * 32 0 $costume-secondary,
    $pixel-size * 0 $pixel-size * 32 0 $costume-secondary,
    $pixel-size * 1 $pixel-size * 32 0 darken($costume-secondary,10%),
    $pixel-size * 2 $pixel-size * 32 0 $costume-secondary,
    $pixel-size * 3 $pixel-size * 32 0 $costume-secondary,
    //line 34
    $pixel-size *-2 $pixel-size * 33 0 $costume-secondary,
    $pixel-size *-1 $pixel-size * 33 0 $costume-secondary,
    $pixel-size * 0 $pixel-size * 33 0 $costume-secondary,
    $pixel-size * 1 $pixel-size * 33 0 darken($costume-secondary,10%),
    $pixel-size * 2 $pixel-size * 33 0 darken($costume-secondary,10%),
    $pixel-size * 3 $pixel-size * 33 0 darken($costume-secondary,10%),
    $pixel-size * 4 $pixel-size * 33 0 $costume-secondary,
    $pixel-size * 5 $pixel-size * 33 0 $costume-secondary,
    //line 35
    $pixel-size *-2 $pixel-size * 34 0 $costume-secondary,
    $pixel-size *-1 $pixel-size * 34 0 $costume-secondary,
    $pixel-size * 0 $pixel-size * 34 0 $costume-secondary,
    $pixel-size * 1 $pixel-size * 34 0 $costume-secondary,
    $pixel-size * 2 $pixel-size * 34 0 $costume-secondary,
    $pixel-size * 3 $pixel-size * 34 0 darken($costume-secondary,10%),
    $pixel-size * 4 $pixel-size * 34 0 $costume-secondary,
    $pixel-size * 5 $pixel-size * 34 0 $costume-secondary,
    //line 36
    $pixel-size *-2 $pixel-size * 35 0 darken($costume-secondary,20%),
    $pixel-size *-1 $pixel-size * 35 0 darken($costume-secondary,20%),
    $pixel-size * 0 $pixel-size * 35 0 darken($costume-secondary,20%),
    $pixel-size * 1 $pixel-size * 35 0 darken($costume-secondary,20%),
    $pixel-size * 2 $pixel-size * 35 0 darken($costume-secondary,20%),
    $pixel-size * 3 $pixel-size * 35 0 darken($costume-secondary,20%),
    $pixel-size * 4 $pixel-size * 35 0 darken($costume-secondary,20%),
    $pixel-size * 5 $pixel-size * 35 0 darken($costume-secondary,20%),
}

// Hovergirl's movement
@-webkit-keyframes hover {
  from {
    top:50%;
  }
  to {
    top:42.5%;
  }
}

//to get the rocket fire effect
.hovergirl::after {
  -webkit-animation: fire 0.8s 0.5s steps(1) alternate infinite;
  animation: fire 0.8s 0.5s steps(1) alternate infinite;
  background: $fire-outer;
  content: "";
  height: $pixel-size;
  left: -2.5em;
  position: absolute;
  top: 11em;
  width: $pixel-size;
  z-index: 1;
  box-shadow:
    $pixel-size * 1 0 0 $fire-outer,
    $pixel-size * 2 0 0 $fire-outer,    
    $pixel-size * 0 $pixel-size 0 $fire-outer,
    $pixel-size * 1 $pixel-size 0 mix(black, $fire-inner, 5%),
    $pixel-size * 2 $pixel-size 0 mix(black, $fire-inner, 5%), 
    $pixel-size * 0 $pixel-size * 2 0 $fire-outer,
    $pixel-size * 1 $pixel-size * 2 0 $fire-inner,
    $pixel-size * 2 $pixel-size * 2 0 mix(black, $fire-inner, 5%),   
    $pixel-size * 0 $pixel-size * 3 0 $fire-outer,
    $pixel-size * 1 $pixel-size * 3 0 $fire-inner,
    $pixel-size * 2 $pixel-size * 3 0 $fire-inner,
    $pixel-size * 1 $pixel-size * 4 0 $fire-outer,
    $pixel-size * 2 $pixel-size * 4 0 $fire-inner,   
    $pixel-size * 1 $pixel-size * 5 0 $fire-outer,
    $pixel-size * 2 $pixel-size * 5 0 $fire-inner,   
    $pixel-size * 2 $pixel-size * 6 0 $fire-outer,
    ;
}

// Hovergirl's rocket fire
@-webkit-keyframes fire {
  0% {
    box-shadow:
      $pixel-size * 1 0 0 $fire-outer,
      $pixel-size * 2 0 0 $fire-outer,    
      $pixel-size * 0 $pixel-size 0 $fire-outer,
      $pixel-size * 1 $pixel-size 0 mix(black, $fire-inner, 5%),
      $pixel-size * 2 $pixel-size 0 mix(black, $fire-inner, 5%), 
      $pixel-size * 0 $pixel-size * 2 0 $fire-outer,
      $pixel-size * 1 $pixel-size * 2 0 $fire-inner,
      $pixel-size * 2 $pixel-size * 2 0 mix(black, $fire-inner, 5%),   
      $pixel-size * 0 $pixel-size * 3 0 $fire-outer,
      $pixel-size * 1 $pixel-size * 3 0 $fire-inner,
      $pixel-size * 2 $pixel-size * 3 0 $fire-inner,
      $pixel-size * 1 $pixel-size * 4 0 $fire-outer,
      $pixel-size * 2 $pixel-size * 4 0 $fire-inner,   
      $pixel-size * 1 $pixel-size * 5 0 $fire-outer,
      $pixel-size * 2 $pixel-size * 5 0 $fire-inner,   
      $pixel-size * 2 $pixel-size * 6 0 $fire-outer,
      ;
  }
  25% {
    box-shadow:
      $pixel-size * 1 0 0 $fire-outer,
      $pixel-size * 2 0 0 $fire-outer,    
      $pixel-size * 0 $pixel-size 0 $fire-outer,
      $pixel-size * 1 $pixel-size 0 $fire-inner,
      $pixel-size * 2 $pixel-size 0 $fire-inner,   
      $pixel-size * 0 $pixel-size * 2 0 $fire-outer,
      $pixel-size * 1 $pixel-size * 2 0 $fire-inner,
      $pixel-size * 2 $pixel-size * 2 0 $fire-inner,   
      $pixel-size * 0 $pixel-size * 3 0 $fire-outer,
      $pixel-size * 1 $pixel-size * 3 0 $fire-inner,
      $pixel-size * 2 $pixel-size * 3 0 $fire-inner,
      $pixel-size * 1 $pixel-size * 4 0 $fire-outer,
      $pixel-size * 2 $pixel-size * 4 0 $fire-inner,   
      $pixel-size * 1 $pixel-size * 5 0 $fire-outer,
      $pixel-size * 2 $pixel-size * 5 0 $fire-inner,   
      $pixel-size * 2 $pixel-size * 6 0 $fire-outer,
      ;
  }
  50% {
    box-shadow:
      $pixel-size * 1 0 0 $fire-outer,
      $pixel-size * 2 0 0 $fire-outer,    
      $pixel-size * 0 $pixel-size 0 $fire-outer,
      $pixel-size * 1 $pixel-size 0 $fire-inner,
      $pixel-size * 2 $pixel-size 0 $fire-inner,      
      $pixel-size * 0 $pixel-size * 2 0 $fire-outer,
      $pixel-size * 1 $pixel-size * 2 0 $fire-inner,
      $pixel-size * 2 $pixel-size * 2 0 $fire-inner,
      $pixel-size * 1 $pixel-size * 3 0 $fire-outer,
      $pixel-size * 2 $pixel-size * 3 0 $fire-inner,   
      $pixel-size * 1 $pixel-size * 4 0 $fire-outer,
      $pixel-size * 2 $pixel-size * 4 0 $fire-inner,   
      $pixel-size * 2 $pixel-size * 5 0 $fire-outer,
      ;
  }
  75% {
    box-shadow:
      $pixel-size * 1 0 0 $fire-outer,
      $pixel-size * 2 0 0 $fire-outer,      
      $pixel-size * 0 $pixel-size 0 $fire-outer,
      $pixel-size * 1 $pixel-size 0 $fire-inner,
      $pixel-size * 2 $pixel-size 0 $fire-inner,
      $pixel-size * 1 $pixel-size * 2 0 $fire-outer,
      $pixel-size * 2 $pixel-size * 2 0 $fire-inner,   
      $pixel-size * 1 $pixel-size * 3 0 $fire-outer,
      $pixel-size * 2 $pixel-size * 3 0 $fire-inner,   
      $pixel-size * 2 $pixel-size * 4 0 $fire-outer,
      ;
  }
  90% {
    box-shadow:
      $pixel-size * 1 0 0 $fire-outer,
      $pixel-size * 2 0 0 $fire-outer,    
      $pixel-size * 0 $pixel-size 0 $fire-outer,
      $pixel-size * 1 $pixel-size 0 $fire-inner,
      $pixel-size * 2 $pixel-size 0 $fire-inner,   
      ;
  }
}