body{
  padding: 0;
  margin: 0;
  background: black;
}

.select-board{
  padding: 2rem;
  box-sizing: border-box;
  text-align: center;
  
  user-select: none;
}
.select-planet{
  background: none;
  border: none;
  cursor: pointer;

  color: white;
  font-family: 'Trebuchet MS';
  font-size: larger;
  margin-left: 1rem;
  margin-right: 1rem;
  text-shadow: transparent 0 0 10px;

  transition-property: color, text-shadow;
  transition-duration: .5s;
}

.select-planet.current{
  color: #81c4ff;
  text-shadow: #81c4ff 0 0 10px;
}

.system{
  margin: 0;
  padding: 2rem;

  list-style: none;

  box-sizing: border-box;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  height: min(100vh, 100vw);
  aspect-ratio: 1 / 1;

  container-type: inline-size;

  display: grid;
  place-items: center;
}

.orbit, .sun{
  aspect-ratio: 1 / 1;
  grid-area: 1 / -1;
  
  border-radius: 50%;
}
.sun{
  width: 14cqi;
  background: linear-gradient(135deg, #ffcc33, #ff6600);
}
.orbit{
  width: var(--orbit-diameter);
  border: solid #ffffff80 3px;

  position: relative;
  animation: orbit linear calc(var(--speed) * 5s) infinite;
}
.planet{
  width: var(--planet-diameter);
  aspect-ratio: 1 / 1;

  border-radius: 50%;
  background: var(--color);

  position: absolute;
  left: 50%;
  translate: -50% -50%;

  animation: linear calc(var(--speed) * 5s) infinite;
}

.planet::after{
  content: '';
  
  border: solid transparent 3px;
  border-radius: 50%;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  height: 0;
  width: 0;

  transition-property: width, height;
  transition-duration: .5s;
}

.orbit.current .planet::after{
  height: 100%;
  width: 100%;
  padding: 1cqi;

  border-color: white;
}

@keyframes orbit{
  from{
    rotate: 0deg;
  }
  to{
    rotate: 360deg;
  }
}

#mercury{
  --orbit-diameter: 18cqi;
  --planet-diameter: 2cqi;
  --speed: .24;
  --color: linear-gradient(135deg, #b0b0b0, #6c6c6c);
}
#venus{
  --orbit-diameter: 26cqi;
  --planet-diameter: 4cqi;
  --speed: .61;
  --color: linear-gradient(135deg, #f8c471, #e59866, #d68910);
}
#earth{
  --orbit-diameter: 34cqi;
  --planet-diameter: 4cqi;
  --speed: 1;
  --color: linear-gradient(135deg, #1e90ff, #32cd32, #ffffff);
}
#mars{
  --orbit-diameter: 41cqi;
  --planet-diameter: 3cqi;
  --speed: 1.88;
  --color: linear-gradient(135deg, #ff7f50, #8b0000);
}
#jupiter{
  --orbit-diameter: 54cqi;
  --planet-diameter: 9cqi;
  --speed: 12;
  --color: linear-gradient(135deg, #d9a066, #8c5434);
}
#saturn{
  --orbit-diameter: 70cqi;
  --planet-diameter: 7cqi;
  --speed: 29.4;
  --color: linear-gradient(135deg, #f5deb3, #c19a6b);
}
#uranus{
  --orbit-diameter: 84cqi;
  --planet-diameter: 6cqi;
  --speed: 84;
  --color: linear-gradient(135deg, #afeeee, #40e0d0);
}
#neptune{
  --orbit-diameter: 96cqi;
  --planet-diameter: 6cqi;
  --speed: 165;
  --color: linear-gradient(135deg, #4169e1, #00bfff);
}