@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap');
@import url('https://fonts.googleapis.com/css2? family = Roboto: ital, wght @ 0,100; 0,300; 0,400; 0,500; 0,700; 0,900; 1,100; 1,300; 1,400; 1,500; 1,700; 1,900 & display = swap ');
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');
/*PRIMERO CELULAR*/

/*selector universal   */
*{/*es para determinar los bordes*/
    margin: 0;
    border: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body{
    background-color: rgb(217, 244, 255);
    /* caja flexible */
    display: flex;
    /* direccion de sus elementos */
    flex-direction: column;
    /* organizacion de los elementos segun eje principal */
    justify-content: space-between;
    /*font-family: sans-serif;*/
    margin: 0;
    min-height: 100vh;/*AVERIGUAAR*/
    box-sizing: border-box;       
}


/*---- FOOTER ----*/
footer{
        background-color: rgb(186, 230, 255);
        padding: 1em 0.5em 1em 0.5em;
        margin: 0 0 0 0;        
}

footer div p{
        color: rgb(66, 46, 39);
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-size: 0.75em;
}

footer img{
    width: 35%;
}

.footer  {
    display: flex;
    justify-content: space-between;
    align-items: center;   
}
/***************************************/



/***   NAVEGADOR PRINCIPAL  ***/

header #navegacionPadre1 {
    display: flex;
    justify-content: space-between;
    background-color: none;
    margin: 1em;   
    padding: 0.5em;
    
}

header .navegacionHijo2 nav ul{
    display: flex;   
    /*justify-content: center;*/
    list-style: none;
}

header .navegacionHijo3 nav ul{
    display: flex;
    /*justify-content: center; */
    list-style: none; 
}

header .navegacionHijo2{
    width: 20%;
    /*margin: auto;*/
}

header .navegacionHijo2  img{
    width: 100%;
    height: auto;
}

header .navegacionHijo3{
    width: 60%;
    /*margin: auto;*/
}

header .navegacionHijo3  img{
    width: 100%;
    height: auto;
}

header #navegacionPadre1 nav ul li a{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;       
}

header #navegacionPadre1 p{
    font-size: 0.7em;
    font-family: "Roboto", sans-serif;
    font-stretch: condensed;
    font-weight: 400; 
    color: rgb(66, 46, 39);
    margin-top: 0.5em;
}

/*****    *para que no aparezca  ******/

#navegacionPadre2{
    display: none;   
}

#logoUsuarioMobile{
    position:fixed;
    bottom: 1em;
    right: 0.5em;    
}
  
#logoUsuarioMobile{
    width: 25%;
}

#logoUsuarioMobile img{
    width: 100%; 
    height: auto;         
}
/***************************************/


/*****   MAIN   ******/
h1{
    display: block;
    margin: auto;  
    font-family: 'Titan One', cursive;
    font-weight: 300;
    font-size: 1.7em;
    line-height: 1.1em;
    color: rgb(66, 46, 39);   
    margin-bottom: 0.7em;
    margin-top: 0.7em;
    text-align: center;
    /*text-transform: uppercase;*/
}

/*******  INDEX.HTML ******/
video {
    width: 100%;
}

    
/*   FLORA y FAUNA */
#bloquesdemasleidoflorayfauna{
    background-color: rgb(247, 223, 177);
    border-radius: 1em;
    text-align: center; 
    margin: auto;
    margin-bottom: 1em;
    padding: 0em 0em 1em 0em; 
    width: 18em;
    /*max-width: 80%;
    min-width: 50%;   */  
}

/*  <div id="florafaunaymesde"> */
.florafaunaymesde {
    display: flex;        
    justify-content: flex-start; 
    align-items: center;  
    padding: 1em 0em 0.5em 5em; 
}

#iconosdecorativosimg {
    width: 18%;   
}

 #iconosdecorativosimg img{ /*flora - fauna - el mes de - mi perfil */
    width: 100%;
    height: auto;
}

