* {
    box-sizing: border-box;
}

 p
 {
    margin-top: 2rem;
    margin-bottom: 5rem;
    margin-bottom: 2rem;
    text-align: left;
 }
 .fondocolor
   {
     margin-top: 7%;
     padding-top: 5rem;
     padding-bottom: 5rem;
     margin-bottom: 7%;
    background-color: white;
   }
   
   header
 {   align-content: center;
     background-color:rgb(15, 15, 58) 
 }

   header nav a {
      text-decoration: none;
      padding-block: 10px;
      text-align: center;
      border-radius: 10rem;
      display: block;
      background-color: rgb(63, 63, 91);
      margin-top: 1rem;
      margin-bottom: 1rem;
      padding-top: 5px;
      padding-bottom: 5px;
      padding: 1rem;

    }


  header nav ul
  {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(5rem,1fr) );
   width: min (100%, 30rem)
   margin-inline-start auto;
   padding: 1rem;
  }

  header nav ul a
  { 
    
    text-decoration: none;
    color: white;
  }

  .proyecto
  { background-size: cover;
    background-image: url(portada.jpg);
     color: black;
     font-style:bold;
     padding: 5rem;
     background-color: rgb(86, 132, 183);
     padding-top: 5rem;
     padding-bottom: 5rem;
     text-align: center;
     border-radius: 1rem;
      }
  .intro
  {
    display: flex;
    flex-direction: row;
    row-gap: 5rem;
    column-gap: 3rem;
    text-align: center;
    margin: 1.5rem;
    align-items: center;
  }

  .intro img {
  width: 5000px;
  height: auto;
  }

body {
    background-color:white;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0%;
    padding: 0;
    border: 0rem;
}

img {
    max-width: 100%;
}
h2
{ text-align: center;
    margin: 1%;
}

#logos {
    background-color: rgb(230, 224, 216);
    width: 100%;
}

#logos > div {
    max-width: 9em;
    display: flex;
    justify-content: space-evenly;
    
}


footer {
    background-color:rgb(15, 15, 58);;
    color: antiquewhite;
    padding:1%
}

.borde
{  padding: 1%;
    margin: 1%;
    border-radius: 1rem;
    background-color: rgb(217, 174, 33);
    color:rgb(15,15,58);

}


.arqueotipo
{
  align-items: center;
  margin: 15%
}

.integrant {
  display: flex;
  flex-direction: row;
  row-gap: 1rem;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  margin: 0 auto;
  padding: 4rem;
  }


  #titulo {
    text-align: center;
    font-size: 1.5em;
    color:rgb(15,15,58);
    }

    #hi {
      width: 400px;
      aspect-ratio:  500 / 500;
      text-align: center;
      border:1rem;
      border-radius: 25%;
  }

  .boton{
    color: white;
      background-color: rgb(15,15,58);
      text-decoration:none;
      padding: 100px;
      display: block;
      border-radius: 10px;
      text-align: center;
      font-size: 1.3em;
      font-weight: bold;
      padding: 1rem;
      margin-left: 10rem;
      margin-right: 10rem;
  }

  .datosacademicos{

    padding-top: 1rem;
  }

    #logo{
        width: auto;
        height: 120px;
        margin: 5px;
        padding: 10px;
        justify-items: center;
        background-color: rgb(230, 224, 216);
        background-size: 150px;
        
    }

    #cajalogo{
      text-align: center;
      gap: 0.5rem;
      border: 1rem;
      margin: 1rem;
    }

    #sectionmapa{
      padding: 1.2rem;
      ;
    }
  
    h1{
      text-align: center;
      font-size: 3.5em;
      color:black;
      }

      /*lista menu*/

      .listaicons li {
      background-color: white;

    
      }


      .botongaleria {
      margin-bottom: 1em;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-style: normal; 
      text-align: center;
      color: white;
      padding: 1rem;
      border-radius: 1rem;
      background-color:rgb(178, 93, 37);
      margin-left: 20rem;
      margin-right: 20rem;}

      .botongaleria div {
      text-align: center;
      justify-content: center;
      }

      .hola {
      color: rgb(178,93,37);
      font-size: 2rem;
      text-decoration-line: underline;
      }

      /*celular*/

      @media screen and (max-width: 751px) {

      header nav ul {
      display: flex;
      flex-direction: column;
      row-gap: 0.1em;
      }

      header nav a {
        text-decoration: none;
        padding-block: 10px;
        text-align: center;
        align-items: center;
        border-radius: 10rem;
        display: block;
        background-color: rgb(63, 63, 91);
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-top: none;
        padding-bottom: 5px;
        padding-left: 1px;
        padding-right: 1px;
      }

      #cajalogo{
        display: flex;
        flex-direction: row;
        text-align: center;
        gap: 1rem;
        border: 1rem;
        margin: 1rem;
        /*width: 500px;
        height: auto;*/
      }

      .proyecto
      { display: flex;
        flex-direction: column;
        align-items: center;
        background-size: cover;
        background-image: url(portada.jpg);
        color: black;
        font-style:bold;
        padding: 1rem;
        background-color: rgb(86, 132, 183);
        padding-top: 5rem;
        padding-bottom: 5rem;
        text-align: center;
        border-radius: 1rem;
        }
          
        .proyecto p {
        text-align: center;
        margin: 0.5rem;
        padding: 0.5rem;
        }

        .intro {
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
        }

        .intro img {
        width: 500px;
        height: auto;
        }

        .intro p {
        margin: 1rem;
        padding: 1rem;
        }

          .datosacademicos {
          
          display: flex;
          flex-direction: column;
          align-items: center;
          background-size: cover;
          color: black;
          font-style:bold;
          background-color:white;
          padding-top: 1.5rem;
          padding-bottom: 1rem;
          text-align: center;
          border-radius: 1rem;
          }

          .integrant {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1rem;
            text-align: center;
            margin: 0 auto;
            padding: 4rem;
            }
    }