*{
    margin:0;
    padding: 0;
    border:0;
    font-family: 'DM Sans', sans-serif;}
img {
    width: 80%;
    display: flex;
    margin:  1em;
}
#logos div {width: 40%;
    max-width: 20em;
}
#logos {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}
body{
    background-color: #796eb9;
    display: flex;
    flex-direction: column;
}

.contenedora {
    margin: 0 auto;
    max-width: 50rem;
}
header .contenedora {  
    display: flex;   
    justify-content: center;   
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column
}

header{
    background-color: rgba(72, 61, 139, 0.78);
    padding: 1em
}

nav{
    display: flex;
    flex-direction: column;
    align-items: center
}

nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none
}
nav ul li a{
    color: black;
    display: block;
    margin:  0.1em;
}
#navegador li{
    margin: 0.3em;
    width: 20em;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}
#navegador a{
    background-color:  rgba(139, 255, 242, 0.83);
    border-radius: 1em;
    padding: 0.5em;
    display: flex;
    justify-content: center
}
#navegador a:hover{
    background-color:  rgb(95, 204, 192);
}
#integrantes {
    display: flex;
    flex-flow:row;
    align-items:center;
    width: 20em;
    justify-content:space-between;
    margin:auto
}
#integrantes img{
    max-width: 2.5em;
    padding: 1em;
    border-radius: 2em;
}
a{
    color:  #F8F8F8;
}

h1{color: white;
margin:  1em;
font-weight: bold;}
h2{color: white;
}
h3{color: rgba(152, 255, 243, 0.83);
margin:  1em;}
p{color: white;
margin:  1em;}

#primerboceto {
      width: 70%;
    margin:  1em;
}
#boceto  li{
    background-color: rgba(139, 255, 242, 0.83);
    text-align:center;
    justify-content:center;
        margin: 2em;
   border-radius: 2em;
    display:block
        height: 1em;
    width: 12em;
    line-height: 5em;
    list-style: none;
    font-size: 20px;
}
#boceto li:hover{
    background-color:  rgb(26, 70, 65);
}

#mockup {
      width: 70%;
    margin:  1em;
}
#segundoboceto {
      width: 70%;
    margin:  1em;
}
footer{
    background-color: darkslateblue;
}
main {
    display: flex;   
    justify-content: center;   
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column
}
#info{ 
     text-align:center;
    border: 3px solid rgba(139, 255, 242, 0.83);
    border-radius: 0.2em;
    font-size: 19px;
}
#melina{
    text-align:center;
    justify-content:center;
    margin: auto;
    margin-top: 40px;
    font-size: 30px;
}
#perfil{ width: 60%;
    display: flex;   
    justify-content: center;   
    align-items: center;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    
}

#materias ul li{
    list-style:circle;
    margin-left: 1em;
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}
#materias h2{
    margin-bottom: 0.5em;
    margin-top: 1em;
}

#trabajos {
    display: flex;
    flex-direction: column;
}
#trabajos h2 {
    display: flex;
    justify-content: center;
    margin-top: 3em;
    margin-bottom: 1em;
}
#trabajos div{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items:center;
    margin: auto;
    width: 40%;
}
#comitente {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
#comitente img {
    width: 100%;
}
#comitenteboceto h2{
    margin-top: 2em;

}
#bocetos img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto
}
#bocetos h1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2em;
    margin-bottom: 1em;
}