@charset= "utf-8";
    
body {
    font-family: sans-serif; 
    background-color: mintcream; 
    color: seagreen;
    font-family: "trebuchet ms", arial, helvetica, sans-serif;
    background-color: mintcream;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

nav{
    display: flex;
    flex-wrap: wrap;
}

nav>ul {
    display: flex;
    justify-content: space-between;
    background-color: darkcyan;
}

nav>ul>li {
    font-weight: 500;
    color: white;
    background-color: darkcyan;
    display: flex;
    padding: 1em;
    
}

nav>ul>li>a {
    font-weight: 500;
    color: white;
    background-color: darkcyan;
    display: flex;
    text-transform: capitalize;
    text-decoration: inherit;
    align-items: center
    
}

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

p,
h1,
h2 {
    margin-bottom: 0.5em;
}

header,
footer {
    background-color: darkcyan;
    padding: .25em;
     height: auto;
    color:white;
}

footer {
    margin-top: 20px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
}

header ul li a {

    display: flex;
    justify-content: center;
    align-items: center;

}

main {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    
}

.usuario img {
    border-radius: 50%;
    width: 50vw;
    height: 50vw;
    max-width: 15em;
    max-height: 15em;
}

section {
    width: auto;
    max-width: 80%;
    margin: auto;
}


section a:hover {
    flex-direction: row;
    justify-content: center;
}
    
.usuario,

section {
     width: 45%
}

#divImagen 
{
    display: flex;
    align-items: center;
    width: auto;
    margin: auto;
    margin-left:28%;
    margin-right: 20%;
    display: flex;
    flex-direction: column;
}

#divImagen-integrantes 
{
    display: flex;
    align-items: center;
    width: auto;
    margin: auto;
    margin-left:42%;
    margin-right: 20%;
    display: flex;
    flex-direction: column;
}

#divImagenx 
{
    display: flex;
    align-items: center;
    width: auto;
    margin: auto;
    margin-left:25%;
    margin-right: 20%;
    flex-direction: column;
}


#divIntegrantes {
    width:100%;
}

#divComitente {
    
}

#divDocentes {
    width: 100%;
}

.separador-bottom-15 {
    margin-bottom: 15px;
}

.separador-top-25 {
    margin-top: 25px;
}

.separador-bottom-20 {
    margin-bottom: 20px;
}

.centrar {
    text-align: center;
}

.datos {
    margin-left: 6%;
}

.nosotros {
    margin-left: 15%;
}

.texto-alineado {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin-left: 33%;
    text-align: justify;
    text-justify: inter-word;
}

.texto-alineado2 {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin-left: 33%;
    margin-top: 2%;
    text-align: justify;
    text-justify: inter-word;
}

h3{
    display: flex;
    background-color: darkcyan;
    color: white;
    justify-content: center;
    max-width: 30%;
    margin: .5em;
    margin-left: 39%;
    margin-bottom: 15px;
}

#section-plan {
    max-width: unset;
    width: auto;
}

.atras{
    width: auto;
    margin-left: 10px;
}

.boton{
    padding: 5px;
    background-color: darkcyan;
    color: white;
    border: 2px solid darkcyan;
    padding: 10px;
}

.div-botones{
    margin-left: 79%;
}

@media screen and (max-width: 1150px){
    .div-botones {
        margin-left: 73%;
    }
}

@media screen and (max-width: 915px){
    #divImagen-integrantes {
        margin-left: 22%;
    }
    .div-botones {
        margin-left: 60%;
    }
}

@media screen and (max-width: 676px){
    .div-botones {
        margin-left: 45%;
    }
}