/* RESET BASICO  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--clr-black);
  font-family: 'Google Sans', sans-serif;
}

:root {
  --clr-black: #1c1c1c;
  --clr-gray: #ececec;
  --clr-white: #f7f7f7;

  --type-normal: #a8a878;
  --type-fire: #f08030;
  --type-water: #6890f0;
  --type-grass: #78c850;
  --type-electric: #f8d030;
  --type-ice: #98d8d8;
  --type-fighting: #c03028;
  --type-poison: #a040a0;
  --type-ground: #e0c068;
  --type-flying: #a890f0;
  --type-psychic: #f85888;
  --type-bug: #a8b820;
  --type-rock: #b8a038;
  --type-ghost: #705898;
  --type-dark: #705848;
  --type-dragon: #7038f8;
  --type-steel: #b8b8d0;
  --type-fairy: #f0b6bc;
}

ul {
  list-style-type: none;
}

img {
  width: 15rem;
}

button {
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

body {
  min-height: 100vh;
  background-color: var(--clr-gray);
}
header {
  padding-block: 1rem;
  box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.5);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding-inline: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

.nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn-header {
  background-color: var(--clr-gray);
  padding: 0.5rem;
  border-radius: 100vmax;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}

.btn-header:hover {
  transform: scale(1.1);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
}

main {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.all-pokemon {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 500px) {
  .all-pokemon {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 700px) {
  .all-pokemon {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.pokemon {
  border-radius: 1rem;
  background-color: var(--clr-white);
  box-shadow: 0 0 3rem -1rem rgba(0, 0, 0, 0.25);
  padding-block: 1rem;
  text-transform: uppercase;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.pokemon-img img {
  width: 100%;
  max-width: 6rem;
}

.pokemon-img {
  padding-inline: 1rem;
  display: flex;
  justify-content: center;
}

.pokemon-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-inline: 1rem;
  align-items: center;
  text-align: center;
}

.name-container {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pokemon-id-back {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6rem;
  color: var(--clr-gray);
  z-index: -1;
  font-weight: 800;
}

.pokemon-id {
  background-color: var(--clr-gray);
  padding: 0.25rem 0.5rem;
  border-radius: 100vmax;
  font-size: 0.75rem;
  font-weight: 500;
}

.pokemon-name {
  font-size: 1.4rem;
}

.pokemon-types {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  flex-wrap: wrap;
  justify-content: center;
}

.type {
  padding: 0.25rem 0.5rem;
  border-radius: 100vmax;
  font-weight: bold;
}

.pokemon-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
}

.stat {
  background-color: var(--clr-gray);
  padding: 0.25rem 0.5rem;
  border-radius: 100vmax;
}

.normal {
  background-color: var(--type-normal);
  color: var(--clr-black);
}
.fire {
  background-color: var(--type-fire);
  color: var(--clr-black);
}
.water {
  background-color: var(--type-water);
  color: var(--clr-white);
}
.grass {
  background-color: var(--type-grass);
  color: var(--clr-black);
}
.electric {
  background-color: var(--type-electric);
  color: var(--clr-black);
}
.ice {
  background-color: var(--type-ice);
  color: var(--clr-black);
}
.fighting {
  background-color: var(--type-fighting);
  color: var(--clr-white);
}
.poison {
  background-color: var(--type-poison);
  color: var(--clr-white);
}
.ground {
  background-color: var(--type-ground);
  color: var(--clr-black);
}
.flying {
  background-color: var(--type-flying);
  color: var(--clr-black);
}
.psychic {
  background-color: var(--type-psychic);
  color: var(--clr-black);
}
.bug {
  background-color: var(--type-bug);
  color: var(--clr-black);
}
.rock {
  background-color: var(--type-rock);
  color: var(--clr-black);
}
.ghost {
  background-color: var(--type-ghost);
  color: var(--clr-white);
}
.dark {
  background-color: var(--type-dark);
  color: var(--clr-white);
}
.dragon {
  background-color: var(--type-dragon);
  color: var(--clr-white);
}
.steel {
  background-color: var(--type-steel);
  color: var(--clr-black);
}
.fairy {
  background-color: var(--type-fairy);
  color: var(--clr-black);
}