/* Google font */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap");
html {
  background: #ffffff;
}

.titz {
  width: 500px;
  height: auto;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.titzhead h1 {
  font: 400 100px "Oswald", sans-serif;
  width: 100%;
  margin-left: -15px;
  position: relative;
  overflow: hidden;
  color: transparent;
  /* replace mix() with rgba red shadow */
  text-shadow: 0 0 3px #000000, 5px 5px 2px teal, -5px -2px 2px rgba(255, 255, 255, 0.5);
  transform: skewX(0);
  animation: shift 4s ease-in-out infinite alternate;
}

@keyframes shift {
  0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
    transform: skewX(0);
  }
  41% {
    transform: skewX(10deg);
  }
  42% {
    transform: skewX(-10deg);
  }
  59% {
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    transform: skewX(10deg) skewY(-10deg);
  }
}