*{
  font-family: 'Inter', sans-serif;
}

article {
  display: flex;
  flex-direction: row;
  background-image: url(./imagenes/fondo.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0%;
  padding: 0%;
  z-index: -1;
  width: 100%;
  height: 250px;
}
.calcular2{
  display: flex;
  background-color: #1D2C5E;
  border-radius: 10px;
  margin: -11% 1% 3% 31%;
  width: 33%;
  color: white;
  font-size: 11px;
  padding: 1%;
  font-weight: 600;

}

.palabra1movil{
  color: #3A5CA8;
  font-weight: bold;
  display: flex;
  font-size: 13px;
  font-family: jost;
  margin: 130% -4% -54% -97%;
}
.palabra2movil{
  width: 110%;
  margin: 71% 1% 1% -91%;
}
.palabra3movil{
  color: #3A5CA8;
  font-weight: bold;
  display: flex;
  font-size: 20px;
  font-family: jost;
  margin: 71% -4% -114% -86%;
}
.bienvenida {
  display: none;
}
.bienvenida2{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  max-width: 100%;
  width: 1978px;
  background-color: rgba(255,255,255,.5);
  height: 105px;
  border-radius: -2 -3 74% 0;
  margin: -35% 2% 0% 0%;
}

.palabra1 {
  display: none;
}

.palabra2 {
  display: none;
}

.palabra3 {
  display: none;
}

.logo {

  width: 108%;
  height: auto;
  margin: 20%;
  align-items: center;
  margin: 10% 2% 1% 24%;
}

.ash {
  display: none;
}

nav{
  padding: 2% 1% 4% 4%;
  background-color: #1D2C5E;

}
#buscador {
  margin: 1% 1% 1% 15%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background-color: #efe6e6;
  border-radius: 10px;
}
.tipos{
  display: flex;
  margin: 0% 1% 1% 23%;
  background-color: #1D2C5E;
  padding: 1% 1% 1% 1%;
  border-color: #1D2C5E;
  color: white;
}
.resistant{
  display: flex;
  margin: 1% 1% 1% 18%;
  background-color: #1D2C5E;
  padding: 1% 1% 1% 1%;
  border-color: #1D2C5E;
  color: white;
}
.weaknesses{
  display: flex;
  margin: 1% 1% 1% 15%;
  background-color: #1D2C5E;
  padding: 1% 1% 1% 1%;
  border-color: #1D2C5E;
  color: white;
}

.ordenar{
  display: flex;
    background-color: #76CDF4;
    border-radius: 10px;
    margin: 1% 1% 1% 31%;
    width: 34%;
    color: #1D2C5E;
    font-size: 12px;
}


#contenedorPokemon {
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  justify-content: center;
}

.cardImage {
  background-color: #8FFEBC;
    border-radius: 28px;
    width: 295px;
    height: 434px;
    font-family: 'Inter', sans-serif;
    margin: 1%;
    padding: 1%;
}
.rectanguloInterno{
  background-color: #E8FFF1;
  width: 87%;
  height: 92%;
  margin: -3% 19% -1% 3%;
  padding: 0% 1% 1% 5%;
}
.num{
  font-size: 90%;
  padding: 3% 7% 5% 0%;
}
.nombre{
  text-transform: capitalize;
  padding: 0% 5% 5% 0%;
  margin: -13% 1% 1% 0%;
}
.negrita{
  font-weight: 900;
}
.generacionNumero{
  font-weight: 600;
    text-transform: capitalize;
    margin: -6% 1% 1% 0%;
}
.generacionNombre{
  font-weight: 600;
    text-transform: capitalize;
    margin: -1% 1% 1% 0%;
}
.cp{
  margin: -23% -13% -5% 68%;
  color: #C012B9;
}
.hp{
  margin: 4% -14% -4% 68%;
  color: #C012B9;
}
.imagen{
  width: 60%;
  margin: 13% 3% 4% 17%;
}
.altura{
  font-weight: 600;
  margin: -6% 1% 1% 14%;
}
.peso{
  font-weight: 600;
  margin: -6% 1% 1% 50%;
}
.tipo{
  font-size: 15px;
  margin: 1% 1% 1% 1%;
  text-align: center;
}
.resistencia{
  text-align: center;
  font-size: smaller;
  margin: 0% 1% 1% -3%;
  background-color: #74B4FF;
  border-radius: 10px;
  color: white;
  height: 5%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-weight: normal;
}