#textoflorayfaunaymesde p{ /*flora - fauna - el mes de*/   
    font-size: 0.95em;
    color: rgb(66, 46, 39);
    font-family: "Roboto", sans-serif; 
    line-height: 1em; 
    font-weight: 700;
    text-align: left;
    margin-left: 0.7em;   
}

/* <div id="librosflorayfaunaymesde"> */
#librosflorayfaunaymesde{
  width: 60%;
  margin: auto;  
}
#librosflorayfaunaymesde img{ /*flora - fauna - el mes de*/
    width: 100%;
    height: auto;
}

#bloquesdemasleidoflorayfauna figcaption h2{
    color: rgb(66, 46, 39);
    font-family: 'Titan One', cursive;
    font-size: 1em;  
    font-weight: 100;  
    padding: 0.3em 0em 0.4em 0em;
    text-transform: uppercase;
    
}
#bloquesdemasleidoflorayfauna  figcaption h3{
    color: rgb(66, 46, 39);
    font-family: "Roboto", sans-serif;
    font-size: 0.85em;
    padding: 0.5em 0em 0.2em 0em;
    text-transform: uppercase;
    width: max-content;
    
}

#bloquesdemasleidoflorayfauna figcaption p{
    font-family: "Roboto",sans-serif;
    font-weight: 400; 
    font-size: 0.8em;
    padding: 0.5em 1.5em;
    padding-bottom: 1.5em;
    
}

/*  <div id="iconos2navegables"> de flora y fauna    */
.iconos2navegables {
    display: flex;
    justify-content: space-evenly;      
}

#leerflorayfaunaymesde{
    width: 25%;    
}

#leerflorayfaunaymesde img{
    width: 100%;
    height: auto;
}

#leerflorayfaunaymesde a{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;     
}

#leerflorayfaunaymesde p{ 
    font-family: "Roboto",sans-serif;
    font-size: 0.7em;
    color: rgb(66, 46, 39);
    font-stretch: condensed;
    font-weight: 600; 
    width:max-content;   
    text-align: center; 
    margin-top: 0.2em; 
}

/*  EL MES DE   */
#bloquesdemesdel{
    background-color: rgb(194, 214, 147);     
    border-radius: 1em;
    text-align: center; 
    margin: auto;
    margin-bottom: 1em;
    padding: 0em 0em 1em 0em;   
    width: 18em;
   /* max-width: 80%;
    min-width: 50%;  */
}

/* <figure id="librosflorayfaunaymesde"> */
#bloquesdemesdel figcaption h3{
    color: rgb(66, 46, 39);
    font-family: 'Titan One', cursive;
    font-size: 1em;  
    font-weight: 100;   
    padding: 0.2em 0em 0.1em 0em;
}
#bloquesdemesdel figcaption p{
    font-family: "Roboto",sans-serif;
    font-weight: 400; 
    font-size: 0.8em;
    padding: 0.5em 0em 0.5em 0em;
    padding-bottom: 1.5em;
    color:rgb(66, 46, 39)
}

/*  <div id="iconos3"> el mes de   */
.iconos3navegable {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}


/***************************************/


/*****------- ELMESDE.HTML-------*****/
#titulomesde h2{
    font-family: 'Titan One', cursive;
    text-align: center;
    font-size: 1.5em;
    font-weight: 100;
    color: rgb(66, 46, 39);
    text-transform: uppercase;
    padding-bottom: 0.2em;
}
#titulomesde p{
    font-family: 'Titan One', cursive;
    text-align: center;
    font-size: 2em;
    font-weight: 200;
    color: rgb(66, 46, 39);
    /*margin: 0.2em 0em 5em 0em;*/
    text-transform: uppercase;
    background-color: rgb(247, 223, 177);
    width: max-content;
    margin: auto;
    padding: 0em 0.2em;
}
#mesde{
    background-color: none;
    /*background-color: rgb(194, 214, 147);*/
    border-radius: 1em;
    text-align: left; 
    margin: auto;
    margin-bottom: 1em;
    padding: 0em 0em 0em 0em;   
    max-width: 80%;
    min-width: 60%;    
}

#elmesdeimg{
    width: 70%;
    margin: auto;
    padding: 1.5em 0em 0.5em 0em ;
}

