*{
    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{
    width: 44px;
    height: 44px;
    background: url("earth2.gif");
    background-size: cover;
    border-radius: 50%;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    animation: earth_orbit 12s linear infinite;
}

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



.earth_orbit{
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px dashed #aaa;
    border-radius: 50%;

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

.earth{
    width: 44px;
    height: 44px;
    background: url("earth2.gif");
    background-size: cover;
    border-radius: 50%;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    animation: earth_orbit 12s linear infinite;
} 


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

.moon_orbit{
    position: absolute;
    width: 60px;
    height: 60px;
    border: 1px dotted rgb(130, 126, 145);
    border-radius: 50%;

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

.moon{
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #d6c9c9;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    animation: moon_orbit 3s linear infinite;
}

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


.mars_orbit {
    height: 420px;
    width: 420px;
}

.mars {
    height: 23px;
    width: 23px;
    background: linear-gradient(
        #99857a, 
        #c6785c, 
        #e27b58, 
        #ff9d6f,
        #663926,
        #8c6a8c
    );
    border-radius: 50%;
    position: absolute;

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

    animation: orbit4 12s linear infinite;
}

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






.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: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    animation: orbit5 6s linear infinite;
}

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







.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: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    animation: orbit7 14s linear infinite;
}

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





.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: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    animation: orbit8 17s linear infinite;
}

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