@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Roboto:wght@300&display=swap');
/*font-family: 'Roboto', sans-serif;*/


@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
/*font-family: 'Barlow', sans-serif;*/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body{
    font-family: 'News Cycle', sans-serif;
    background:white;
    width: 100%;
    height: auto;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-items:center;
   
    
    
    
   
}




.padre {
   
    background-image: url(img/fondo3.png);
    
    width: 100%;
    height:auto;
    padding: 5%;
   
    
    background-size: cover;
    background-attachment: fixed;
    background-repeat:repeat;
    
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-items: center;
    
    
  
}

/*YO*/
.yo{
    
    background-image: url(img/imgF3.png);
    background-position: center;
    opacity: 0.9;
    
    width: 100%;
    max-width: 950px;
    height:auto;
    padding: 10px 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items: center;
    
   
}

.presentacion{
    background: rgba(31, 29, 29, 0.47);
    width: 400px;
    height: auto;
    border-radius: 10px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
}

.logo{
    /*background: red;*/
    width: 90%;
    height: 100px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:flex-start;
    align-items: center;
    
}

.tipos{
background: rgba(255, 255, 255, 0.66);
    width: 90%;
    height: auto;
    margin-bottom: 20PX;
    border-radius: 10px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
}

.bloque{
    /*background: red;*/
    width: 95%;
    height: auto;
    margin: 10px 10px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
}


.intro{
    text-align: justify;
    font-family: 'Barlow', sans-serif;
    
}


/*YO*/



/*OBRASs*/
.obras{
    
    background-image: url(img/imgF2.png);
    background-position: center;

    
    width: 100%;
    max-width: 950px;
    min-height: 500px;
    height: auto;
    padding: 10px 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:flex-end;
    align-items: center;
  
}

.arg{
    background: rgba(255, 255, 255, 0.42);
    width: 100%;
    max-width: 400px;
   
    height:auto;
  
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-items: center;
}

.barrita{
    background-image: url(img/barrita.png);
    background-position: center;
    width: 100%;
    height: 110px;
 
    
}

.b{
    font-size: 15px;
    color: black;
    font-family: 'Barlow', sans-serif;
    width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: justify;
    
}
.personajes{
    width: 100%;
    height: 50px;
    background-color: #29275d;
    color: white;
    margin-bottom: 3px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-around;
    align-items: center;
}

.p{
    width: 100%;
    height: 30px;
    background-color: rgba(125, 122, 198, 0.42);
    color: black;
    margin: 2px 0px;
    font-family: 'Barlow', sans-serif;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-around;
    align-items: center;
    
}
.p:hover{
    background-color: rgba(163, 122, 198, 0.42);
}


/*OBRAS*/


/*CAPITULOS*/
.capitulos{
    
    background-image: url(img/imgF1.png);
    background-position: center;
    
    opacity: 0.9;
    
    width: 100%;
    max-width: 950px;
    height:auto;
    padding: 10px 5px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
  
}

.cap{
   /*background: rgba(42, 39, 39, 0.67);*/
    width: 90%;
    height: auto;
   
    
    display: flex;
    flex-flow: row wrap;
    justify-content:center;
    align-items: center;
}

.C{
    background: url(img/capitulos.png);
    background-position: center;
    background-size: contain;
    width: 180px;
    height: 180px;
    margin:  10px;
   border-radius: 100px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
}
.C:hover{
    background: url(img/capitulos%20HOVER.png);
     background-position: center;
    background-size: contain;
    
}

.numero{
    color: white;
    font-size: 14px;
   
    position:relative;
    top: 65px; left: 0px;

}

/*CAPITULOS*/

/*CONTACO*/

.contacto{
     background-image: url(img/imgF3.png);
    background-position: center;
    opacity: 0.9;
    width: 100%;
    max-width: 950px;
    height:100px;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: center wrap;
    justify-content:center;
    align-items: center;
  
}

.libro{
    background:#29275d;
    width: 200px;
    height: 50px;
    color: aliceblue;
    font-family: 'Barlow', sans-serif;
    
     display: flex;
    flex-flow: center wrap;
    justify-content:center;
    align-items: center;
   border-radius: 10px;
    text-align: center;
   
   font-size: 500px:  
  
}

.libro:hover{
    background: #6806ba;
}


/*CONTAC*/