/* General Body Styling */
#space {
  background-color: black;
	background-size: cover;
  background-position: center;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;   /* reduces overlap with nav/footer */
  padding: 1rem;      /* small padding so content doesn’t touch edges */
}

.system {
  width: 90vw;           /* use viewport width */
  max-width: 700px;      /* limit max size */
  height: auto;
  aspect-ratio: 1/1;     /* keep square */
  position: relative;
	margin-top: 5%;
}

/* Moon orbit container fills system */
.orbit {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  animation: orbit 5s linear infinite;
}

/* Earth centered inside system */
.earth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;      /* relative to system size */
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-image: radial-gradient(var(--accent-color-dteal) 45%, blue);
}

/* Moon size relative to system */
.moon {
  position: absolute;
  top: -2%;        /* relative positioning */
  left: 50%;
  transform: translateX(-50%);
  width: 4%;
  aspect-ratio: 1/1;
  background-color: grey;
  border-radius: 50%;
  box-shadow: 0 4px 7px var(--accent-color-brown);
}

/* Orbit rotation animation */
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

/* Tiny squirrel peeking over Earth */
.earth::after {
  content: "";
  position: absolute;
  top: -19%;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='3 -4 64 64' role='img' aria-label='Squirrel icon'>\
  <circle cx='42' cy='30' r='18' fill='%23C68642'/>\
  <ellipse cx='28' cy='36' rx='12' ry='14' fill='%238D5524'/>\
  <circle cx='24' cy='20' r='10' fill='%238D5524'/>\
  <circle cx='27' cy='10' r='4' fill='%238D5524'/>\
  <circle cx='22' cy='17' r='2' fill='%23000'/>\
  <circle cx='16' cy='22' r='1.5' fill='%23000'/>\
  <circle cx='20' cy='44' r='5' fill='%238D5524'/>\
</svg>");

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}

@media (max-width: 576px) {
	.earth::after {
  width: .8rem;
  height: .8rem;
}