@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400&display=swap');


/* Estilos Generales */ 

* { padding: 0; margin: 0; box-sizing: border-box; }
body{  font-family: 'Arvo'; text-align: center;  }

/* header */ 
header { background: url(../fondo.jpg) no-repeat center fixed ;background-size: cover;  color: white;   padding: 1rem; font-weight: 700; font-size: 1.5rem; letter-spacing: 2px;  } 
.nombre {text-align: center;  width: 100%; margin-right: 150px; margin-top: 1rem; text-shadow: 2px 2px 5px black;  }


img{width: 16rem;height: 16rem; border-radius: 100%;margin-top: 20px; margin-bottom: 20px; border-color: white; border-style: solid; border-width: 15px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.img {text-align: center;width: 100% }

/* Diseño de Imagen y Sonido */ 


.columna-1 { background: #345286; padding: 1rem; margin-top: 20px; margin-bottom: 20px; color:white;text-decoration: none; font-size: 1rem; font-family:'Arvo', sans-serif; font-weight: 400; letter-spacing: 1px; padding: 1rem;   text-align: right;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}




/* Menú */ 
.menu {display: flex; flex-wrap: wrap; justify-content: space-around; word-spacing: 15px; }
nav { color: white; background:#5e83ba ; padding: 1rem;  text-align: left} 
nav ul li { display: inline-block; }
nav ul li a { color: white; background:#5e83ba; text-decoration: none; }
nav ul li a:hover {color: #253976;}

.link-activo {color: #253976;}


/* linea divisoria */ 
.linea {padding: 5px; background:#345286 }  


/* Materias Aprobadas */ 
main  article h4 { background: white ; color: #345286; padding: 2rem; }

.inicio { background: white; color:#345286; margin-bottom: 2rem  }

/* niveles en columnas */ 
.nivel-1{width: 100%;  }
.nivel-2 {width: 100%; }
.nivel-3 {width: 100%; }

/* Fuentes */ 
h1{font-family: 'Arvo', sans-serif; font-weight: 700;text-align: center}
h2{font-family: 'Arvo', sans-serif;font-weight: 700; text-align: center}
h3 {font-family: 'Arvo', sans-serif;font-weight: 400; ; color:#345286; text-align: center; font-size: 20px}
h4 {font-family: 'Arvo', sans-serif;font-weight: 400; text-align: center; font-size: 1.5rem}


/* Footer */ 
footer { background: #345286; padding: 1rem; }
footer p { font-size: 0.8rem; color: white; text-align: center; font-family:'Arvo'; font-size: 10px }


/* Cuando la pantalla mide mas de 48rem */ 
@media screen and (min-width:48rem) { .inicio {display: flex; justify-content:center; background: white; color:#345286; margin-bottom: 2rem  }

/* niveles en columnas */ 
.nivel-1{width: 33%;  }
.nivel-2 {width: 33%; }
.nivel-3 {width: 33%; }
    
    /* header */ 
    header { display: flex;   background: url(../fondo.jpg) no-repeat center fixed ;background-size: cover;  color: white;   padding: 1rem; font-weight: 700; font-size: 1.5rem; letter-spacing: 2px;  } 
.nombre {text-align: right;  width: 70%; margin-right: 150px; margin-top: 8rem; text-shadow: 2px 2px 5px black;  }


img{width: 16rem;height: 16rem; border-radius: 100%;margin-top: 20px; margin-bottom: 20px; border-color: white; border-style: solid; border-width: 15px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.img {text-align: left; margin-left: 150px;width: 20% }
    
    /* Diseño de Imagen y Sonido */ 
.columna-1 { background: #345286; padding: 1rem; margin-top: 20px; margin-bottom: 20px; color:white;text-decoration: none; font-size: 1rem; font-family:'Arvo', sans-serif; font-weight: 400; letter-spacing: 1px; padding: 1rem;  display: flex; text-align: right; margin-left: 380px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}

/* Menú */ 
.menu {display: flex; flex-wrap: wrap; justify-content: space-around; word-spacing: 100px}
nav { color: white; background:#5e83ba ; padding: 1rem;  text-align: center} 
nav ul li { display: inline-block; }
nav ul li a { color: white; background:#5e83ba; text-decoration: none; }

.link-activo {color: #253976;}

}