body { background-color:black; }
* { xbackground-color:black; color:white; font-family:xxx avenir next, helvetica; font-weight:600; font-size:42px; box-model:border-box; text-align:center; padding:0; }
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch::before {
  /* variation */
  left: -1px;
  text-shadow: -1px 0 0 red;
  /* important: opaque background masks the original */
  background: black;
}
.glitch::after {
  /* ... anything needed to make it identical */

  /* variation */
  left: 1px;
  text-shadow: 1px 0 0 cyan;

  /* important: opaque background masks the original */
  background: black;
}
.glitch::before {
  x-clip: rect(44px, 450px, 56px, 0);
/*
  Essentially a box from 0, 44px to 450px, 56    px
*/
/* clip-path: inset(); needs how far you want to push in from the edges instead */
  }

@keyframes noise-anim-1 {
  0% { clip-path: inset(40% 0 51% 0); }
  10% { clip-path: inset(50% 0 45% 0); }
  20% { clip-path: inset(92% 0 1% 0); }
  20% { clip-path: inset(72% 0 20% 0); }
  40% { clip-path: inset(43% 0 1% 0); }
  60% { clip-path: inset(25% 0 58% 0); }
  80% { clip-path: inset(54% 0 7% 0); }
  100% { clip-path: inset(58% 0 43% 0); }
}
@keyframes noise-anim-2 {
  0% { clip-path: inset(70% 0 41% 0); }
  10% { clip-path: inset(70% 0 21% 0); }
  20% { clip-path: inset(2% 0 91% 0); }
  40% { clip-path: inset(3% 0 41% 0); }
  60% { clip-path: inset(45% 0 28% 0); }
  80% { clip-path: inset(4% 0 57% 0); }
  100% { clip-path: inset(48% 0 53% 0); }
}

/* @import: url(glitch-generated.css); */

.fx-frame {
  position:relative; display:block; margin:auto; width:30vh; height:30vh; background:black;
}

.fx0, .fx1, .fx1b, .fx2, .fx2b {
  display:inline-block;
  width:30vh;
  height:auto;
  position:absolute;
  top:0;
  left:0;
}

.fx1, .fx1b, .glitch::before { animation: noise-anim-1 1.5s infinite linear alternate-reverse; }
.fx2, .fx2b, .glitch::after { animation: noise-anim-2 0.7s infinite linear alternate-reverse; }

.fx1b { filter:drop-shadow(-2px 0 0 red); left:-1px; }
.fx2b { filter:drop-shadow(2px 0 0 cyan); left:1px; }

.fx1, .fx2 { background:black; } /* loses shadows */

.q2-logo { position:fixed; left:50vw; top:50vh; transform:translate(-50%,-55%); }