@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500');
/* selector { propiedad: valor;} */


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


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


.dos { width: 100%; 
       display: flex; justify-content: center; align-items: center; 
       padding: 30px 0px 20px 0px;}


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


h1{ margin: 0.5rem; padding: 2rem; 
    text-align: right; font-size: 60px;
    color: #e1fffd; font-size: 42px; font-weight: 500;}


.titulo { display: flex; justify-content: center; align-items: center; 
          padding-top: 3rem;}


.nav {width: 100%;
      box-sizing: border-box; 
      margin-top:0px; padding: 1px 0px; 
      font-size: 13px; font-weight:400;
      background-color:rgba(120, 255, 219, 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;}

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

.boton:hover {color: #30e5c9;}



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


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


.dg {padding-left: 10rem;} .materias {padding-right: 10rem;}


footer{ padding: 5px 0px; 
        text-align: center; font-weight: 400; font-size: 13px; color: #2d2993;
        background: rgba(255, 230, 245, 0.5);}


footer a { text-decoration: none; color: #954288;}


@media screen and (max-width:48rem) {
    
    .nav {font-size: 12px;}
    
    header .nav ul { flex-flow: wrap; justify-content:center; padding: 0px;  margin: 5px 0px; }
    header .nav ul li {padding: 5px 2px;}
    header .nav li a {padding: 0.3rem 1rem 0.3rem 1rem; }
    
    h1{ margin: 0.25rem; padding-top: 2rem; font-size: 40px; }
    
    h2{padding: 0px;}
    
    .foto { width: 280px; padding-right: 40px;}
       
    .dg, .materias {width:70%;}
    
    .dg {padding: 0rem;} 
    
    .materias {padding: 0rem;}
    
    footer{ font-size: 12px;}
    
    
}


@media screen and (max-width:30rem) {
    
    .nav {width: 100%;
      box-sizing: border-box; 
      margin-top:0px; padding: 1px 0px; 
      font-size: 13px; }
    
    header .nav ul { flex-direction: column; 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{ text-align: center margin: 0.2rem; padding: 1.5rem; 
     font-size: 32px; font-weight: 500;}
    
    h2{padding: 0px;}
    
    .foto { width: 250px;}
    
    .titulo, .dos {flex-direction: column; text-align: center; align-content: center}    
    .dg, .materias {width:80%;}
    
    .dg {padding: 0rem;} 
    
    .materias {padding: 0rem;}
    
    
    footer{ font-size: 11px;}

    
    
}