#pokeList {
  display: flex;
  flex-wrap: wrap;
}

.pokemon-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;

  flex-wrap: wrap;
    
  height: 180px;
  width: 200px;
  margin: 2rem auto;
  padding: 10px;
  border-radius: 10px
}

.pokemon-card:hover {
  scale: 1.05;
  transition: all 0.2s
}

.pokemon-card-body-text {
  width: 90%;

  display: flex;
  justify-content: space-between;
}

.pk-id {
  position: relative;
  top: -15px;
  right: -20px;
  
  width: 50px;
  font-size: 0.6rem;
  color:#f0f8ff
}

.pk-name {
  font-size: 1.2rem;
  color: #f0f8ff;
  font-weight: 700;

  text-transform: capitalize;
}

.pokemon-card-body {
  width: 80%;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 30px;
}

.pokemon-card img {
  height: 100px;
  width: 100px;
/*   margin-top: -2rem; */

/*   border: 1px solid white; */
}

.pokemon-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 0;

  width: 80%;
  margin-top: -2rem;
/*   border: 1px solid white; */
}

.pokemon-card__type {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 3rem
}

.pk-tp {
  width: 50px;
  padding: 0.4rem 0;
  border-radius: 5px;

  font-size: 0.7rem;
  color: #FFF;
  filter: brightness(1.3);
}

.normal {
  background-color: #a6a877;
}

.grass {
  background-color: #77c850;
}

.fire {
  background-color: #ee7f30;
}

.water {
  background-color: #678fee;
}

.electric {
  background-color: #f7cf2e;
}

.ice {
  background-color: #98d5d7;
}

.ground {
  background-color: #dfbf69;
}

.flying {
  background-color: #a98ff0;
}

.poison {
  background-color: #a040a0;
}

.fighting {
  background-color: #bf3029;
}

.psychic {
  background-color: #f65687;
}

.dark {
  background-color: #725847;
}

.rock {
  background-color: #b8a137;
}

.bug {
  background-color: #a8b720;
}

.ghost {
  background-color: #6e5896;
}

.steel {
  background-color: #b9b7cf;
}

.dragon {
  background-color: #6f38f6;
}

.fairy {
  background-color: #f9aec7;
}

.container button {
  margin: 10px auto 0;
  background-color: yellow;
  color: #000;
  padding: 0.5rem 1rem;
  width: 30%;

  font-weight: 700;

  cursor: pointer;
}