/* 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." */

body {
  margin: 0;
  font-family: "Comic Sans MS", cursive;
  background: black;
  overflow: hidden;
}

/* 🌌 Stars */
.stars {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("https://www.transparenttextures.com/patterns/stardust.png");
  animation: moveStars 60s linear infinite;
  z-index: -1;
}

@keyframes moveStars {
  from { background-position: 0 0; }
  to { background-position: 1000px 1000px; }
}

/* 🪟 Base window */
.window {
  position: absolute;
  width: 260px;
  border: 2px solid black;
  box-shadow: 4px 4px black;
}

/* 🏠 MAIN HUB (fixed center) */
.main-window {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  z-index: 999;
  animation: floatStation 4s ease-in-out infinite;
}

@keyframes floatStation {
  0% {
    transform: translate(-50%, -50%) translateY(0px);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-12px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
}

/* 🛰️ SPACE STATIONS */
.station {
  background: #1a1a2e;
  border: 2px solid #00ffff;
  box-shadow: 0 0 10px cyan, 4px 4px black;
}

/* 🟦 Title bar */
.title-bar {
  background: linear-gradient(to right, #000080, #1084d0);
  color: white;
  padding: 4px;
  cursor: grab;
  font-size: 14px;
}

/* 🚫 Disable dragging cursor on main */
.main-window .title-bar {
  cursor: default;
}

/* 🧩 Content (space panels) */
.content {
  padding: 10px;
}

/* 🌈 MAIN WINDOW = chaos rainbow */
.main-window .content {
  background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);
  background-size: 400%;
  animation: rainbow 8s infinite alternate;
  color: black;
}

/* 🛰️ STATION CONTENT = sci-fi panels */
.station .content {
  background:
    linear-gradient(#0f3460 2px, transparent 2px),
    linear-gradient(90deg, #0f3460 2px, transparent 2px),
    #16213e;
  background-size: 20px 20px;
  color: #00ffff;
  font-family: monospace;
}

/* ✨ Glow text */
.station h3, .station p {
  text-shadow: 0 0 5px cyan;
}

/* 🌈 Animation */
@keyframes rainbow {
  0% { background-position: left; }
  100% { background-position: right; }
}

/* 🎮 Buttons */
button {
  background: #0f3460;
  border: 2px solid cyan;
  color: cyan;
  cursor: pointer;
}

button:hover {
  background: cyan;
  color: black;
}

/* 🔗 Links */
a {
  color: #00ffff;
  text-decoration: none;
}

a:hover {
  text-shadow: 0 0 5px cyan;
}

.asteroid {
  position: fixed;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #888, #333);
  border-radius: 50%;
  box-shadow: 0 0 5px #aaa;
  cursor: pointer;
  z-index: 0;
}

.explosion {
  position: fixed;
  width: 6px;
  height: 6px;
  background: orange;
  border-radius: 50%;
  pointer-events: none;
  animation: explode 0.6s forwards;
}

@keyframes explode {
  to {
    transform: scale(4);
    opacity: 0;
  }
}