#elmesdeimg img{
    width: 100%;
    height: auto;   
}

#mesde p{
    color: rgb(66, 46, 39);
    font-family: "Roboto",sans-serif;
    font-weight: 400; 
    font-size: 1em;
    padding: 1em;
    background-color: none;
}


#datosde {
    background-color: rgb(194, 214, 147);
    border-radius: 1em;    
    margin: auto;    
    padding: 1em;
    width: max-content;
    margin-bottom: 2em;    
}

#datosde h3{
    color: rgb(66, 46, 39);
    font-family: "Roboto", sans-serif;
    font-size: 1em;    
    font-weight: 400;
    text-align: left;   
    line-height: 1.5em;
}

/*leerlibro*/
 #leerlibrodelmes2{
     display: flex;
     justify-content: center;
     align-items: center;
     width: 90%;
     margin: auto;
     /*padding: 0.5em;*/
     background-color: none;
     margin-bottom: 2em;
 }
#librodelmes2{
    display: flex;
    /*justify-content: space-around;*/
    width: 40%;   
    background-color:rgb(98, 98, 204);
    height: 100%;
   
}
#librodelmes2 img{
    width: 100%;
    height: auto;    
}

#libromasinfo2{
    background-color:none;    
    padding: 0em  0.5em ; 
    width: 60%; 
    /*height: 100%;*/
    text-align: center;
}


#leerlibrodelmes2 h2{
    background-color: rgb(247, 223, 177);
    color: rgb(66, 46, 39);
    font-family: "Titan One", cursive;
    font-size: 0.8em;  
    padding: 0.3em 0em;
    width: 104%;
    font-weight: 100; 
    text-transform: uppercase;
    margin: auto;
}

#leerlibrodelmes2 h3{
    font-family: "Roboto",sans-serif;
    font-weight: 600; 
    font-size: 0.7em;
    text-transform: uppercase;
    
    padding: 0.5em 0em;
   
}
#librodelmesbloque2 p{
    font-family: "Roboto",sans-serif;
    font-weight: 400; 
    font-size: 0.7em;
    margin-bottom: 1em;
    text-align: left;
}

/*  <div id="iconos2navegables"> de flora y fauna    */
.iconos2navegablesmesde2 {
    display: flex;
    justify-content: space-between;    
    padding: 0.5em 0.5em 0em 0.5em;
    background-color: none;
}

#leermesde2{
    width: 30%;
}
#leermesde2 img{
    width: 100%;
    height: auto;
    /*margin: auto ;*/
}

#leermesde2 a{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;   
    margin: auto 0 0 0;  
}

#leermesde2 p{ 
    font-family: "Roboto",sans-serif;
    font-size: 0.7em;
    color: rgb(66, 46, 39);
    font-stretch: condensed;
    font-weight: 600;  
    width:max-content;   
    text-align: center; 
}
/***/
#icononavegablecole{
    width: 15%; 
    margin: auto;
}
#icononavegablecole img{
    width: 100%;
    height: auto;
}

#icononavegablecole a{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;   
    margin: auto 0 0 0;  
}

#icononavegablecole p{ 
    font-family: "Roboto",sans-serif;
    font-size: 0.7em;
    color: rgb(66, 46, 39);
    font-stretch: condensed;
    font-weight: 600;  
    width:max-content;   
    text-align: center; 
    margin-bottom: 1em;
}

/***************************************/


/****------BIBLIOTECA.HTML----*****/

