:root {
  --text-main: #f3f4ff;
  --text-muted: #c9cde8;
  --accent: #063a2d;
  --line-soft: rgba(243,244,255,0.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Spectral", Georgia, serif;
  color: var(--text-main);
  background: black;
  overflow-x: hidden;
}

/* STAR BG */
.space-bg{
  position:fixed;
  inset:0;
  background:url("images/stars.jpg") center/cover no-repeat;
  z-index:-2;
}

/* RIBBON */
.ribbon{
  position:fixed;
  top:0;
  width:100%;
  height:110px;
  padding:0 3rem;
  background:var(--accent);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
}

.ribbon a{
  color:white;
  text-decoration:none;
  margin-right:2rem;
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:0.08em;
}

.ribbon i{ font-size:1.4rem; }

/* HERO */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:10rem 6vw;
}

.hero-text{
  position:relative;
  z-index:2;
}

.hero-text h1{
  font-size:clamp(4rem,8vw,7rem);
  letter-spacing:0.12em;
}

/* PLANETS */
.planet{
  filter:drop-shadow(0 0 50px rgba(255,255,255,0.35));
}

.saturn{
  width:clamp(320px,38vw,520px);
  transform:rotate(-18deg);
}

.jupiter{
  width:clamp(300px,36vw,500px);
  margin:0 auto;
}

/* ABOUT */
.about{
  padding:6rem 20vw;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  text-align:center;
}

.about p{
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--text-muted);
}

/* LIBRARY */
.library{
  min-height:100vh;
  display:grid;
  align-content:center;
  gap:5rem;
  padding:6rem 6vw;
}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
}

.card{
  background:rgba(255,255,255,0.92);
  color:#000;
  padding:4rem 2rem;
  border-radius:22px;
  text-align:center;
  font-size:1.6rem;
  letter-spacing:0.12em;
  font-weight:700;
  text-decoration:none;
}

.card:nth-child(2){
  transform:translateY(80px);
}

/* FOOTER */
footer{
  background:#020b08;
  padding:5rem 2rem;
  text-align:center;
  margin-top:8rem;
}

footer p{
  color:#aab9b2;
  letter-spacing:0.08em;
}

/* MOBILE */
@media(max-width:900px){
  .hero{
    grid-template-columns:1fr;
    text-align:center;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .card:nth-child(2){
    transform:none;
  }

  .about{
    padding:4rem 8vw;
  }
}