body {background-color: ghostwhite; 
     font-family: 'Didact Gothic', sans-serif;
     padding: 2rem 0 0 0; width: 100%; height: 100%; max-width: 80rem; margin: 0 auto;}
.contenedor {width: 100%; align-content: center; }
/*MENÚ DE NAVEGACIÓN DE PÁGINA*/
header {background: black; color: whitesmoke; width:100%; display: inline-block;align-content: space-between;}
header nav ul li {border-bottom: 1rem; bottom:1rem;list-style-type: none; display: inline-block;align-content: space-between; font-size: 0,8rem;font-weight: 0;padding: 0 }
header nav ul li a {text-decoration: none;color: whitesmoke;border-bottom: 1rem; padding: 1rem;}
header nav ul li a:hover{ box-shadow: 0rem 0.3rem 0rem whitesmoke; background-color: red;color: #333333;}
/*ESTILO DE TÍTULOS Y SUBTÍTULOS*/
h1 {font-size: 2rem; line-height: 2rem; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: black; display: inline}
h2 {font-size: 1rem;font-weight: 700;color: snow;background-color: darkred;display: inline;}
h3 {font-size: 0.9rem;
    font-weight: 700;
    padding: 1rem 0rem 0.3rem 0rem;}
p a:hover{ background-color: red;color: #333333;}

/*CUERPO PRINCIPAL*/
section {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch;align-content: stretch;}
article img {width: 85%;padding: 1rem 0rem 0rem 0rem;}
main {flex-wrap: wrap; display: inline-block;}
main section article ul {font-size: 0.8rem; padding: 0.7rem 0rem 0.5rem 0rem;}
.presentacion { width: 85%; padding: 0.5rem; border-bottom: 1rem;}
.materias { width: 100%; padding: 0.5rem; border-bottom: 1rem;}
.materias ul li{font-size: 1rem;}
.materiasextra {width: 50%; height: 30%; padding: 0.5rem; border-bottom: 1rem;}
.materiasextra ul li {font-size: 1rem;}
.cajavacia {flex-wrap: wrap; padding: 1rem; border-bottom: 1rem; width:20rem;height: 5rem;}

/*VIDEO*/
.acomodarvideo {flex-wrap: wrap;width: 35%;}
.videoreel {  width:35%;height:25%;right:50rem;top:15rem; object-position: bottom;} 

/*ROTULOS*/
.rotulos {height: 30%; width: 50%; padding: 0.5rem; border-bottom: 1rem; list-style-type: none; font-size: 1rem; color: #333333; border:solid black; box-shadow: 0rem 0.3rem 0rem #333333;  display: right; text-decoration: none;}
.rotulos a {text-decoration: none;list-style-type: none;color: #333333;font-weight: 700;}
.rotulos a:hover{ background-color: red;color: #333333;}

/*PIE DE PÁGINA*/   
                  
.importante {font-size: 1.5rem; color:gainsboro} 
footer {text-align: center; width: 100%; position: bottom;background: #000000}
footer p {font-size: 1rem; font-style: normal; color:whitesmoke;padding: 1rem;}  


/*RESPONSIVE*/

@media (max-width: 800px) 
    {
       body {display:flex; flex:inline-block; flex-direction: row;flex-wrap: wrap; max-width: 48rem;}  
     
} 
@media (max-width: 600px)

/* header landing */
@media (max-width: 800px) 
@media (max-width: 600px)
    
/* cuerpo principal*/
@media (max-width: 800px) 
@media (max-width: 600px)