html{
    height: 100vh;  width: auto;
    box-sizing: content-box;  
    flex-wrap: wrap;
    background-color: black;
}
body{
    height: auto;  width: auto; 
    flex-wrap: wrap;
    background-color: transparent;
    margin: 0;
    background-color: black; 
    text-decoration: none;  
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;  
}
header{    
    width: 100%; height: 10vh;
    flex-wrap: wrap;
    display:flex;
    background-color:transparent;    
}

#btn-menu{
    display:none;
   }

.imgMenu{
    width: 30px;
    height: 30px;
    background-color:black;
    z-index: 100;
}
header label{
    display: none;
    width: 30px;
    height: 30px;
    padding: 10px; 
}

nav{
    height: 13vh;
    width: 99vw;
    background-color:#437a67;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    z-index: 100;
    top: 0em;
    left:0%;
    position: fixed; 
}
 
.Lista{
    padding-bottom: 3%;
    position: relative;
    top: 0em;
    width: 109vw ;
    display:flex;
    height: 3vh;
    color: white;
    list-style:none;
    font-family:inherit;
    font-size: 1rem;
    justify-content: space-around;
    align-items:  baseline;
    background:transparent;
}

.li:hover {
    background:#6cb995 ;
    border-radius: 5px; 
}

.li{
    margin-top: 0%;
    text-align: center;
    align-items:baseline;
    display:flex;
    justify-content: center;
    padding: 0.9em;
    background:inherit;
    width:12vw;
    margin: 0%;
    cursor: pointer;
   }
.logo{
   color: white;
   font-size: 1rem;
   margin-top: 1%;
   background-color: transparent;
   width: auto;
   height: 10vh;
   margin-left: 10%;
   padding-top: 1em;
   font-weight: bolder;
   position: flex;  
   font-family: 'Press Start 2P', cursive;;
}
#input-buscador{
    display:flex;
    width:  15vw;
    height:  3.8vh;
    font-size: 1rem;
    color: white;
    background-color: #73cf92;
    padding:  auto;
    border: none;
    margin: 0%;
    outline:none; 
    flex-wrap: wrap;
}

#Buscar{
background-color: transparent;
color: white;
height: 5vh;
width: 8vw;
border:none;
padding-top: 1%;
padding-bottom: 3%;
padding-left:2%;
font-size: inherit;
text-decoration: none;
display:flex;
outline:none;
position: relative;
flex-wrap: wrap;
margin: 0%;
}

#Buscar:hover{
background:#67bea0 ;
border-radius: 5px;    
}

@media(max-width:900px){
.contenedor-banner{
    background-repeat: no-repeat;
    width:100%;
    height:120%;
    /* padding: 0%; */
    background-image:url('Img/img\ fija.png');
    background-position:center;   
     
    }

body{
        width: 100%;
        position: relative;
        left: 0%;
        right: 0%;
    }

}
 @media screen and (max-width: 808px) {
    header label{
        display: block;
    }
.menu{
    position: absolute;
    width: 83%;
    margin-left: -90%;
   }
header {
    display: block;
    flex-wrap: wrap;
    position: relative;
    width: 72vw;
    height: 7vh;
    left: 0%;
    }


main aside #links {
    color: white;
    margin: 0.5em;
    /* display: flex; */
    width: auto;
    height: 45vh;
    position: relative;
    right: 2em; 
    border-radius: 2%;
    background-color:transparent;  
    margin-bottom: 0em;
        
       }
#btn-menu:checked ~ .menu{
        margin: 0;
}
nav {
       display: block;
       flex-wrap: wrap;
       position: relative;
       width:50vw;
       height: 10vh;
       top: 2.5em;
       margin: 0%;
    }

.Lista{
    display: block;
    top: -2.2em;
    /* position: relative; */
    width: 60vw;
    height: 60vh;
    text-align: left;
    align-items: left;
    background-color: #437a67;
    padding-left: 0%;
    margin-left: 0%;

    }

.li{
    height: 8vh; 
    width: 50vw;
    padding: 1em;
    padding-left: 0%;
    margin-left: 0%;
}

main {
    flex-wrap: wrap;
    /* position: relative; */
    width: auto;   
    overflow: hidden;
} 
main aside{
    height: auto;
    width: 80%;
    margin: -3px;
    /* position: absolute; */
}
main aside .About{
    height: auto;
    width: 100%; 
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: auto;
   border: rgb(255, 255, 255) 2px solid;
}
main aside .About #AboutH2{
    height: auto;
    width: auto; 
}

