.orbit{
     position: absolute;
    width: 75%;
    height: 100%;
    left : 11%;
    animation: rotate var(--duration) linear infinite;
}

.planet{
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 50%;

}

@keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

.planet-container{

    display: flex;
    gap:10px;
     left: 25%; right: 25%; top: 35%; 
}
img{
       animation: rotate var(--duration) linear infinite;

 
}


#p1{position: absolute; left: 41%; top: 25%; 
    }/*earth*/
#p2{position: absolute; left: 44%; top: 25%;
     }/*venus*/
#p3{position: absolute; left: 46%; top: 25%;
     }/*mercury*/
#p4{position: absolute; left: 38%; top: 25%;
     }/*mars*/
#p5{position: absolute; left: 32%; top: 25%;
     }/*jupiter*/
#p6{position: absolute; left: 27%; top: 25%;
     }/*uranus*/
#p7{position: absolute; left: 14%; top: 25%;
     } /*neptune*/
#p8{position: absolute; left: 20%; top: 25%;
     } /*saturn*/
          

#img1{position: relative;left: -56%;--duration :30s; width: 7%;} /*earth*/
#img2{position: relative;left: -56%;--duration :60s; width: 2.9%;} /*venus*/
#img3{position: relative;left: -56%;--duration :60s; width: 3%;
} /*mercury*/
#img4{position: relative;left: -56%;--duration :30s; width: 3%;} /*mars*/
#img5{position: relative;left: -56%;--duration :8s;  width: 18%;} /*jupiter*/
#img6{position: relative;left: -56%;--duration :8s;  width: 11%;} /*uranus*/
#img7{position: relative;left: -56%;--duration :8s;  width: 7%;} /*neptune*/
#img8{position: relative;left: -56%;--duration :8s;  width: 19%;} /*saturn*/