body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-image: url('images/jungle-background.jpg'); /* Jungle background */
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 20px;
    color: #fff;
}

h1 {
    color: #fff;
    text-shadow: 2px 2px 4px #000;
}

.animal-container {
    position: relative; /* Set container position relative to use absolute positioning inside */
    width: 100%;  /* Full width to use random placement */
    height: 80vh; /* Occupy a significant portion of the screen */
    margin-top: 20px;
    padding: 20px;
}

.animal {
    position: absolute; /* Absolute positioning for random placement */
    cursor: pointer;
    transition: transform 0.2s;
}

.animal img {
    width: 150px;
    height: 150px;
    border-radius: 15px;
    box-shadow: none; /* Remove the shadow */
}

.animal:hover {
    transform: scale(1.1);
}

.animal img.clicked {
    animation: jump 0.5s ease;
}

@keyframes jump {
    0% { transform: translateY(0); }
    30% { transform: translateY(-20px); }
    50% { transform: translateY(0); }
    70% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}