/*

selector{propiedad:valor;}

font-family: 'Montserrat', sans-serif;
font-family: 'Inter', sans-serif;



*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box}

body{ background-color: white; color: #18191f; font-family: 'Inter', sans-serif;}
h2 {font-family: 'Montserrat', sans-serif; font-weight: 800}


/* NAV y H1 */

a {text-decoration: none; color: #18191f; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem;}
header {color: #18191f; background: #ffbd12; text-align: center; }
   
h1{font-family: 'Montserrat', sans-serif; font-size: 4rem; font-family: 800; padding: 3%;}

nav {background: #ffbd12; display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	align-content: center;
    padding: 0 25% 1% 25%;}

nav div{color: #18191f; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem;  padding: 4px 16px 4px 16px; background: #FFFFFF; border: 2px solid #18191F; box-shadow: 0px 2px 0px #18191F; border-radius: 15px; height: 25; width: 90px;}

.activito {background: #00c6ae;}

nav div:hover {background: #ffb5d4}

/*container principal*/

.container {display: flex; flex-direction: column;	flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: center; padding: 0 0% 0 0%; margin: 0 10% 0 10% }


/*integrantes*/
/*

.integravn12 {display: flex; justify-content: space-between; align-items: flex-end; }
.integravn12 h2 {color: #18191f; font-size: 2.5rem; text-align: center; padding: 25px;}
.grupovn12 {font-family:'Montserrat', sans-serif; font-size: 1rem; font-weight: 800; padding-bottom: 8px; }
*/

.integrantes {display: flex; justify-content: space-between; font-family: 'Montserrat', sans-serif; font-weight: 800; margin: 16px; padding-top: 60px;}

    
.tarjeta {
  position: relative;
  width: 15%; 
  border: 2px solid #18191f; 
  box-shadow: 0px 4px 0px #18191F; 
  border-radius: 16px;
}

.tarjeta p {text-align: center; padding: 8px;}
.imgalumno {
  width: 100%; 
  border-bottom: 2px solid #18191f; 
  border-radius: 16px 16px 0px 0px;
  display: block;
  height: auto;
}

/*********************HOVER MULTIPLY de alumnos*********************/
.overlay {
  border-radius: 16px 16px 0px 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}

.overlay#euge {
  background-color: #00c6ae;
}
.overlay#jose {
  background-color: #ffb5d4;
}
.overlay#bren {
  background-color: #ff7b55;
}
.overlay#anto {
  background-color: #ffbd12;
}
.overlay#agus {
  background-color: #4f60ff;
}


.otarjeta {
  position: relative;
  width: 100%; 

}
.otarjeta:hover .overlay {
  opacity: 0.7; }

/*********************APP*********************/

.app {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center; padding:  5% 18% 5% 18%}

.gifimagen {padding: 40px 70px 40px 0}

    


/************************plan*************/
.plan {text-align:center; margin-top: 5%; margin-right: 15%; margin-left: 15%;}
.plan h3 {font-family: 'Montserrat', sans-serif; font-weight: 800}

.plan div {margin-top: 5%;}

.plan h2 {font-family: "Montserrat"; font-weight: 800 ; color: #18191f; font-size: 300%; text-align: center;}



















/*********************datos obligatorios catedra**********************/

.datosob {display: flex;}
.datosss {flex: 1; font-size: 14px; padding: 2%; margin: 15px; border: 2px solid #18191f; border-radius: 16px;}

/*********************footer**********************/

footer {background-color: #18191f; color: white; text-align: center; font-size: 12px; padding: 2% 15% 2% 15%; margin-top: 5%; font-style: italic}
footer a {color: white; font-style: normal; font-family: 'Inter', sans-serif;}
footer a:hover {color: #ffbd12}

footer p {margin-bottom: 15px;}



@media screen and (max-width: 600px) {
    
    
  .integrantes {
    background-color: white;
    flex-direction: column;
    align-items: center;
  }
    
  .tarjeta {
  width: 80%; margin-bottom: 15%;
}

    .app {display: flex; align-items: center;
	flex-direction: column;}
    .gifimagen {padding: 0 0 20% 0}

.container {margin: 0}
    
    .appdescripcion p {font-size: 14px;}
    
    .datosob {display: flex; flex-direction: column; padding-top: 45px;}
    .datosss {padding: 8%; margin: 15px;}
    
    
}