/* tipografía */
@font-face {
    font-family:pokemon;
    src:url("fonts/PixeBold.ttf"),
        url("fonts/Pixel.ttf");   
  }

/* formatos generales de selectores*/
h1{
    text-align:left;
    font-size: 130px;
    font-family:pokemon, "PixelBold";
    margin-left: 20px;
}

h2{
    font-family:pokemon, "PixelBold";
}

body{
    background-image: url(IconosTipoPokemon/background.jpg);
    font-size: 1.2rem;
}

header {
    background-color: #e35656;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

footer{
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    font-size: x-large;
    font-family:pokemon, "PixelBold";
}

select {
    font-family: pokemon, "Pixel";
    width: 80%;
    height: 30px; 
    padding: 3px; 
    font-size: 18px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
    /* background-color: #9c9a9a; */ 
    color: #333; 
}

/* formato imagenes */
.imgHeader{
    width: 125px;
    height: 90px;
}

.imgPokemon{
    width: 65%;
    border-radius: 10px;
}

/* Diseño de contenedores para botones de filtro y ordenamiento */
.divColumna{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    gap: 10px;
    padding: 0px;
    background-color: #1c0d02;
    border: 0px solid violet;
    margin-bottom: 10px;
    align-items: center;
}

.divColumnaSecundario{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    gap: 10px;
    padding: 0px;
    border: 0px solid green;
    align-items: center;
}

.divRenglon{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    gap: 10px;
    padding: 10px;
    border: 0px solid blue;
    background: none;
}

.divRenglonSecundario{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    gap: 10px;
    padding: 10px;
    border: 0px solid blue;
    background:none;
}

.divRenglonSecundarioType{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    gap: 10px;
    padding: 10px;
    border: 0px solid blue;
    background:none;
}

/* Diseño de labels */
.filtroLabel{
    color:#fafbfd;
    margin-top: 5px;
    font-family: pokemon, "Pixel";
}

.labelSelect{
    font-family:pokemon, "PixelBold";
    font-size: x-large;
}

/* diseño del botón de limpieza de filtros */
.botonGeneral{
    border-radius: 30px;
    width: 30px;  /*Ancho del icono, ajusta según el tamaño de tu icono */
    height: 30px;  /*Altura automática para mantener la proporción */
    border: none; /* Elimina el borde del botón */
    cursor: pointer; 
    /*text-indent: -9999px;  Oculta el texto del botón (opcional) */
}

#limpiarFiltro{
    background-image: url('IconosTipoPokemon/refresh.png');
    background-size: cover;

}

/* diseño del botón de filtro */
.botonFiltroType{
    border-radius: 30px;
    width: 30px;  /*Ancho del icono, ajusta según el tamaño de tu icono */
    height: 30px;  /*Altura automática para mantener la proporción */
    border: none; /* Elimina el borde del botón */
    cursor: pointer; 
    /*text-indent: -9999px;  Oculta el texto del botón (opcional) */
}
.botonFiltroType:hover{
    border: 3px solid #F6DA04;
}

/* diseño del contenedor de ul, ul, cards y contenido de las cards de forma jerarquica*/
#root{
    width:97%;
    margin-right: auto; /*Este y el siguiente, permiten centrar el objeto, no su contenido*/
    margin-left: auto;
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    row-gap: 20px;
    border-color: 3px solid #1D8696;
}

ul{
    width:97%;
    margin-right: auto; /*Este y el siguiente, permiten centrar el objeto, no su contenido*/
    margin-left: auto;
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    row-gap: 20px;
    border-color: 3px solid #1D8696;
}

.tarjeta{
    display: flex; /* permite que si contenido se muestre de forma flexible en una sola linea*/
    flex-wrap: wrap;
    flex-direction: column;
    /*border: 10px solid #F6DA04;    este no lo ejecuta porque tiene deblarado borde en los typos de pokemon*/  
    width: 300px;
    padding: 0.6rem;
    border-radius: 50px;
    justify-content: space-evenly;
    align-items: center;
    font-family: pokemon, "Pixel";
}

dl{
    width: 85%;
    padding: 1rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
    /* Degradado de negro transparente encima de una imagen de fondo */
    background-size: cover; /* Ajusta el tamaño de fondo para cubrir el elemento */
    background-position: center; /* Centra el fondo */
    color: white;
    border-radius: 20px ;
    border: 2px solid #1c0d02;
    margin-bottom: auto;
}

dl dt{
    background-color: none;
    font-weight: 600;
}

