/* 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." */
   
   /* Celestial Dusk — Galactic Railroad */

body {
  background: linear-gradient(180deg, 
    #0b0b2a 0%,        /* deep space */
    #1a1a4e 25%,       /* starry blue */
    #3a2a6a 45%,       /* lavender dusk */
    #e88a9a 70%,       /* soft pink sunset */
    #f7c9a4 85%,       /* warm peach */
    #fde8c8 100%       /* golden horizon */
  );
  color: #f0eaff;
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  text-align: center;
  padding: 2em;
  min-height: 100vh;
  margin: 0;
}

/* Glowing text that shifts with the sky */
h1 {
  font-size: 3.5rem;
  font-weight: 300;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #fff7e0, #ffd6e0, #c8b0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(255, 215, 200, 0.3);
  margin-bottom: 0.2em;
}

ul, ol {
  padding-left: 1.5em;
  list-style-position: inside;
}

/* Soft Frutiger Aero gloss */
.gloss {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 1.5em 2em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: inline-block;
  max-width: 700px;
  margin: 0 auto;
}

.bottom-gif {
  position: fixed;
  bottom: 0px;
  right: 20px;
  z-index: 999;
  width: 275px; /* adjust to your GIF's size */
  height: auto;
}

.scm-wrapper {
  position: fixed;
  left: 20px;
  bottom: 100px; /* above Castorice if she's there */
  z-index: 999;
  width: 280px;
}

#scm-container {
  position: fixed;
  left: 20px;
  bottom: 100px;
  z-index: 9999;
  width: 280px;
}


/* Sparkly stars (pure CSS) */
.star {
  position: fixed;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.star:nth-child(1) { top: 5%; left: 10%; animation-duration: 2.5s; }
.star:nth-child(2) { top: 8%; left: 30%; animation-duration: 4s; width: 4px; height: 4px; }
.star:nth-child(3) { top: 3%; left: 55%; animation-duration: 3.2s; }
.star:nth-child(4) { top: 12%; left: 75%; animation-duration: 2.8s; width: 5px; height: 5px; }
.star:nth-child(5) { top: 6%; left: 90%; animation-duration: 3.7s; }
.star:nth-child(6) { top: 15%; left: 20%; animation-duration: 4.2s; width: 2px; height: 2px; }
.star:nth-child(7) { top: 2%; left: 45%; animation-duration: 3s; width: 6px; height: 6px; }
.star:nth-child(8) { top: 18%; left: 65%; animation-duration: 2.2s; }

@keyframes twinkle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* Links with soft glow */
a {
  color: #ffd6c0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 215, 200, 0.3);
  transition: all 0.4s;
  font-weight: 300;
}

a:hover {
  color: #ffffff;
  text-shadow: 0 0 30px rgba(255, 215, 200, 0.6);
  border-bottom-color: #ffd6c0;
}

/* Subtle Frutiger Aero wave ornament */
.wave-divider {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 8px;
  margin: 0.5em 0;
}