.card {
    position: relative; 
    background: #ffffff; 
    border-radius: 12px; 
    padding: 15px; 
    box-shadow: 0 4px 10px #a3d9a5; 
    width: 220px; /* narrow width */ 
    height: 360px; /* taller height */
     display: flex; 
     flex-direction: column; 
     align-items: center; 
     justify-content: flex-start; 
    }

.horse-image { 
    width: 100%; 
    height: 180px; /* fixed height for consistency */ 
    object-fit: cover; /* crops without stretching */ 
    border-radius: 8px; 
    margin-bottom: 10px; 
}

.card div { 
    margin: 4px 0; 
    text-align: center; 
}

.delete-btn { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    color:  #2f3e46; 
    border: none; 
    border-radius: 50%; width: 25px; 
    height: 25px; 
    cursor: default; 
    font-weight: bold; 
}

#horse-card { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 20px; 
    margin-top: 20px; 
    justify-items: center; 
}

body {
    background-color: #f0fdf4;
}

form {
  max-width: 100%;
  margin: 20px auto;
  padding: 20px;
  background-color: #a3d9a5;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
}

/* Style input fields */
input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

/* Style labels */
label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

/* Style buttons */
button {
  color:  #2f3e46;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}