html {font-size: 15px;}
body{background:#ffd8cf;font-family:'Helvetica',sans-serif,'Arial',serif}  
body{text-align:center} 

.body {margin: 0px; padding; 0px; 
    font-family: , 'Roboto','Arial', sans-serif; 
  box-sizing: border-box;} 

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

.baner{ width: 100% ;display: flex; justify-content: center; align-items: center;}
.foto { width: 25% ;display: block;margin: auto;}

.materias { width: 100% ;font-family: 'Helvetica';text-align:center;font-size: 13px; color:#3a51ff; display: flex;
	display: block;margin: auto;flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;}
	
.b1 .b2 { font-family: 'Helvetica';text-align:center;font-size: 13px; color:#3a51ff; display: flex;
	display: block;margin: auto;flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;}
.b5 { border-radius: 1rem;1rem;1rem; border: 2rem solid #ffd8cf}
.dos { width: 100%; 
       display: flex; justify-content: center; align-items: center; 
       padding: 60px 0px 60px 0px;font-family: 'Helvetica' }

.dos p { padding-left: 30px;
         text-align: left; color:#999999; font-size: 15px;} 
.foto {display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;}

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

h1{ font-family: 'Helvetica',sans-serif;text-decoration-line: underline;text-decoration-color: #F2F2F2;margin: 0.5rem; padding: 3rem; 
    text-align: center;
    color: #ff7959; font-size: 35px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;}

h2{ font-family: 'Arial';text-align: center;font-size: 18px; color:#3a51ff; display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;}

.nav {width: 100%;
      box-sizing: border-box; 
      margin-top:0px; padding: 2px 0px; 
      font-size: 15px; background-color:#ff7959;}

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

header .nav ul li {list-style:none;}

header .nav li a { text-decoration: none; color:#F2F2F2; 
                   padding: 0.3rem 2rem 0.3rem 2rem; } /*separación entre ellos*/

.boton:hover {color: #3a51ff;} 

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

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

footer{ padding:5x 0px; 
        text-align: center; font-weight: 400; font-size: 12px; color: #F2F2F2;width: 100%;background: #3a51ff;}


   
@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) {  
    .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 { text-align: center margin: 0.2rem; padding: 1.5rem; font-size: 32px; font-weight: 500;}


    
    
}