@import url('css.css');
html,
body,
h1 {
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}
#app {
  background: #0a0a0a;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(10, 10, 10, 0.6), rgba(0, 0, 0, 0.9)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px),
    url('../images/IhaveMoneyYouDont.gif');
  background-size: cover;
  background-position: center;
  z-index: 1;
}
#wrapper {
  text-align: center;
}
.sub {
  color: #64dcdc;
  letter-spacing: 1em;
}
/* Our mixin positions a copy of our text directly on our existing text, while also setting content to the appropriate text set in the data-text attribute. */
.glitch {
  position: relative;
  color: white;
  font-size: 4.6em;
  letter-spacing: 0.5em;
  /* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
  animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  pointer-events: none;
  z-index: 2;
  /* Use clip-path in percentages so the glitch scales with font-size */
  -webkit-clip-path: inset(30% 0% 40% 0%);
  clip-path: inset(30% 0% 40% 0%);
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  pointer-events: none;
  z-index: 1;
  -webkit-clip-path: inset(25% 0% 50% 0%);
  clip-path: inset(25% 0% 50% 0%);
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}
/* Creates an animation with 20 steaps. For each step, it calculates a percentage for the specific step. It then generates a random clip box to be used for the random glitch effect. Also adds a very subtle skew to change the 'thickness' of the glitch.*/
@keyframes glitch-anim {
  0% { clip-path: inset(28% 0% 40% 0%); transform: skew(0.84deg); }
  5% { clip-path: inset(6% 0% 56% 0%); transform: skew(0.8deg); }
  10% { clip-path: inset(14% 0% 48% 0%); transform: skew(0.92deg); }
  15% { clip-path: inset(22% 0% 36% 0%); transform: skew(0.32deg); }
  20% { clip-path: inset(45% 0% 20% 0%); transform: skew(0.26deg); }
  25% { clip-path: inset(8% 0% 64% 0%); transform: skew(0.77deg); }
  30% { clip-path: inset(30% 0% 6% 0%); transform: skew(0.72deg); }
  35% { clip-path: inset(10% 0% 74% 0%); transform: skew(0.08deg); }
  40% { clip-path: inset(52% 0% 12% 0%); transform: skew(0.76deg); }
  45% { clip-path: inset(35% 0% 38% 0%); transform: skew(0.92deg); }
  50% { clip-path: inset(12% 0% 26% 0%); transform: skew(0.77deg); }
  55% { clip-path: inset(44% 0% 12% 0%); transform: skew(0.1deg); }
  60% { clip-path: inset(48% 0% 12% 0%); transform: skew(0.89deg); }
  65% { clip-path: inset(16% 0% 36% 0%); transform: skew(0.16deg); }
  70% { clip-path: inset(18% 0% 46% 0%); transform: skew(0.81deg); }
  75% { clip-path: inset(40% 0% 52% 0%); transform: skew(0.48deg); }
  80% { clip-path: inset(46% 0% 30% 0%); transform: skew(0.15deg); }
  85% { clip-path: inset(34% 0% 38% 0%); transform: skew(0.42deg); }
  90% { clip-path: inset(28% 0% 52% 0%); transform: skew(0.18deg); }
  95% { clip-path: inset(28% 0% 56% 0%); transform: skew(0.58deg); }
  100% { clip-path: inset(42% 0% 26% 0%); transform: skew(0.36deg); }
}
@keyframes glitch-anim2 {
  0% { clip-path: inset(22% 0% 14% 0%); transform: skew(0.74deg); }
  5% { clip-path: inset(4% 0% 72% 0%); transform: skew(0.91deg); }
  10% { clip-path: inset(24% 0% 26% 0%); transform: skew(0.72deg); }
  15% { clip-path: inset(12% 0% 58% 0%); transform: skew(0.89deg); }
  20% { clip-path: inset(10% 0% 78% 0%); transform: skew(0.44deg); }
  25% { clip-path: inset(36% 0% 28% 0%); transform: skew(0.63deg); }
  30% { clip-path: inset(28% 0% 20% 0%); transform: skew(0.39deg); }
  35% { clip-path: inset(18% 0% 80% 0%); transform: skew(0.56deg); }
  40% { clip-path: inset(16% 0% 40% 0%); transform: skew(0.03deg); }
  45% { clip-path: inset(48% 0% 24% 0%); transform: skew(0.43deg); }
  50% { clip-path: inset(34% 0% 50% 0%); transform: skew(0.28deg); }
  55% { clip-path: inset(20% 0% 72% 0%); transform: skew(0.25deg); }
  60% { clip-path: inset(58% 0% 26% 0%); transform: skew(0.55deg); }
  65% { clip-path: inset(68% 0% 6% 0%); transform: skew(0.35deg); }
  70% { clip-path: inset(38% 0% 44% 0%); transform: skew(0.98deg); }
  75% { clip-path: inset(36% 0% 28% 0%); transform: skew(0.75deg); }
  80% { clip-path: inset(2% 0% 24% 0%); transform: skew(0.02deg); }
  85% { clip-path: inset(72% 0% 10% 0%); transform: skew(0.94deg); }
  90% { clip-path: inset(8% 0% 6% 0%); transform: skew(0.84deg); }
  95% { clip-path: inset(38% 0% 28% 0%); transform: skew(0.12deg); }
  100% { clip-path: inset(4% 0% 78% 0%); transform: skew(0.03deg); }
}
@keyframes glitch-skew {
  0% {
    transform: skew(-2deg);
  }
  10% {
    transform: skew(0deg);
  }
  20% {
    transform: skew(-3deg);
  }
  30% {
    transform: skew(5deg);
  }
  40% {
    transform: skew(4deg);
  }
  50% {
    transform: skew(-4deg);
  }
  60% {
    transform: skew(-2deg);
  }
  70% {
    transform: skew(2deg);
  }
  80% {
    transform: skew(1deg);
  }
  90% {
    transform: skew(2deg);
  }
  100% {
    transform: skew(0deg);
  }
}