main aside .ListaDePersonajes{
    width: 60vw; 
    margin: 3%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
} 
main #contenedorTarjetas{
   width:auto;
   padding-top: 5em;
   margin-left: -2em;
   margin-bottom: 10em;
   padding-left: 0%;

} 
main  #contenedorTarjetas{
    margin-top: 7em;
    background-color: transparent;
    margin-left: -1em;
    position: relative;
    height: auto;
    width: 95vw;
    padding: 0%;
} 

main #filtroDeEspecies{
position: relative;
top: 2em;
margin-left: 0%;
}

main .contenedorEspecies{
    margin-top: 30%;
    margin-left: 5%;
    display: none;
    margin-bottom: 10em;
}
main .ItemEspecie{
    margin-left: 2em;
}
#input-buscador{
    width: 30vw;
    
    margin-left: 10%;
    /* display: inline; */
}
#Buscar{
    width: 35vw;
    padding: 1em 1em 2em 1em;
    align-items: center;
    margin: 5%;
    flex-wrap: wrap;
}
 main #chart{
    display: flex;
    top: 1em;
    position: relative;
    margin-top: 4em;
    height: 60vh;
    width: 90vw;
    background-color: transparent;
}
main #canvas{
    height: auto;
    width: auto;
    display: flex;
    position: relative;
    background-color: rgb(255, 255, 255);
    
}

main #chart1{
    display: flex;
    top: 1em;
    position: relative;
    margin-top: 4em;
    height: 60vh;
    width: 90vw;
    background-color: transparent;
  }
main #canvas1{
    background-color: white;
    color:black;
    padding: 1em;
    width:100vw;
    height:auto;
    font-size: 10px;
}
main #Calculo{
    border: #7af562 double 6px;
    background-color:transparent;
    width: 60vw;
    height: 15vh;
    margin-top: 10em;
    padding-top: 2em;
    justify-content: center;
    text-align: center;
    display: none;
    margin-left: 10%;
}

#titulo{
    top:60%;
    display:inline-block;
    background: #30966b;
}

footer{
    display: flex;
    flex-wrap: wrap;
}
footer a{
    width: 23%;
}

 }
  /* **************************************MAIN ***************************************/ 

main{
  flex-wrap: wrap;
  display:  flex; 
  color: white;
  font-family:  'Hind', sans-serif;
  align-content: center;
  margin-top:2em;
  margin-bottom: 0em;
  margin-left: 2em;
  width:95vw ;
  /* height: auto; */
  top: 1.5em;
  left:1em;
  background-color: transparent;
  /* position: relative;
  z-index: 2; */    
}

  /* **************************************BANNER ***************************************/ 
.banner{
    flex-wrap: wrap;
    display: flex;
    position: relative;
    padding: 0%;
    margin: 0%;
    top: 0.5em;
    width: 100%;;
    height:30vh;
    background-color: transparent;
    background-size:cover;
    background-position: center;
    transition: all 1.s ease-in-out;
    background-image: url('/Img/rickguiño.jpg'); 
    animation: banner 15s infinite linear;
    background-repeat: no-repeat;

}

@keyframes banner{
    0%{background-image: url('Img/Rick.jpg.webp');
    }
    25%{background-image: url('Img/Rick.jpg.webp');
    }
    26%{background-image: url('Img/banner2.jpg');
    }
    50%{background-image: url('Img/banner2.jpg');
    }
    51%{background-image: url('Img/banner3.png');
    }
    75%{background-image: url('Img/banner3.png');
    }
    76%{background-image: url('Img/Rick-and-Morty.gif');
    }
    100%{background-image:url('Img/Rick-and-Morty.gif');
    }

}

.principal{
 margin-top: 0px;
 margin-left: 180px;
 display: flex;
 width: 850px;
 height: 450px;
 position: absolute;
 float: start;
 top: 250px;
 left: 400px;
}

aside{

 /* float: left; */
 width: 27vw;
 height: 90vh;
 font-size: inherit;
 position: relative;
 top: 3em;
 padding: 0%;
 margin: 0%;
 background-color: transparent;
 display: flex;
 flex-direction: column;
 margin-bottom: 2em;
 
}
.About{
 background-color: #437A67;
 width: 22vw;
 height: auto;
 margin: 1em;
 padding: 1em;
 flex-direction: column;
 border-radius: 2%;
 color: white;
 
}

