body {
    margin: 0;
    height: 100vh;
    background: radial-gradient(circle at center, #000 60%, #020824 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Solar system container */
.solar-system {
    position: relative;
    width: 700px;
    height: 700px;
}

/* Sun */
.sun {
    position: absolute;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, #ffe600, #ff8c00);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px 20px rgb(255, 145, 0);
}

/* Orbit */
.orbit {
    position: absolute;
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin linear infinite;
}

/* Planet */
.planet {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
}

/* Mercury */
.mercury-orbit { width: 140px; height: 140px; animation-duration: 6s; }
.mercury { width: 8px; height: 8px; background: #aaa; left: -4px; }

/* Venus */
.venus-orbit { width: 200px; height: 200px; animation-duration: 10s; }
.venus { width: 12px; height: 12px; background: #d4af37; left: -6px; }

/* Earth */
.earth-orbit { width: 260px; height: 260px; animation-duration: 14s; }
.earth { width: 14px; height: 14px; background: #2a6bff; left: -7px; }

/* Mars */
.mars-orbit { width: 320px; height: 320px; animation-duration: 18s; }
.mars { width: 12px; height: 12px; background: #c1440e; left: -6px; }

/* Jupiter */
.jupiter-orbit { width: 400px; height: 400px; animation-duration: 30s; }
.jupiter { width: 28px; height: 28px; background: #d2b48c; left: -14px; }

/* Saturn */
.saturn-orbit { width: 480px; height: 480px; animation-duration: 38s; }
.saturn {
    width: 24px;
    height: 24px;
    background: #e3c97a;
    left: -12px;
}
.saturn::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Uranus */
.uranus-orbit { width: 560px; height: 560px; animation-duration: 50s; }
.uranus { width: 18px; height: 18px; background: #7fffd4; left: -9px; }

/* Neptune */
.neptune-orbit { width: 640px; height: 640px; animation-duration: 60s; }
.neptune { width: 18px; height: 18px; background: #4169e1; left: -9px; }

/* Animation */
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}