/* ===================
   Kooky CSS Theme
   =================== */

/* base color vars */
:root {
  --theme-bg: #0a001f;
  --theme-text: #000000;
  --theme-accent1: #ff0080;
  --theme-accent2: #00ffff;
  --theme-logo-glow: #ff00ff;
  --theme-shadow: rgba(255, 0, 255, 0.5);
}

/* body + base settings */
body {
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: 'Courier New', Courier, monospace;
  animation: bgPulse 8s infinite alternate;
}

/* big glowing header */
header {
  background: transparent;
  text-align: center;
  padding: 1.5em;
  font-size: 2rem;
  text-shadow:
    2px 2px var(--theme-accent1),
    -2px -2px var(--theme-accent2);
  animation: headerFlicker 4s infinite;
}

/* nav buttons go wild */
nav ul li a {
  background: var(--theme-accent1);
  padding: 0.6em 1.2em;
  border-radius: 8px;
  color: var(--theme-text);
  font-weight: bold;
  text-shadow: 1px 1px #000;
  transition: transform .2s, text-shadow .3s;
}
nav ul li a:hover {
  background: var(--theme-accent2);
  transform: scale(1.15) rotate(-3deg);
  text-shadow: 2px 2px #000;
}

/* theme text glitch effect */
@keyframes glitch {
  0%   { text-shadow: 2px 0 var(--theme-accent1); }
  25%  { text-shadow: -2px 2px var(--theme-accent2); }
  50%  { text-shadow: 2px -2px var(--theme-accent2); }
  75%  { text-shadow: -2px -2px var(--theme-accent1); }
  100% { text-shadow: 2px 2px var(--theme-accent1); }
}

/* main content boxes glow */
main, .box1, .box2 {
  backdrop-filter: blur(6px);
  border: 2px dashed var(--theme-accent2);
  padding: 1.2em;
  border-radius: 12px;
  box-shadow: 0px 0px 12px var(--theme-shadow);
}

/* footer with animated highlight */
footer {
  background: #13002c;
  padding: 1em;
  text-align: center;
  animation: footerGlow 6s infinite alternate;
}


/* color pulse backgrounds */
@keyframes bgPulse {
  0%   { background: #0a001f; }
  50%  { background: #1f0038; }
  100% { background: #0a001f; }
}

/* header flicker */
@keyframes headerFlicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* footer glow */
@keyframes footerGlow {
  0%   { box-shadow: 0 0 8px #00ffff; }
  100% { box-shadow: 0 0 18px #ff0080; }
}

.glitch {
    animation: glitch 3s infinite alternate;
}