/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Navigation Bar with Glow */
nav.topnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #00008B; /* Dark Blue */
  overflow: hidden;
  z-index: 10;
  padding: 0.5rem 1rem;
  box-shadow: 0 0 10px #00ffff; /* Cyan glow around nav bar */
}

/* Navigation Links with Glow */
nav.topnav a {
  float: left;
  color: cyan;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: monospace;
  font-size: 18px;
  text-shadow: 0 0 5px cyan; /* Subtle glow around text */
}

/* Hover effect */
nav.topnav a:hover {
  background-color: #333333;
  color: red;
  text-shadow: 0 0 8px red; /* Glow turns red on hover */
}
@keyframes softGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 6px #00ffff,
      0 0 12px #00ffff,
      0 0 18px #00ffff;
    opacity: 1;
  }
  50% {
    text-shadow:
      0 0 10px #00ffff,
      0 0 20px #00ffff,
      0 0 30px #00ffff;
    opacity: 0.85; /* Slightly dimmer, never fully faded */
  }
}

ul {
  display: table;
  margin: 0 auto;
}

body {
  background-color: black;
  color: cyan;
  font-family: Tahoma;
   text-shadow: 0 0 3px #00ffff;
   
}
a:link {
  color: #00FFFF; /* Neon cyan */
}

a:visited {
  color: #39FF14; /* Neon green */
}

a:hover {
  color: #1E90FF; /* Neon blue (Dodger Blue) */
}

a:active {
  color: #FF0000; /* Bright red */
}
h1, h2 {
  animation: softGlowPulse 8s ease-in-out infinite;
  color: #00ffff; /* Neon cyan */
}
.content {
  padding-top: 70px; /* Adjust as needed */
}
.center {
  text-align: center;
}
.video-wrapper {
  text-align: center;
  margin-bottom: 1.5rem; /* space between videos */
  margin: 20px auto;
  padding: 15px;
  background-color: rgba(0, 0, 64, 0.8); /* dark blue semi-transparent */
  border: 2px solid cyan;
  border-radius: 12px;
  box-shadow: 0 0 10px cyan;
  max-width: 600px;
}
.video-wrapper iframe {
  display: inline-block;
}
.music-page {
  background-image: url('/musicpagebackground.png'); /* Replace with actual path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.videos-page {
  background-image: url('videosbackground.png');
  background-repeat: repeat;
  background-size: auto;
  animation: scrollBackground 20s linear infinite;
}

/* Define the animation */
@keyframes scrollBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1000px 0; /* move right; adjust as needed */
  }
}

.text-box {
  background-color: rgba(0, 0, 51, 0.85);
  color: white;
  padding: 1rem;
  margin: 1.5rem auto;
  border-radius: 10px;
  max-width: 800px;
  border: 2px solid cyan;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
  animation: glowPulse 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
    border-color: cyan;
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 255, 255, 1);
    border-color: #00ffff;
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
    border-color: cyan;
  }
}

.about-page {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  background: black; /* fallback background */
}

#rain-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background: black;
}