*{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
 
html{
  height:-webkit-fill-available; 
}

/*body*/
body{
  background-color: #e7e7ee;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/*header*/
header{
  padding: 0.5em 0em 0.5em 0em;
  background-color: #769377;
}

#logodgpc{
  box-sizing: border-box;
  border-radius: 1.5px;
  margin: 0.5em 0em 0.5em 1em;
}

header nav{
  margin: 0em 0em 0em 0em;
}

header nav ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

header nav ul li{
  margin: 0.5em;
  list-style: none;
}

header nav ul li a{
  text-decoration: none;
  width: 8em;
  margin: auto;
  display: inline-block;
  background:#49613d;
  color: white;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-radius: 5px;
  box-shadow:0px 5px 0px #283920
}

header nav ul li a:hover{
  background:grey;
  color: rgb(14, 44, 38);
  box-shadow:0px 2px 0px #283920
}

header nav ul li a:active{
  box-shadow:none
}

/*main*/
#datosPersonales, #datosCompañeros, #datosAcademicos{
  background-color:#929292;
  box-shadow: inset 0px 0px 6px 0px rgb(111 110 110 / 79%);
  width: 100%;
}

#datosPersonales article{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
} 

#datosPersonales article img{
  border-radius: 50%;
  box-shadow: 3px 3px 0px #424242;
  align-items: center;
  margin: 25px 0px 0px 0px;
}

#datosPersonales article div{
  margin: 30px 0px 0px 0px ;
} 

#datosPersonales article div div{
  margin: 10px 10px 10px 19px ;
  background: #769377;
} 

#datosPersonales h3{
  width: 100%;
}  

h1{
  text-align: center;
  font-size: 30px ;
  color: rgba(0, 0, 0, 0.829);
}  

h3{
  font-size: 20px ;
  color: rgba(0, 0, 0, 0.829)
}  

p{
  text-align: center;
  font-size: 18px ;
  color: rgba(0, 0, 0, 0.829)
}  

#datosPersonales li{
  font-size: 15px ;
  color: rgba(0, 0, 0, 0.829)
}  


#datosCompañeros ol{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center; 
  background: #769377;
  padding: 10px 
  
}

#datosCompañeros ol li{
  margin: 0.5em;
  list-style: none;
}

#datosCompañeros ol li a{
  text-decoration: none;
  width: 8em;
  margin: auto;
  display: inline-block;
  background:#49613d;
  color: white;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-radius: 5px;
  box-shadow:0px 5px 0px #283920
}

#datosCompañeros ol li a:hover{
  background:grey;
  color: rgb(14, 44, 38);
  box-shadow:0px 2px 0px #283920
}

#datosCompañeros ol li a:active{
  box-shadow:none
}

#datosCompañeros h2{
  width: 100%;
  text-align: center;
  font-size: 20px;
}  

#datosAcademicos{
  padding-top: 30px ;
  padding-bottom: 20px;
}

#datosAcademicos > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: 15%;
}

#datosAcademicos > ul > li:not(:last-of-type) {
  padding-bottom: .9em;
  margin-bottom: .9em;
}

#datosAcademicos img {
  width: 12em;
  height: auto;
}

#datosAcademicos > ul > li > *:first-child {
  margin-right: 2em;
  width: 12em;
}

#datosAcademicos h2{
  margin-left: 17%;
  margin-bottom: 10px;
  font-size: 20px;
}

#datosAcademicos h3{
  font-size: 17px;
}

#datosAcademicos ul li div ul li{
  list-style: none;
  margin: 0px
} 

#analisis h2{
  margin: 10px;
  text-align: center;
}  

#analisis img{
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
}  

#mockup h2{
  margin: 10px;
  text-align: center;
}  

#mockup img{
  display: block;
  width: 110%;
  height: auto;
  margin: auto;
}  


/*footer*/
footer {
  display: inline-block;
  background: #769377;
  padding: 1em;
  font-weight: lighter;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.829)
}

@media screen and (min-width: 600px){
  main{
      width: 80%;
      margin: auto;
  }
}

@media screen and (min-width: 768px){
  main{
      width: 70%;
      margin: auto;
  }
}

@media screen and (min-width: 992px){
  main{
      width: 60%;
      margin: auto;
  }
}

@media only screen and (min-width: 1200px){
  main{
      width: 60%;
      margin: auto;
  }
}