*{padding:0; margin:0; }
html{
    font-size: 62.5%; /* 10px */
    color:rgb(85, 84, 84)

}
.container {/*Padre*/
    width: 80%;   
    margin:auto;
    display: flex;
    background-color: lightyellow;
    flex-direction: column ;
    flex-wrap: wrap;
}
/*contenido del header, incluye nav y loguin*/
header {/*hijo de container*/
    display: flex;
    margin: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu-principal ul{
    list-style-type: none; 
    display:flex;    
   
}
   
.menu-principal ul li{
    margin-right: 30px;
}   

header a{
    text-decoration: none;
    font-family: 'Roboto Slab', serif;
}

header h1{
    font-size: 1.3rem;
    font-family: 'Roboto Slab', serif;
    margin-left: 10px;
}
.login{/*btn login*/
    background-color: rgb(47, 84, 247);
    border-radius: 12px;
    padding: 5px;
    margin-right: 15px;
}
.login a{
    font-size: 1rem;
    font-family: 'Roboto Slab', serif;
    color: white;
    padding:20px
}


.menu-principal a:visited{
    color: grey;
}

/*fin de contenido del header, incluye nav y loguin*/




/*Comienzo del cuerpo*/
section{ /*padre de col*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin:50px 0 150px;

}

.col{/*hijo de section*/
    flex-basis: 300px;
    flex-grow: 1;
    flex-shrink: 1;
}

section .col{
    text-align: start;
}
section .col h4{
    font-size: 3.5rem;
    font-family: 'Roboto Slab', serif;
}

section .col p{
    padding-top: 10px;
    margin-bottom: 20px;
    font-size: 2rem;
    font-family: 'Roboto Slab', serif;
}
section .col a{/*Btn leer mas...*/
    background-color: rgb(47, 84, 247);
    color:white;
    margin-bottom: 10px;
    padding:5px;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1.5rem;
    font-family: 'Roboto Slab', serif;
}

section .col a:hover{
    top: 3px;
    box-shadow: 0px 2px 3px rgb(255,93,78);
}

section .col a:visited{
    text-decoration: none;
}
section .col:first-child{
    margin-left: 40px;
}
section .col:nth-last-child(1){/*columna izq*/
    margin-top: 10px;
    padding-left: 50px;
}

.col img{ /*hijo de section/imagenes*/
    float: left;
    width: 150px;
    height: auto;
    padding:10px;    
}
/*Fin del cuerpo*/

@media only screen and (max-width:420px){
    *{margin:0; padding: 0;}
    .container{
        width: 90%;
        margin: auto;
    }
    .login{
        margin: 15px 0 0 10px;
    }
    .titulo-principal h1{
        margin-bottom: 10px;
    }
        
    section{ /*padre de col*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin:auto;
        
    }
    
    section .col:first-child{
        margin-left: 0px;
    }
    section .col:nth-last-child(1){/*columna izq*/
        margin-top: 10px;
        padding-left: 0px;
    }
    .abajo{
        margin:30px 0 0 70px
    }
       

    .col a{
        margin-left: 20px;
    }
}

@media only screen and (min-width: 425px) and (max-width:500px){
    .login{
        margin-top: 15px;
    }
    .titulo-principal h1{
        margin-bottom: 10px;
    }


    section .col:nth-last-child(1){
        margin-top: 30px;
        padding-left: 0px;
    }


}
@media only screen and (min-width: 640px){
    .titulo-principal h1{
        margin: 0px;
    }
    .menu-principal{
        display: flex;
        align-items: center;
    }



    section .col:nth-last-child(1){
        margin-top: 30px;
        padding-left: 90px;
    }   
}