@charset "utf-8";

* {
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
}

body {
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(162,206,207,1) 100%);
}




/*----menu¨------*/

header {
    box-sizing: border-box;
    background-color: #eef3f5;
    padding: 1em .5em .5em 0;
    display: flex;
    justify-content:center;
    padding-right: 2em;
    font-size: 1.4em;
}


header div nav ul{
    display: flex;  
}

a {
    color: cadetblue;
}

a:hover {
    color: skyblue;
}



header div nav ul li a {
    padding: .6em;
    margin: .6em;
    align-content: center;
}


main {
    margin: 1em 2em 3em 2em;
    padding: 1em 0 3em 0;
}


#nombre {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    padding: 1.4em;
    margin: 0 auto 1em auto;
    max-width: 40em;
    font-size: 1em;
    text-align: center;
}

.avatar {
    height: 10em;
    border-radius: 50%;
    border-style: inset;
}



.materias {
   background: rgba(255, 255, 255, 0.83);
    padding: 1.4em;
    width: 20em;
    border-bottom-left-radius: 3em;
    border-top-right-radius: 3em;
    font-size: 1em;
    justify-content: center;
    margin-bottom: .4em;
}


#navintegrantes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding-top: 2em;
    font-size: 1.2em;
}

#titintegrantes{
    font-size: 1.4em;
    font-style: bold;
    margin: .5em;
}


/*--------------------------------------PERTENENCIA-----*/



section2 {
    color: #5e5e6d;
    margin: 0 auto 1em auto;
    max-width: 40em;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 2em 2em 0 0;
    flex-wrap: wrap;
}




h4 {
    text-align: left;
    color: grey;
    border-bottom: solid .06rem;
    font-size: 1.2em;
}

.listaspertenencia{
  font-size: 1em;  
}

.uba {

    border-bottom: solid rgba(43, 43, 67, 0.63) .06rem;
    border-bottom-width: thin;
    padding-top: 2em;
}

.titulomaterias{
    font-size: 1.4em;
    margin-bottom: .4em;
}

#titulopertenencia{
    margin-bottom: .4em;
    font-size: 1.4em;
}

#imgpertenencia {
    width: auto;
    height: 4rem;
    margin: 0em 0 1.5em 0;

}



footer {
    background-color: darkgrey;
    color: white;
   
}

footer{
    margin: 0 auto 0 auto;
    padding: 2em;
    text-align: center;
    font-size: 1em;
}



footer p{
    padding: 2em;
    align-items: center;
    box-sizing: border-box;

} 


/*-----------mapa y plan-----------*/

#mainmapa{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: 0 auto 1em auto;
    max-width: 40em;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 2em 2em 0 0;
    flex-wrap: wrap;
}

#titulomyp{
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 2em;
}

.listaswebapp {
    background: rgba(255, 255, 255, 0.83);
    padding: 1.4em;
    width: 20em;
    border-bottom-left-radius: 3em;
    border-top-right-radius: 3em;
    font-size: 1em;
    justify-content: center;
    margin: .4em;
}
.info{
    text-align: center;
    box-sizing: border-box;
}

#cajasmapa{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    margin: 1em;
}

#mapaflujo img{
    max-width: 100%;
    height: auto;
}

#mapaflujo {
    display: flex;
    justify-content: center;
}



/*
cuando la ventana del navegador mida
como mínimo 800px de ancho
*/

@media (min-width: 42em) {
#materiastodas{    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    margin: none;
    }

    .materias{
        margin-left: .4em;
    }
}
    
  

#mapaflujogral{
    margin: auto;
    max-width: 100vh;
    
}
    
@media (min-width: 65em) {
#cajasmapa{    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    margin: none;
    }
    
    
}