body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-family: monospace;
  height: 100vh;
}

main {
  position: absolute;
  top: 20px;
  left: 20px;
  text-align: left;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 5px 0;
}

p {
  color: #333;
  margin: 0;
  font-size: 1rem;
}

/* subtle glitch animation */
.glitch-text,
.glitch-sub {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after,
.glitch-sub::before,
.glitch-sub::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.1;
}

@keyframes glitch {
  0%, 97%, 100% {
    transform: none;
    opacity: 1;
  }
  98% {
    transform: translate(1px, -1px) skewX(6deg);
    opacity: 0.7;
  }
  99% {
    transform: translate(-1px, 1px) skewX(-6deg);
    opacity: 0.7;
  }
}

/* timing for subtle flickers */
.glitch-text {
  animation: glitch 3s infinite;
}

.glitch-sub {
  animation: glitch 9s infinite;
}