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

:root{
    --moon-duration: 8s;
}

body {
height: 100vh;
background-color: #192735;
}
.sun {
    width: 120px;
    height: 120px;
    background: radial-gradient(#f09819, #ff512f);
    border-radius: 50%;
    box-shadow: -4px 2px 56px orange;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mercury_orbit{
    width: 150px;
    height: 150px;
}
.mercury{
height: 20px;width: 20px;
border-radius: 50%;
background: linear-gradient(#504e51, #97979f, #ceccd1, #b5a7a7);
position: absolute;
top: 44%;
left: 44%;
transform: translate(-50%, -50%);
animation: orbit1 4s linear infinite;
}
@keyframes orbit1 {
   from{
    transform: rotate(360deg) translateX(75px) rotate(360deg);
   }
   to{
    transform:  rotate(0deg) translateX(75px)  rotate(0deg);
}
}
.mercury_orbit,
.venus_orbit,
.earth_orbit,
.moon_orbit,
.mars_orbit,
.jupiter_orbit,
.saturn_orbit,
.uranus_orbit,
.neptune_orbit{
border: 1px dotted #dd9;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: transparent;
}
.venus_orbit{
    height: 210px;
    width: 210px;
}
.venus{
    position: absolute;
    width: 29px;height: 29px;
    background: linear-gradient(#8b91a1,#bbb7ab,#ddd8d4,#bbb7ab);
    border-radius: 50%;
    top: 43%;
    left: 43%;
    transform: translate(-50%, -50%);
    animation: orbit2 8s linear infinite;
}

@keyframes orbit2 {
    from{
        transform: rotate(0deg) translateX(105px) rotate(0deg);
    }
    to{
        transform: rotate(360deg) translateX(105px) rotate(-360deg);
    }
}
.earth_orbit{
    height: 300px;
    width: 300px;
    border: 1px dashed #aaa;
}

.earth{
    height: 44px;
    width: 44px;
    background: url("earth2.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -17px;
    margin-left: -17px;
    animation: orbit3 12s linear infinite;
}

@keyframes orbit3 {
    from{
        transform: rotate(0deg) translateX(150px) rotate(0deg);
    }
    to{
        transform: rotate(360deg) translateX(150px) rotate(-360deg);
    }
}

.moon_orbit{
    height: 380px;
    width: 380px;
    border-radius: 50%;
    border: 0.8px dotted rgb(130, 126, 145);
    background: transparent;
    transform: translate(-50%, -50%) ;
    transform-origin: center center;
}

.moon{
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #d6c9c9;
    box-shadow: -4px 2px 56px #fff;
    position: absolute;
    top: 48%;
    left: 48%;
    transform: translate(-50%, -50%);
    animation: moon_orbit var(--moon-duration) linear infinite;
}

@keyframes moon_orbit {
    from{
    transform: rotate(0deg) translateX(190px) rotate(0deg);
    }
    to{
    transform: rotate(360deg) translateX(190px) rotate(-360deg);
    }
}


.mars_orbit {
    height: 450px;
    width: 450px;
    border: 1px dotted rgba(255,255,255,0.3);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mars {
    height: 23px;
    width: 23px;
    background: linear-gradient(
        #99857a, 
        #c6785c, 
        #e27b58, 
        #ff9d6f,
        #663926,
        #8c6a8c
    );
    border-radius: 50%;
    position: absolute;

    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -11px;

    animation: orbit4 12s linear infinite;
}
@keyframes orbit4 {
    from {
        transform: rotate(0deg) translateX(225px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(225px) rotate(-360deg);
    }
}

.jupiter_orbit{
    height: 500px;
    width: 500px;
}
.jupiter{
    height: 27px;
    width: 27px;
    background: linear-gradient(
    #404436,
    #a79c86,
    #d2cfda,
    #d39c7e,
    #90614d,
    #c88b3a
    );
border-radius: 50%;
position: absolute;
top: 46%;
left: 46%;
transform: translate(-50%, -50%);
animation: orbit5 6s linear infinite;
}

@keyframes orbit5 {
    from {
        transform: rotate(0deg) translateX(250px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(250px) rotate(360deg);
    }
} 

.saturn_orbit{
    height: 580px;
    width: 580px;
}
.saturn{
    height: 33px;
    width: 33px;
    background: linear-gradient(#343e47, #7b7869, #a49b72, #c5ab6e, #c3a171);
border-radius: 50%;
position: absolute;
top: 47%;
left: 47%;
transform: translate(-50%, -50%);
animation: orbit6 13s linear infinite;
}
@keyframes orbit6 {
    from {
        transform: rotate(0deg) translateX(290px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(290px) rotate(360deg);
    }
} 


.uranus_orbit{
    height: 660px;
    width: 660px;
}
.uranus{
    height: 40px;
    width: 40px;
    background: linear-gradient(#d5fbfc, #bbe1e4, #93bbbe, #658686);
    border-radius: 50%;
    position: absolute;
    top: 47.5%;
    left: 47.5%;
    transform: translate(-50%, -50%);
    animation: orbit7 14s linear infinite;
}
@keyframes orbit7 {
    from {
        transform: rotate(0deg) translateX(340px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(340px) rotate(360deg);
    }
} 
.neptune_orbit{
    height: 750px;
    width: 750px;
}
.neptune{
    height: 38px;
    width: 38px;
    background: linear-gradient(#212354, #3ee4e8, #3e66f9, #6081ff, #89f3ff);
    border-radius: 50%;
    position: absolute;
    top: 48%;
    left: 48%;
    transform: translate(-50%, -50%);
    animation: orbit8 17s linear infinite;
}

@keyframes orbit8 {
    from {
        transform: rotate(0deg) translateX(370px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(370px) rotate(360deg);
    }
}