/*---BUSCADOR--*/
/**-----**/
#buscador{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: none;
    width: 90%;
    margin: auto;
}
#lupa{
    width: 10%;
}
#lupa img{
    width: 30px;
    height: auto;
}
#buscadortexto p{
    font-family: "Roboto",sans-serif;
    font-size: 1em;
    background-color: rgb(182, 133, 78);
    color:rgb(66, 46, 39);
    width: max-content;
    margin: auto;
    text-decoration: underline;
    padding: 0.2em 0.5em;
}
#filtroflex{
   display: flex;  
}
#buscadorfiltroflexflorafauna{    
    background-color: none;
    width: 90%;
    margin: auto;
    margin-bottom: 2em;
    padding-left: 2em;   
}
#buscadorfiltroflex{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
}
#buscadorfiltroflexmasleido{
    display: flex;
    justify-content: flex-end;
    align-items: center;   
    margin-top: 0.3em;
    margin-right: 3em;
}
#buscadorfiltroflorafauna a{
    text-decoration: none;    
}
#buscadorfiltroflorafauna p{
    font-family: "Roboto", sans-serif;
    font-size: 0.7em;
    font-weight: 500;
    color: rgb(2, 2, 2);    
    width: max-content;   
}
#buscadorfiltroflorafauna p:hover{
    opacity: 50%;
}
#buscadorfiltrobotonflorafauna{
    width: 25%;
}
#buscadorfiltrobotonflorafauna img{
    width: 100%;
    height: auto;
}
#buscadorfiltroflorafauna{
    width: 33%;
}
#buscadorfiltroflorafauna img{
    width: 100%;
    height: auto;
}
#buscadorfiltroflorafauna img:hover{
    opacity: 50%;
}
/**------------***/
#leerlibrodelmes{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: auto;
    /*padding: 0.5em;*/
    background-color: none;
    margin-bottom: 2em;
}
#librodelmes{
   display: flex;
   /*justify-content: space-around;*/
   width: 40%;   
   background-color:rgb(98, 98, 204);
   height: 100%;
  
}
#librodelmes img{
   width: 100%;
   height: auto;    
}

#libromasinfo{
   background-color:none;    
   padding: 0em  0.5em ; 
   width: 60%; 
   /*height: 100%;*/
   text-align: left;
}


#leerlibrodelmes h2{
   background-color: rgb(247, 223, 177);
   color: rgb(66, 46, 39);
   font-family: "Titan One", cursive;
   font-size: 0.8em;  
   padding: 0.3em 0em;
   width: 104%;
   font-weight: 100; 
   text-transform: uppercase;
   margin: auto;
   text-align: center;
}

#leerlibrodelmes h3{
   font-family: "Roboto",sans-serif;
   font-weight: 600; 
   font-size: 0.7em;
   text-transform: uppercase;
   
   padding: 0.5em 0em;
  
}
#librodelmesbloque p{
   font-family: "Roboto",sans-serif;
   font-weight: 400; 
   font-size: 0.7em;
   margin-bottom: 1em;
}


/*  <div id="iconos2navegables"> de flora y fauna    */
.iconos2navegablesmesde {
   display: flex;
   justify-content: space-between;    
   padding: 0.5em 0.5em 0em 0.5em;
   background-color: none;
}

#leermesde{
   width: 30%;
}
#leermesde img{
   width: 100%;
   height: auto;
   /*margin: auto ;*/
}

#leermesde a{
   display: flex;
   align-items: center;
   flex-direction: column;
   text-decoration: none;   
   margin: auto 0 0 0;  
}

#leermesde p{ 
   font-family: "Roboto",sans-serif;
   font-size: 0.7em;
   color: rgb(66, 46, 39);
   font-stretch: condensed;
   font-weight: 600;  
   width:max-content;   
   text-align: center; 
}
/***************************************/



/****------MIARBOL.HTML----*****/
#miarbol{
    width: 70%;
    margin: auto;
    margin-bottom: 1em;
}
#miarbol img{       
    width: 100%;
    height: auto; 
}

/*  <div id="textoperfil">  */
#textoperfil h2{

    display: block;
    margin: auto;  
    font-family: 'Titan One', cursive;
    font-weight: 300;
    font-size: 1.2em;
    line-height: 1.1em;
    color: rgb(66, 46, 39);   
    margin-bottom: 1em;

    text-align: center;
    text-transform: uppercase;
}

#tenesmiarbol p{
    font-size: 0.8em;
    font-family: "Roboto",sans-serif;
    text-align: center;
    font-weight: 600;   
}

#texto3 p{
    font-size: 1em;
    font-family: "Roboto",sans-serif;
    text-align: center;
    font-weight: 400;
    margin-top: 0.5em;
    background-color: rgb(247, 223, 177);
    width: max-content;
    margin: auto;
    margin-bottom: 1em;
   /* margin-bottom: 2em;  */ 
}

