/*Introducción a ccss, Hojas de Estilo en Cascada* /
/* el reseteo de css ayuda a que la páagina se vea igual en todos los navegadores*/
/* selector "raiz" para que las "variables"
   estén disponibles en todo el html */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {

  /* se guardan los colores del proyecto */
  --tipo-titulos: serif;
  --tipo-textos: sans-serif;

  --sombras:
    0
    /* desplazamiento horizontal */
    4px
    /* desplazamiento vertical */
    2px
    /* desenfoque */
    var(--color-textos-alfa);
  /* color */
}

header .contenedor ul {
  justify-items: center;
  list-style: none;
  gap: 1.3em;
  display: flex;
  flex-direction: column;
  margin: 1em;
  padding: 1em;

}

.logo-dgpc{
justify-items: center;
border-radius: 3em;
}


body {
  margin-left: auto;
  display: grid;
  justify-items: center;
  min-height: 100vh;
  grid-template-rows: auto 2fr auto;
  grid-template-areas:
    "cabeza"
    "principal"
    "pie";
  min-height: 100vh;

}

h1 {
  justify-items: center;
  color: #EEEEEE;
}

ul .img {
  min-width: min-content;
}

.trabajos img {
  width: 100%;
}

.trabajos {
  margin: 1em;
  padding: 1em;
  background-color: #112d4e;
  border-radius: 0.6em;
  display: grid;
  justify-items: auto;

}

a {
  text-decoration: none;
  color: var(--color-2);
  font-family: var(--tipo-textos);
}

ul,
ol {
  list-style: none;
  gap: 1em;
}


h1,
h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #EEEEEE;
}

h2, h4, h5 {
  color: #000000;
}
header {

  background-color: #D8E3E7;
  display: flex;
  flex-direction: column;
  grid-area: "cabeza";
  padding: 0.3em;

}


/*vinculos de navegacion*/
header ul li a {
  background-color: #132C33;
  padding: 0.3em;
  color: #51C4D3;
  border-radius: 3em;
  text-align: stretch;
}

header ul li a:hover {
  background-color: #51C4D3;
  color: #132C33;
}



.acercademi {
  margin: 1em 0 1em 0;
  border-radius: .6em;
}

/*
seccion equipo
*/
/* componente con todos los datos de cada integrante */

#datosEquipo {
  display: grid;
  padding: 1em;
  max-width: 100%;
  background-color: #126E82;
  color: #51C4D3;
  border-radius: .3em;
  width: 100%;
}


.alumna {
  margin: 3em;
  background-color: #132C33;
  color: #D8E3E7;
  border-radius: .6em;
  padding: 1em;
}

.compa1,
.compa2 {
  margin: 3em;
  padding: 1em;
  background-color: #132C33;
  color: #51C4D3;
  border-radius: .6em;

}

main {
  grid-area: "principal";
  min
}

main ul li {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


.equipo a>div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax (min (20em, 100%), 1rr));
  width: 75%;
  height: auto;
}

.equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax (min (20em, 100%), 1rr));
  display: grid;
  column-gap: 0 0 1em;
  justify-content: center;

}

.equipo img {
  border-radius: .3em;
  width: 75%;

}

.equipo li p {
  color: #EEEEEE;
  margin: 0 0.3em 0 0;
  font-family: Arial, Helvetica, sans-serif;
}


.equipo h4 {
  font-size: 1.3em;
  margin: 0 0 0.3em 0;
  text-align: left;
}


.comitente,
.academico,
.datosUBA 
{
  width: auto;
  display: grid;
  margin: 1em;
  padding: 1em;
  border-radius: .6em;
  background-color: #D8E3E7;
  color: #000000;
}

.carrera {
  margin: 1em;
  padding: 1em;
  border-radius: .6em;
  background-color: #126E82;

}


footer {
  grid-area: "pie";
  padding: 1em;
  background-color: #000000;
  color: #51C4D3;
}

footer p {
  margin-block: 0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.comitente p {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



/* parrafo/s contenidos en la etiqueta "footer" */
footer p {
  /* elimina margen superior e inferior que viene predeterminado */
  margin-block: 3em;
}

/* ------------------
  
     reglas para layout
  
     ------------------ */


.integrantes {
  /* para que queden mas de 1 en la misma linea */
  display: grid;
  /* separacion entre los elementos */
  gap: 1em;
  /* quedan en la linea, si caben
           con ancho mimo de 320px */
  grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 3fr));
}

.equipo_textos {
  /* textos se estiran para medir lo mismo */
  align-self: stretch;
  /* btn para abajo, texto para arriba */
  display: grid;
  /* plantilla de líneas de los textos:
          - nombre con altura fija,
          - texto crece para ocupar espacio libre,
          - botón con la altura de su contenido */
  grid-template-rows: .3rem 1fr auto;
}

.equipo_textos a {
  /* botón a la derecha */
  justify-self: start;
  margin: 1em;
}



@media only screen and (min-width: 730px) {

  header {
    flex-direction: row;
    justify-content: space-between;
    padding: 1em;
    align-items: center;
  }

  header .contenedor ul {

    display: flex;
    flex: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .logo-dgpc{
    align-items: center;
  }

  .equipo {
    display: flex;
    flex-direction: row;

  }

}

/* tres columnas, nav a la izquierda */
/* ancho de nav: su contenido,
       ancho de main: el doble del ancho del aside */
/* segunda fila: altura disponible,
    las restantes: altura de su contenido  */
/* menu vertical */
/* --------------------------
   media queries,
   para cambiar la apariencia
   en la medida en que el
   navegador se ensancha
   (mobile first)
   -------------------------- */
/* --------------------------
   Modificaciones segun se va
   ensanchando el dispositivo
   -------------------------- */

/* a partir de 640px 
@media (min-width: 40em) {

  body {
    /* dos columnas */
/* segunda columna, el doble de la primera */