* {
    box-sizing: border-box;
    margin: .25em;
    font-family: 'Raleway', sans-serif;
}

header {
    margin: 0;
    padding: 2em 0em 3em 0em;
    display: flex;
    justify-content:space-between;
    align-items:center;
    max-height: 1em;
}   

body{
    background-color: rgb(196, 248, 240);
    width: 100%;
}


body nav ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    }

body nav ul li{
    width:100%;
}

body nav ul li a:hover{
    background-color: #51a097;
    color: white;
}

body nav ul li a { 
    color:#ffffff;
    font-weight: bold;
    font-size: 1em;
    background-color:#85d4d4;
    display: flex;
    padding: .3em 1em .3em 1em;
    text-decoration: none;
    justify-content: center;
    }

div.integrantes ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

div.integrantes ul li a {
    list-style: none;
    padding: 0;
    display: flex;
    background-color:#9b9a9a;
    color:#ffffff;
    font-size: 1em;
    padding: .3em 1em .3em 1em;
    justify-content: center;
    text-decoration: none;
}

div.integrantes ul li a:hover {
    background-color: #808080;
    color: white;
}

main h1{
    margin-top: 1em;
    color: #80ccc3;
    text-align: center;
    }

main h2{
    margin-top: 1em;
    color: #80ccc3;
    }

main p{
    color: #9b9a9a;
    font-size: 18px;
    text-align: center;
    margin-bottom: 2em;
}

main figure{
    margin-top: 2em;
    display: flex;
    justify-content: center;
    }

main figure img{
    display: flex;
    max-height: 15em;
    }

footer p {
    color:#FFFFFF; 
    background-color:#525252;
    text-decoration: none;
    margin-top: 3em;
    padding: 1em;
    font-size: 12px;
    }

/*
cuando la ventana del navegador mida
como mínimo 560px de ancho
*/
@media (min-width: 35em) {
    body nav ul{
        justify-content: space-evenly;
    }
        
}