body {
  background: #efefbb;
  background: linear-gradient(to right, rgb(197, 230, 236), rgb(239, 187, 230));
  color: white;
  margin: 0;
  font-family: rubik;
}

.container {
  padding: 40px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  font-size: 54px;
}

.pokedex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 20px;
  padding-inline-start: 0;
}

.card {
  list-style: none;
  padding: 40px;
  color: #222;
  text-align: center;
  border-radius: 20px;
  position: relative;
}

.card::after {
  content: "";
  display: block;
  width: 50%;
  height: 45%;
  border-radius: 100%;
  background-color: #fff;
  opacity: 0.7;
  position: absolute;
  top: 15%;
  left: 25%;
}

.steel {
  background-color: #f4f4f4;
}

.fire {
  background-color: #fddfdf;
}

.grass {
  background-color: #defde0;
}

.electric {
  background-color: #fcf7de;
}

.water,
.ice {
  background-color: #def3fd;
}

.ground {
  background-color: #f4e7da;
}

.rock {
  background-color: #d5d5d4;
}

.fairy {
  background-color: #fceaff;
}

.poison {
  background-color: #98d7a5;
}

.bug {
  background-color: #f8d5a3;
}

.dragon {
  background-color: #97b3e6;
}

.psychic {
  background-color: #eaeda1;
}

.ghost {
  background-color: #9668b4;
}

.dark {
  background-color: #838383;
}

.flying {
  background-color: #f5f5f5;
}

.fighting {
  background-color: #e6e0d4;
}

.normal {
  background-color: #f5f5f5;
}

.card:hover {
  animation: bounce 0.5s linear;
}

.card-title {
  text-transform: capitalize;
  margin-bottom: 0px;
  font-size: 28px;
  font-weight: normal;
  position: relative;
  z-index: 2;
}

.card-subtitle {
  margin-top: 5px;
  color: rgb(73, 73, 73);
  font-weight: lighter;
  position: relative;
  z-index: 2;
}

.card-image {
  height: 180px;
  position: relative;
  z-index: 2;
}

@keyframes bounce {
  20% {
    transform: translateY(-6px);
  }
  40% {
    transform: translateY(0px);
  }

  80% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}