/* ----------------- General Page Styles ----------------- */
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: 'Courier New', monospace;
  background: #000; color: #00FF66;
}

.container {
  max-width: 800px; padding: 20px; margin-top: 140px; z-index: 2; position: relative;
  text-align: center;
}

/* Headings */
h1 { font-size: 2.5em; margin-bottom: 0.3em; text-shadow: 0 0 10px #00FF66; animation: glow 2s infinite alternate; }
h2 { margin-top: 2em; text-shadow: 0 0 8px #00FF66; }
p { font-size: 1.1em; line-height: 1.5em; }

/* Buttons */
button {
  background-color: #00FF66; color: #000; border: none; border-radius: 5px;
  padding: 12px 25px; margin: 10px; font-size: 1em; cursor: pointer;
  box-shadow: 0 0 10px #00FF66; transition: all 0.2s ease;
}
button:hover { background-color: #00cc55; box-shadow: 0 0 15px #00cc55; }
a { color: #00FF66; text-decoration: none; }
a:hover { text-decoration: underline; }

footer { margin-top: 50px; font-size: 0.9em; opacity: 0.8; }

/* Rotating Banner */
.rotating-text {
  position: absolute; top: 40px; left: 50%;
  transform-style: preserve-3d; transform: translateX(-50%) rotateY(0deg);
  font-size: 1.3em; color: #00FF66;
  text-shadow: 0 0 10px #00FF66, 0 0 20px #00FF66;
  animation: spin 10s linear infinite; pointer-events: none;
  white-space: nowrap; opacity: 0.6; z-index: 2;
}

/* Canvas for Matrix Rain */
canvas#matrixRain {
  position: fixed; top:0; left:0; width:100%; height:100%; z-index:0;
  background:#000; opacity:0.5;
}

/* Animations */
@keyframes spin { 0% { transform: translateX(-50%) rotateY(0deg); } 100% { transform: translateX(-50%) rotateY(360deg); } }
@keyframes glow { from { text-shadow: 0 0 5px #00FF66; } to { text-shadow: 0 0 20px #00FF66, 0 0 30px #00FF66; } }