*{
    box-sizing:border-box;
}

img {
    max-width:100%;
}

body, html {
    height: 100%;
    background: black;
    overflow: hidden;
}

.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* behind everything */

    background-image:
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px);
  
    background-size: 100px 100px, 150px 150px, 200px 200px;
    background-position: 10px 25px, 70px 15px, 90px 130px;

    animation: twinkle 3s ease infinite alternate;
}

@keyframes twinkle {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

.solar-system {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100vmin;
    height: 100vmin;
    margin: auto;
    overflow: hidden;

    z-index: 1;
}

.sun {
    width:5%;
    height:5%;

    background-position: center;
    border-radius: 50%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(img/sun.jpeg);

}

.orbit-mercury {
    border: 1px dashed white;
    border-radius:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 10%;
    height: 10%;

    animation: orbit-rotate 10s linear infinite;
}

.orbit-venus {
    border: 1px dashed white;
    border-radius:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 20%;
    height: 20%;

    animation: orbit-rotate 15s linear infinite;
}

.orbit-earth {
    border: 1px dashed white;
    border-radius:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 30%;
    height: 30%;

    animation: orbit-rotate 20s linear infinite;
}

.orbit-mars {
    border: 1px dashed white;
    border-radius:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 40%;
    height: 40%;

    animation: orbit-rotate 25s linear infinite;
}

.orbit-jupiter {
    border: 1px dashed white;
    border-radius:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 50%;
    height: 50%;

    animation: orbit-rotate 30s linear infinite;
}

.orbit-saturn {
    border: 1px dashed white;
    border-radius:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 60%;
    height: 60%;

    animation: orbit-rotate 35s linear infinite;
}

.orbit-uranus {
    border: 1px dashed white;
    border-radius:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 70%;
    height: 70%;

    animation: orbit-rotate 40s linear infinite;
}

.orbit-neptune {
    border: 1px dashed white;
    border-radius:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 80%;
    height: 80%;

    animation: orbit-rotate 45s linear infinite;
}

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


.mercury {
    width: 10%;
    height: 10%;

    border-radius:50%;
    background-color:rgb(255, 187, 0);

    position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(./img/mercury.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: planet-spin 5s linear infinite;
}

.venus {
    width: 10%;
    height: 10%;

    border-radius:50%;
    background-color:rgb(160, 147, 110);

    position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(./img/venus.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: planet-spin 5s linear infinite;
}

.earth {
    width: 7%;
    height: 7%;

    border-radius:50%;
    background-color:rgb(33, 146, 212);

    position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(./img/earth.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: planet-spin 5s linear infinite;
}

.mars {
    width: 4%;
    height: 4%;

    border-radius:50%;
    background-color:rgb(199, 90, 18);

    position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(./img/mars.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: planet-spin 5s linear infinite;
}

.jupiter {
    width: 9%;
    height: 9%;

    border-radius:50%;
    background-color:rgb(84, 113, 123);

    position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(./img/jupiter.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: planet-spin 5s linear infinite;
}

.saturn {
    width: 7%;
    height: 7%;

    border-radius:50%;
    background-color:rgb(209, 167, 100);

    position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(./img/saturn.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: planet-spin 5s linear infinite;
}

.uranus {
    width: 4%;
    height: 4%;

    border-radius:50%;
    background-color:rgb(97, 75, 241);

    position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(./img/uranus.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: planet-spin 5s linear infinite;
}

.neptune {
    width: 3%;
    height: 3%;

    border-radius:50%;
    background-color:rgb(141, 221, 255);

    position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url(./img/neptune.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    
}

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