.palabraResistant{
  color: #3A5CA8;
  text-align: center;
  margin: -1% 1% 1% 1%;
  font-size: 12px;
}
.debilidad{
  text-align: center;
  font-size: small;
  margin: 0% 1% 1% -3%;
  background-color: #F19EFF;
  border-radius: 10px;
  color: white;
  height: 5%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-weight: 100;
}
.palabraDebilidad{
  color: #FE8FD2;
    text-align: center;
    margin: 2% 1% 1% 1%;
    font-size: 12px;
}
.imagenHuevo{
  margin: -13% 1% 1% 64%;
  width: 7%;
}
.huevo{
  margin: -18% 1% 1% 73%;
}
.caramelo{
  width: 8%;
  height: auto;
  margin: -19% 1% 12% 1%;
}
.infoCaramelo{
  margin: -30% 1% 9% 11%;
}
.pokemonArticulo h1 {
  color: black;
}
.tiposPokemon{
display: flex;
justify-content: space-around;
}
.noShow{
  display: none;
}
.grass {
  background-color: #098236;
    margin: 1% 1% 1% 1%;
    border-radius: 10px;
    width: 40%;
    display: flex;
    justify-content: center;
    text-transform: capitalize;
    font-size: 75%;
    color: white;
}
.poison {
  background-color: #662F9C;
    margin: 1% 1% 1% 1%;
    border-radius: 10px;
    width: 40%;
    display: flex;
    justify-content: center;
    text-transform: capitalize;
    font-size: 75%;
    color: white;
}
.water{
  background-color: #1054E3;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
  color: white;
}
.fire{
  background-color: #FF4B59;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;

}
.flying{
  background-color: #9AB9CE;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.normal{
  background-color: #7F535E;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
  color: white;
}
.ice{
  background-color: #88DCEE;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.electric{
  background-color: #F9FF6C;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.rock{
  background-color: #864327;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
  color: white;
}
.bug{
  background-color: #3EA054;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
  color: white;
}
.dark{
  background-color: #5A5A78;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.dragon{
  background-color: #60D5E8;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.fairy{
  background-color: #A71545;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
  color: white;
}

