body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(135deg, #ff00ff, #00e5ff, #39ff14); background-size: 400% 400%; animation: gradientShift 12s ease infinite; color: #111; } @keyframes gradientShift { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } nav { background: #000; padding: 10px; text-align: center; } nav a { color: #39ff14; margin: 0 10px; text-decoration: none; font-weight: bold; font-family: "Courier New", monospace; transition: all 0.3s ease; display: inline-block; } nav a:hover { transform: translateY(-3px) scale(1.1); color: #ff00ff; } .container { max-width: 900px; margin: 40px auto; background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); padding: 30px; border-radius: 20px; box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37); } h1, h2 { font-family: "Comic Sans MS", cursive; color: #ff00ff; text-shadow: 2px 2px #000; } .button { background: #000; color: #39ff14; padding: 10px 20px; border: 2px solid #39ff14; cursor: pointer; font-family: "Courier New", monospace; } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .photo-grid img { width: 100%; border: 3px solid #000; border-radius: 8px; }/* =============================== */
/*   ABOUT PAGE GLITCH EFFECTS     */
/* =============================== */

/* Glitching redacted text */
.about-page .redacted {
  position: relative;
  display: inline-block;
  background-color: #000;
  color: #000;
  padding: 0 4px;
  border-radius: 2px;
  overflow: hidden;
}

.about-page .redacted::before,
.about-page .redacted::after {
  content: "[REDACTED]";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  mix-blend-mode: difference;
  pointer-events: none;
  animation: aboutGlitch 2.5s infinite ease-in-out;
  color: #ff0000;
}

.about-page .redacted::after {
  animation-delay: 1.2s;
  color: #00ffff;
}

@keyframes aboutGlitch {
  0% { opacity: 0; transform: translate(0,0); }
  5% { opacity: 0.8; transform: translate(-2px, -1px); }
  7% { opacity: 0.3; transform: translate(3px, 2px); }
  9% { opacity: 0.8; transform: translate(-1px, 1px); }
  11% { opacity: 0; transform: translate(0,0); }
  100% { opacity: 0; }
}

/* Page-wide flicker (only About page) */
.about-page {
  animation: aboutFlicker 8s infinite;
}

@keyframes aboutFlicker {
  0%, 100% { filter: none; }
  10% { filter: contrast(1.1) brightness(1.05); }
  13% { filter: contrast(0.9) brightness(0.8); }
  14% { filter: none; }
  55% { filter: hue-rotate(2deg); }
  56% { filter: hue-rotate(-2deg); }
  57% { filter: none; }
  80% { filter: brightness(1.2); }
  82% { filter: none; }
}

/* Self-editing underline glitch */
.about-page .container p,
.about-page .container li,
.about-page .container h3,
.about-page .container h4 {
  position: relative;
}

.about-page .container p::after,
.about-page .container li::after,
.about-page .container h3::after,
.about-page .container h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: #000;
  animation: aboutTypingGlitch 12s infinite;
  opacity: 0.4;
}

@keyframes aboutTypingGlitch {
  0% { width: 0%; opacity: 0; }
  5% { width: 40%; opacity: 0.4; }
  7% { width: 10%; }
  9% { width: 60%; }
  11% { width: 0%; opacity: 0; }
  100% { width: 0%; opacity: 0; }
}

/* Occasional container jitter */
.about-page .container {
  animation: aboutJitter 14s infinite;
}

@keyframes aboutJitter {
  0%, 100% { transform: none; }
  3% { transform: translate(1px, -1px); }
  4% { transform: translate(-1px, 1px); }
  5% { transform: none; }
  50% { transform: none; }
  51% { transform: translate(-2px, 0); }
  52% { transform: translate(2px, 0); }
  53% { transform: none; }
}