#tenesmiarbol{
    background-color:none;   
    width: 60%;
    margin: auto;
    padding:0em;
    margin-bottom: 1em;
    margin-top: 1em;
}

#img2hoja{
    width: 80%;
    margin: auto;
}
#img2hoja img{
    width: 100%;
    height: auto;
}


#leelossiguienteslibros{   
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    background-color: none;
    width: 90%; 
    margin: auto;
    margin-bottom: 2em;
    padding: 0em 1em;
}

#leelossiguienteslibrosimg {
    width: 25%;    
}
#leelossiguienteslibrosimg img{
    width: 100%;
    height: auto;    
}

#textoleelossiguientes p{
    background-color: rgb(83, 205, 250);
   /* border-radius: 20px 0px;*/
    color: rgb(255, 255, 255);
    font-family: "Roboto", sans-serif;
    font-size: 0.85em;  
    padding: 0.5em 0.6em;
    width: max-content;
    font-weight: 600; 
    text-transform: uppercase;
    margin: auto;
    text-align: left;
}
/************************************/
/***-----INICIARSESION.HTML------**/ /**REGISTRARSE**/

.formulario{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 2em;
    border-radius: 1em;
    box-shadow: 1px 1px 10px;
    padding: 0em 0em 1em 0em; 
    width: auto;
}

.formulario h2{
    font-weight: 900;
    font-size: 2em;
    margin-bottom: 0.5em;
    background-color: rgb(182, 133, 78);
    color:rgb(66, 46, 39);
   
}

#iniciarsesion #registrarse{
    width: 400px;
    margin:auto;
    padding: 30px;
    justify-content: center;
    align-items: center;
}

.registro {
    width: 100%;
    padding: 10px;
    margin-bottom: 1.5em;
    border-radius: 0.5em;
    justify-content: center;
}

.botoncomenzar{
    margin-top: 1em;
    width: 100%;
    padding: 10px;
    margin-bottom: 1em;
    border: 2px solid rgb(231, 175, 122);
    
    background-color: rgb(231, 175, 122);
    color: rgb(66, 46, 39);
    font-weight: 700;
}

#iniciarsesion a{
    margin-top: 1em;
    font-size: 0.9em;
    font-weight: 700;
    color:rgb(66, 46, 39);
}
.formulario figure {
    border-radius: 50%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.formulario figure img {
    width: 25%;
    height: auto;
}


/***********************/
/*****------- JACARANDALIBRO.HTML-------*****/
.contenedoralibro {
    display:flex;
    justify-content: center;
    align-content: center;
    max-width: 95%;
    min-width: 50%;
    margin: auto;
}
#jacaranda {
margin: auto;
width: 95%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}

#jacarandalibro img{
    width: 100%;
    height: auto;
    
}

/** HOJA ***/
#leeyganaPadre{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

#leeryganaHijo1{
    display: flex;
    justify-content: flex-start;
}
#leeryganaHijo1 h3{
    font-family: "Roboto",sans-serif;
    font-size: 0.7em;
    color: rgb(66, 46, 39);
    font-stretch: condensed;
    font-weight: 600; 
    width:max-content;   
    text-align: center; 
    margin-top: 0.2em; 
}

#hojasganadas{
    display: flex;
    justify-content: center;
}
#hojasganadas{
    width: 8%;
}
#hojasganadas img{
    width: 100%;
    height: auto;
}

#leeryganaHijo3{
    display: flex;
    justify-content: flex-end;
}
/*****/

#jacaranda figcaption h2{
    color: rgb(66, 46, 39);
    font-family: 'Titan One', cursive;
    font-size: 1em;  
    font-weight: 100;  
    padding: 0.3em 0em 0.4em 0em;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#jacaranda  figcaption p{
    color: rgb(66, 46, 39);
    font-family: "Roboto", sans-serif;
    font-size: 0.85em;
    padding: 0.5em 0em 0.2em 0em;
}
#iconos2navegables {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    align-items: flex-start;
    margin-bottom: 1em;
}