.fighting{
  background-color: #BB380F;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.ghost{
  background-color: #946997;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.ground{
  background-color: #C1A077;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.psychic{
  background-color: #FC1A91;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
  color: white;
}
.steel{
  background-color: #588372;
  margin: 1% 1% 1% 1%;
  border-radius: 10px;
  width: 40%;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  font-size: 75%;
}
.filtro{
  display:none;
}
@media screen and (min-device-width: 375px) and (max-device-width: 412px) {
  .calcular2{
    display: flex;
    background-color: #1D2C5E;
    border-radius: 10px;
    margin: -10% 1% 3% 34%;
    width: 33%;
    color: white;
    font-size: 11px;
    padding: 1%;
    font-weight: 600;
  }
  
  .palabra1movil{
    color: #3A5CA8;
    font-weight: bold;
    display: flex;
    font-size: 13px;
    font-family: jost;
    margin: 112% -4% -59% -119%;
  }
  .palabra2movil{
    width: 110%;
    margin: 72% 1% 1% -111%;
}
  
  .palabra3movil{
    color: #3A5CA8;
    font-weight: bold;
    display: flex;
    font-size: 20px;
    font-family: jost;
    margin: 74% -4% -114% -103%;
  }
  .bienvenida {
    display: none;
  }
  .bienvenida2{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    max-width: 100%;
    width: 1978px;
    background-color: rgba(255,255,255,.5);
    height: 105px;
    border-radius: -2 -3 74% 0;
    margin: -35% 2% 0% 0%;
  }
  
  .palabra1 {
    display: none;
  }
  
  .palabra2 {
    display: none;
  }
  
  .palabra3 {
    display: none;
  }
  
  .logo {
  
    width: 74%;
    height: auto;
    margin: 20%;
    align-items: center;
    margin: 7% 5% -1% 37%;
  }
  
  .ash {
    display: none;
  }
  
  nav{
    padding: 2% 1% 4% 4%;
    background-color: #1D2C5E;
  
  }
  #buscador {
    margin: 1% 1% 1% 21%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    background-color: #efe6e6;
    border-radius: 10px;
  }
  .tipos{
    display: flex;
    margin: 0% 1% 1% 30%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  .resistant{
    display: flex;
    margin: 1% 1% 1% 23%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  .weaknesses{
    display: flex;
    margin: 1% 1% 1% 17%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  
  .ordenar{
    display: flex;
      background-color: #76CDF4;
      border-radius: 10px;
      margin: 1% 1% 1% 28%;
      width: 34%;
      color: #1D2C5E;
      font-size: 12px;
  }
}

@media screen and (min-device-width: 412px) and (max-device-width: 768px) {
  .calcular2{
    display: flex;
    background-color: #1D2C5E;
    border-radius: 10px;
    margin: -10% 1% 3% 34%;
    width: 33%;
    color: white;
    font-size: 11px;
    padding: 1%;
    font-weight: 600;
  }
  
  .palabra1movil{
    color: #3A5CA8;
    font-weight: bold;
    display: flex;
    font-size: 13px;
    font-family: jost;
    margin: 101% -4% -59% -130%;
  }
  .palabra2movil{
    width: 110%;
    margin: 71% 1% 1% -121%;
}
  
  .palabra3movil{
    color: #3A5CA8;
    font-weight: bold;
    display: flex;
    font-size: 20px;
    font-family: jost;
    margin: 73% -4% -113% -116%;
  }
  .bienvenida {
    display: none;
  }
  .bienvenida2{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    max-width: 100%;
    width: 1978px;
    background-color: rgba(255,255,255,.5);
    height: 105px;
    border-radius: -2 -3 74% 0;
    margin: -35% 2% 0% 0%;
  }
  
  .palabra1 {
    display: none;
  }
  
  .palabra2 {
    display: none;
  }
  
  .palabra3 {
    display: none;
  }
  
  .logo {
  
    width: 68%;
    height: auto;
    margin: 20%;
    align-items: center;
    margin: 2% 5% -1% 37%;
}
  
  
  .ash {
    display: none;
  }
  
  nav{
    padding: 2% 1% 4% 4%;
    background-color: #1D2C5E;
  
  }
  #buscador {
    margin: 1% 1% 1% 24%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    background-color: #efe6e6;
    border-radius: 10px;
  }
  .tipos{
    display: flex;
    margin: -3% 1% 1% 32%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  .resistant{
    display: flex;
    margin: 1% 1% 1% 25.2%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  .weaknesses{
    display: flex;
    margin: 1% 1% 1% 20%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  
  .ordenar{
    display: flex;
      background-color: #76CDF4;
      border-radius: 10px;
      margin: -2% 1% 1% 26.3%;
      width: 34%;
      color: #1D2C5E;
      font-size: 12px;
  }
}
@media screen and (min-device-width: 768px)  {
  .logo {
    display: flex;
    width: 150%;
    height: auto;
    margin: 7% -44%;
    align-items: center;
  }

  .ash {
    display: flex;
    margin: 68% 5% 0% 9%;
    z-index: 2;
    width: 90%;
    height: auto;
  }

   .palabra1 {
    display: flex;
    font-size: 13px;
    font-family: "Jost";
    color: #3A5CA8;
    font-weight: bold;
    margin: 12% 5%;
  }

  .palabra2 {
    display: flex;
    width: 153px;
    margin: 24% -109%;
  }

  .palabra3 {
    display: flex;
    font-size: 20px;
    font-family: "Jost";
    color: #3A5CA8;
    font-weight: 900;
    margin: 0% 5%;
}
.palabra1movil {
  display: none;
}
.palabra2movil{
  display: none;
}
.palabra3movil{
  display: none;
}
  .bienvenida {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    max-width: 40%;
    width: 2000px;
    background-color: rgba(255, 255, 255, .5);
    height: 153px;
    border-radius: 0 0 100% 0;
  }
  .bienvenida2{
    display: none;
  }
  .calcular{
    display: flex;
    background-color: #1D2C5E;
    border-radius: 10px;
    margin: 1% 1% 1% 8%;
    width: 56%;
    color: white;
    font-size: 11px;
    padding: 1%;
    font-weight: 600;
  
  }
  .calcular2{
    display: none;
  }
  nav{
    padding: 1% 1% 1% 4%;
    background-color: #1D2C5E;
  
  }
  #buscador {
    margin: 1% 1% 1% -1%;
    background-color: #efe6e6;
    border-radius: 10px;
}
  
  .tipos{
   
    margin: -6.5% 3% -2% 25%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  .resistant{
   
    margin: -5% 1% 0% 40%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  .weaknesses{
  
    margin: -5% 1% 0% 59%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
  }
  
  .ordenar{
    
    background-color: #76CDF4;
    border-radius: 10px;
    margin: -6% 1% 1% 82%;
    width: 15%;
    color: #1D2C5E;
    font-size: 12px;
  }
}
@media  screen and (min-device-width:1024px)and (max-device-width: 1366px) {
  .logo {
    display: flex;
    width: 118%;
    height: auto;
    margin: 7% -32%;
    align-items: center;
  }

  .ash {
    display: flex;
    margin: 32.5% 5% 12% 9%;
    z-index: 2;
    width: 90%;
    height: auto;
  }

   .palabra1 {
    display: flex;
    font-size: 13px;
    font-family: "Jost";
    color: #3A5CA8;
    font-weight: bold;
    margin: 12% 5%;
  }

  .palabra2 {
    display: flex;
    width: 162px;
    margin: 29% -144%;
  }

  .palabra3 {
    display: flex;
    font-size: 20px;
    font-family: "Jost";
    color: #3A5CA8;
    font-weight: 900;
    margin: 0% 5%;
}
.palabra1movil {
  display: none;
}
.palabra2movil{
  display: none;
}
.palabra3movil{
  display: none;
}
  .bienvenida {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    max-width: 40%;
    width: 2000px;
    background-color: rgba(255, 255, 255, .5);
    height: 153px;
    border-radius: 0 0 100% 0;
  }
  .bienvenida2{
    display: none;
  }
  .calcular{
    display: flex;
    background-color: #1D2C5E;
    border-radius: 10px;
    margin: 1% 1% 1% 8%;
    width: 41%;
    color: white;
    font-size: 11px;
    padding: 1%;
    font-weight: 600;
  
  }
  .calcular2{
    display: none;
  }
  nav{
    padding: 4% 1% 2% 4%;
    background-color: #1D2C5E;
  
  }
  #buscador {
    margin: -1.7% 1% -6% -2%;
    background-color: #efe6e6;
    border-radius: 13px;
    padding: 5px;
    width: 24%;
}
  
  .tipos{
    margin: -5% 3% -2% 22%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
    font-size: 20px;
  }
  .resistant{
    margin: -5% 1% 0% 38%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
    font-size: 20px;
  }
   .weaknesses{
    margin: -5% 1% -2% 56%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
    font-size: 20px;
} 
  .ordenar{
    background-color: #76CDF4;
    border-radius: 36px;
    margin: -5.5% 1% 1% 82%;
    width: 15%;
    color: #1D2C5E;
    font-size: 17px;
    padding: 0.3%;
    font-weight: 600;
}
  }

  @media  screen and (min-device-width: 1366px) {
    .logo {
      display: flex;
    width: 91%;
    height: auto;
    margin: -1% -7%;
    align-items: center;
    }
  
    .ash {
      display: flex;
    margin: 21.5% 5% 12% 9%;
    z-index: 2;
    width: 62%;
    height: auto;
    }
  
     .palabra1 {
      display: flex;
      font-size: 13px;
      font-family: "Jost";
      color: #3A5CA8;
      font-weight: bold;
      margin: 12% 5%;
    }
  
    .palabra2 {
      display: flex;
    width: 162px;
    margin: 37% -171%;
    }
  
    .palabra3 {
      display: flex;
      font-size: 20px;
      font-family: "Jost";
      color: #3A5CA8;
      font-weight: 900;
      margin: 0% 5%;
  }
  .palabra1movil {
    display: none;
  }
  .palabra2movil{
    display: none;
  }
  .palabra3movil{
    display: none;
  }
    .bienvenida {
      display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    max-width: 40%;
    width: 1648px;
    background-color: rgba(255, 255, 255, .5);
    height: 209px;
    border-radius: 0 0 228% 0;
    }
    .bienvenida2{
      display: none;
    }
    .calcular{
      display: flex;
      background-color: #1D2C5E;
      border-radius: 10px;
      margin: 1% 1% 1% 8%;
      width: 41%;
      color: white;
      font-size: 11px;
      padding: 1%;
      font-weight: 600;
    
    }
    .calcular2{
      display: none;
    }
    nav{
      padding: 4% 1% 2% 4%;
      background-color: #1D2C5E;
    
    }
    #buscador {
      margin: -2.7% 1% -6% -2%;
    background-color: #efe6e6;
    border-radius: 58px;
    padding: 7px;
    width: 20%;
  }
    
    .tipos{
      margin: 2.9% 3% -2% 20%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
    font-size: 20px;
    }
    .resistant{
      margin: -3.9% 1% 0% 35%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
    font-size: 20px;
}
    
     .weaknesses{
      margin: -4.25% 1% -2% 53%;
    background-color: #1D2C5E;
    padding: 1% 1% 1% 1%;
    border-color: #1D2C5E;
    color: white;
    font-size: 20px;
  } 
    .ordenar{
      background-color: #76CDF4;
    border-radius: 36px;
    margin: -4.5% 1% 1% 72%;
    width: 18%;
    color: #1D2C5E;
    font-size: 17px;
    padding: 0.3%;
    font-weight: 600;
  }
}