.planet {
    position: absolute;
    border-radius: 50%;
    opacity: 0.9;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}
.planet-1 {
    background: linear-gradient(45deg, rgba(255, 228, 196, 0.8), rgba(255, 218, 185, 0.6)); 
    width: 60px;
    height: 60px;
    animation: wander1 50s linear infinite; 
}
.planet-2 {
    background: linear-gradient(45deg, rgba(173, 216, 230, 0.8), rgba(135, 206, 235, 0.6)); 
    width: 40px;
    height: 40px;
    animation: wander2 46s linear infinite; 
}
.planet-3 {
    background: linear-gradient(45deg, rgba(255, 182, 193, 0.8), rgba(255, 105, 180, 0.6)); /* Gradient color */
    width: 50px;
    height: 50px;
    animation: wander3 48s linear infinite; 
}
.planet-4 {
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.8), rgba(255, 165, 0, 0.6));
    width: 55px; 
    height: 55px;
    animation: wander4 52s linear infinite; 
}
@keyframes wander1 {
    0% { left: 20%; top: 20%; }
    25% { left: 40%; top: 40%; }
    50% { left: 30%; top: 60%; }
    75% { left: 20%; top: 80%; }
    100% { left: 20%; top: 20%; }
}

@keyframes wander2 {
    0% { left: 80%; top: 30%; }
    25% { left: 70%; top: 50%; }
    50% { left: 60%; top: 30%; }
    75% { left: 50%; top: 60%; }
    100% { left: 80%; top: 30%; }
}

@keyframes wander3 {
    0% { left: 10%; top: 70%; }
    25% { left: 20%; top: 60%; }
    50% { left: 30%; top: 50%; }
    75% { left: 40%; top: 20%; }
    100% { left: 10%; top: 70%; }
}
@keyframes wander4 {
    0% { left: 75%; top: 20%; }   
    25% { left: 85%; top: 30%; } 
    50% { left: 80%; top: 50%; }
    75% { left: 75%; top: 70%; } 
    100% { left: 75%; top: 20%; }
}



@media (max-width: 768px) {
    .planet-1 {
        width: 40px;
        height: 40px;
        animation: wander1-mobile 30s linear infinite;
    }
    .planet-2 {
        width: 15px;
        height: 15px;
        animation: wander2-mobile 34s linear infinite;
    }
    .planet-3 {
        width: 20px;
        height: 20px;
        animation: wander3-mobile 50s linear infinite;
    }
    .planet-4 {
        width: 30px; 
        height: 30px;
        animation: wander4-mobile 40s linear infinite; 
    }

    @keyframes wander1-mobile {
        0% { left: 20%; top: 20%; }
        25% { left: 40%; top: 30%; }
        50% { left: 30%; top: 50%; }
        75% { left: 15%; top: 40%; }
        100% { left: 20%; top: 20%; }
    }

    @keyframes wander2-mobile {
        0% { left: 80%; top: 30%; }
        25% { left: 70%; top: 40%; }
        50% { left: 60%; top: 20%; }
        75% { left: 50%; top: 30%; }
        100% { left: 80%; top: 30%; }
    }

    @keyframes wander3-mobile {
        0% { left: 8%; top: 55%; }   
        25% { left: 15%; top: 45%; }  
        50% { left: 25%; top: 42%; }
        75% { left: 35%; top: 40%; }
        100% { left: 10%; top: 60%; } 
    }
    

    @keyframes wander4-mobile {
        0% { left: 70%; top: 10%; }   
        25% { left: 75%; top: 20%; }  
        50% { left: 70%; top: 40%; }
        75% { left: 65%; top: 30%; }  
        100% { left: 70%; top: 10%; }
    }
}