#AboutH2{
 border-radius: 2%;
 margin: 3%;
 padding: 5%;
 height: auto;
 width: 19vw;
justify-content: center;
 text-align: center;
 color:black;
 font-size: 1.2rem;
 flex-direction: column;
 display: flex;
 background-color: rgb(179, 221, 26);
    
}

.Links{
    background: transparent;
}
#links {
 color: white;
 margin: 0.5em;
 /* display: flex; */
 width: auto;
 height: 65vh;
 position: relative;
 right: 2em; 
 border-radius: 2%;
 background-color:transparent;  
 margin-bottom: 0em;
 
}

.ListaDePersonajes{
    background-color: transparent;
    border:#437a67 3px solid ;
    display: flex;
    flex-direction: column;
    width:20vw;
    margin: 1.2em;
    padding: 4%;
    border-radius: 5px;
    
}

.ListaDePersonajes:hover{
    background:#67bea0 ;
    border-radius: 5px;
}


/************************************ NAV QUIENES SOMOS  **********************************/
#SomosQ{

 width: 65vw;
 height: 668px;
 position:relative;
 top: 2em;
 left: 1%;
 color: white;
 font-size: inherit; 
 text-align: center;
 padding: 0.2em;
 display: inline-block;
 overflow: hidden;
 align-items: center;
 display: none;

 }
 .PaginaWeb{
     font-size: 2em;
     margin: 0%;
     padding: 0%;
     background-color:#437a67;
    margin: 3%;
     
 }
 #Rick{
     background-color: transparent;
     height: 12em;
     position: relative;
     top: 1%;
     left: -7%;
     margin: 3%;
 }
 #Squanchy{
    background-color: transparent;
    height: 15em;
    position: relative;
    bottom: 1%;
    left: 75%;
    display: flex;
}

 h2{
     padding: 30px;
     align-content: center;
     font-size: 35px;
     background-color: inherit;
 }

/******************************************Tarjetas*********************************/


#contenedorTarjetas{
    margin-top: 6em;
    margin-bottom: 30em;
    padding-bottom: 10%;
    position: relative;
    top: 2em;
    left:2em ;
    display: block;
    grid-template-columns: repeat(3,1fr);
    width: 65vw;
    height: auto;
    gap: 0.1em;
    margin:1%;
    background-color: transparent;
    /* display: none; */
 
}

#tarjeta{
    display:inline-flex;
    position: relative;
    flex-wrap: wrap;
    height:250px;
    width:225px;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    padding: 1% 2% 2% 1%;
    border-radius: 2%;
    border:1px solid white;
    transition: all .4s ease-in-out;
    justify-content: center;
    text-align:center;
    align-items: center;
    background:linear-gradient(-105deg,yellow,#437A67,#5BA978);
   
 }
  
#tarjeta:hover{
     height:470px;
     width: 225px;
     border-radius: 5px;
     box-shadow: 10px 10px 10px 10px, yellow(0,0,0,0.5);
 }

 #imgPersonaje{
 width: 10em; height:10em;
 display:flex;
 flex-wrap: wrap;
 margin-left:auto;
 margin-right:auto;
 margin-bottom: 15%;
 /* margin-left: 15px; */
}

#nombrePersonaje{
    font-size: 1.2rem;
    background-color:transparent;
    color:white;
    height: auto;
    width: 248px;
    flex-wrap: wrap;
    margin:1.2em;
    margin-left:0em;
    text-align:center;
}
    
h4{
 
 font-family: inherit;
 color:white;
 text-align: left;
 margin: 2px;
 background:transparent;
 font-size: medium;
 font-weight:normal;
}

.caracteristicas{
    background-color: transparent;
}
.filtroAZ{
    display: none;
    background-color: #30966b;
    color: white;
    width: 55vw;
    height: auto;
    flex-wrap: wrap;
}   
    
