<main class="site__main">
          <div>
            <h1>
              A lion <br />
              does not <br />
              ask permission <br />
              before he <br />
              eats a zebra <br />
            </h1>
          </div>
        </main>
// #D92525 -- red
// #F25C05 -- orange
// #88A61B -- green
// #0E3D59 -- blue
// #572D8C -- purple
// $color: #D92525;
// $color2: #F25C05;
// $color3: #88A61B;
// $color4: #0E3D59;
// $color5: #572D8C;

// Grays
$color: #252526;
$color2: #313134;
$color3: #3e3e40;
$color4: #4a4a4d;
$color5: #575759;

body{
	height:100hv;
	background: #EDEEE9;
	margin:0;
}
@function makelongshadow($color, $color2, $color3, $color4, $color5) {
  $val: 0px 0px $color;
  @for $i from 1 through 20 {
    $val: #{$val}, -#{$i}px #{$i}px #{$color};
  }
  @for $i from 21 through 40 {
    $val: #{$val}, -#{$i}px #{$i}px #{$color2};
  }
  @for $i from 41 through 60 {
    $val: #{$val}, -#{$i}px #{$i}px #{$color3};
  }
  @for $i from 61 through 80 {
    $val: #{$val}, -#{$i}px #{$i}px #{$color4};
  }
  @for $i from 81 through 100 {
    $val: #{$val}, -#{$i}px #{$i}px #{$color5};
  }
  @return $val;
}

@keyframes animateShadow {
  0%   {
    text-shadow: makelongshadow($color, $color2, $color3, $color4, $color5);
  }
  20%  {
    text-shadow: makelongshadow($color2, $color3, $color4, $color5, $color);
  }
  40%  {
    text-shadow: makelongshadow($color3, $color4, $color5, $color, $color2);
  }
  60% {
    text-shadow: makelongshadow($color4, $color5, $color, $color2, $color3);
  }
  80% {
    text-shadow: makelongshadow($color5, $color, $color2, $color3, $color4);
  }
  100% {
    text-shadow: makelongshadow($color, $color2, $color3, $color4, $color5);
  }
}


div {
	padding : 40px;
	overflow:hidden;
	margin: 0px auto;
	width: 50vw;
	font-weight: 600;
	line-height: 0.8;
	font-size: 60px;
	text-align: left;
	font-size: 3rem;
	color: #EDEEE9;
	font-family: 'Georgia';
	text-shadow: makelongshadow($color, $color2, $color3, $color4, $color5);
  animation-name: animateShadow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.