@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

*{
    padding: 0; margin:0; box-sizing: border-box; transition: all 1s;
}

body {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    font-family: 'Lato', sans-serif;
    text-align: center;
}

body ul {
    list-style: none;
}


header {
    background:#6F58C9; 
}

nav{
    text-align: justify;
    display: inline-flex;
} 

.mapa{
    font-family: 'Lato', sans-serif; 
    text-decoration: none;
    color:#1e153f;
    padding: 0.5rem;
    margin: 0.5rem;

}

.mapa:hover{
    background: rgb(178, 165, 253) ;
    border-radius: 0.5rem;
}
.plan{
    font-family: 'Lato', sans-serif; 
    text-decoration: none;
    color:#1e153f;
    padding: 0.5rem;
    margin: 0.5rem;

}

.plan:hover{
    background: rgb(178, 165, 253) ;
    border-radius: 0.5rem;

}

.landing{
    font-family: 'Lato', sans-serif; 
    text-decoration: none;
    color:#1e153f;
    padding: 0.5rem;
    margin: 0.5rem;

}

.landing:hover{
    background: rgb(178, 165, 253) ;
    border-radius: 0.5rem;

}

.app{
    font-family: 'Lato', sans-serif; 
    text-decoration: none;
    color:#1e153f;
    padding: 0.5rem;
    margin: 0.5rem;

}

.app:hover{
    background: rgb(178, 165, 253) ;
    border-radius: 0.5rem;

}

.mifoto {
    border-radius: 50%;
    padding: 0.5rem;
}

.grupo {
    font-family: 'Lato', sans-serif; 
    font-weight: 700; 
    text-decoration: none;
    color:#1e153f;
    padding: 0.5rem;
    display: inline-block;
    margin: 0.5rem;
    font-weight: bold;
}

.grupo:hover {
    background: rgb(178, 165, 253) ;
    border-radius: 0.5rem;
}


h1{
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    padding: 1rem;
}

h2{
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    padding: 0.7rem;
}


.columna {
    background: #DDD8F3;
    width: 100%;
    max-width: 30%;
    margin: 1rem;
    padding: 4.5%;
    border-radius: 1rem;
}

.niveles {
    background: #c4a9f7;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.integrantes {
    
    background: #6F58C9;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
} 
.alumne {
    font-family: 'Lato', sans-serif; 
    font-weight: 400;
    text-decoration: none;
    color: #1e153f;
    padding: 0.5rem;
    display: inline-block;
    margin: 0.5rem;
    justify-content: space-around;
}


.alumne:hover {
    background:rgb(178, 165, 253) ;
    border-radius: 0.5rem;
}


h3 {
    color: #2d1950;
    list-style: none;
    font-family: 'Lato', sans-serif; 
    font-weight: bold;
    padding: 0.1rem;
}

.data {
 text-align: center;
 list-style: none;
 color: rgba(41, 41, 41, 0.884);
 background:rgba(200, 253, 255, 0.932);
 font-family: 'Lato', sans-serif;
 font-size: 0.7rem;
 padding: 0.5rem;
 width: 100%;
}

footer p {
    color: rgba(10, 10, 10, 0.829);
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    padding: 0.5rem;
}



@media (max-width:960px) {
    body {
        background-image: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
    }

    .columna {
        background: #D8ECF3;
        max-width: 44%;
        margin: 1rem;
        padding: 4.5%;
    }
    
    .niveles {
        background: #8DC6D8;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
}



@media (max-width:576px) {
    body {
        background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
    }

    .mifoto{
        width: 50%;
    }
    .columna {
        background: #F3D8DB;
        max-width: 94%;
        margin: 1rem;
        padding: 4.5%;
    }
    
    .niveles {
        background: #D88D95;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    
}