body {margin: 0rem; padding; 0rem; 
    font-family: instalada,spectral; 
    background-image: url(../2/background.png); background-size: cover; box-sizing: border-box}

@font-face{
    font-family: instalada;
src: url(fuente/Sabre-Bold.woff);
. src:url(fuente/Spectral-Medium.woff);}

.nav {width: 100%;
    font-family: spectral;  
    box-sizing: border-box; 
      margin-top:0rem; padding: 0.1rem 0rem; 
      font-size: 0.8rem; font-weight:200rem; background-color:#D8AF68;}

ul, li{ line-height:0rem;
	vertical-align: middle;
	padding:0rem;display: flex; justify-content: space-between; align-items: center;padding: 0rem 1rem 0rem 1rem;
}



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

h1{ margin: 0.5rem; padding: 3rem; 
    text-align: center;
    color: #D8AF68; font-size: 2rem;
font-family: instalada;
}



.foto { display: block ;margin: auto}


.dos p { 
    font-family: spectral; 
    text-align: center; color:#999999; font-size: 1rem;}







.boton:hover {color: #2F3DEA;}

h2{ font-family: spectral; 
    text-align: center; font-size: 1.5rem; color:#4D4D4D; }

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

footer{font-family: spectral;  
    padding:1rem 1rem 1rem 2rem; 
        text-align: center;; font-size: 0.75rem; color: #F2F2F2;
        background: #4D4D4D;}
    
    
}


@media screen and (max-width:48rem) { 
    /*responsive*/
    .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: 200px; padding-right: 40px;}
       
    .dg, .materias {width:70%;}
    
    .dg {padding: 0rem;} 
    
    .materias {padding: 0rem;}
    
    footer{ font-size: 12px;}
    
    
}


@media screen and (max-width:30rem) {  /*TOMA ESTE ULTIMO se pone el tamaño para lo mínimo que sería para el más chico cel. y desp lo adapta*/
    
    .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: 0.5rem 1rem;}
    header .nav li a {padding: 0.3rem 1rem 0.3rem 1rem; }
    
    h1{ text-align: center margin: 0.2rem; padding: 2rem; 
     font-size: 2rem; }
    
    h2{padding: 0rem;}
    
    .foto { width: 15rem;}
    
    .titulo, .dos {flex-direction: column; text-align: center; align-content: center}    
    .dg, .materias {width:100%;}
    
    .dg {padding: 0rem;} 
    
    .materias {padding: 0rem;}
    
    
    footer { text-align: center margin: 0.2rem; padding: 1.5rem; font-size: 0.7rem; font-weight: 500;}