dl dd{
    padding: 5px;
}

select#type{
    text-wrap: nowrap;
}

/* diseño de los botones de filtro por tipo de pokemón */
button[value="water"]{
    background-image: url('IconosTipoPokemon/agua.png');
    background-size: cover; 
}
button[value="fire"]{
    background-image: url('IconosTipoPokemon/fuego.png');
    background-size: cover; 
}
button[value="fight"]{
    background-image: url('IconosTipoPokemon/lucha.png');
    background-size: cover; 
}
button[value="bug"]{
    background-image: url('IconosTipoPokemon/bicho.png');
    background-size: cover; 
}
button[value="grass"]{
    background-image: url('IconosTipoPokemon/planta.png');
    background-size: cover; 
}
button[value="ground"]{
    background-image: url('IconosTipoPokemon/tierra.png');
    background-size: cover; 
}
button[value="flying"]{
    background-image: url('IconosTipoPokemon/volador.png');
    background-size: cover; 
}
button[value="fairy"]{
    background-image: url('IconosTipoPokemon/hada.png');
    background-size: cover; 
}
button[value="electric"]{
    background-image: url('IconosTipoPokemon/electrico.png');
    background-size: cover; 
}
button[value="normal"]{
    background-image: url('IconosTipoPokemon/normal.png');
    background-size: cover; 
}
button[value="poison"]{
    background-image: url('IconosTipoPokemon/veneno.png');
    background-size: cover; 
}
button[value="ghost"]{
    background-image: url('IconosTipoPokemon/fantasma.png');
    background-size: cover; 
}
button[value="dark"]{
    background-image: url('IconosTipoPokemon/siniestro.png');
    background-size: cover; 
}
button[value="ice"]{
    background-image: url('IconosTipoPokemon/hielo.png');
    background-size: cover; 
}
button[value="psychic"]{
    background-image: url('IconosTipoPokemon/psiquico.png');
    background-size: cover; 
}
button[value="dragon"]{
    background-image: url('IconosTipoPokemon/dragon.png');
    background-size: cover; 
}
button[value="steel"]{
    background-image: url('IconosTipoPokemon/acero.png');
    background-size: cover; 
}
button[value="rock"]{
    background-image: url('IconosTipoPokemon/roca.png');
    background-size: cover; 
}

/* diseño de los botones de filtro por tipo rareza */
button[value="mythic"]{
    background-image: url('IconosTipoPokemon/mitico.png');
    background-size: cover; 
}
button[value="legendary"]{
    background-image: url('IconosTipoPokemon/legendario.png');
    background-size: cover; 
}

/* diseño de los botones de filtro por tipo región */
button[value="kanto"]{
    background-image: url('IconosTipoPokemon/kanto.png');
    background-size: cover; 
    border: 1px solid #5498C0;
}
button[value="johto"]{
    background-image: url('IconosTipoPokemon/johto.png');
    background-size: cover; 
    border: 1px solid #5498C0;
}

/* diseño dinámico de las cards */
.water{
    background-image:url('IconosTipoPokemon/backtar.jpg');
    background-size: cover;
    border: 10px solid #71C3E4 ;
}

.fire{
    background-image:url('IconosTipoPokemon/backtar.jpg');
    border: 10px solid #FFAD4C; 
    background-size: cover;
}

.fighting{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #E3454E; 
    background-size: cover;   
}

.fight{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #E3454E; 
    background-size: cover;
}

.bug{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #A9C732; 
    background-size: cover;
}

.grass{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #5AC37A;
    background-size: cover; 
}

.ground{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #D49768;  
    background-size: cover;
}

.flying{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #A4BFED;
    background-size: cover;
}

.fairy{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #F2A5E4;
    background-size: cover;
}

.electric{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #F9E171;
    background-size: cover;
}

.normal{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #A7A69F;  
    background-size: cover; 
}

.poison{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #C760D5;  
    background-size: cover; 
}

.ghost{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #7872D4;
    background-size: cover;
    
}

.dark{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #6C7180;  
    background-size: cover; 
}

.ice{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #91DCD6;
    background-size: cover;
}

.psychic{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #FEA299;
    background-size: cover;
}

.dragon{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #0581BC; 
    background-size: cover;
}

.steel{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #56A8AA;  
    background-size: cover;
}

.rock{
    background-image:url('IconosTipoPokemon/backtar.jpg');    
    border: 10px solid #D5CA92;
    background-size: cover;
    
}