.container {
            position: relative;
            width: 300px;
            height: 300px;
        }

        /* Earth at the centre */
        .sun {
            position: absolute;
            top: 0%;
            left: 10%;
            width: 100%;
            height: 100%;
            margin-top: -50px;
            margin-left: -50px;
            background-color: #FFD700;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        }


        /* Central Earth Shape */
        .earth {

            margin-top: 0px;
            margin-left: 0px;
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6f/Earth_Eastern_Hemisphere.jpg');
            background-size: cover;
            border-radius: 100%;
            display: flex;
            animation: zoom 3s ease-in-out infinite;
        }

        /* Planet Style */
        .planet {
            position: absolute;
            width: 40px;
            height: 40px;
            #background-color: #3b82f6;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            color: #fff;
            
        }

		#planet1 {
			background: url('../img/Mars1.jpg')  no-repeat center center/cover;
			animation: orbit1 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit1 {
            from { transform: rotate(0deg) translateX(250px) rotate(0deg); }
            to { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
        }

		#planet2 {
			background: url('../img/Saturn1.jpg')  no-repeat center center/cover;
			animation: orbit2 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit2 {
            from { transform: rotate(40deg) translateX(250px) rotate(-40deg); }
            to { transform: rotate(400deg) translateX(250px) rotate(-400deg); }
        }

		#planet3 {
			background: url('../img/Shadow-planet.jpg')  no-repeat center center/cover;
			animation: orbit3 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit3 {
            from { transform: rotate(80deg) translateX(250px) rotate(-80deg); }
            to { transform: rotate(440deg) translateX(250px) rotate(-440deg); }
        }

		#planet4 {
			background: url('../img/Venus1.png')  no-repeat center center/cover;
			animation: orbit4 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit4 {
            from { transform: rotate(120deg) translateX(250px) rotate(-120deg); }
            to { transform: rotate(480deg) translateX(250px) rotate(-480deg); }
        }
        
        
		#planet5 {
			background: url('../img/Mercury1.jpg')  no-repeat center center/cover;
			animation: orbit5 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit5 {
            from { transform: rotate(160deg) translateX(250px) rotate(-160deg); }
            to { transform: rotate(520deg) translateX(250px) rotate(-520deg); }
        }
        
        
		#planet6 {
			background: url('../img/Uranus1.jpg')  no-repeat center center/cover;
			animation: orbit6 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit6 {
            from { transform: rotate(200deg) translateX(250px) rotate(-200deg); }
            to { transform: rotate(560deg) translateX(250px) rotate(-560deg); }
        }
        
        
		#planet7 {
			background: url('../img/Jupiter1.jpg')  no-repeat center center/cover;
			animation: orbit7 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit7 {
            from { transform: rotate(240deg) translateX(250px) rotate(-240deg); }
            to { transform: rotate(600deg) translateX(250px) rotate(-600deg); }
        }
        		
        		
        #planet8 {
			background: url('../img/Moon1.png')  no-repeat center center/cover;
			animation: orbit8 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit8 {
            from { transform: rotate(280deg) translateX(250px) rotate(-280deg); }
            to { transform: rotate(640deg) translateX(250px) rotate(-640deg); }
        }
        		
        
        #planet9 {
			background: url('../img/Sun1.jpg')  no-repeat center center/cover;
			animation: orbit9 10s linear infinite;
		}
        
        /* Orbit Animation */
        @keyframes orbit9 {
            from { transform: rotate(320deg) translateX(250px) rotate(-320deg); }
            to { transform: rotate(680deg) translateX(250px) rotate(-680deg); }
        }
        
        @keyframes zoom {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }