<div class="relative">
  <div class="bg"> </div>
  <div class="absolute">
    <div class="text">
      <h1> contrast </h1>
      <h3> is <span class="white-text"> really </span> important </h3>
    </div>
  </div>
</div>

body,
h1,
h3 {
  margin: 0;
  font-family: sans-serif;
  font-weight: 300;
  color: #4f4f4f;
  margin: 0;
  mix-blend-mode: color-dodge;
}

h1 {
  font-size: 8rem;
  line-height: 100%;
}

h3 {
  font-size: 2rem;
  line-height: 100%;
}

.text {
  width: 400px;
  margin: 15% 30%;
}

.relative {
  position: relative;
}

.white-text {
  color: white;
}

.absolute {
  z-index: 100;
  position: absolute;
  width: 100vw;
  height: 100vw;
  top: 0rem;
}

.bg {
  z-index: -10;
  background-color: #333333;
  height: 100vh;
  max-width: 20px;
  animation: x 3s ease-in 1s infinite alternate;
}

@keyframes x {
  100% {
    max-width: 100vw;
  }
}

function chageWord() {
  let word = document.getElementsByTagName("span");
  console.log(word);
  let words = ["extra", "super", "really", "extra", "so"];
  word[0].innerHTML = words[Math.floor(Math.random() * words.length)];
}

function run() {
  let timer;
  timer = setInterval(function () {
    chageWord();
  }, 4000);
}

run();