@font-face {
  font-family: "fit";
  src: url("https://assets.codepen.io/467/FitVariable-VF-Testing.woff2") format("woff2-variations");
  font-weight: 300;
}
html {
  font-family: fit;
  text-transform: uppercase;
  font-size: 22vw;
  line-height: 1;
  color: transparent;
  background: linear-gradient(-45deg, #e6c4b3, #f2ead9);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
}

h1 {
  font: inherit;
  margin: 0;
  display: flex;
  align-items: center;
}

span {
  mix-blend-mode: multiply;
  display: block;
  -webkit-animation: reveal 5s ease-in-out alternate infinite;
          animation: reveal 5s ease-in-out alternate infinite;
}

.one {
  background: linear-gradient(220deg, #0f8a8a, #14b8b8);
  -webkit-background-clip: text;
}

.two {
  background: linear-gradient(190deg, #cc2200, #ff9933);
  -webkit-background-clip: text;
}




/* mAchine */
.two:nth-child(4) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
/* maChine */
.one:nth-child(5) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.two:nth-child(5) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

.one:nth-child(6) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.two:nth-child(6) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

.one:nth-child(7) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.two:nth-child(7) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

.one:nth-child(8) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.two:nth-child(8) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

.one:nth-child(9) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.two:nth-child(9) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.one:nth-child(10) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}
/* zerO */
.two:nth-child(10) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

.one:nth-child(11) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.two:nth-child(11) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

.one:nth-child(12) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

.two:nth-child(12) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

@-webkit-keyframes reveal {
  0% {
    font-variation-settings: "wdth" 1;
    font-size: 0.8em;
  }
  100% {
    font-variation-settings: "wdth" 200;
    font-size: 1.2em;
  }
}

@keyframes reveal {
  0% {
    font-variation-settings: "wdth" 1;
    font-size: 0.8em;
  }
  100% {
    font-variation-settings: "wdth" 150;
    font-size: 1.2em;
  }
}