* {
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      margin: 0;
    font-family: 'Space Grotesk', sans-serif;
      background: #0b1525;
      color: white;
  }

  /* Custom text selection highlight */
  /* Blue selection for normal text */
  ::selection {
      background: cyan;
      color: #0b1525;
  }

  /* Purple selection for headings */
  h1::selection,
  h2::selection,
  h3::selection {
      background: #8957e5;
      color: white;
  }

  /* Parallax sections */
  .parallax {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      display: grid;
      place-items: center;
      isolation: isolate;
  }

  .parallax-bg {
      position: absolute;
      inset: -25% 0;
      z-index: -2;
      background-size: cover;
      background-position: center;
      transform: translate3d(0, 0, 0);
      will-change: transform;
  }

  .parallax::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 15, 35, 0.55);
      z-index: -1;
  }

  .content {
      text-align: center;
      max-width: 800px;
      padding: 2rem;
  }

  /* Main heading typography */
h1, h2, h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

  h1 {
   font-size: clamp(2.5rem, 6vw, 5rem);
    color: #ffffff;

    text-shadow:
        0 0 10px rgba(0, 150, 255, 0.5),
        0 0 30px rgba(0, 150, 255, 0.2);
  }

  /* Section headings */
h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: #75caff;
}

/* Smaller headings */
h3 {
    font-size: 1.4rem;
    color: #a5ddff;
}

  p {
      font-size: 1.25rem;
      line-height: 1.7;
      padding-bottom: 1rem;
  }

  /* Background photographs */
  #home .parallax-bg {
      background-image: url("imgs/virtues.jpg");
  }

  #about .parallax-bg {
      background-image: url("imgs/cat.jpg");
  }

  #projects .parallax-bg {
      background-image: url("imgs/flower2.jpg");
  }

  #contact .parallax-bg {
      background-image: url("imgs/pig.jpg");
  }

  /* Normal scrolling content */
  .info {
      padding: 5rem 2rem;
      text-align: center;
      background: #0b1525;
  }

  .info p {
      max-width: 750px;
      margin: auto;
  }
 
  img {
      max-width: 750px;
      width: 100%;

  }

  /* Navigation */

  /* Fixed navigation bar */
  nav {
      position: fixed !important;
      top: 0;
      left: 0;
      width: 100%;

      /* Always above parallax and fireflies */
      z-index: 99999 !important;

      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;

      padding: 1.25rem;

      /* Semi-transparent dark background */
      background: rgba(5, 15, 30, 0.85);

      /* Frosted glass effect */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Subtle bottom border */
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* Navigation links */
  nav a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;
  }

  nav a:hover {
      color: #65baff;
  }

  /* Keyboard accessibility */
  nav a:focus-visible {
      outline: 2px solid #65baff;
      outline-offset: 5px;
  }

  /* Prevent anchor targets hiding under navigation */
  section {
      scroll-margin-top: 80px;
  }


  /* ==========================================
   Modern Neon Blue Hyperlinks
   ========================================== */

  :root {
      --link-blue: #59baff;
      --link-hover: #b2e5ff;
      --link-glow: rgba(0, 170, 255, 0.45);
  }

  /* Standard hyperlinks */
  a {
      color: var(--link-blue);
      text-decoration: none;
      position: relative;
      transition:
          color 0.3s ease,
          text-shadow 0.3s ease;
  }

  /* Animated underline */
  a:not(nav a):not(.btn-link)::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;

      width: 0;
      height: 2px;

      background: linear-gradient(90deg,
              #008cff,
              #00ffff);

      border-radius: 2px;

      transition: width 0.3s ease;
  }

  /* Hover effect */
  a:not(nav a):not(.btn-link):hover {
      color: var(--link-hover);

      text-shadow:
          0 0 8px var(--link-glow),
          0 0 16px rgba(0, 170, 255, 0.2);
  }

  a:not(nav a):not(.btn-link):hover::after {
      width: 100%;
  }

  /* Keyboard accessibility */
  a:focus-visible {
      outline: 2px solid #59baff;
      outline-offset: 5px;
      border-radius: 3px;
  }

  /* Glowing button hyperlinks */
  .btn-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: 0.85rem 1.8rem;

      color: #a5ddff;
      font-weight: 600;

      background: rgba(0, 120, 255, 0.12);

      border: 1px solid rgba(0, 170, 255, 0.65);
      border-radius: 8px;

      box-shadow: 0 0 12px rgba(0, 170, 255, 0.1);

      transition:
          background 0.3s ease,
          box-shadow 0.3s ease,
          transform 0.3s ease;
  }

  .btn-link:hover {
      color: white;
      background: rgba(0, 140, 255, 0.25);

      box-shadow:
          0 0 15px rgba(0, 170, 255, 0.4),
          0 0 30px rgba(0, 170, 255, 0.15);

      transform: translateY(-3px);
  }

  /* Gradient text hyperlinks */
  .gradient-link {
      background: linear-gradient(90deg,
              #59baff,
              #a58bff,
              #00ffff);

      background-size: 200% auto;

      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;

      font-weight: 600;

      transition: background-position 0.4s ease;
  }

  .gradient-link:hover {
      background-position: right center;
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce) {

      a,
      a::after,
      .btn-link,
      .gradient-link {
          transition: none !important;
          transform: none !important;
      }

      html {
          scroll-behavior: auto;
      }

      .parallax-bg {
          transform: none !important;
          will-change: auto;
      }
  }

  /* Mobile adjustments */
@media (max-width: 600px) {
    h1, h2, h3 {
        letter-spacing: 0.02em;
        overflow-wrap: break-word;
    }
}