: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;
}

@font-face {
  font-family: "Rubik";
  src: url(../assets/fonts/Rubik/Rubik-VariableFont_wght.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--clr-black);
  font-family: "Rubik";
}

ul {
  list-style-type: none;
}

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

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: 2rem;
  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);
  transition: .2s;
}

.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;
}

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

}

@media screen and (min-width: 470px) {
  .pokemon-todos{
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 700px) {
  .pokemon-todos{
    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-id-back {
  position: absolute;
  /*centrado*/
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);

  font-size: 6rem;
  font-weight: 800;
  color: var(--clr-gray);
  z-index: -1;
  
}

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

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

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

.nombre-contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  flex-wrap: wrap;
}

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

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

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

.tipo {
  padding: .25rem .5rem;
  border-radius: 100vmax;
}

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

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







/* Colores de botones para cada tipo */
.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);
}