footer{
  min-height: 2em;
  background-color: #191919;
  background-image: -webkit-linear-gradient(#3a3a3a, #000000);
  background-image: linear-gradient(top, #353535, #000000);
  border-top: 1px solid rgba(50, 50, 50, 0.3);
  width: 100%;
  position:fixed;
  clear: both;
  margin-top: 0px;
  padding-top: 2px;
  bottom: 0%;
  color: #ffffff;
  text-align: center;
  justify-content:space-evenly;
  display:flex;
}

footer a{
    background-color: transparent;
    color: white;    
}

.api{
    width: 30px;
    border-radius: 80px;
}

.ListaDeNombres{
    display: none;
    background-color: lightseagreen;
    color: white;
    width: 60vw;
}


#graficos{
    width: 60%;
    position: relative;
    margin-bottom: 20%;
    justify-content: center;
   text-align: center;
    top: 1em;
}
#chart{
    background-color:#30966b;
    font-size: 1.5rem;
    display: none;
    flex-wrap: wrap;
    position: relative;
    margin: 1%;
    height: 50vh;
    width: 50vw;
    top: auto;
    justify-content: center;
}

#canvas{
    display: none;
    width: 70em;
    height: 70em;
    /* display: flex; */
    position: relative;
    background-color:rgb(12, 12, 12);
}

#chart1{
    background-color:#35aa79;
    font-size: 1.5rem;
    display: none;
    flex-wrap: wrap;
    position: relative;
    margin: 1%;
    height: 50vh;
    margin-bottom: 15%;
    width: 50vw;
    margin-top: 2em;
    justify-content: center;
}

#canvas1{
    display: none;
    width: 70em;
    height: 70em;
    display: flex;
    position:relative;
    background-color:rgb(8, 8, 8);
    padding: 1em 0em 3em;
    
    
}
.volverEspecies{
    background-color: #499178;
    color: white;
    width: 65px;
    height: 35px;
    border-radius: 5%;
    border:none;
    font-size: inherit;
    display:flex;
    position: relative;
    flex-wrap: wrap;
    margin: 5%;
    text-align: center;
    justify-content: center;
    }
#volverPersonajes{
    font-size: inherit;
    background-color:#499178; 
    width: 65px;
    height: 35px;
    padding: 0%;
    color:rgb(255, 255, 255);
    border-radius: 5%;
    text-align: center;
    justify-content: center;
     }
#filtroDeEspecies{
    display: none;
    width: 65vw;
    text-align: center; 
    position: relative;
    padding: 1em;
    margin: 0em;
    flex-wrap: wrap;
    font-family: inherit; 
 }    
 .botonesFiltro{
    border-radius: 50%;
    transition: 0.5s;
    align-items: center;
    margin-left: 0em;
    flex-wrap: wrap;
    height: 7em;
    width: 7em;
    cursor:pointer;
    margin: 5px double rgb(255, 255, 255);
 } 
 .botonesFiltro:hover{
transform: scale(1.5);
 }
.ItemEspecie{
    margin-top: 15em;
    margin: 1em;
    font-size: 1.5em;
    background-color: transparent;
    padding: 1em; 
    position:relative; 
    grid-template-columns: repeat(5,5fr);
    flex-wrap: wrap;
    display: inline-block;
    width: 35%;
    color:white;
   font-family:'Press Start 2P', cursive;
 }
 #ContenedorFiltrosEspecie{
     top:5em;
    display: none;
    width: 55vw;
    text-align: center; 
    position: relative;
    padding: 0.2em;
    margin: 0em;
    flex-wrap: wrap;
    /* display: inline-block; */
    font-family: inherit; 
 }

 .ImagenUp{
    position: fixed;
    display: flex;
    height:60px; width: 60px;
    z-index: 150;
    border-radius: 50%;
    background-color: orange;
    cursor: pointer;
    bottom: 50px;
    right: 10px;
    border: 4px solid transparent;
    transition: all 3000ms ease;
 }
 .ImagenUp:hover{
transform: scale(1.1);
border: 8px double rgb(0, 0, 0, 6);
 }

.contenedorEspecies{
align-items: center;
top: 6em;
display: none;
margin-bottom: 10em;
 }

 #titulo{
    position:relative ;
    background:black;
    color:white;
    font-size: 3em;
    align-items: center;
    justify-content: center; 
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    top: 0.5em;
    left:0.5em ;
    padding: 0.5em; 
    margin:1%;
    display: none;
 } 
#Calculo{
    position: relative;
    border: #67bea0 double 1px;
    border-radius: 5%;
    left: 25%;
    width: 20vw;
    height: 20vh;
    margin-top: 30em;
    padding-top: 1.5em;
    justify-content: center;
    text-align: center;
    display: none;
}