/* CSS Variables */
:root {
  --primary-blue: #002FA7;
  --white: #ffffff;
  --light-gray: #cccccc;
  --medium-gray: #c0c0c0;
  --font-primary: 'DraftingMono', monospace;
  --font-display: 'Gnomon', serif;
  --border-width: 8px;
  --glow-white: rgba(255, 255, 255, 0.55);
  --glow-blue: rgba(0, 85, 170, 0.55);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--primary-blue);
  font-family: var(--font-primary);
  min-height: 100vh;
  position: relative;
}


/* Animation Keyframes */

@keyframes neonPulse {
  0% {
    text-shadow: 
      0 0 5px var(--glow-white),
      0 0 10px var(--glow-white),
      0 0 15px var(--glow-white),
      0 0 20px var(--glow-blue),
      0 0 25px var(--glow-blue),
      0 0 30px var(--glow-blue),
      0 0 35px var(--glow-blue),
      3px 3px 0px #000080,
      6px 6px 0px #000060,
      9px 9px 0px #000040,
      12px 12px 0px #000030,
      15px 15px 0px #000020,
      18px 18px 0px #000010;
    filter: brightness(1);
  }
  100% {
    text-shadow: 
      0 0 8px var(--glow-white),
      0 0 12px var(--glow-white),
      0 0 18px var(--glow-white),
      0 0 22px var(--glow-blue),
      0 0 28px var(--glow-blue),
      0 0 32px var(--glow-blue),
      0 0 38px var(--glow-blue),
      0 0 42px rgba(0, 68, 153, 0.55),
      3px 3px 0px #000080,
      6px 6px 0px #000060,
      9px 9px 0px #000040,
      12px 12px 0px #000030,
      15px 15px 0px #000020,
      18px 18px 0px #000010;
    filter: brightness(1.06);
  }
}

/* Mobile-optimized neon pulse animations */
@keyframes neonPulseMobile {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.03);
  }
}

@keyframes neonPulseSmall {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.02);
  }
}

@keyframes diamondShimmer {
  0% {
    background-position: -100% 0;
    filter: brightness(1.3) contrast(1.2) hue-rotate(0deg);
  }
  25% {
    filter: brightness(1.5) contrast(1.4) hue-rotate(90deg);
  }
  50% {
    background-position: 200% 0;
    filter: brightness(1.8) contrast(1.6) hue-rotate(180deg);
  }
  75% {
    filter: brightness(1.5) contrast(1.4) hue-rotate(270deg);
  }
  100% {
    background-position: -100% 0;
    filter: brightness(1.3) contrast(1.2) hue-rotate(360deg);
  }
}