@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Lobster');

/* selector { propiedad: valor;} */


body {margin: 0px; padding; 0px; 
    font-family: 'Poppins', sans-serif; 
    background-image: url('../img/fondo2.jpg'); background-size: cover; box-sizing: border-box;}


header {width: 100%; 
        display: flex; justify-content: center; align-items: center;}




.dos { width: 100%; 
     justify-content: center; align-items: center; 
     


background-color: rgba(9, 192, 208, 0.42); border-radius: 1em; 
    margin: 14px 10px 10px 420px;
    padding: 0.5px;



}


.dos p { padding-left: 30px;
         text-align: left; color:white; font-size: 15px;}


h1 {
    color: #dde5eb;
    font-size: 50px;
    font-family: 'Lobster', cursive;
    font-weight: 500;
    text-align: center;
    background-color: rgba(114, 114, 114, 0.77);
    margin-bottom: 0.2em;
    margin-top: 0em;
    padding-bottom: 0.2em;
    
    
    
    
}

.titulo { font-family: 'Lobster', cursive; justify-content: center; align-items: center; 
}

.foto { border-radius: 2em; float: left;
 
}



img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-ms-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
margin-left: 8em;
}
.ex1 img:hover {
margin-top: 50px;
}



.nav {width: 100%;
      box-sizing: border-box; 
      margin-top:0px; padding: 1px 0px; 
      font-size: 13px; font-weight:400;
      background-color:rgba(21, 115, 242, 0.53);}


header .nav ul { display: flex; justify-content: space-between; align-items: center; 
                 padding: 0rem 7rem 0rem 7rem;}

header .nav ul li {list-style:none;
                    border-style: dotted;
                    border-color: #116dbf;
}

header .nav li a { text-decoration: none; color:#fff; 
                   padding: 0.3rem 2rem 0.3rem 2rem; }

.boton:hover {color: rgba(224, 162, 21, 0.94);}



h2{ text-align: center; 
    font-weight: 500; font-size: 18px; color: white; 
    padding-right: 30px;
    
}


.dg, .materias {width:30%; }


.dg {padding-left: 0%;} 

.materias {padding-right: 10rem;}


footer{ padding: 5px 0px; 
        text-align: center; font-weight: 400; font-size: 12px; color: #484444;
        background: rgba(227, 148, 20, 0.63);}


footer a { text-decoration: none; color: #181564;}
footer a:hover {color: rgba(224, 162, 21, 0.94)}


@media screen and (max-width:800px) {
    
    .nav {width: 100%;
      box-sizing: border-box; 
      margin-top:0px; padding: 1px 0px; 
      font-size: 13px; }
    
    header .nav ul { flex-flow:row wrap; justify-content:center; padding: 0px;  margin: 5px 0px; }
    header .nav ul li {padding: 5px 8px;}
    header .nav li a {padding: 0.3rem 1rem 0.3rem 1rem; }
    
    h1 {font-size: 30px;}
    
    footer{ font-size: 11px;}
    
    
    
    .dos { 
        margin:0px;
        padding:0px;
        padding-left:5%;
        display:block;
        float:none;
        text-align:center;
        
    }
    
    .dg, .materias { flex-direction: column; justify-content: center; align-items: center; align-content: center; 
        float:none;
        text-align:center;
        padding-left:25%;
        width: 16em;
        }
    
    }