body{
  background-image: url('forest.jpg');
  background-size: cover;
}

.wrapper{
  width: 100%;
  align-content: center;

}


h1{
    margin: 10px;
    font-size: 40px;
    padding: 20px;
    color: white;
    background-color: #11082b;
    opacity: .7;
    border-radius: 11px;
    text-align: center;
}

/* Pokdex Styles */

.pokedex-container{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.pokedex-body{
  margin: 0 auto;
  width: 460px;
  height: 720px;
  background-color: #F73027;
  padding: 20px;
  border: 2px black solid;
}

.pokedex__screen{
  background-color: #282C34;
  padding: 20px;
  width: 420px;
  height: 580px;
  margin: 0 auto;
}

.pokedex__screenContent{
  height: 100%;
}

.search__container{
  padding: 0px 5px;
  margin-top: 10px;
  width: 420px;
}

.pokename{
  background-color: #00BF1A;
  height: 25px;
  color: yellow;
  font-family: 'Share Tech Mono', monospace;
  font-size:16px;
  text-transform: uppercase;
}

.pokename::placeholder{
  color: yellow;
  font-family: 'Share Tech Mono', monospace;
  font-size:16px;
}


#pokeName{
    width: 200px;
}



.hide{
    display: none;
}

.pokemon__images{
    display: flex;
    margin-bottom: 10px;
}

.search-container{
    display: flex;
    flex-direction: column;
    width: 300px;
    align-items: center;
}

.pokemon__image{
    width: 200px;
    margin-top: 20px;
}


.pokedex__screenContent {
    background-color: #11082b;
}


.poke-details-container{
  display: flex;
  justify-content: space-around;
  color:white;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 600;
  font-size:18px;
}

.detail__title{
  font-size: 22px;
  color: yellow;
}

.poke-details__atribute{
    color: white;
    font-weight: 600;
}


.pokename-container{
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}


.pokemon-name{
    color:white;
    font-weight: 600;
    font-size:30px;
    font-family: 'Share Tech Mono', monospace;
}

.poke-number{
    color:white;
    font-weight: 600;
    font-size:24px;
    line-height: 34px;
    font-family: 'Share Tech Mono', monospace;
}

.poke-type{
  padding-left: 10px;
  color:white;
  font-weight: 600;
  font-size:18px;
  font-family: 'Share Tech Mono', monospace;
  margin-bottom: 25px;
}

.poke-details__atribute{
  padding-left: 10px;
  color:white;
  font-weight: 600;
  font-size:16px;
  font-family: 'Share Tech Mono', monospace;
}

.poke-details-right{
  color:white
}

button{
  width: 150px;
  height: 30px;
  font-size: 16px;
  background-color: #E0DEDE;
  color: #282C34;
  font-weight: 600;
  border: 2px solid black;
  cursor: pointer;
}

/* Contenedor listado Pokemon */


.right-container{
  background-color: #F73027;
  padding: 20px;
  height: 700px;
  border: 2px solid black;
}

.pokemon__list{
  padding: 10px;
  width: 460px;
  height: 400px;
  display: flex;
  background-color: #56ADFF;
  color: white;
  justify-content: space-around;

}

.pokelist-rigth{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pokelist-left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.buttons__container{
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.pokemon__list-item{
  cursor: pointer;
  padding: 0px 5px;
  font-size: 16px;
}

.pokemon__list-item:hover{
  transform: scale(1.1);
  background-color: #96F1FF;
}


.stats__container{
  height: 180px;
  background-color: #282C34;
  padding: 20px;
  margin-bottom: 15px;
}

.stats__screen{
  height: 165px;
  background-color: #11082b;
  padding: 10px;
}

.stats__title{
  margin: 0px;
  color: yellow;
  font-size: 22px;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 600;
}

.stats__columns{
  display: flex;
  justify-content: space-around;
}

.stats__item-container{
  color: white;
  font-weight: 600;
  font-size: 18px;
  font-family: 'Share Tech Mono', monospace;
}



.stats__item{
  color: #00BF1A;
  font-family: 'Share Tech Mono', monospace;
}

  /* Estilos tipos */

  .normal {
    background: #BABAAE;
  }
  
  .fighting {
    background: #A75543;
  }
  
  .flying {
    background: #78A2FF;
  }
  
  .poison {
    background: #A95CA0;
  }
  
  .ground {
    background: #EECC55;
  }
  
  .rock {
    background: #CCBD72;
  }
  
  .bug {
    background: #C2D21E;
  }
  
  .ghost {
    background: #7975D7;
  }
  
  .steel {
    background: #C4C2DB;
  }
  
  .fire {
    background: #FA5643;
  }
  
  .water {
    background: #56ADFF;
  }
  
  .grass {
    background: #8CD750;
  }
  
  .electric {
    background: #FDE139;
  }
  
  .psychic {
    background: #FA65B4;
  }
  
  .ice {
    background: #96F1FF;
  }
  
  .dragon {
    background: #8673FF;
  }
  
  .dark {
    background: #8D6855;
  }
  
  .fairy {
    background: #F9AEFF;
  }


  @media (max-width: 800px) {
    .pokedex-container {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .pokedex-body{
      width: 480px;
    }
  }

  @media (max-width: 460px) {
    .wrapper{
      width: 400px;
    }
    .pokedex-container {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .pokedex-body{
      width: 400px;
    }
    .pokedex__screen{
      width: 340px;
    }
    .pokemon__images{
      width: 340px;
      display: flex;
      justify-content: center;
    }
    .pokemon__list{
      width: 380px;
    }
  }