body {
  margin: unset;
  text-align: center;
  padding: 10vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #000;
  color: #FFF;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

h1 {
  font-family: "Articulat CF", sans-serif;
  font-weight: 800;
  font-size: 6rem;
  -webkit-animation: zoom 1580ms forwards 1;
          animation: zoom 1580ms forwards 1;
}
h1 span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  -webkit-animation: reveal 620ms forwards 1;
          animation: reveal 620ms forwards 1;
  opacity: 0;
}
h1 span:nth-of-type(1) {
  -webkit-animation-delay: 260ms;
          animation-delay: 260ms;
}
h1 span:nth-of-type(2) {
  -webkit-animation-delay: 340ms;
          animation-delay: 340ms;
}
h1 span:nth-of-type(3) {
  -webkit-animation-delay: 420ms;
          animation-delay: 420ms;
}
h1 span:nth-of-type(4) {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}
h1 span:nth-of-type(5) {
  -webkit-animation-delay: 580ms;
          animation-delay: 580ms;
}
h1 span:nth-of-type(6) {
  -webkit-animation-delay: 660ms;
          animation-delay: 660ms;
}
h1 span:nth-of-type(7) {
  -webkit-animation-delay: 740ms;
          animation-delay: 740ms;
}
h1 span:nth-of-type(8) {
  -webkit-animation-delay: 820ms;
          animation-delay: 820ms;
}
h1 span:nth-of-type(9) {
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}
h1 span:nth-of-type(10) {
  -webkit-animation-delay: 980ms;
          animation-delay: 980ms;
}

@-webkit-keyframes reveal {
  0% {
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom {
  0% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.creative {
  background-image: linear-gradient(45deg, #01E3BE, #007FDE);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}