.solar-system {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1500px;
}

.solar-system__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1.5px solid #ADADAD;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(40deg) rotateZ(-15deg);
  transform-style: preserve-3d;
  transform-origin: center center;
}

.solar-system__orbit--inner {
  width: 1000px;
  height: 400px;
}

.solar-system__orbit--middle {
  width: 1500px;
  height: 550px;
}

.solar-system__orbit--outer {
  width: 1800px;
  height: 700px;
}

.solar-system__icon {
  position: absolute;
  width: 42px;
  height: 42px;
  transition: none;
}

.solar-system__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(0.68);
  transition: filter 0.3s ease;
}

.dark-theme .solar-system__icon img {
  filter: brightness(0) invert(1);
}

.icon-1 {
  top: 73%;
  left: 10%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(35deg);
}

.icon-2 {
  top: 50%;
  left: 3%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(-10deg);
}

.icon-3 {
  top: 27%;
  left: 10%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(25deg);
}

.icon-4 {
  top: 18%;
  left: 22%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(-20deg);
}

.icon-5 {
  top: 10%;
  left: 40%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(10deg);
}

.icon-6 {
  top: 10%;
  left: 60%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(-15deg);
}

.icon-7 {
  top: 18%;
  left: 78%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(20deg);
}

.icon-8 {
  top: 6%;
  left: 52%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(-18deg);
}

.icon-9 {
  top: 12%;
  left: 78%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(15deg);
}

.icon-10 {
  top: 22%;
  left: 90%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(-25deg);
}

.icon-11 {
  top: 45%;
  left: 95%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(20deg);
}

.icon-12 {
  top: 87%;
  left: 22%;
  transform: rotateZ(15deg) rotateX(-65deg) rotate(-35deg);
}

@media screen and (max-width: 1600px) {
  .solar-system__orbit--inner { width: 700px; height: 350px; }
  .solar-system__orbit--middle { width: 950px; height: 475px; }
  .solar-system__orbit--outer { width: 1200px; height: 600px; }
}

@media screen and (max-width: 1200px) {
  .solar-system__orbit--inner { width: 550px; height: 275px; }
  .solar-system__orbit--middle { width: 750px; height: 375px; }
  .solar-system__orbit--outer { width: 950px; height: 475px; }
  .solar-system__icon { width: 36px; height: 36px; padding: 7px; }
  .solar-system__icon--large { width: 54px; height: 54px; padding: 11px; }
  .lambda-circle { width: 65px; height: 65px; font-size: 38px; }
}

@media screen and (max-width: 768px) {
  .solar-system__orbit--inner { width: 400px; height: 200px; }
  .solar-system__orbit--middle { width: 550px; height: 275px; }
  .solar-system__orbit--outer { width: 700px; height: 350px; }
  .solar-system__icon { width: 30px; height: 30px; padding: 6px; }
  .solar-system__icon--large { width: 46px; height: 46px; padding: 9px; }
  .lambda-circle { width: 55px; height: 55px; font-size: 32px; }
}

@media screen and (max-width: 480px) {
  .solar-system__orbit--inner { width: 280px; height: 140px; }
  .solar-system__orbit--middle { width: 380px; height: 190px; }
  .solar-system__orbit--outer { width: 480px; height: 240px; }
  .solar-system__icon { width: 25px; height: 25px; padding: 5px; }
  .solar-system__icon--large { width: 38px; height: 38px; padding: 7px; }
  .lambda-circle { width: 45px; height: 45px; font-size: 26px; }
}

@media screen and (max-width: 1024px) {
  .solar-system__orbit {
    display: none;
  }
}