body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #030303; /* Almost pure black */
    color: #ffffff; /* White text */
    font-family: 'VT323', 'Courier New', Courier, monospace; /* Ensure base font is set */
    overflow: hidden; /* Prevent scrollbars as text fills screen */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stack text and nav link */
}

#chant-text-container {
    width: 90%;
    max-width: 1000px;
    height: 85vh;
    text-align: center;
    font-family: 'VT323', 'Courier New', Courier, monospace; /* Explicitly set font here too */
    font-size: 28px;
    line-height: 1.5;
    overflow-y: hidden; /* Crucial: Text will appear to scroll off top of this container */
    display: flex;
    flex-direction: column-reverse; /* New lines appear at bottom and push old ones up */
    box-sizing: border-box;
    padding: 10px; /* Some padding inside the container */
}

#chant-text-container span.chant-line { /* Add a class for individual lines */
    display: block; /* Make each line take full width and stack */
    width: 100%;    /* Ensure it takes full width for centering */
    font-family: 'VT323', 'Courier New', Courier, monospace; /* Ensure font for spans */
    margin-bottom: 10px;
    text-shadow:
        0 0 2px rgba(220, 220, 220, 0.3),
        0 0 5px rgba(200, 200, 200, 0.2),
        0 0 8px rgba(180, 180, 180, 0.1);
    animation:
        chantTransformGlitch 12s steps(1, end) infinite,
        chantTextShadowGlitch 9s linear infinite,
        chantBlink 15s linear infinite;
}


/* --- Glitch Animations for White Text --- */
@keyframes chantTransformGlitch {
  0%, 97% { transform: translate(0, 0) skewX(0deg); }
  97.5% { transform: translate(-2px, 1px) skewX(-1deg); }
  98%   { transform: translate(1px, -1px) skewX(0.5deg); }
  98.5% { transform: translate(0.5px, 0.5px) skewX(-0.25deg); }
  99%   { transform: translate(-1px, -0.5px) skewX(1deg); }
  100%  { transform: translate(0, 0) skewX(0deg); }
}

@keyframes chantTextShadowGlitch {
  0%, 95% {
    text-shadow: 0 0 2px rgba(220,220,220,0.3), 0 0 5px rgba(200,200,200,0.2), 0 0 8px rgba(180,180,180,0.1);
  }
  95.5% { text-shadow: 1px 1px 0px rgba(180,180,180,0.4), -1px -1px 0px rgba(100,100,100,0.3); }
  96.5% { text-shadow: -2px -1px 0px rgba(220,220,200,0.5), 1px 2px 0px rgba(80,80,80,0.4); }
  97.5% { text-shadow: 0 0 3px rgba(255,255,255,0.5), 0 0 7px rgba(230,230,230,0.4); }
  98.5% { text-shadow: 1px -1px 0px rgba(190,190,190,0.3), -1px 1px 0px rgba(120,120,120,0.2); }
  100%  { text-shadow: 0 0 2px rgba(220,220,220,0.3), 0 0 5px rgba(200,200,200,0.2), 0 0 8px rgba(180,180,180,0.1); }
}

@keyframes chantBlink {
  0%, 98% { opacity: 1; }
  98.5% { opacity: 0.2; }
  99% { opacity: 1; }
  99.5% { opacity: 0.1; }
  100% { opacity: 1; }
}


.main-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.main-nav a {
    color: #888; /* Adjusted for visibility on dark background */
    text-decoration: none;
    padding: 8px 15px;
    background-color: rgba(40,40,40,0.8);
    border: 1px solid #666;
    border-radius: 3px;
}
.main-nav a:hover {
    color: #fff;
    background-color: rgba(60,60,60,0.9);
}