style.css

:root {
    --background: rgb(9, 4, 37);
    --dark-shadow: rgba(0, 0, 0, 0.75);
    --shadow: rgba(50, 50, 50, 0.5);
    --light: white;
    --light-shadow: rgba(255, 255, 255, 0.75);
    --container-size: 800px;
}

* {
    box-sizing: border-box;
    transform-style: preserve-3d;
}

body {
    margin:0;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: var(--background);
    background-image: url('stars.jpg');
    animation: stars-bright 5s infinite linear alternate-reverse,
               stars-move 10s infinite ease-in-out alternate-reverse;
    perspective: 10000px;
    overflow: hidden;
}

main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    width: var(--container-size);
    height: var(--container-size);
    background-color: transparent;
    transform: rotateX(90deg); 
}

.planet {
    width: var(--planet-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: 
    radial-gradient(circle at 100% 100%, var(--dark-shadow) 10%, var(--shadow) 50%, var(--light-shadow) 100%), var(--image);
    animation: backpos var(--rotation-speed, 20s) linear infinite normal, planet-rotation var(--ellipse-duration) linear infinite;
    box-shadow: var(--extra-shadow,  none);
    translate: calc(var(--distance) * -1);
}

.ellipse  {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    width: var(--distance);
    aspect-ratio: 1 / 1;
    animation: ellipse-rotation var(--ellipse-duration) linear infinite;
}
  
.sun {
    --image: url('sun.jpg');
    --planet-size:300px;
    --rotation-speed: 100s;
    --extra-shadow: 0px 0px 10px 5px rgb(255, 240, 156), 0 0 150px 100px rgba(255, 167, 2, 0.5);
    --ellipse-duration: 100s;
}

.earth {
    --image: url('earth.jpg');
    --planet-size: 30px;
    --ellipse-duration: 25s;
    --rotation-speed: 5s;
    --distance: 350px;
    --ellipse-rotation:-30deg;

}

.mars {
    --image: url('mars.jpg');
    --planet-size: 20px;
    --ellipse-duration: 7s;
    --rotation-speed: 3s;
    --distance: 400px;
    --ellipse-rotation:20deg;
}

.jupiter {
    --image: url('mars.jpg');
    --planet-size: 100px;
    --ellipse-duration: 20s;
    --rotation-speed: 15s;
    --distance: 550px;
}

.saturn {
    --image: url('mars.jpg');
    --planet-size: 50px;
    --ellipse-duration: 22s;
    --rotation-speed: 5s;
    --distance: 650px;
}

@keyframes planet-rotation {
    from {
        transform: rotateZ(0) rotateX(-90deg) ; 
    }
    to { 
        transform:  rotateZ(-360deg) rotateX(-90deg); 
    }
}

@keyframes ellipse-rotation {
    from {
        transform: rotateY(var(--ellipse-rotation, 0)) rotateX(0) ; 
    }
    to { 
        transform: rotateY(var(--ellipse-rotation, 0)) rotateZ(360deg) ; 
    }
}

@keyframes backpos {
    to {
        background-position: 100% 50%;       
    }
}

@keyframes stars-bright {
    from {
        backdrop-filter: blur(0px) brightness(50%);
    }
    to {
        backdrop-filter: blur(1px) brightness(150%);
    }
}

@keyframes stars-move {
    from {
        background-size: 100%;
        background-position: -20px;
    }
    to {
        background-size: calc(100% + 20px);
        background-position: 10px;
    }
}