#iconos2navegables a{
    text-decoration: none; 
    text-align: center;    
}

#iconos2navegables  p{     
    font-family: "Roboto",sans-serif;
    font-size: 0.7em;
    color: rgb(66, 46, 39);
    font-stretch: condensed;
    font-weight: 600;
    width: 100%;
    text-align: center;
    margin-top: 0.2em;
}
#leerlibro {
    width: 15%;
}
#leerlibro img {
    width: 100%;
    height: auto;
}

#misfavoritos {
    width: 15%;
}

#misfavoritos img {
    width: 100%;
    height: auto;
}

#misfavoritos p{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

/***************************************/


/*   MI COLECCIÓN html   */
#Noviembre h1, #Octubre h1, #Septiembre h1 {
    display: block;
    margin: 15%;  
    font-family: 'Titan One', cursive;
    font-weight: 300;
    font-size: 1.7em;
    line-height: 1.1em;
    color: rgb(66, 46, 39);   
    margin-bottom: 0.7em;
    margin-top: 0.7em;
    text-align: center;
   background-color: rgb(247, 223, 177);
   text-transform: uppercase;
}

#infomisvdelmes p {
   text-align: center;
   font-size: 1.5em;
   font-family: "Roboto",sans-serif;
   margin-top: 1em;
   margin-bottom: 2em;
}
#misvdelmes img {
    display: block;
    width: 60%;
    margin: auto;
}

#check img {
    width: 30%;
}

#mclc, #mclndj, #mcllylt {
    display: flex;
    flex-direction: column;
}
#mclc p, #mclndj p, #mcllylt p {
    text-align: center;
    font-size: 1.5em;
    font-family: "Roboto",sans-serif;
    margin-top: 1em;
    margin-bottom: 2em;
}

#Noviembre h2, #Octubre h2, #Septiembre h2 {font-size: 1.3em;}

/***************************************/


/*RESPONSIVE TABLET*/
@media screen and (min-width:600px) {}

/*RESPONSIVE ESCRITORIO*/
@media screen and (min-width: 992px) {
footer img{
    width: 10%;
}

/***   NAVEGADOR PRINCIPAL  ***/

header #navegacionPadre{
    display: flex;
    background-color: none;
}

header #navegacionPadre2{
    display: flex;
    justify-content: flex-start;
    background-color: none;
    margin: 1em 0 0 4em;   
    padding: 0.5em;

}
header .navegacionHijo{
    display: flex;
    width: 40%;
   /* margin: 1em;   
    padding: 0.5em;*/
}

header .navegacionHijo img{
    width: 100%;
    height: auto;
}


header .navegacionHijo2{/*imagenes*/
    width: 10%;
}
header .navegacionHijo3{/*imagenes*/
    width: 30%;
}

header #navegacionPadre1{
    display: flex;
    justify-content: flex-end;
    background-color: none;
    margin: 1em 4em 0 0em;   
    padding: 0.5em;
}

header .navegacionHijo a{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;       
}

header .navegacionHijo p{
    font-size: 0.7em;
    font-family: "Roboto", sans-serif;
    font-stretch: condensed;
    font-weight: 400; 
    color: rgb(66, 46, 39);
    margin-top: 0.5em;
}
/***************************************/


/*****    *para que no aparezca  ******/


#logoUsuarioMobile{
    display: none;   
}

/**************MAINNNN*************************/

video {
  max-width: 40%; 
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/*******************/
h1{
    margin-bottom: 1.5em;
}

#contenedoraTotal{
    display: flex;    
    justify-content: center;    
    padding: 0em 5em;   
    align-items: flex-start;
}

#bloquesdemasleidoflorayfauna{
    background-color: rgb(247, 223, 177);
    border-radius: 1em;
    text-align: center; 
    margin: auto;
    margin-bottom: 1em;
    padding: 0em 0em 1em 0em; 
    width: 18em;
    max-width: 50%;
    min-width: 20%;
  /*  width: calc(45% - 0.75em);   
  margin-left: 1em;*/
     
}

