:root {
  /** color system **/
  --system-color-dark: #0f172a;
  --system-color-light: #f8fafc;
  --system-color-logo: #3b82f6;
  --system-color-red-100: rgba(59, 130, 246, 0.25);
  --system-color-red-200: rgba(59, 130, 246, 0.5);
  --system-color-red-300: rgba(59, 130, 246, 1);

  /** color themes **/
  --system-color-theme-paths: var(--system-color-red-100)
    var(--system-color-red-300);
  --system-color-theme-planets: var(--system-color-red-200)
    var(--system-color-red-200) var(--system-color-red-200)
    var(--system-color-red-300);

  /** planet's radius **/
  --planet-radius-mars: 33.895px;
  --planet-radius-earth: 63.71px;
  --planet-radius-venus: 60.518px;
  --planet-radius-mercury: 24.397px;
  --star-radius-sun: 174.085px;

  /** planet's trajectories **/
  --planet-trajectory-mars: 446.085px;
  --planet-trajectory-earth: 332.085px;
  --planet-trajectory-venus: 257.085px;
  --planet-trajectory-mercury: 203.085px;

  /** units **/
  --system-margin-mars: 292px;
  --system-margin-earth: 35px;
  --system-margin-venus: 15px;
  --system-margin-mercury: 38px;
  --system-border-width: min(2px, 0.4dvmin);
}

.solar-system {
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 100%;
  block-size: 100%;
  transform: skewX(-45deg) translateX(10px);
  -webkit-transform: skewX(-45deg) translateX(10px);
  position: relative;
  z-index: 2;
}

.solar-system__sun {
  position: relative;
  z-index: 98;
  aspect-ratio: 1;
  inline-size: var(--star-radius-sun);
  border-radius: 50%;
  background: var(--system-color-red-300);
  box-shadow: 
    0 0 0 2px rgba(59, 130, 246, 0.3),
    0 0 10px rgba(59, 130, 246, 0.6),
    inset 0 0 30px rgba(255, 255, 255, 0.2);
  transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
}

.solar-system__sun::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  z-index: 96;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    var(--system-color-red-300) 50%,
    transparent 70%
  );
}

.solar-system__sun::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(59, 130, 246, 0.2) 30%,
    rgba(59, 130, 246, 0) 70%
  );
}

.solar-system section {
  position: absolute;
  z-index: 3;
  aspect-ratio: 1;
  border-radius: 50%;
  border-width: var(--system-border-width);
  border-style: solid;
  border-color: rgba(59, 130, 246, 0.15) rgba(59, 130, 246, 0.4);
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.solar-system article:not(.solar-system__sun) {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 95;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border-width: var(--system-border-width);
  border-style: solid;
  border-color: rgba(59, 130, 246, 0.5);
}

.solar-system article:not(.solar-system__sun)::after {
  content: "";
  aspect-ratio: 1;
  inline-size: 40%;
  border-radius: 50%;
  background: var(--system-color-red-300);
  filter: drop-shadow(0px 0px 4.8px rgba(59, 130, 246, 0.5)) blur(0.5px);
  -webkit-filter: drop-shadow(0px 0px 4.8px rgba(59, 130, 246, 0.5)) blur(0.5px);
}

.solar-system__mercury-trajectory {
  inline-size: var(--planet-trajectory-mercury);
  animation: revolution 43.9845s linear infinite;
}

.solar-system__mercury-trajectory__mercury {
  inline-size: var(--planet-radius-mercury);
  top: var(--system-margin-mercury);
  animation: revolution 29.3225s linear infinite;
}

.solar-system__venus-trajectory {
  inline-size: var(--planet-trajectory-venus);
  animation: revolution 112.3335s linear infinite;
}

.solar-system__venus-trajectory__venus {
  inline-size: var(--planet-radius-venus);
  top: var(--system-margin-venus);
  animation: revolution 121.513s linear infinite;
}

.solar-system__earth-trajectory {
  inline-size: var(--planet-trajectory-earth);
  animation: revolution 182.6211s linear infinite;
}

.solar-system__earth-trajectory__earth {
  inline-size: var(--planet-radius-earth);
  top: var(--system-margin-earth);
  animation: revolution 0.4874s linear infinite;
}

.solar-system__earth-trajectory__earth::after {
  animation: blink 2s linear infinite;
}

.solar-system__mars-trajectory {
  inline-size: var(--planet-trajectory-mars);
  animation: revolution 343.4425s linear infinite;
}

.solar-system__mars-trajectory__mars {
  inline-size: var(--planet-radius-mars);
  top: var(--system-margin-mars);
  animation: revolution 0.5128s linear infinite;
}

@keyframes revolution {
  to {
    transform: rotateZ(1turn);
  }
}

@keyframes blink {
  to {
    background-color: var(--system-color-dark);
    filter: drop-shadow(0 0 0 var(--system-color-red-200)) blur(0);
  }
}

@media screen and (width < 768px) {
  .solar-system__sun {
    inline-size: calc(var(--star-radius-sun) / 2);
  }
  .solar-system__mercury-trajectory {
    inline-size: calc(var(--planet-trajectory-mercury) / 2);
  }
  .solar-system__mercury-trajectory__mercury {
    inline-size: calc(var(--planet-radius-mercury) / 2);
    top: calc(var(--system-margin-mercury) - 20px);
  }
  .solar-system__venus-trajectory {
    inline-size: calc(var(--planet-trajectory-venus) / 2);
  }
  .solar-system__venus-trajectory__venus {
    inline-size: calc(var(--planet-radius-venus) / 2);
    top: calc(var(--system-margin-venus) - 9px);
  }
  .solar-system__earth-trajectory {
    inline-size: calc(var(--planet-trajectory-earth) / 2);
  }
  .solar-system__earth-trajectory__earth {
    inline-size: calc(var(--planet-radius-earth) / 2);
    top: calc(var(--system-margin-earth) - 19px);
  }
  .solar-system__mars-trajectory {
    inline-size: calc(var(--planet-trajectory-mars) / 2);
  }
  .solar-system__mars-trajectory__mars {
    inline-size: calc(var(--planet-radius-mars) / 2);
    top: calc(var(--system-margin-mars) - 234px);
  }
}