:root {
  --color-lightblue: #9bd3ed;
  --color-blue:  #00ffff;
  --color-darkblue: #008e8e;
  --color-orange:    #ff6600;
  --color-yellow:    #e8d843;
  --color-white:     #ffffff;
  --color-black:     #000000;
}

.neon-blue {
  color: var(--color-blue);
  text-shadow:
    0 0 2px var(--color-white),
    0 0 8px var(--color-blue);
}

.neon-orange {
  color: var(--color-orange);
  text-shadow:
    0 0 2px var(--color-orange),
    0 0 16px var(--color-orange);
}

.neon-yellow {
  color: var(--color-yellow);
  text-shadow:    
    0 0 2px var(--color-yellow),
    0 0 16px var(--color-yellow);
}

/* .neon-white {
  color: var(--color-blue);
  text-shadow:
    0 0 2px var(--color-white),
    0 0 8px var(--color-blue);
} */

.neon-black {
  color: var(--color-black);
  text-shadow:
    0 0 2px var(--color-black),
    0 0 16px var(--color-black);
}

.soft-blue {
  color: var(--color-lightblue);
}

.neon {
  transition: all 0.3s ease-in-out;
}

.glow-on-hover:hover {
  filter: brightness(1.5);
}

.glow-smooth {
  animation: glowPulse 2s ease-in-out infinite;
}

.hamburger.neon-white span {
    box-shadow:
    0 0 6px var(--color-blue),
    0 0 8px var(--color-white);
}

.hamburger.open.neon-blue span {
    box-shadow:
    0 0 6px var(--color-blue);
}

.top-nav a:hover {
  text-shadow:
    0 0 5px var(--color-blue);
    transition: all 0.3s ease-in-out;
}

@keyframes glowPulse {
  0%, 100% {
    text-shadow:
      0 0 4px currentColor,
      0 0 10px currentColor;
  }
  50% {
    text-shadow:
      0 0 10px currentColor,
      0 0 20px currentColor;
  }
}