#ladybug {
    /* Adjust width/height to match the size of your ladybug.png image */
    width: 400px;
    height: 400px;
    
    /* ------------------------------------- */
    /* NEW: Use the local image file */
    background-image: url('ladybug.png');
    
    /* These ensure the image fits perfectly and doesn't repeat */
    background-size: contain; 
    background-repeat: no-repeat; 
    
    /* Remove or comment out the old styling */
    /* background-color: red; */
    /* border-radius: 50%; */
    /* ------------------------------------- */

    position: absolute; 
    left: 10%;
    top: 50%;
    animation: crawl 4s infinite alternate; 
}
/* Defines how the 'crawl' animation works */
@keyframes crawl {
    0%   { transform: translateX(0); } /* Starting position */
    100% { transform: translateX(500px); } /* Ending position (500 pixels right) */
}