/* latin */
@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/luckiestguy/v22/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --color1: #01579B;
  --color2: #00838F;
  --color3: #FFD600;
  --color4: #FF4081;
  --color5: #F44336;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



h1 {
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-family: "Luckiest Guy", cursive;
  font-size: 15vh;
  line-height: 100%;
  background:linear-gradient(225deg,
    var(--color1) 0%, var(--color1) 9%,
    transparent 9%, transparent 10%,
    var(--color2) 10%, var(--color2) 19%,
    transparent 19%, transparent 20%,
    var(--color3) 20%, var(--color3) 29%,
    transparent 29%, transparent 30%,
    var(--color4) 30%, var(--color4) 39%,
    transparent 39%, transparent 40%,
    var(--color5) 40%, var(--color5) 49%,
    transparent 49%, transparent 50%,
    var(--color1) 50%, var(--color1) 59%,
    transparent 59%, transparent 60%,
    var(--color2) 60%, var(--color2) 69%,
    transparent 69%, transparent 70%,
    var(--color3) 70%, var(--color3) 79%,
    transparent 79%, transparent 80%,
    var(--color4) 80%, var(--color4) 89%,
    transparent 89%, transparent 90%,
    var(--color5) 90%, var(--color5) 99%,
    transparent 99%
  );
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 200% 200%;
  color: transparent;
  animation: move 4s linear infinite;
}

@keyframes move {
  0%{
    background-position: 0px 100%;
  }
  100%{
    background-position: 100% 0px;
  }
}