body{
    font-family: 'Reem Kufi', sans-serif;
    padding:0;
    margin:0;
    border:0;
    background-color: #FFFFFF;
    color:rgb(49, 49, 49); 
    }

.navbar{
  background-color:rgb(49, 49, 49);
}

/*menu */
.menu{
    width:50%;
    margin:0 auto;
    text-align: center;
}

.menu li{
    width: 600px;
}

.menu li a{
    height: 100px;
    width: 150px;
	font-size:120%;
	color:#FFFFFF;
	padding:10px 15px;
	box-shadow:0px 5px 4px #0f0f0f;
}

/*.menu li a:hover{
	background-color:#DC7633;
	box-shadow:0px 2px 2px #B84B04;
}*/
#itemPokedex{
  box-shadow:0px 5px 3px #e3350d;
  background-image:url(../img/iconPokedex2.png);
  background-repeat: no-repeat;
  background-size: 30%;
  background-position-y: 70%;
  background-position-x: 50%;
}

#itemPokedex:hover{
    background-color:#e3350d;
}

#itemPokedexRetro{
    box-shadow:0px 5px 3px #3498DB;
    background-image:url(../img/iconPokedexNew2.png);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position-y: 70%;
    background-position-x: 50%;
}

#itemPokedexRetro:hover{
    background-color:#3498DB;
}


.menu li a:active{
	box-shadow:none;
}

/*header */

header {
    background-image: url('../img/banner.png');
    background-repeat: no-repeat;
    background-size: cover ;
    background-position: center;
    padding-bottom: 15rem;
    background-color:rgb(85, 85, 85);
}

#labelBuscaPokemon{
    width: 90%;
}
.letraBlanca{
  color:#FFFFFF
}
#inputBuscaPokemon{
  width: 100%;
}
#botonBuscar{
  width: 20%;
}

#labelBuscaPokemon, #inputBuscaPokemon, #botonBuscar{
    display:inline-block;
}

.secFormularioBusqueda{
border:1px solid #e3350d;
border-collapse:collapse;
background-color:rgba(49, 49, 49, 1);
width:85%;
}

 /*audio musica*/
 #frameMusica{
   display:none;
 }

 /* tarjetas pokemones*/
 .imagenP{
  margin:0 auto; 
 background: rgb(2,0,36);
 background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.4990371148459384) 20%, rgba(0,255,201,1) 100%);
}

/*imagen del pokemon traida desde la API (pokemon con fondo transparente 'Sprite')*/
.imagenPokemon{
  width: 90%;
}
/*a la carta con el pokemon la damos bordes redondeados, y cursor para dar sensación de selección*/
.cartaPokemon{
  border-radius: 10px;
  border: 0px solid rgb(49, 49, 49);
  cursor: pointer;
}
/*carta con poquemon la aclaramos al posicionarse sobre ella para dar la sensación de seleccionado*/
.cartaPokemon:hover{
opacity: 0.8;
}

.tipoPokemon{
  display: inline-block;
   margin:2px 1px 2px 1px;
  padding: 0 4px 0 4px;
}

.verdeTipoPanta{
  background-color:#9bcc50;
}

.moradoTipoVeneno{
  background-color:#b97fc9;
}

.naranjaTipoFuego{
 background-color:#fd7d24;
}
.azulTipoAgua{
  background-color:#4592C4;
}

.verdeTipoBicho{
  background-color:#729F3F;
}

.grisTipoNormal{
  background-color:#A4ACAF;
}

.colorTipoVolador{
  background: rgb(189,185,184);
  background: linear-gradient(0deg, rgba(189,185,184,1) 53%, rgba(61,199,239,1) 55%);
}

.moradoTipoPsiquico{
  background-color:#F366B9;
}

.tituloPokemonDes{
padding-top: 20px;  
font-family: 'Englebert', sans-serif;
font-size: 3rem;
}

.parrafoPokemonDes{
  font-family: 'Englebert', sans-serif;
  font-size: 1.5em;
}

/*panel de detalle de informacion del pokemon*/
#detallePokemon{
	border:1px solid #e3350d;
	border-radius:20px;
	border-collapse:collapse;
  background-color:rgba(49, 49, 49, 1);
  width:60%;
  text-align: center;
  color:#FFFFFF;
  margin: auto;
}

.divImagenDetallePokemon{
  width: 400px;
  height: 400px;
  /*background: red;*/
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  margin:20px auto;
  overflow:hidden;

  display: flex;
  align-items: center;

  background-color: #927b34;
  background-color: #DFDBE5;
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.4990371148459384) 20%, rgba(0,255,201,1) 170%), url("../img/galaxia.gif");
  mix-blend-mode: hard-light;
}

.imagenDetallePokemon{
  /*width: 60%;*/
  min-width:220px;
  min-height:220px;
  max-width:390px;
  max-height:390px;
  display:inline-block;
  margin:auto;
  object-fit: cover;
}

/*gráfico*/
#graficaDiv {
  background-color: #30303d; color: #fff; 
  width: 100%;
  height: 500px;
margin: auto;
}

/*ir arriba (Snorlax)*/
.ir-arriba{
  display: none; /*para que no se vea el snorlax al cargar la página*/
  padding:5px;
	color:#fff;
	cursor:pointer; /*Marca como link (mano) sobre la imagen de snorlax */
  position: fixed; /*Logra que Snorlax esté fijo al subir la página*/
  width: 200px;
  height: 200px;
  background-image: url('../img/snorlax2.png'); /*carga imagen de Snorlax durmiendo*/
  background-size: 100%;
  background-repeat: no-repeat;
	bottom:20px;
	right:100px;
 }

/*Link a mi gitHub*/
.pieAutor:link{
   color:#FFFFFF;
   text-decoration: none;
   font-size: 0.8em; /*tamaño letra*/
}
.pieAutor:hover{
   color:#FFC300;
   text-decoration: none;
}

.pieAutor:visited{
  color:#F9E79F;
}