body{
    margin: 0px;
    padding: 0px;
    background-image:url(Bg.jpg);
    background-size: 100%;
}
.sun{
    height: 120px;
    width: 120px;
    background-image: url(3.png);
    border-radius: 50%;
    background-size: cover;
    box-shadow: -4px 2px 56px #f9c05f;
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50% );
}
.mercury{
    height: 30px;
    width: 30px;
    background-image: url(8.png);
    background-size: 100%;
    border-radius: 50%;
    position:absolute;
    box-shadow: -4px 2px 56px #f9c05f;
    left: 46%;
    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;
}
.mercury-outline,.venus-outline-1,.earth-outline-1,.mars-outline-1,.jupiter-outline-1,
.saturn-outline-1,.uranus-outline-1,.neptune-outline-1{
    border-radius: 50%;
    border: 1px dotted #ddd9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}
.mercury-outline{
    height: 140px;
    width:140px;
}
.venus{
    height: 40px;
    width: 40px;
    background-image: url(4.png);
    background-size: 100%;
    border-radius: 50%;
    position:absolute;
    box-shadow: -4px 2px 56px #a36f13;
    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-outline-1{
    height: 200px;
    width:200px;
}


.earth{
    height: 50px;
    width: 50px;
    background-image: url(5.png);
    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-outline-1{
    height: 300px;
    width:300px;
}
.earth-circle{
    height: 65px;
    width: 65px;
    border: 1px dotted #fff;
    position: relative;
    left: -8px;
    top: -8px;
    border-radius: 40px;
}
.earth-inner{
    height: 10px;
    width: 10px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    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);}
}

.mars{
    height: 40px;
    width: 40px;
    background-image: url(1.png);
    background-size: 100%;
    border-radius: 50%;
    position:absolute;
    box-shadow: -4px 2px 56px #ca0505;
    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-outline-1{
    height: 370px;
    width:370px;
}

.jupiter{
    height: 40px;
    width: 40px;
    background-image: url(10.png);
    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-outline-1{
    height: 430px;
    width:430px;
}

.saturn{
    height: 60px;
    width: 60px;
    background-image: url(7.png);
    background-size: 100%;
    border-radius: 50%;
    position:absolute;
    left: 45%;
    top: 45%;
    transform: translate(-50%,-50%);
    animation: orbit9 90s linear infinite;
}
@keyframes orbit9 {
    from{transform: rotate(0deg)translatex(250px) rotate(0deg);}
    to{transform: rotate(360deg)translatex(250px) rotate(-360deg);}
}
.saturn-outline-1{
    height: 500px;
    width:500px;
}

.uranus{
    height: 50px;
    width: 50px;
    background-image: url(9.png);
    background-size: 100%;
    border-radius: 50%;
    position:absolute;
   
    left: 38%;
    top: 48%;
    transform: translate(-50%,-50%);
    animation: orbit10 200s linear infinite;
}
@keyframes orbit10 {
    from{transform: rotate(0deg)translatex(280px) rotate(0deg);}
    to{transform: rotate(360deg)translatex(280px) rotate(-360deg);}
}
.uranus-outline-1{
    height: 560px;
    width:560px;
}

.neptune{
    height: 40px;
    width: 40px;
    background-image: url(6.png);
    background-size: 100%;
    border-radius: 50%;
    position:absolute;
    box-shadow: -4px 2px 56px #9581c1;
    left: 48%;
    top: 48%;
    transform: translate(-50%,-50%);
    animation: orbit11 400s linear infinite;
}
@keyframes orbit11 {
    from{transform: rotate(0deg)translatex(310px) rotate(0deg);}
    to{transform: rotate(360deg)translatex(310px) rotate(-360deg);}
}
.neptune-outline-1{
    height: 620px;
    width:620px;
}