#pet-container {
  position: absolute;
  transition: transform 1s ease-in-out; /* Smooth movement */
  z-index: 1000;
  text-align: center;
}

#pet {
  width: 100px;
  height: 100px;
  cursor: pointer;
}

@keyframes walk {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

#pet.walking {
  animation: walk 0.5s steps(2) infinite; /* Adjust steps and duration as needed */
}

.text-bubble {
  position: absolute;
  background-color: white;
  border: 1px solid #000;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
}

#hearts-container {
  position: absolute;
  top: 10px;
  right: 10px;
}

.heart {
  width: 30px;
  height: 30px;
}

#feed-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #ff8c00;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 999;
}