/* CREATED BY KAUAN VIDIGAL- GITHUB Vidigal-code (https://github.com/Vidigal-code) */
 .pokemons {
     display: grid;
     grid-template-columns: 1fr;
     margin: 0;
     padding: 0;
     list-style: none;
}
 .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;
}
 .pokemon {
     display: flex;
     flex-direction: column;
     margin: 0.5rem;
     padding: 1rem;
     border-radius: 1rem;
}
 .pokemon:hover {
     transform: translateY(-2px);
     filter: drop-shadow(0 0 2px black);
}
 .pokemon:active {
     transform: translateY(2px);
}
 .pokemon .number {
     color: #fff;
     text-align: right;
     font-size: 1rem;
}
 .pokemon .name {
     text-transform: capitalize;
     color: #fff;
     margin-bottom: 0.25rem;
}
 .pokemon .detail {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
}
 .pokemon .detail .types {
     padding: 0;
     margin: 0;
     list-style: none;
}
 .pokemon .detail .types .type {
     color: #fff;
     padding: 0.25rem 0.5rem;
     margin: 0.25rem 0;
     font-size: 0.625rem;
     border-radius: 1rem;
     filter: brightness(1.1);
     text-align: center;
}
 .pokemon .detail img {
     filter: drop-shadow(0 0 0 white);
     max-width: 95px;
     height: 70px;
     transition: 1s;
}
 .pokemon .detail img:hover {
     filter: drop-shadow(0 0 4px white);
     -webkit-animation: vibrate 2s linear infinite alternate-reverse forwards;
     animation: vibrate 2s linear infinite alternate-reverse forwards;
}
 @-webkit-keyframes vibrate {
     0%, 100% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
         -webkit-transform-origin: 100% 50%;
         transform-origin: 100% 50%;
    }
     10% {
         -webkit-transform: rotate(2deg);
         transform: rotate(2deg);
    }
     20%, 40%, 60% {
         -webkit-transform: rotate(-4deg);
         transform: rotate(-4deg);
    }
     30%, 50%, 70% {
         -webkit-transform: rotate(4deg);
         transform: rotate(4deg);
    }
     80% {
         -webkit-transform: rotate(-2deg);
         transform: rotate(-2deg);
    }
     90% {
         -webkit-transform: rotate(2deg);
         transform: rotate(2deg);
    }
}
 @keyframes vibrate {
     0%, 100% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
         -webkit-transform-origin: 100% 50%;
         transform-origin: 100% 50%;
    }
     10% {
         -webkit-transform: rotate(2deg);
         transform: rotate(2deg);
    }
     20%, 40%, 60% {
         -webkit-transform: rotate(-4deg);
         transform: rotate(-4deg);
    }
     30%, 50%, 70% {
         -webkit-transform: rotate(4deg);
         transform: rotate(4deg);
    }
     80% {
         -webkit-transform: rotate(-2deg);
         transform: rotate(-2deg);
    }
     90% {
         -webkit-transform: rotate(2deg);
         transform: rotate(2deg);
    }
}
 .pagination {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     width: 100%;
     padding: 1rem;
}
 .pagination button {
     padding: 0.5rem 0.5rem;
     margin: 0;
     font-size: 0.825rem;
     color: #fff;
     border: none;
     border-radius: 0.2rem;
     height: 2rem;
     background: #000;
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
}
 .pagination button:hover {
   transform: scale(1.05) translateY(.125rem);
}

 .pagination button:active {
  transform: scale(0.95);
}


 @media screen and (min-width: 380px) {
     .pokemons {
         grid-template-columns: 1fr 1fr;
    }
}
 @media screen and (min-width: 576px) {
     .pokemons {
         grid-template-columns: 1fr 1fr 1fr;
    }
}
 @media screen and (min-width: 992px) {
     .pokemons {
         grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}