/*  EL MES DE   */
#bloquesdemesdel{
    background-color: rgb(194, 214, 147);     
    border-radius: 1em;
    text-align: center; 
    margin: auto;
    margin-bottom: 1em;

    max-width: 50%;
    min-width: 20%;   

}


/****************************************/



/****------MIARBOL.HTML----*****/
/*
#miarbol{
    width: 160%;

  
}
.miarbol{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin-bottom: 2em;
    background-color: navajowhite;
}

#img2hoja{
    width: 80%;
    margin: auto;
}


.miarboltexto{
    display: flex;
    flex-direction: column;    
    background-color: none;
    width: 40%;

 
}

#leelossiguienteslibros {
    width: 80%; 
    margin: auto;   
}


#textoperfil{   
    width: 50%;  
}*/


.miarbolflexpadre{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin-bottom: 2em;
    background-color: none;
    width: 90%;
    margin: auto;
}

.miarbol{
    width: 70%;
    background-color: none;
}
#miarbol{
    width: 90%;
    margin: auto;
    margin-bottom: 1em;
}

.miarboltextoflex{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 50%;
    margin: auto;
    margin-bottom: 1em;
    background-color: none;
    padding-left: 8em;
}

#tenesmiarbol{
    background-color:none;   
    width: 60%;
    margin: auto;
    padding:0em;
    margin-bottom: 1em;
    margin-top: 1em;

}

#img2hoja{
    width: 80%;
    margin: auto;
}

#leelossiguienteslibros{   
    display: flex; 
    justify-content: center;
    align-items: center; 
    background-color: none;
    width: 80%; 
    margin: auto;
    margin-bottom: 2em;
    padding: 0em 0em;
}

#leelossiguienteslibrosimg {
    width: 18%;    
}
#leelossiguienteslibrosimg img{
    width: 100%;
    height: auto;    
}

#textoleelossiguientes p{
    background-color: rgb(83, 205, 250);
   /* border-radius: 20px 0px;*/
    color: rgb(255, 255, 255);
    font-family: "Roboto", sans-serif;
    font-size: 0.85em;  
    padding: 0.5em 0.6em;
    width: max-content;
    font-weight: 600; 
    text-transform: uppercase;
    margin: auto;
    text-align: left;
}

/***    LIBROOOOOOSS     **/
.elmesdelibro{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    width: 90%;
    margin: auto;
}

#librodelmes{
   display: flex;
   /*justify-content: space-around;*/
   width:37%;   
   background-color:rgb(98, 98, 204);
   height: 100%;
  
}

#libromasinfo{
   background-color:none;    
   width: 50%; 
}



/***************************************/



/****------BIBLIOTECA.HTML----*****/

/*---BUSCADOR--*/

#buscadorflex{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: none;
    margin: auto;
    margin-bottom: 2em;
}

#buscador{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: none;
    width: 50%;
    margin: auto;
}

#lupa{
    width: 10%;
}
#lupa img {
    width: 54px;
    height: auto;
}

#buscadortexto p{
    font-size: 0.9em;
    margin-left: 0.5em;
}

#filtroflex{
    background-color: none;
    width: 80%;
    display: flex;
    justify-content: flex-start;
}

#buscadorfiltroflexflorafauna{    
    background-color: none;
    width: 50%;
    margin: auto;
    padding-left: 0.5em; 
}

#buscadorfiltroflexmasleido{
    margin-right: 5em;
}

#buscadorfiltrobotonflorafauna{
    width: 15%;
}
#buscadorfiltroflorafauna{
    width: 23%;
}

#leerlibrodelmes{
    background-color: none;
    width: 40%;
}

#nose{
    display: flex;
    flex-wrap: wrap;   
    background-color: none;
    align-items: flex-start;
    margin-top: 1em;
}

/************************/


/******   MI COLECCIÓN HTML  ********/
.meses {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 0em 4em 0em 4em;
    margin-left: 2em;
    margin-right: 2em;
}
/*INICIARSESION.HTML*/ /*REGISTRARSE.HTML*/
.formulario {
    width: auto;
    align-content: center;
    align-items: center;
    padding: 1em 0em 1em 0em;
    margin-left: 20em;
    margin-right: 20em;
}
#registrarse {
    justify-content: center;
    justify-items: center;
}
.formulario figure img{
    width: 35%;
    height: auto;
}


