@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Major+Mono+Display&family=Poppins:wght@400;500;600;700&display=swap');

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

  :root {
    --color-fondos: rgb(44, 41, 41);
    --color-textos: rgb(0, 0, 0);
    --color-a: rgba(255, 255, 255);
    --color-b: rgb(12, 48, 75);
  }

  @media (prefers-color-scheme: Dark) {

    :root {
        --color-fondos: rgb(146, 141, 141);
        --color-textos: rgb(255, 255, 255);
        --color-a: rgb(0, 0, 0);
        --color-b: rgb(35, 113, 173);
    }
  }

  
  body{
    font-family: 'Dancing Script', cursive;
    margin: 0;
    color:var(--color-textos);
    background-color: var(--color-fondos);
  }

  li{
    font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size:.9em;
}

  h1{
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
    }

  h2{
    font-family: 'Poppins', sans-serif;
  }

  img{
    max-width: 100%;
    aspect-ratio: 1;
  }

  a {
    text-decoration: none;
    color: var(--color-a);
    font-family: serif;
    font-weight: bold; /*negrilla*/
  }

  ul{
    list-style: none;
    padding: 0;
  }

  header {
    background-color: var(--color-a);
    padding: 1em;
}

header img{
    background-color: var(--color-a);
    padding: .25rem;
    border:solid 2px var(--color-textos);
    border-radius: .5rem;
    align-items: center;  
}

header ul li a {
    background-color: var(--color-textos);
    display: blocK;
    padding: .2em;
    margin: .3em;
    width: 15em;
    text-align: center;
}

header ul li a:hover {
  background-color: var(--color-a);
  color: var(--color-fondos);
}

header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
}

footer{
  font-family: serif;
  font-size: .95em;
  padding: 1em;
  background-color: var(--color-textos);
  color: var(--color-a);
  text-align: center;
}

#univer{
  background-color: var(--color-a);
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#univer h1{
  background-color: var(--color-textos);
  color: var(--color-a);
  padding-block: .25em;
}

#univer .carre ul li a{
  display: block;
  margin: 2em 0 0 0;
  padding: .3em;
  text-align: right;
  background-color: var(--color-textos);
  border-radius: 1em;
}

#univer .carre ul li a div{
  text-align: center;
}

#univer .carre ul li p {
  color: var(--color-a);
  margin: 0 0.4em 0 0;
}

#univer h4 {
  color: var(--color-a);
  margin: 0 0 0.4em 0;
  text-align: center;
}

#univer .carre ul li a div img{
  max-width: 40%;
  height: 15em;
  aspect-ratio: 1;
}

#univer nav ul li a{
  background-color: var(--color-textos);
  display: block;
  width: 100%;
  /*text-align: center;*/
  margin-block: .5em;
}

#univer nav ul li a:hover {
  background-color: var(--color-a);
  color: var(--color-fondos);
}

#UBA{
  background-color: var(--color-a);
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#UBA h2{
  background-color: var(--color-textos);
  color: var(--color-a);
  padding-block: .25em;
  margin-block: .25em;
}

#UBA .cursando h2{
  font-size: .7em;
}

#USFX1{
  background-color: var(--color-a);
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#USFX1 h2{
  background-color: var(--color-textos);
  color: var(--color-a);
  padding-block: .25em;
  margin-block: .25em;
}

.semestre h2{
  font-size: .7em;
}

#USFX2{
  background-color: var(--color-a);
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#USFX2 h2{
  background-color: var(--color-textos);
  color: var(--color-a);
  padding-block: .25em;
  margin-block: .25em;
}

.semestre ul{
  margin-top: 1em;
  margin-bottom: 1em;
  margin-right: 2.5em;
  margin-left: 2.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 1.5em;
}

#datosAlumno{
  background-color: var(--color-a);
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#datosAlumno img{
  border: solid 4px;
  border-color: var(--color-difuso);
  border-radius: 50%;
  /*width: 40%;*/
  height: 10em;
  aspect-ratio: 1;
  margin: .8em;
}

#datosAlumno h1{
  background-color: var(--color-textos);
  color: var(--color-a);
  padding-block: .25em;
}

#datosCarrera{
  background-color: var(--color-a);
  display: blocK;
  padding: 1em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#datosCarrera h2{
  background-color: var(--color-textos);
  color: var(--color-a);
}

.materiasAprobadas h2{
  display: inline;
  padding-inline: 1em;
  font-size: small;
}

#datosEquipo{
  background-color: var(--color-a);
  display: blocK;
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

.equipo li:not(:last-child)  {
  margin: 0 0 1em 0;
  /*border-bottom: 1px solid black;*/
  padding-bottom: 1em;
}

.equipo li a {
  display: block;
  margin: 2em 0 0 0;
  padding: .3em;
  text-align: right;
  background-color: rgb(0, 0, 0);
  border-radius: 1em;
}

