@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-WYi1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4i1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-NYi1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-2Y-1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-4I-1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-h4-1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-ro-1UA.ttf) format('truetype');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #1c1c1c;
  font-family: 'Rubik', sans-serif;
}
body {
  min-height: 100vh;
  background-color: #ececec;
}
header {
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.5);
}
.filtrar {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 100vmax;
  background-color: #FFCE31;
  border: 3px solid #030066;
  cursor: pointer;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}
.filtrar:hover {
  transform: scale(1.1);
}
.ocultar-filtrar {
  display: none;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding-inline: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.nav img {
  width: 150px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
.nav-lista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  display: none;
}
ul {
  list-style-type: none;
}
button {
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
.btn-header {
  background-color: #ececec;
  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;
}
.pokemon-todos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media screen and (min-width: 470px) {
  .pokemon-todos {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.pokemon {
  border-radius: 1rem;
  background-color: #f7f7f7;
  box-shadow: 0 0 3rem -1rem rgba(0, 0, 0, 0.25);
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-transform: uppercase;
}
.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;
  column-gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pokemon-id {
  background-color: #ececec;
  padding: 0.25rem 0.5rem;
  border-radius: 100vmax;
  font-size: 0.75rem;
  font-weight: 500;
}
.pokemon-nombre {
  font-size: 1.4rem;
}
.pokemon-tipos {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  flex-wrap: wrap;
  justify-content: center;
}
.tipo {
  padding: 0.25rem 0.5rem;
  border-radius: 100vmax;
}
.pokemon-estadisticas {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
}
.estadistica {
  background-color: #ececec;
  padding: 0.25rem 0.5rem;
  border-radius: 100vmax;
}
.normal {
  background-color: #a8a878;
  color: #1c1c1c;
}
.fire {
  background-color: #f08030;
  color: #1c1c1c;
}
.water {
  background-color: #6890f0;
  color: #1c1c1c;
}
.grass {
  background-color: #78c850;
  color: #1c1c1c;
}
.electric {
  background-color: #f8d030;
  color: #1c1c1c;
}
.ice {
  background-color: #98d8d8;
  color: #1c1c1c;
}
.fighting {
  background-color: #c03028;
  color: #1c1c1c;
}
.poison {
  background-color: #a040a0;
  color: #1c1c1c;
}
.ground {
  background-color: #e0c068;
  color: #1c1c1c;
}
.flying {
  background-color: #a890f0;
  color: #1c1c1c;
}
.psychic {
  background-color: #f85888;
  color: #1c1c1c;
}
.bug {
  background-color: #a8b820;
  color: #1c1c1c;
}
.rock {
  background-color: #b8a038;
  color: #1c1c1c;
}
.ghost {
  background-color: #705898;
  color: #1c1c1c;
}
.dark {
  background-color: #705848;
  color: #1c1c1c;
}
.dragon {
  background-color: #7038f8;
  color: #1c1c1c;
}
.steel {
  background-color: #b8b8d0;
  color: #1c1c1c;
}
.fairy {
  background-color: #f0b6bc;
  color: #1c1c1c;
}