body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Orbitron', 'Audiowide', Arial, sans-serif;
  background: #101124 url('images/space-bg.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #f8f8ff;
  overflow-x: hidden;
}

/* If you use the blurred overlay effect (optional, can remove if not used in your HTML) */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: url('images/space-bg.jpg') center center/cover no-repeat;
  filter: blur(2px) brightness(0.7);
  z-index: 1;
  pointer-events: none;
}

/* Layout container for all content */
.container {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Logo at the top (centered) */
.site-logo, .logo {
  display: block;
  margin: 40px auto 30px auto;
  max-width: 240px;
  filter: drop-shadow(0 0 12px #18b6f6cc);
}

/* Title (main game title) */
.title {
  font-family: 'Orbitron', 'Audiowide', Arial, sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  color: #b5d8ff;
  text-shadow:
    0 0 18px #00bfff,
    0 0 24px #002244;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Subtitle ("A New Dawn Among the Stars") */
.subtitle {
  font-family: 'Orbitron', 'Audiowide', Arial, sans-serif;
  color: #34e7ff;
  text-align: center;
  font-size: 2rem;
  text-shadow:
    0 0 14px #3ee7ff,
    0 0 24px #193a56;
  margin-bottom: 2.5rem;
  letter-spacing: 0.1em;
}

/* Description/message */
.message {
  font-size: 1.25rem;
  color: #f7faff;
  text-align: center;
  margin-bottom: 2.2rem;
  text-shadow: 0 0 4px #002233;
}

/* Button row */
.buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 36px 0 24px 0;
}

/* Button style */
.button, .btn {
  padding: 14px 36px;
  border: 2px solid #18b6f6;
  border-radius: 32px;
  background: rgba(13, 31, 54, 0.7);
  color: #fff;
  font-family: 'Orbitron', 'Audiowide', Arial, sans-serif;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
  box-shadow: 0 0 16px #18b6f6a0;
  margin: 0 0.5em;
}

.button:hover, .button:focus,
.btn:hover, .btn:focus {
  background: #18b6f6;
  color: #0c0e18;
  box-shadow: 0 0 32px #18b6f6bb, 0 0 8px #18b6f6cc inset;
}

/* Copyright footer */
footer {
  margin-top: 28px;
  font-size: 0.95rem;
  opacity: 0.72;
  color: #89cdfc;
  text-align: center;
}

/* Responsive styles for mobile */
@media (max-width: 600px) {
  .title { font-size: 2.2rem; }
  .subtitle { font-size: 1.2rem; }
  .buttons { flex-direction: column; gap: 14px; }
  .button, .btn { width: 90%; max-width: 320px; }
}