@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap');


*{padding:0; margin:0; box-sizing: border-box;transition: 0.5s all;}

body{font-family: roboto; padding: 1rem; background: #e6e6e6} 

header {color: #ffffff; background: #8275F4; padding: 1rem; }
h1 {font-size: 2rem; font-weight: 500;}
h2 {color: #ffffff;font-weight: 300;}
h3 {color: #ffffff; font-family: 'Roboto', sans-serif;font-weight: 500;}
li {font-weight: 300;font-size: 1rem;}

.materiasaprobadas {
    padding-bottom: 1rem;
}

.encurso {
    padding-bottom: 1rem;
}

main section article { padding: 1rem;}

/* footer */
footer {color: #e6e6e6; font-weight: 300; font-size: 0,2rem; background: dimgrey; padding: 1rem;}

ul {list-style-type: none;}

/* Menu */
nav {background:#ffffff; padding: 0.5rem;}
nav ul li {display: inline-block;} 
nav ul li {color: #ffffff; text-decoration: none; padding: 1rem;}

.link-activo {background:#ffffff; padding: 1rem;text-decoration: none; border-radius: 0.2rem;}

.link-activo:hover {
    
    background: #8275F4;
    color: #F5F6FA;
}

.mapaactivo {background:#ffffff; padding: 1rem;text-decoration: none; border-radius: 0.2rem;}

.mapaactivo:hover {
    
    background: #8275F4;
    color: #F5F6FA;
}

.planactivo {background:#ffffff; padding: 1rem;text-decoration: none; border-radius: 0.2rem;}
    
    .planactivo:hover {
    
    background: #8275F4;
    color: #F5F6FA;
}

.tpactivo {background:#ffffff; padding: 1rem; text-decoration: none; border-radius: 0.2rem;}
        
.tpactivo:hover {
    
    background: #8275F4;
    color: #F5F6FA;
}

.miroactivo {background:#ffffff; padding: 1rem;text-decoration: none; border-radius: 0.2rem;}

.miroactivo:hover {
    
    background: #8275F4;
    color: #F5F6FA;
}
    
.mifoto {color: #fafafa;}
        
/* cuando es mayor a 768px */
@media screen and (min-width:48rem) {
    
    nav {background: #e6e6e6;}
    
.inicio {display: flex;}
.columna-1 {background-color:#8275F4; width: 30%; padding: 1rem;} 
.columna-2 {background-color:#bbb3ff; width: 30%; padding: 1rem;}
.columna-3 {background-color:#8275F4; width: 30%; padding: 1rem;}
.columna-4 {background-color:#bbb3ff; width: 30%; padding: 1rem;}

}