@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;700&display=swap');
*{padding: 0; margin: 0}


header {color: #ffffff; background:#0057ff ; text-align: left;
        padding-top: 2rem; padding-bottom: 2rem;padding-left: 5rem; padding-right: 1rem } 

img {border-radius: 100%; background: #ffffff ; padding:0rem; display: inline-block;
float:left}


h1 {font-family:'Alegreya',serif;font-weight: 700; padding-top: 0.5rem; font-size: 3.5rem }

h2 {font-family:'Chivo', sans-serif;font-weight:400;padding-top: 1rem; padding-bottom: 1rem;padding-left: 3.5rem ; font-size: 1rem }

h3 {font-family:'Chivo', sans-serif;font-weight:300;padding-top: 0rem; font-size: 0.8rem; padding-bottom: 0rem;}

h4 {font-family:'Chivo', sans-serif;font-weight: 400; padding-top: 0rem; font-size: 1.5 rem;padding-left: 1rem; }

h5 {font-family:'Chivo', sans-serif;font-weight:700; font-size: 1rem;padding-left: 1rem;padding-bottom: 1rem}

p  {font-family:'Chivo', sans-serif;font-weight: 300; font-size: 0.9rem; padding-left: 1rem}

nav {
    padding-top: 0rem;
    padding-bottom: 0rem;
    background:#0057ff ;
    font-family: 'Chivo', sans-serif;font-weight:300; font-size: 0.9rem;
    text-align: center; } 

nav ul li {display: inline-grid;}

nav ul li a
    {   color:#ffffff;
        text-decoration: none ;
        margin-left: 2rem;
        padding: 0.5rem;  }

nav ul li a:hover
    {color:#ffffff; background-color: #0057ff ;}

.link-activo
    {
    background: #0057ff;
    border-width: 2px;
    border-style: solid;
    border-color: white;
    }


aside {color:#0057ff ; padding-top: 0.8rem ; padding-bottom: 0rem; padding-left: 5rem; background:#ffffff;}

main { color:#0057ff ; font-size 1.2rem; }  

.inicio {display:flex }
.columna-izq {background: #ffffff ; width: 33%; padding-top: 1rem; padding-left: 5rem; padding-bottom: 2rem}
.columna-medio {background:#ffffff ; width: 33%; padding-top: 1rem; padding-left: 1rem; padding-bottom: 2rem }
.columna-der {background:#ffffff; width: 33%; padding-top: 1rem; padding-left: 1rem;padding-bottom: 2rem}

footer {background:#ffffff ;color:#0057ff ; font-family:'Chivo', sans-serif; font-weight: 300; font-size: 0.1rem; text-align: left;padding-left: 2rem; padding-right: 1rem} 

/* cuando es mayor a 768px */

@media screen and (min-width:768px)
{
    .inicio {display:flex; justify-content: space-around;}
    .columna-izq {width: 30%;}
    .columna-medio {width: 30%}
    .columna-der {width:30%}
    
    
    nav ul{flex-direction: row;}
    
}