*{box-sizing: border-box;}

body {background: url("https://images.unsplash.com/photo-1472201248592-1241c92256ff?auto=format&fit=crop&w=852&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") no-repeat center fixed;
  background-size: cover;
  background-size: cover;
  background-size: cover;
  background-size: cover;
}


header {padding-bottom: 2rem; 
    background-size: cover;
    padding: 2.5px;
    display: inline-block; 
    margin-left: 300px;
    align-content: center;
background-color: :#4ddbff}


header h1 a {color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
text-align: center;
}

body {right: 1; 
    bottom: 1; 
    left: 1; 
    padding: 0.5rem;}

.materias {flex-direction: row;
    flex-wrap: nowrap; 
    justify-content: center; 
    align-items: flex-start; 
    align-content: center; 
    display: flex;  
    float: center; 
    padding: 10px 5px; 
    max-width: 500px;
	margin: 20px auto 20px auto;
    background: rgba(255,255,255,0.7);
    width: 500px;
  border: 5px; 
    }

.materias ul {font-weight: 600;
			margin: 10px;
			padding: 10px;
			list-style: none;
            color:black; font-family: sans-serif}

section ul li {font-weight: 100;
    text-align: justify; font-family: sans-serif; }



h2 {color: #993300;
   font-family: sans-serif;
    font-weight: 600; 
    display: contents;
    font-size: 2.5em; 
    font-family: sans-serif;
    align-items: center;
    margin: 0%;
    margin-right: -12px;
    text-align: center;}

h3 {color: #663300;
    font-family: sans-serif; 
    font-weight: 600; 
    font-size: 1.5em; 
    text-align: center; 
    padding-bottom: 0.5px; 
    padding-top: 0.5px; 
    align-content: center;
}

ul{color: #0000;
    font-family: sans-serif; 
    font-weight: 200; 
margin: 2.5rem}

img {margin-right: 50px; 
    width: 250px; 
    height: 250px; 
    margin: auto;	
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;}   

footer {position: fixed; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 0.4rem; 
    background-color: #fff; 
    font-family: 'Roboto', sans-serif; 
    font-size: 11px; 
    text-align: center}

.Tp [ padding: 0rem 0rem 0.2rem 0rem;
    margin-top: 1rem;
    display: block;
    text-align: center]

.alumnos [padding: 0rem 0rem 0.2rem 0rem;
        margin: 0;
        display: block; 
        text-align: center]
//tp//
ul, menu, dir [
    display: block;
    list-style-type: disc;
    margin-before: 1em;
    margin-after: 1em;
    margin-start: 0px;
    margin-end: 0px;
    padding-start: 40px;
    ]

ul {text-align: center;margin: 0.5rem}
ul li {list-style-type: none; display: inline-flex; text-align: justify; margin-top: 0.5 rem}
ul li a{
    display: inline-block; 
    text-decoration: none; font-family: sans-serif;                         background:#4ddbff; color: #ffffff; line-height: 1.5rem;
    border: 0.5rem;
    font-size: 1.5rem;
    width:100%;
    font-size: 1.5rem;
    padding: 1rem 2rem 1rem 2rem;
    border-radius: 2rem; font-weight: normal;
    text-align: center;
    margin-top: 1rem;
    }

nav ul li a:hover {background-color:#fffbfb; color:#cccc00}


.video{margin-top: 1rem;
    align-content: center;
    overflow:hidden;
    padding-top: 10px;
    padding-bottom:50px;
    text-align: center;
    align-items: center; 
    align-content: center;
    width: 100%;
    height: auto;
    text-align: center;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    }


////
    
@media (max-width:400x) 
    .header[ width:100%;]
    .header [display: inline-flex;]