*{margin: 0%;padding: 0%; box-sizing: border-box;}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,900&display=swap');
/* para usar la typo y que este vinculado va aca arriba*/



body{
	background-color: #1f222e;
	font-family: 'Montserrat',sans-serif;
	text-align: center;
	text-decoration: none}

header{background-color: #1f222e;
	margin-top: 10%;}


h1{color: #ffc34e;font-size: 2rem}
/* {color:...;} es solo para tipofrafia*/

h2{	font-size: 3rem;
	font-weight: 800;
	font-family: 'Montserrat',sans-serif;
	color: #f53602;}  

h3  {text-decoration: none;
	/*font-size: 0.9rem;
	font-family: 'Montserrat',sans-serif;
	color: #f53602;*/}

h4 {font-size: 1.5rem;
	font-weight: 800;
	font-family: 'Montserrat',sans-serif;
	color: #f53602;}
/*que se aplique al parrafo dentro del footer 
(1rem=a 16 px) ( por un tema que cuando se ve en otro dispocitivo, 
como celular  el rem permite el pasaje a pantalla, si lo ponemos en px
siempre va a quedar fijo el tamano*/

/*display; flex hace que se muestren las columnas una alado de la otra  

c8dde2 CELESTITO*/

article {justify-content: 
		space-around;
		border: 0.5rem;
	}

.foto{ width: 20%; margin-top: 3%;}
/*
.dg{font-size: 3rem;
	font-weight: 800;
	font-family: 'Montserrat',sans-serif;
	color: #f53602;}

.ilus {font-size: 0.9rem;
	text-decoration: none;
	font-family: 'Montserrat',sans-serif;
	color: #f53602; 
	margin-bottom: 5%;
	padding-bottom: 5%;}*/
.ilus {
 	color:#f53602;
	font-weight: 700;
	margin:5%;}
.ilus: hover
{background: #00beeb;}

main section article {padding: 0.5rem;}

section {
	display: flex;
	justify-content: space-around;
	font-family: 'Roboto';}

.nivel{color: #ffc34e; 
	font-size: 1.5rem; 
	font-family:'Montserrat',sans-serif; 
	font-style: bold;
	text-align: left;}

.primero{
	text-align: left;
	color:#c8dde2 ;
	font-family: 'Roboto'
	font-size: 1rem;
	font-weight: 700;
	width: 33%;
	margin: 5%
	padding: 5%;
	border: 2rem solid #1f222e;
	}

.segundo{
	text-align: left;
	color:#c8dde2 ;
	font-family: 'Roboto'
	font-size: 1rem;
	font-weight: 700;
	width: 33%;
	margin: 5%
	padding: 5%;
	border: 2rem solid #1f222e;
	}

.tercero{
	text-align: left;
	color:#c8dde2 ;
	font-family: 'Roboto'
	font-size: 1rem;
	font-weight: 700;
	width: 33%;
	margin: 5%
	padding: 5%  ;
	border: 2rem solid #1f222e;}

.int{display: flex;
	justify-content: space-around;}

.Integrantes {
			background: #1f222e;
		 	font-size:  1rem;
			margin: 3% ;
			padding: 3% ;
			min-height: 1rem;
			border: o.3rem ;color: #c8dde2;}

.alumno {font-family: 'Roboto',sans-serif;font-weight: 300; 
		text-decoration: none;color: #c8dde2;
		font-size:  0.9rem ;
		display: inline-block;margin: 0.5rem}

.alumno:hover { background: #00beeb; }
/* esto va a funcionar cuando este pasando por arriba de
 */

.alumno .negrita{font-weight: 700}

 
/*menuu*/
nav{padding: 3rem;}
nav ul li {display: inline-block;}
nav ul li a {color: #ffc34e;text-decoration: none;padding: 1rem}


/* EL NAV ME ESTA GANANDO, EN ALGUN VIDEO DICE COMO HACERLO BIEN PERO NO ME ESTA SALIENDO

EN TEORIA EL TEXT-DECORATION: NONE TENDRIA QUE SACAR EL AZUL*/


/*nav{color: #white; text-decoration: none ; padding:  1rem;} background: #c8dde2; padding:  1rem; */

.link-activo {background: #e0a94654}

.contenedor{max-width: 75rem;margin:auto;} 
/* base adaptable a ancho de monitores distintos*/


footer {text-decoration:none;}


 .catedra{
 	color:#ffc34e;
	font-weight: 700;
	margin:5%;
	border: 2rem solid #1f222e;}

/*.catedra:hover
{background: #00beeb; }*/

.obligatorio {
	background: #1f222e;
		 	font-size: 0.6rem;
			margin: 2% ;
			padding: 0% ;
			min-height: 0.5rem;
			border: o.1rem ;color: #c8dde2;}
			/*
	color:#c8dde2 ;
	font-size:0.6rem
	;}*/

/*.catedra{background: #1f222e;
		 	font-size:  1rem;
			margin: 3% ;
			padding: 3% ;
			min-height: 1rem;
			border: o.3rem ;color: #c8dde2;}
*/