/*Familia typo*/
@font-face { font-family:'Muli'; src:url(../fonts/Muli.ttf);}

/*Base*/
html{font-size: 16px;}
*{margin: 0; padding: 0;}
*{box-sizing: border-box;}

body{background-color: #f1f1f1; justify-content: center;}

.contenedor {display:flex; flex-direction: column;}

header{position: relative;}
h1{color: white; position: absolute; bottom:0.9rem;
	width:100%;
	text-align:center;
	font-family: 'Muli', arial, sans-serif;
	font-size:6rem;
	background-color:rgba(0, 0, 0, 0);
    line-height:13.75rem;
    letter-spacing: 0.5rem;}
header img{width: 100%;}
header div img {width: 20%; margin: 0.2rem}

nav { background: #02a2c4; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left,  #02a2c4 , #38eab0); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,  #02a2c4, #38eab0); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,  #02a2c4, #38eab0); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right,  #02a2c4 ,#38eab0); /* Standard syntax */
padding:0.2rem;  }


ul li {display: inline; font-family: 'Muli', arial, sans-serif;} 
li a:hover {background-color: #696969; margin: 1.5rem; padding: 0.8rem; color: aliceblue;}
li a{list-style-type: none; text-decoration: none; line-height: 2rem; border-radius: 0.5rem; font-size: 0.9rem; margin: 2rem; font-family: 'Muli', arial, sans-serif; color: white;}

h1{color: white; position: absolute; bottom:0.9rem;
	width:100%;
	text-align:center;
	font-family: muli, arial, sans-serif;
	font-size:6rem;
	background-color:rgba(0, 0, 0, 0);
    line-height:13.75rem;
    letter-spacing: 0.5rem;}


H2 {font-family: 'Muli',sans-serif; text-align: center; font-size: 2rem; margin:3rem; padding: 3rem;}


video{ width: 70%; margin:auto; border: 0.5rem solid #9f9f9f; padding: 1rem;}


footer p {font-size: 0.75rem; font-style: italic; font-weight: none; font-family: roboto, arial, sans-serif;  font-weight: normal; margin: 8rem 5rem 3rem 5rem;line-height: 1rem; color:#5a5a5a;}

@media screen and (max-width:30rem) {
    
  header img{width: 100%}
    nav{width: 100%; word-spacing: -2rem; padding-top: 0.2rem; margin-top: -0.3rem}
    
    h2{color: #38eab0}
    
    li a:hover {background-color: #696969; color: palegreen;}
    
    h1 {font-family: 'Muli' sans-serif; font-size: 1.1rem; position: absolute; letter-spacing: 0.2rem; margin: -1rem auto -1rem; font-weight: 600; color: #02a2c4;}   
    h2{padding: 3rem 0rem 5rem; margin: 1rem}
    footer p{margin: 4rem 2rem 2rem}
    
    video{width: 100%; margin-top: -3rem; padding: 0rem; border: solid #38eab0 0.1rem}
    
}