.equipo li a div {
  text-align: center;
}

.equipo li p {
  color: var(--color-a);
  margin: 0 0.4em 0 0;
}

.equipo h4 {
  font-size: 1.3em;
  color: rgb(210, 215, 216);
  margin: 0 0 0.4em 0;
  text-align: left;
}

.equipo ul li a div img{
  border: solid;
  border-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  /*width: 60%;*/
  aspect-ratio: 1;
}

.equipo img{
  max-width: 50%;
}

.equipo li a h4{
  text-align: center;
}

#datosEquipo h2{
  background-color: var(--color-textos);
  color: var(--color-a);
}

.comitente,
.academicos {
    background-color: var(--color-b);
}

#datosComitente{
    background-color: var(--color-b);
    display: blocK;
    padding: .5em;
    margin: 1em;
    width: auto;
    text-align: center;
}

#datosComitente img{
    /*width: 90%;*/
    /*aspect-ratio: 1;*/
    margin: 1em; 
}

#datosComitente h2{
    background-color: var(--color-textos);
    color: var(--color-a);
}

#datosComitente .acumar{
    width: 70%;
}

#datosComitente section{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

#datosAcademicos{
  background-color: var(--color-b);
  display: blocK;
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#datosAcademicos h2{
  background-color: var(--color-textos);
  color: var(--color-a);
  margin-bottom: 1em;
}

#datosUBA { grid-area: datosUBA; }
#datosFADU    { grid-area: datosFADU; }
#datosDGPC   { grid-area: datosDGPC; }

.UBA{
  display: grid;
  grid-template-columns:auto;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
  "datosUBA"
  "datosFADU"
  "datosDGPC";
  gap: .5em;
  place-content: center;
  place-self: center;
}

#datosporta{
  background-color: var(--color-a);
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#datosporta h2{
  background-color: var(--color-textos);
  color: var(--color-a);
  padding-block: .25em;
}

#datosporta ul li a{
  display: block;
  margin: 2em 0 0 0;
  padding: .3em;
  text-align: right;
  background-color: var(--color-textos);
  border-radius: 1em;
}

#datosporta ul li a div{
  text-align: center;
}

#datosporta ul li p {
  color: var(--color-a);
  margin: 0 0.4em 0 0;
}

#datosporta h4 {
  color: var(--color-a);
  margin: 0 0 0.4em 0;
  text-align: center;
}

#datoscarrera ul li a div img{
  width: auto;
  aspect-ratio: 1;
}

#datosredes{
  background-color: var(--color-a);
  padding: .5em;
  margin: 1em;
  width: auto;
  text-align: center;
}

#datosredes h2{
  background-color: var(--color-textos);
  color: var(--color-a);
  padding-block: .25em;
}

#datosredes img{
  width: 30%;
  margin: 1em;
}

#datosredes ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

#datosredes ul li{
  width: 33%;
}

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

  header nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }

  #datosAlumno{
    display: block;
  }

  #datosAlumno h1{
    border-radius: 1em;
  } 
  
  #datosAlumno .acercademi{
    width: 70%;
  }

  #datosAlumno .acerca{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }

  #datosCarrera h2{
    border-radius: 1em;
  }

  .materiasAprobadas h2{
    font-size: larger;
  }

  .equipo ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  #datosEquipo h2{
    border-radius: 1em;
  }

  #datosComitente h2{
    border-radius: 1em;
  }

  #datosAcademicos h2{
    border-radius: 1em;
  }

  .UBA{
    display: grid;
    grid-template-rows:auto;
    grid-template-columns: 34% 33% 33%;
    grid-template-areas: 
    "datosFADU datosUBA datosDGPC";
    gap: .5em;
    place-content: center;
    place-self: center;
  }

  #univer h1{
    border-radius: 1em;
}

#univer .carre ul li a h4 {
    color: rgb(210, 215, 216);
    margin: 0 0 0.4em 0;
    text-align: left;
}

#univer .carre ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

#univer .carre ul li a{
    min-width: 33em;
}

#univer nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

#univer nav ul li a{
    width: 21em;
}

.cursando h2{
    display: inline;
    padding-inline: 1em;
}

#UBA h2{
    border-radius: 1em;
}

#USFX1 h2{
    border-radius: 1em;
}

#USFX2 h2{
    border-radius: 1em;
}

.semestre ul{
    width: 70%;
    margin-inline: auto;
}

.semestre ul li{
    margin-left: 4em;
    margin-right: 4em;
}
#datosporta h2{
  border-radius: 40%;
}

#datosporta ul li a h4 {
  color: rgb(210, 215, 216);
  margin: 0 0 0.4em 0;
  text-align: left;
}

#datosporta ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
}