* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.solar-system {
    position: relative;
    width: 80vmin;
    height: 80vmin;
    max-width: 800px;
    max-height: 800px;
}

.sun {
    width: 6vmin;
    height: 6vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg/120px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg') center/cover;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.planet {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    background-size: cover;
    top: 50%;
    left: 50%;
}

.mercury {
    width: 1vmin;
    height: 1vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Mercury_in_color_-_Prockter07-edit1.jpg/120px-Mercury_in_color_-_Prockter07-edit1.jpg') center/cover;
    animation: orbit 4s linear infinite;
    --orbit-radius: 6vmin;
}
.venus {
    width: 1.5vmin;
    height: 1.5vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Venus-real_color.jpg/120px-Venus-real_color.jpg') center/cover;
    animation: orbit 6s linear infinite;
    --orbit-radius: 10vmin;
}
.earth {
    width: 1.8vmin;
    height: 1.8vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/120px-The_Earth_seen_from_Apollo_17.jpg') center/cover;
    animation: orbit 8s linear infinite;
    --orbit-radius: 14vmin;
}
.mars {
    width: 1.2vmin;
    height: 1.2vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/OSIRIS_Mars_true_color.jpg/120px-OSIRIS_Mars_true_color.jpg') center/cover;
    animation: orbit 10s linear infinite;
    --orbit-radius: 18vmin;
}
.jupiter {
    width: 3vmin;
    height: 3vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg/120px-Jupiter_and_its_shrunken_Great_Red_Spot.jpg') center/cover;
    animation: orbit 15s linear infinite;
    --orbit-radius: 26vmin;
}
.saturn {
    width: 2.5vmin;
    height: 2.5vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Saturn_during_Equinox.jpg/120px-Saturn_during_Equinox.jpg') center/cover;
    animation: orbit 20s linear infinite;
    --orbit-radius: 34vmin;
}
.uranus {
    width: 2vmin;
    height: 2vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Uranus2.jpg/120px-Uranus2.jpg') center/cover;
    animation: orbit 25s linear infinite;
    --orbit-radius: 42vmin;
}
.neptune {
    width: 2vmin;
    height: 2vmin;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Neptune_Full_%28cropped%29.jpg/120px-Neptune_Full_%28cropped%29.jpg') center/cover;
    animation: orbit 30s linear infinite;
    --orbit-radius: 50vmin;
}

@keyframes orbit {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); }
}

#info {
    color: #fff;
    position: fixed;
    bottom: 2vmin;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    padding: 1vmin;
    border-radius: 0.5vmin;
    font-size: clamp(0.8rem, 2vw, 1rem);
    max-width: 90%;
    text-align: center;
}