@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,700;0,900;1,300;1,700&display=swap');
*{padding: 0; margin: 0;box-sizing: border-box; font-family: 'nunito sans', sans-serif;}


body{font-family: 'Nunito Sans', sans-serif;}
body header h1{ width: 40%; font-family: 'nunito sans', sans-serif; font font-size: 1.5rem; font-weight:700;}
body header {justify-content:flex-end}

img src="toonme96.png" {display: flex; justify-content: flex-start;  display: block;
    border-radius: 200px;
    box-sizing: border-box;
    background-color: #DDD;
    border: 5px solid #ffffff;
float: inherit;}

nav { background: #f5f5f5; padding: 0.8rem; }
nav ul li { display: inline-block; }
nav ul li a {color:#838EA6; text-decoration: none; padding: 0.8rem;}
.link-activo {background: #e9e9eb;}

/* ----------------------------ad in ------------------------*/
/*.whiteheadline {
    font-size: 48px;
    font-family: "Open Sans";
    color: rgb(255, 255, 255);
    font-weight: bold;
}*/

.header-rectangle { 
    background-color: #8275F4;
    text-align: center;
    color: #ffffff;
    justify-content: space-around;
 
}
#header-bg {
background-image: url('../banner.png');
background-repeat:no-repeat;
background-repeat: no-repeat;
background-color: #8275F4;
background-attachment: top;
background-position: top center;
background-size:  cover;
position: relative;
 }
#header-bg p {background-color: white; padding: 1rem; width: fit-content;}
p a { text-decoration: none; background-color: white; padding: 1rem;}
p a:hover {color: #8275F4; background-color: #e9e9eb}
#header-bg h3 {color: white;}
 /* ----------------------------ad in  END------------------------*/


.fotito h2 {justify-content: flex-start; }

.dg{ color:#ffff; background-color:#be8eff; padding: 1rem;}
.materias

.columna-1{ color: #8275F4; background-color: #d7a9ff; padding: 1rem; width: 100%}
.columna-2{ color: #8275F4; background-color: #f4c7ff;padding: 1rem; width: 100%}

footer { font-size: 0.8rem; text-align: center;; color: #8275F4;}

.nombre {display: inline}



/*cuando es mayor a 768px */

@media screen and (min-width:48rem){
 .dg{ color:#ffff; background-color:#be8eff; padding: 1rem; width: 40%}
  .materias {display: flex}
   
.columna-1{ color: #8275F4; background-color: #d7a9ff; padding: 1rem; width: 100%;}
.columna-2{ color: #8275F4; background-color: #f4c7ff;padding: 1rem; width: 100%;}
/*header .names {justify-content:space-around}
header{ color: #fff1eb ; padding: 1rem; font-family: 'nunito sans', sans-serif;  
    background-image: url(../banner.png); 
    background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  background-color: #fff;*/
    }  
    }
img src="toonme96.png" {display: flex; justify-content: flex-start}
header nav li {margin-left: auto}
header nav li {display: contents; padding: 1rem; margin: none; background: #8275F4;margin-left: auto}
header nav li a {color: #8275F4; text-decoration: none; padding: 1rem; margin: 0; background: #ffa5ae;width: auto; width: 30%; display: inline; margin-left:inherit; justify-content: space-between; align-content: flex-end}
.barra
    
 h1 {display:flex;}
  
}
*/