/* Cosmic background */
body {
  margin: 0;
  height: 100vh;
  background: black; <!-- radial-gradient(circle at top, #000010, #000000);-->
  overflow: hidden;
  color: #eee;
  font-family: 'Arial', sans-serif;
}

.banner img {
  width: 100%;
  height: 200px;     /* adjust as needed */
  object-fit: cover; /* keeps aspect ratio, fills space */
  display: block;
}

/* Nebula bands */
body::before, body::after, body::backdrop {
  content: "";
  position: fixed;
  top: -25%; left: -50%;
  width: 200%;
  height: 200%;
  transform: rotate(-25deg); /* diagonal disc */
  background-blend-mode: screen;
  z-index: -3;
}

/* First layer: magenta-cyan glow */
body::before {
  background:
    radial-gradient(ellipse at 40% 50%, rgba(255,0,150,0.25), transparent 70%),
    radial-gradient(ellipse at 60% 50%, rgba(0,200,255,0.2), transparent 65%);
  animation: drift1 120s linear infinite, morph 40s ease-in-out infinite alternate;
  z-index: -3;
}

/* Second layer: orange-blue */
body::after {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,150,0,0.15), transparent 70%),
    radial-gradient(ellipse at 70% 60%, rgba(100,100,255,0.2), transparent 65%);
  animation: drift2 160s linear infinite reverse, morph 50s ease-in-out infinite alternate;
  z-index: -4;
}

/* Third layer: faint purple-green */
body::before,
body::after,
body::backdrop {
  animation-fill-mode: both;
}
body::backdrop {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(180,0,255,0.1), transparent 75%),
    radial-gradient(ellipse at 55% 45%, rgba(0,255,150,0.1), transparent 75%);
  animation: drift3 200s linear infinite, morph 60s ease-in-out infinite alternate;
  z-index: -5;
}

/* Animations */
@keyframes drift1 {
  from { transform: rotate(-25deg) translate(0,0) scale(1); }
  to   { transform: rotate(-25deg) translate(-10%, -10%) scale(1.1); }
}
@keyframes drift2 {
  from { transform: rotate(-25deg) translate(0,0) scale(1); }
  to   { transform: rotate(-25deg) translate(15%, -15%) scale(1.2); }
}
@keyframes drift3 {
  from { transform: rotate(-25deg) translate(0,0) scale(1); }
  to   { transform: rotate(-25deg) translate(-20%, 10%) scale(1.3); }
}

/* Morphing colors */
@keyframes morph {
  0%   { filter: hue-rotate(0deg) brightness(1); opacity: 0.3; }
  50%  { filter: hue-rotate(60deg) brightness(1.2); opacity: 0.6; }
  100% { filter: hue-rotate(120deg) brightness(1); opacity: 0.3; }
}

/* Star container fills screen */
.stars {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

/* Each star positioned inside container */
.star {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 3s infinite;
}

/* Twinkle effect */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}


header {
  background: linear-gradient(to right, #000000, #111111);
  border-bottom: 2px solid #FFD700;
  padding: 1em;
  text-align: center;
}

h1 {
  font-family: 'Orbitron', sans-serif;
  color: #FFD700;
  letter-spacing: 2px;
}

nav a {
  color: #00FFFF;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #FFD700;
  text-shadow: 0 0 10px #FFD700;
}

main {
  padding: 2em;
}

.search-box {
  text-align: center;
  margin: 20px 0;
}
.search-box input {
  padding: 6px;
  width: 200px;
}
.search-box button {
  padding: 6px 10px;
}

footer {
  text-align: center;
  padding: 1em;
  border-top: 1px solid #FFD700;
  font-size: 0.9em;
}