<article class="c-article">
  <header class="c-article__header">
    <h1 class="c-article__title">
      What's better than text gradients?
      <br>
      <span class="u-font-lora">Animated text gradients.</span>
    </h1>
  </header>
</article>

// Colors
$page-background-color: #2F3C4F;
$gradient-color-1: #F57170;
$gradient-color-2: #10DDC2;

// Keyframes
@keyframes animationgradienttitle {
  0% {
      background-position: 0 1600px;
  }
  100% {
      background-position: 1600px 0;
  }
}

// Tag Selectors
body {
  background-color: $page-background-color;
}

h1 {
  margin: 0;
}

.c-article {
  margin-top: 10rem;
  text-align: center;
}

.c-article__header {
  position: relative;
}

.c-article__title {
  font-family: 'Scope One', serif;
  font-size: 3em;
  color: #fc3735;
  background: -webkit-linear-gradient(left, $gradient-color-1,$gradient-color-2 , $gradient-color-1);
  background-size: 1600px 200px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-duration: 3s;
  animation-name: animationgradienttitle;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.u-font-lora {
  font-family: 'Lora', serif;
  font-size: 1.5em;
  font-weight: 700;
}

// Inspiration from https://www.virginamerica.com/mobile ✈️