@import url("https://fonts.googleapis.com/css?family=Oswald:700");
html {
  height: 100%;
  display: flex;
}

body {
  margin: auto;
}

html {
  text-align: center;
  background: #2A363B;
  color: #FFF;
}

.text-overlap {
  font-family: 'Oswald', serif;
  font-weight: 700;
  font-size: 13vw;
  text-transform: uppercase;
}

.text-overlap.splitting .char {
  margin-right: -0.12em;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  animation: slide-in 2.5s cubic-bezier(0, 0.65, 0.29, 1) 0s both, fade-in 1.25s linear both;
  animation-delay: calc(1s + (0.5s * var(--distance-percent)));
}
@keyframes slide-in {
  0% {
    transform: translateX(1em);
    transform: translateX(calc(0.12em * var(--char-offset))) translateZ(0px);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.text-overlap.splitting b {
  display: inline-block;
  color: #CF4647;
  animation-name: slide-in-v, fade-in;
  animation-fill-mode: both;
  animation-delay: 1s;
  animation-duration: 1.75s, 1s;
  animation-timing-function: cubic-bezier(0, 0.7, 0.1, 1), linear;
}
@keyframes slide-in-v {
  0% {
    opacity: 0;
    transform: translateX(1em);
    transform: translateY(-50vh);
  }
}
.text-overlap.splitting b ~ * .char {
  z-index: calc(1 * (var(--char-total) - var(--char-index)));
}