.wrapper h1.glitch::after,
.wrapper h1.glitch::before {
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: reverse-alternate;
}
* {
  margin: 0;
  padding: 0;
}
body,
html {
  width: 100%;
  height: 100%;
  background-color: #000;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.wrapper h1.glitch {
  font-family: Inconsolata, monospace;
  font-size: 120px;
  font-weight: 900;
  font-optical-sizing: auto;
  letter-spacing: 8px;
  position: relative;
  color: #adadad;
  text-align: center;
}
.wrapper h1.glitch::after,
.wrapper h1.glitch::before {
  color: #adadad;
  content: "Coming Soon";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  top: 0;
}
.wrapper h1.glitch::before {
  left: 3px;
  text-shadow: -2px 0 red;
  animation-name: glitch-animation-1;
}
.wrapper h1.glitch::after {
  left: -3px;
  text-shadow: -2px 0 #00f;
  animation-name: glitch-animation-2;
}
@keyframes glitch-animation-1 {
  0% {
    clip: rect(82px, 860px, 27px, 0);
  }
  5% {
    clip: rect(2px, 860px, 84px, 0);
  }
  10% {
    clip: rect(15px, 860px, 86px, 0);
  }
  15% {
    clip: rect(139px, 860px, 2px, 0);
  }
  20% {
    clip: rect(41px, 860px, 132px, 0);
  }
  25% {
    clip: rect(96px, 860px, 93px, 0);
  }
  30% {
    clip: rect(95px, 860px, 102px, 0);
  }
  35% {
    clip: rect(61px, 860px, 115px, 0);
  }
  40% {
    clip: rect(112px, 860px, 115px, 0);
  }
  45% {
    clip: rect(69px, 860px, 120px, 0);
  }
  50% {
    clip: rect(128px, 860px, 116px, 0);
  }
  55% {
    clip: rect(134px, 860px, 138px, 0);
  }
  60% {
    clip: rect(5px, 860px, 133px, 0);
  }
  65% {
    clip: rect(43px, 860px, 17px, 0);
  }
  70% {
    clip: rect(145px, 860px, 21px, 0);
  }
  75% {
    clip: rect(75px, 860px, 92px, 0);
  }
  80% {
    clip: rect(123px, 860px, 9px, 0);
  }
  85% {
    clip: rect(14px, 860px, 56px, 0);
  }
  90% {
    clip: rect(60px, 860px, 39px, 0);
  }
  95% {
    clip: rect(104px, 860px, 106px, 0);
  }
  100% {
    clip: rect(134px, 860px, 3px, 0);
  }
}
@keyframes glitch-animation-2 {
  0% {
    clip: rect(116px, 860px, 65px, 0);
  }
  5% {
    clip: rect(127px, 860px, 149px, 0);
  }
  10% {
    clip: rect(31px, 860px, 112px, 0);
  }
  15% {
    clip: rect(147px, 860px, 64px, 0);
  }
  20% {
    clip: rect(96px, 860px, 49px, 0);
  }
  25% {
    clip: rect(109px, 860px, 118px, 0);
  }
  30% {
    clip: rect(81px, 860px, 78px, 0);
  }
  35% {
    clip: rect(144px, 860px, 10px, 0);
  }
  40% {
    clip: rect(23px, 860px, 7px, 0);
  }
  45% {
    clip: rect(128px, 860px, 145px, 0);
  }
  50% {
    clip: rect(70px, 860px, 103px, 0);
  }
  55% {
    clip: rect(30px, 860px, 134px, 0);
  }
  60% {
    clip: rect(86px, 860px, 65px, 0);
  }
  65% {
    clip: rect(63px, 860px, 106px, 0);
  }
  70% {
    clip: rect(11px, 860px, 89px, 0);
  }
  75% {
    clip: rect(63px, 860px, 64px, 0);
  }
  80% {
    clip: rect(47px, 860px, 35px, 0);
  }
  85% {
    clip: rect(36px, 860px, 42px, 0);
  }
  90% {
    clip: rect(110px, 860px, 26px, 0);
  }
  95% {
    clip: rect(108px, 860px, 46px, 0);
  }
  100% {
    clip: rect(83px, 860px, 68px, 0);
  }
}
