html {
  background-color: black;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

a {
  font-size: 2rem;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  padding: 0 10px 0 10px;
}

a + a {
  border-left: 2px solid white;
}

a:hover {
  color: #00f3ff;
}

.glitch-wrap {
  position: relative;
  filter: blur(1px);
  animation: wobble 10s infinite;
  mix-blend-mode: screen;
}

.glitch {
  font-family: "Abril Fatface", serif;
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  position: relative;
  animation: glitch-main 3s infinite;
  z-index: 1;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(0, 243, 255, 0.4),
    0 0 40px rgba(255, 0, 60, 0.3);
}

@keyframes glitch-main {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-2px, 1px); opacity: 1; }
  94% { transform: translate(2px, -1px); opacity: 0; }
  96% { transform: translate(-1px, 2px); opacity: 1; }
  98% { transform: translate(1px, -2px); opacity: 0; }
}

@keyframes wobble {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(3px, -3px); }
  50%  { transform: translate(-3px, 3px); }
  75%  { transform: translate(3px, 3px); }
  100% { transform: translate(0, 0); }
}

#noise {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

#roots {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  opacity: 0.4;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .glitch, .glitch-wrap {
    animation: none;
  }
}