@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #0d0f17;
  color: #00ffea;
  font-family: 'Roboto Mono', monospace;
}
.container {
  position: relative;
  z-index: 2;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.glitch {
  font-size: 4rem;
  position: relative;
  color: #00ffea;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
}
.glitch::before {
  animation: glitchTop 2s infinite linear alternate-reverse;
  clip: rect(0, 900px, 0, 0);
}
.glitch::after {
  animation: glitchBottom 3s infinite linear alternate-reverse;
  clip: rect(0, 900px, 0, 0);
}
@keyframes glitchTop {
  0% { clip: rect(2px, 9999px, 44px, 0); transform: translate(-2px, -2px); }
  20% { clip: rect(85px, 9999px, 140px, 0); transform: translate(2px, 2px); }
  40% { clip: rect(20px, 9999px, 80px, 0); transform: translate(-2px, 0); }
  60% { clip: rect(5px, 9999px, 120px, 0); transform: translate(0, 2px); }
  80% { clip: rect(60px, 9999px, 100px, 0); transform: translate(2px, -2px); }
  100% { clip: rect(10px, 9999px, 150px, 0); transform: translate(-2px, 0); }
}
@keyframes glitchBottom {
  0% { clip: rect(10px, 9999px, 80px, 0); transform: translate(2px, 0); }
  20% { clip: rect(30px, 9999px, 140px, 0); transform: translate(-2px, 2px); }
  40% { clip: rect(40px, 9999px, 90px, 0); transform: translate(2px, -2px); }
  60% { clip: rect(80px, 9999px, 120px, 0); transform: translate(-2px, 2px); }
  80% { clip: rect(15px, 9999px, 60px, 0); transform: translate(0, -2px); }
  100% { clip: rect(45px, 9999px, 150px, 0); transform: translate(2px, 0); }
}

.tagline {
  margin-top: 1rem;
  font-size: 1.2rem;
  opacity: 0.8;
}

.gauntlet-image-button {
  margin-top: 2rem;
  width: 400px;
  height: 100px;
  cursor: pointer;
}

.gun {
  position: absolute;
  top: -5vh;
  user-select: none;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
  }
}