.cards {
  width: 200px;
  margin: 15px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.cards[style*="display: none"] {
  opacity: 0;
  transform: scale(0.9);
}
.cards:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.imagebox img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.height-container {
  display: flex;
  align-items: center;
}
.separator {
  display: inline-block;
  font-size: 18px;
  color: #333;
  margin: 0 10px;
}

.separator::before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.stat-label {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.stat-bar-container {
  width: 100%;
  background-color: #f3f3f3;
  border-radius: 8px;
  margin-bottom: 15px;
  position: relative;
  height: 25px;
  overflow: hidden;
}

.stat-bar {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff4500, #ffd700);
  transition: width 0.4s ease-in-out;
}

.bg-grass {
  background: linear-gradient(0deg, #78c850, #a8df87);
}
.bg-fire {
  background: linear-gradient(0deg, #f08030, #f5a56e);
}
.bg-water {
  background: linear-gradient(0deg, #6890f0, #a3c9f5);
}
.bg-bug {
  background: linear-gradient(0deg, #a8b820, #d4e157);
}
.bg-normal {
  background: linear-gradient(0deg, #a8a878, #d1cfc2);
}
.bg-poison {
  background: linear-gradient(0deg, #a040a0, #c17ac8);
}
.bg-electric {
  background: linear-gradient(0deg, #f8d030, #fce48e);
}
.bg-psychic {
  background: linear-gradient(0deg, #f85888, #f897b3);
}
.bg-ice {
  background: linear-gradient(0deg, #98d8d8, #cbf5f5);
}
.bg-dragon {
  background: linear-gradient(0deg, #7038f8, #9c89f7);
}
.bg-dark {
  background: linear-gradient(0deg, #705848, #a08975);
}
.bg-fairy {
  background: linear-gradient(0deg, #ee99ac, #f5c4d3);
}
.bg-fighting {
  background: linear-gradient(0deg, #c03028, #e25a5a);
}
.bg-ground {
  background: linear-gradient(0deg, #e0c068, #ebd497);
}
.bg-flying {
  background: linear-gradient(0deg, #a890f0, #c8bdf5);
}
.bg-rock {
  background: linear-gradient(0deg, #b8a038, #dfd29d);
}
.bg-ghost {
  background: linear-gradient(0deg, #705898, #a28dc4);
}
.bg-steel {
  background: linear-gradient(0deg, #b8b8d0, #d9d9e5);
}

.cards:hover {
  transform: translateY(-5px);
}