*{
  font-family:'Press Start 2P';
}

.contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
} 
.perfil {
  text-align: center;
  margin-bottom: 20px;
}
.pokemon-container {
  /* Estilos para el contenedor de Pokémon */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.pokemon-card {
  display: block; /* Cada tarjeta en una línea separada */
  margin-bottom: 20px; /* Margen inferior para separar las tarjetas */
  gap: 10px;
}

.pokebola{
    height: 30%;
    width: 30px;
    cursor: pointer;
}

.pokebolaCatch{
  display: flex;
  margin: -2px;
  height: 27px;
  width: 27px;

  cursor: pointer;
}

.pkmn-seleccionados{
  display: flex;
  border: solid;
  border-radius: 64px;
  padding: 12px;
  justify-content: space-around;
  margin: 10px;
  width: 80%;
  background-color: white;
}

  /* estilo para darle color gris a los sprites de los pokemon */
  .imagen-pokedex {
    filter: grayscale(1.5);
    background-color: #52525218;
  }

  .borde-pkdx{
    filter: grayscale(1.5);
  }

  .listado-atrapado .imagen-pokedex img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  
.contenedor-pkmn {
  display: grid;
  gap: 10px;
  justify-content: space-around; 
 }

 .mis-pokemon {
  display: flex;
  padding: 2%;  
  width: auto;
    height: 400px;
    border: 1px solid;
    border-radius: 30px;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
    gap: 20%;
    padding-top: 6%;
}
  .producto-imagen-pokemon {
    position: absolute;
    z-index: 1;
    height: 128px;
    width: 127px;
    border: solid 1px black;
    border-radius: 50%;
    background-color: white;
    padding: 2%;
    margin-top: 14px;
 }

.borde{
  width: 250px;
    height: 250px;
    position: absolute;
    z-index: 1;
}

  .detalles-pkmn{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    }

.img-team{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-top: 8%;
}

.div-pkmn{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.borde-pkdx{
  width: 185px;
    margin: -7%;
    height: auto;
    position: absolute;
    z-index: 3;
    padding: 10px;
}
  .img-container{
    display: flex;
    width: 75%;
    flex-direction: column;
    border-radius: 10%;
    border: 2px solid black;
    background-color: white;
    margin: 5%;
  }

  .btn {
    border-radius: 30px;
  }


  h6{
    text-shadow: 1px 1px 1px white;
  }

  .pokemon-name{
    font-size: 14px;
    padding-top: 10%;
    text-shadow: 1px 1px 1px white;
  }

  .div-pkm{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border: solid;
  }

  .atrapado {
    display: none;
    width: 85px;
    cursor: pointer;
    position: absolute;
    margin-left: 1px;
    margin-top: 22px;
    z-index: 2;
  }
  
  .pkdx {
    margin: 25px;
    border-radius: 50px;
    width: 75px;
    height: auto;
    z-index: 3;
  }

.p-name{
  display: flex;
  justify-content: center;
}

.pokemon{
  padding-left: 10px;
}
  .pelea{
    flex: 1;
    display: flex;
    padding: 10px;
    width: 300px;
    height: max-content;
    border-radius: 10px;
    overflow: hidden;
    /* flex-direction: column; */
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
    background-color: black;
  }

.progress{
  border: 2px solid black;
}

  .img-card{
    width: 50%;
    height: auto;
  }


  .custom-options img{
    
 
    border: 1px solid;
    border-radius: 50%;
    width: 40px;
    height: auto;
  }

  .custom-options{
    display: grid;
    grid-template-columns: repeat(6, 2.5rem);
    grid-gap: 1px;
  }

  .custom-option:hover{
    cursor: pointer;
    background-color: lightgreen;
    border-radius: 50%;
  }

  .custom-option:focus{
    cursor: pointer;
    background-color: lightgreen;
    border-radius: 50%;
  }

.type{
  position: absolute;
    width: 20px;
    height: auto;
    padding-top: 25%;
    z-index: 1;
}


.modal-header{
  flex-direction: column;
  align-items: stretch;
}

.fire-background{
  background: linear-gradient(#f66001, #f8791c,#fb9238, #fdab53, #ffc46e );
}

.normal-background{
  background: linear-gradient(#be9927, #ceb240, #dfcb58, #efe371, #fffc89);
}

.electric-background{
  background: linear-gradient(#e8ff59, #eeff73, #f4ff8d, #f9ffa6, #ffffc0 );
}

.poison-background{
  background: linear-gradient(#e8ff, #9823dd, #8417ca, #6f0cb6, #5b00a3);
}

.bug-background{
  background: linear-gradient(#97db20,#b1e43c, #cbed58, #e5f674, #ffff90);
}

.dark-background{
  background: linear-gradient(#7464a1, #635590, #53457f, #42366d, #31265c);
}

.dragon-background{
  background: linear-gradient(#b79ee2, #c9b6e9, #dbcff1, #ede7f8, #ffffff);
}

.fairy-background{
  background: linear-gradient(#ffa6fd, #ffbcfe, #ffd3fe, #ffe9ff, #ffffff);
}

.fighting-background{
  background: linear-gradient(#846301, #735401, #624401, #513500, #402500);
}

.flying-background{
  background: linear-gradient(#b79ee2, #c9b6e9, #dbcff1, #ede7f8, #ffffff);
}

.ghost-background{
  background: linear-gradient(#4e1e40, #663456, #7d4a6d, #955f83, #ac7599);
}

.grass-background{
  background: linear-gradient(#56f04f, #41dd3b, #2bca28, #16b614, #00a300);
}

.ground-background{
  background: linear-gradient(#be9927, #ceb240, #dfcb58, #efe371, #fffc89);
}

.ice-background{
  background: linear-gradient(#15ccd4, #39d9df, #5de6ea, #80f2f4, #a4ffff);
}

.psychic-background{
  background: linear-gradient(#daa4b8, #c893a6, #b58195, #a37083, #905e71);
}

.rock-background{
  background: linear-gradient(#6b7c64, #5b6c55, #4c5c45, #3c4b36, #2c3b26);
}

.steel-background{
  background: linear-gradient(#e1e6d4, #e9ecdf, #f0f3ea, #f8f9f4, #ffffff);
}

.water-background{
  background: linear-gradient(#6f7bfe, #8a93fe, #a6abff, #c1c3ff, #dcdbff);
}


.button1{
  border-style: none;
  background-color: transparent;
}

.button{
  border-style: none;
  background-color: transparent;
}


.btn-atacar, .btn-cambiar, .btn-team, .btn-huir{
  font-size: small;
  width: max-content;
  border-style: double;
  padding: 2%;
  margin: 1%;;
}




.btn-capturar:hover, .btn-huir:hover, .btn-cambiar:hover, .btn-atacar, .btn-team:hover{
  border-style: inset;
  border-color: black;
}

.card-body{
  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
}


.modal-header{
  background-color: #b90504;
}

.modal-body{
  background-color: #333333;
}

#modal-footer{
  background-color: #b90504;
}

.style-header{
  background-color: #9dd3df;
}

.style-body{
  background-color: #9dd3df;
}

#style-footer{
  background-color: #9dd3df;
}

#contenedor-pokedex{
  background-color: #e8e8e8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 10px;
}

.modal-title{ 
text-shadow: 1px 1px 2px #f6f6f6;
}

.seleccion{
  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
 .atrapado {
   
    width: 85px;
    cursor: pointer;
    position: absolute;
    margin-left: -2px;
    margin-top: 32px;
}


.botones-celulares{
  height: auto;
width: auto;
}


@media only screen  
and (min-device-width: 320px) 
and (max-device-width: 435px)  {
  .mb1{
    width: fit-content;
    height: auto;

  }
  
  
  
}