/* ------------------ DISEÑO - TIPOGRAFIA Y COLORES */



h1 {
    font-family: 'Rubik', sans-serif;
    color: white;
}
  
h2 {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 2em;
    color: darkgray;
}
  
h3,
h4 {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: .75em;
}
  
p {
    font-family: 'Rubik', sans-serif;
    font-size: .75em;
}
  
a {
    font-family: 'Rubik', sans-serif;
    text-align: right;
}
  
  li {
    font-family: 'Rubik', sans-serif;
    font-size: .75em;
  }



  /* ------------------ CUESTIONES GENERALES */
  
  * {
  box-sizing: border-box;
  }
  
  img {
  max-width: 100%;
  }
  
  body {
  margin: 0;
  padding: 0em;
  color: black;
  background-color: lightgrey;
  }
  
  ol, ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
  
  a {
  text-decoration: none;
  }
  
  /* ------------------ COMPONENTES SUPERIORES */
  
  /* --- Header */

  header {
    background-color: darkgray;
    height: auto;
  }
  
  .boxheader {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: auto;
    padding: .5em;
  }
  
  header nav {
    display: flex;
    flex-direction: column;
  }
  
  header nav ul {
    margin: auto;
    width: 8em;
  }
  
  header ul li {
    margin: .25em; 
  }
  
  header ul li a {
    background-color: darkcyan;
    display: block;
    padding: .4em;
    color: cyan;
    border-radius: .3em;
  }
  
  header ul li a:hover {
    background-color: cyan;
    color: darkgray;
    transition: .5s;
  }
  
  #logo {
    padding: .3em;
    width: 8em;
  }
  
  #logo img {
  background-color: white;
  border-radius: .5rem;
  }

  header {
    background-image: url("../imagenes/header_fondo01.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


/* ------------------ COMPONENTES CENTRALES */


  
/* --- Name */
  
  #name {
    text-align: center;
    background-image: url("../imagenes/name_fondo01.jpg");
    background-repeat: no-repeat;
    background-position: center;
    padding: .3em;
    background-size: cover;
  }
  
/* --- Alumno */

main #alumno {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: .3em;
  margin: 1em 1em 1.5em 1em;
  box-shadow: .5em .5em .5em silver;
}

#alumno figure {
  width: 20em;
}

#alumno_txt {
width: 20em;
padding-bottom: 1em;
}

#alumno a {
  font-size: 1.5em;
}

/* --- Carrera */

main #carrera {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: .3em;
  margin: 1em 1em 1.5em 1em;
  box-shadow: .5em .5em .5em silver;
}

#materias {
width: 20em;
padding-bottom: 1em;
}

#materias ul {
  padding: 0;
  margin: 0;
  }

#carrera figure {
  width: 20em;
}

#carrera img {
  display: block;
  margin: auto;
}

/* --- Portfolio */

main #portfolio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: .3em;
  margin: 1em 1em 1.5em 1em;
  box-shadow: .5em .5em .5em silver;
}

.proyecto {
  display: flex;
  flex-direction: column;
  padding: .5em;
}

.proyecto h3 {
  text-align: center;
  margin: 0;
}

.proyecto p {
  text-align: center;
  margin: 0;
}

main #portfolio img {
  box-shadow: .5em .5em .5em silver;
}

/* --- Academia */

main #academia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  justify-content: space-between;
  background-color: white;
  border-radius: .3em;
  margin: 1em 1em 1.5em 1em;
  padding: .5em;
  box-shadow: .5em .5em .5em silver;
}

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

  width: 20em;
  padding-block: 1em;
}

.institucion_textos {
  width: 12em;
}

.institucion img {
  width: 3em;
  aspect-ratio: 1;
}

.institucion h4 {
  margin-block-start: 0;
}


/* ------------------ COMPONENTES INFERIORES */

footer {
  background-color: darkslateblue;
}

footer #pie {
  display: flex;
  justify-content: space-between;
  padding: .5em;
  gap: 2em;
}

footer p {
  font-size: small;
  font-weight: 400;
  color: white;
  padding: 1em;
}

footer nav {
  display: flex;
  flex-direction: column;
}

footer nav ul {
  margin: auto;
  width: 8em;
}

footer ul li {
  margin: .25em; 
}

footer ul li a {
  background-color: gray;
  display: block;
  padding: .4em;
  color: darkblue;
  border-radius: .3em;
}

footer ul li a:hover {
  background-color: cyan;
  color: darkblue;
  transition: .5s;
}


/* ------------------ MEDIA QUERY */ 
/* --- Corte a 600px de ancho */
@media screen and (min-width: 60rem) {



/* ------------------ COMPONENTES SUPERIORES */


.boxheader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: min(60rem, 100%);
  margin-inline: auto;
  padding: .5em;
  }

header {
  background-image: url("../imagenes/header_fondo02.jpg");
  }

#name {
  background-image: url("../imagenes/name_fondo02.jpg");
  }


  /* ------------------ COMPONENTES CENTRALES */

main #alumno {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: min( 60rem, 100% );
  margin-inline: auto;
  padding: .5em;
  }

main #carrera {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: min( 60rem, 100% );
  margin-inline: auto;
  padding: .5em;
  }

main #portfolio {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
  width: min( 60rem, 100% );
  margin-inline: auto;
  padding: .5em;
  }


  main #academia {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: min( 60rem, 100% );
  margin-inline: auto;
  padding: .5em;
  }


/* ------------------ COMPONENTES INFERIORES */

footer #pie {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: min(60rem, 100%);
  margin-inline: auto;
  padding: .5em;
  }



  }