body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: black;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: 'Courier New', Courier, monospace;
}

.glitch-container {
  z-index: 10;
}

.glitch {
  color: white;
  font-size: 3em;
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 red;
  animation: glitch 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 blue;
  animation: glitch 3s infinite linear alternate-reverse;
}

@keyframes glitch {
  0% {
    clip: rect(0, 900px, 0, 0);
  }
  5% {
    clip: rect(10px, 900px, 40px, 0);
  }
  10% {
    clip: rect(80px, 900px, 100px, 0);
  }
  15% {
    clip: rect(30px, 900px, 60px, 0);
  }
  20% {
    clip: rect(0, 900px, 0, 0);
  }
}

#stars, #stars2, #stars3 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent url('https://raw.githubusercontent.com/JulianLaval/canvas-particle-network/master/img/stars.png') repeat top center;
  z-index: 0;
  animation: moveStars 100s linear infinite;
}

#stars2 {
  background-size: contain;
  animation: moveStars 150s linear infinite;
  opacity: 0.5;
}

#stars3 {
  background-size: contain;
  animation: moveStars 200s linear infinite;
  opacity: 0.2;
}

@keyframes moveStars {
  from {background-position: 0 0;}
  to {background-position: -10000px 5000px;}
}