body {
    font-family: sans-serif;
    text-align: center;
    margin: 0;
    padding: 20px;
    background-color: green;
    color: white;
    
}

.search-wrapper {
    margin: 30px 0; /* Adds vertical space around the search bar */
}

#animal-search {
    padding: 12px 20px;
    width: 50%;
    max-width: 500px; /* Prevents it from getting too wide on large screens */
    border: 1px solid #ccc;
    border-radius: 25px; /* Creates a modern pill shape */
    font-size: 16px;
}

.animal-container {
    display: flex;
    justify-content: center; 
    gap: 20px;
    flex-wrap: wrap; 
}

.animal-section {
    border: 1px solid #ddd;
    border-radius: 8px; 
    padding: 16px;
    width: 300px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.animal-section img {
    width: 100%;     height: auto;
    border-radius: 8px; 
}