/********************************/

/*JACARANDALIBRO.HTML*/
.contenedoralibro {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 0em 4em 0em 7em;
    margin:auto;
    margin-bottom: 2em;
}
#jacaranda {
    margin: auto;
    width: 45%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    }

    #libroinfo {
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items: center;
    width: 90%;
    margin: auto;
    /*padding: 0.5em;*/
    background-color: none;
    margin-bottom: 2em;
    }

    #jacarandalibro {
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
        align-content: center;
        margin: auto;
    }
    #jacarandalibro img {
        width: 100%;
        height: auto;
    }
    #leeyganaPadre{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }
    #leeryganaHijo1 h3 {
        font-size: 1em;
    }
    
    #leeryganaHijo1{
        display: flex;
        justify-content: flex-start;
    }
    
    #hojasganadas{
        display: flex;
        justify-content: center;
    }
    #hojasganadas {
        width: 4%;
    }
    #hojasganadas img{
        width: 100%;
        height: auto;
    }
    
    #leeryganaHijo3{
        display: flex;
        justify-content: flex-end;
    }
    #jacaranda figcaption h2{
        color: rgb(66, 46, 39);
        font-family: 'Titan One', cursive;
        font-size: 1em;  
        font-weight: 100;  
        padding: 0.3em 0em 0.4em 0em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
    }
    #jacaranda  figcaption p{
        color: rgb(66, 46, 39);
        font-family: "Roboto", sans-serif;
        font-size: 1.3em;
        padding: 0.5em 0em 0.2em 0em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
    }
    
    #iconos2navegables a{
        text-decoration: none; 
        text-align: center;    
    }
    
    #iconos2navegables  p{     
        font-family: "Roboto",sans-serif;
        font-size: 1em;
        color: rgb(66, 46, 39);
    }
    #leerlibro {
        width: 10%;
    }
    #leerlibro img {
        width: 100%;
        height: auto;
    }

    #misfavoritos {
        width: 10%;
    }
    /******************************/



/*****------- ELMESDE.HTML-------*****/
#titulomesde p{
    margin-bottom: 1em;
}

#flexmesdepadre{
    display: flex;
    justify-content: center;
    margin: 1em 9em;
    align-items: flex-end;
    background-color: none;
}
/**carpincho y datos**/
.flexmesde{
    display: flex;
    flex-direction: column;
    /*background-color:red;
    border: solid 0.1em rgb(83, 205, 250);*/
    max-width: 48%;
    margin: auto;
    margin-bottom: 1em;
    
 
}
#mesde{
    background-color: none;
    /*background-color: rgb(194, 214, 147);*/
    text-align: left; 
    margin: auto;
    margin-bottom: 1em;
    max-width: 90%;
}

#elmesde img{
    width: 60%;
    margin: auto;
    /*padding: 1.5em 0em 0.5em 0em ;*/
}
#mesde p{
    font-size: 1em;
}

#datosde h3 {
    font-size: 1.1em;
}

#leerlibrodelmes2{
     display: flex;
     justify-content: center;
     align-items: center;
     width: 90%;
     margin: auto;
     /*padding: 0.5em;*/
     background-color: none;
     margin-bottom: 2em;
 }
#librodelmes2{
    display: flex;
    /*justify-content: space-around;*/
    width: 40%;   
    background-color:rgb(98, 98, 204);
    height: 100%;
   
}



/*  <div id="iconos2navegables"> de flora y fauna    */
.iconos2navegablesmesde {
    display: flex;
    justify-content: space-between;    
    padding: 0.5em 0.5em 0em 0.5em;
    background-color: none;
}

#leermesde{
    width: 30%;
}

#icononavegablecole{
    width: 10%; 
    margin: auto;
}


#icononavegablecole p{    
    margin-bottom: 2.6em;
}
/***************************************/






}