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


/*generales*/
*{padding: 0; margin: 0; box-sizing: border-box; text-decoration: none; transition: 1seg all;}
body {font-family:'Ubuntu', sans-serif; text-align: center;}


/*barra nav*/
body nav {background: #51638b; box-shadow: 3px 3px 10px #0f0c0c; position: relative;}
nav ul li {display: inline-block;}
body nav ul li a {padding: 1rem; margin-right: 10px ;margin-left: 10px; color: beige; font-weight: 300; display:inline-block;}

/*barra navegador animacion*/
.link::after {content: ""; display: block; width: 0; height: 2px; background: beige; transition: width .3s; ;}
.link:hover::after{width:100%; transition: width .3s;}


/*alumno*/
header {padding: 2rem; background-image: url(../fondo.jpg); color: beige; background-size: cover; background-position: center;}
h1 {margin: 0.8rem; text-shadow:2px 2px 1px #0f0c0c;}
img {border-radius: 30%; border: 3px solid}
a h3 { padding-top: 0.7rem; font-weight: 500; font-size: 0.9rem; color: beige;}


/*materias*/
h2 {padding: 1rem; background:#51638b; color: beige; box-shadow: 3px 3px 10px #0f0c0c ; position: relative; font-weight: 300; font-size: 1.2rem;}
section {padding: 1rem; background: #242424; list-style-type: none; color: beige;}
section article ul{padding: 1rem}
section article ul li {list-style-type: none; font-weight: 300; padding: 0.3rem;}

.nivel1:hover { transform: scale(1.5); transition-duration: 0.7s;}
.nivel2:hover { transform: scale(1.5); transition-duration: 0.7s;}
.nivel3:hover { transform: scale(1.5); transition-duration: 0.7s;}
.nivel4:hover { transform: scale(1.5); transition-duration: 0.7s;}

.nivel1 {background: #51638b; border-radius: 10px;}
.nivel2 {background: #ef833f; border-radius: 10px; margin-top: 0.5rem}
.nivel3 {background: #51638b; border-radius: 10px; margin-top: 0.5rem}
.nivel4 {background: #ef833f; border-radius: 10px; border-style:solid; border-color: yellow; margin-top: 0.5rem }

/*footer*/
footer {padding: 1rem; background: #51638b; font-weight: 300; text-align: center; color: beige; font-size: 0.6rem; box-shadow: 3px 3px 10px #0f0c0c;}


/* cuando es mayor a 768px */
@media screen and (min-width:46rem) {  
    
.inicio {display: flex; justify-content: space-between; padding-left: 5rem; padding-right: 5rem}
.nivel1 {background:#2c2c2c; border-radius: 10px; width: 18%; text-shadow:3px 3px 3px #0f0c0c; transition-property: all;}
.nivel2 {background:#2c2c2c; border-radius: 10px; width: 18%; text-shadow:3px 3px 3px #0f0c0c; transition-property: all;}
.nivel3 {background:#2c2c2c; border-radius: 10px; width: 18%; text-shadow:3px 3px 3px #0f0c0c; transition-property: all;}
.nivel4 {background:#2c2c2c; border-radius: 10px; width: 18%; text-shadow:3px 3px 3px #0f0c0c; transition-property: all; border-style:solid; border-color: yellow}
    
}