body{
    margin: 0;
    padding: 0;
    background-image: url(univers.jpg);
    background-size: 100%;
}
.sun{
    height: 120px;
    width: 120px;
    background-image: url(sun.jpg);
    border-radius: 50%;
    background-size: cover;
    box-shadow: -4px 2px 56px #f9c05f;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

/* Styling the Mercury planet */
.mercury{
    height: 20px;
    width: 20px;
    background: #B7B8B9;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #B7B8B9;
    left: 43%;
    top: 42%;
    transform: translate(-50%,-50%);
    animation: orbit2 2s linear infinite;
}
@keyframes orbit2{
    from{
        transform:rotate(0deg) translateX(70px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(70px) rotate(-360deg);
    }
}
p{
    color: white;
    font-family: system-ui;
    position: absolute;
    left: -62px;
    top: -11px;
}

/* Styling all planets orbits */
.mercury-orbit,.venus-orbit-1,.earth-orbit-1,.mars-orbit-1,
 .jupiter-orbit-1,.saturn-orbit-1,.uranus-orbit-1,.neptune-orbit-1{
    border-radius: 50%;
    border: 1px dotted#ddd9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mercury-orbit{
    height: 140px;
    width: 140px;
}

/* Styling the Venus planet */
.venus{
    height: 40px;
    width: 40px;
    background-image: url(venus.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #c1aa81;
    left: 40%;
    top: 42%;
    transform: translate(-50%,-50%);
    animation: orbit3 10s linear infinite;
}
@keyframes orbit3{
    from{
        transform:rotate(0deg) translateX(100px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(100px) rotate(-360deg);
    }
}
.venus-orbit-1{
    height: 200px;
    width: 200px;
}

/* Styling Earth planet */
.earth{
    height: 50px;
    width: 50px;
    background-image: url(earth.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #2855d6;
    left: 44%;
    top: 43%;
    transform: translate(-50%,-50%);
    animation: orbit4 20s linear infinite;
}
@keyframes orbit4{
    from{
        transform:rotate(0deg) translateX(150px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(150px) rotate(-360deg);
    }
}
.earth-orbit-1{
    height: 300px;
    width: 300px;
}

/* Styling Moon */
.earth-circle{
    height: 65px;
    width: 65px;
    border: 1px dotted #fff;
    position: relative;
    left: -8px;
    top: -8px;
    border-radius: 50%;
}
.earth-inner{
    height: 10px;
    width: 10px;
    background-image: url(moon.jpg);
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #F6F1D5;
    transform: translate(-50%,-50%);
    left: 45%;
    top: 45%;
    animation: orbit5 3s linear infinite;
}
@keyframes orbit5{
    from{
        transform:rotate(0deg) translateX(33px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(33px) rotate(-360deg);
    }
}

/* Styling Mars planet */
.mars{
    height: 30px;
    width: 30px;
    background-image: url(mars.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #AF2F0D;
    left: 46.5%;
    top: 46.5%;
    transform: translate(-50%,-50%);
    animation: orbit6 30s linear infinite;
}
@keyframes orbit6{
    from{
        transform:rotate(0deg) translateX(185px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(185px) rotate(-360deg);
    }
}
.mars-orbit-1{
    height: 370px;
    width: 370px;
}

/* Styling Jupiter planet */
.jupiter{
    height: 40px;
    width: 40px;
    background-image: url(jupiter.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #cac2b9;
    left: 45%;
    top: 45%;
    transform: translate(-50%,-50%);
    animation: orbit7 60s linear infinite;
}
@keyframes orbit7{
    from{
        transform:rotate(0deg) translateX(217px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(217px) rotate(-360deg);
    }
}
.jupiter-orbit-1{
    height: 430px;
    width: 430px;
}

/* Styling Saturn planet */
.saturn{
    height: 50px;
    width: 50px;
    background-image: url(saturn.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #ae8b0c;
    left: 45%;
    top: 45%;
    transform: translate(-50%,-50%);
    animation: orbit8 90s linear infinite;
}
@keyframes orbit8{
    from{
        transform:rotate(0deg) translateX(250px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(250px) rotate(-360deg);
    }
}
.saturn-orbit-1{
    height: 500px;
    width: 500px;
}

/* Styling Uranus planet */
.uranus{
    height: 30px;
    width: 30px;
    background-image: url(uranus.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #ACE5EE;
    left: 48%;
    top: 48%;
    transform: translate(-50%,-50%);
    animation: orbit9 200s linear infinite;
}
@keyframes orbit9{
    from{
        transform:rotate(0deg) translateX(280px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(280px) rotate(-360deg);
    }
}
.uranus-orbit-1{
    height: 560px;
    width: 560px;
}

/* Styling Neptune planet */
.neptune{
    height: 30px;
    width: 30px;
    background-image: url(neptune.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #2E5D9D;
    left: 48%;
    top: 48%;
    transform: translate(-50%,-50%);
    animation: orbit10 400s linear infinite;
}
@keyframes orbit10{
    from{
        transform:rotate(0deg) translateX(310px) rotate(0deg);
    }
    to{
        transform:rotate(360deg) translateX(310px) rotate(-360deg);
    }
}
.neptune-orbit-1{
    height: 620px;
    width: 620px;
}