h1 404
  br
  |Not 
  br 
  |Found

$color1: #EB4A2C;
$color2: #F5ECCF;
$color3: #640E13;
$color4: #FCB043;
$cubic-bezier: cubic-bezier(0.68, -0.55, 0.265, 1.55);

//initial text-shadow function
@function textShadow($color){
  //value variable: x-value, y-value, color value;
  $val: 0px 0px $color;
  //loop to create text-shadow variables moving 1px to the left and 1 down
  @for $i from 1 through 50{
    $val: #{$val}, -#{$i}px #{$i}px #{$color};
  }
  //return value
  @return $val;
}

@function textAnimationShadow($color1, $color2,$color3,$color4,$color5){
  $val1: 0px 0px $color1;
  $val2: 0px 0px $color2;
  $val3: 0px 0px $color3;
  $val4: 0px 0px $color4;
  $val5: 0px 0px $color5;
  @for $i from 1 through 10{
    $val1: #{$val1}, -#{$i}px #{$i}px #{$color1};
  }
  @for $i from 11 through 20{
    $val2: #{$val2}, -#{$i}px #{$i}px #{$color2};
  }
  @for $i from 21 through 30{
    $val3: #{$val3}, -#{$i}px #{$i}px #{$color3};
  }
  @for $i from 31 through 40{
    $val4: #{$val4}, -#{$i}px #{$i}px #{$color4};
  }
  @for $i from 41 through 50{
    $val5: #{$val5}, -#{$i}px #{$i}px #{$color5};
  }
  @return $val1, $val2, $val3, $val4, $val5;
}

//mixin to create initial text-shadow
@mixin shadow($shadow-color){
  text-shadow: textShadow($shadow-color);
}
//mixin to create animation shadow, can enter 5 color variables
@mixin animationShadow($shadow-color1, $shadow-color2,$shadow-color3, $shadow-color4, $shadow-color5){
  text-shadow: textAnimationShadow($shadow-color1, $shadow-color2,$shadow-color3, $shadow-color4, $shadow-color5);
}

body,html{
  height: 100%;
}

body{
  background: $color4;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

h1{
  font-family: 'Shrikhand', cursive;
  text-align: center;
  font-weight: normal;
  font-size: 7rem;
  color: $color2;
  @include shadow($color1);
  animation: color 1.5s ease-in infinite;
}

@keyframes color{
  0%,10%{
    color: $color1;
    @include shadow($color3);
  }
  11%,20%{
    color: $color1;
    @include animationShadow($color3,$color3,$color3,$color3,$color1);
  }
  21%, 30%{
    color: $color1;
    @include animationShadow($color3,$color3,$color3,$color1,$color1);
  }
  31%, 40%{
    color: $color1;
    @include animationShadow($color3,$color3,$color1,$color1,$color1);
  }
  41%, 50%{
    color: $color1;
    @include animationShadow($color3,$color1,$color1,$color1,$color1);
  }
  51%,60%{
    color: $color2;
    @include animationShadow($color1,$color1,$color1,$color1,$color1);
  }
  61%,100%{
    color: $color2;
    @include animationShadow($color1,$color1,$color1,$color1,$color1);
  }
}

// Randomnize letters then name
// paralax down