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

* {
    padding: 0;
    margin: 0;
}

header {
color: black;
}

body {
    background: color #4a07a8;
    color: black;
    font-family: Roboto; 
    font-weight: 300;
    margin-bottom: auto;
} 

/****menu navegador

.menu-top {
    display: flex;
    justify-content: space-between;
    background-color: #349a4f;
    width: 100%;
    margin-bottom: 1rem;
}

.menu-top h1 {
    color: white;
    padding: 1rem;
    margin-left: 4rem;
}

.menu-top ul li {
    display: inline-block;
    margin: 0.525rem 0.838rem;
    list-style: none;
    padding: 1rem;
}

.menu-top ul li a {
    color: white;
    text-decoration: none;
    border: #FFFDF4;
    border-radius: 10px;
    padding: 8px;
    margin-right: 4rem;
}

****/ 

/***integrantes***/


.integrantes {
    margin-top: 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
    color: #65554e;
    
    
}

.integrantestitulo {
    margin-top: 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
    color: #b27cff;
    
}

.equipovn11 {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
    color: #b27cff;
}


.alumno1,
.alumno2,
.alumno3,
.alumno4 {
    width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

.alumno1 h2,
.alumno2 h2,
.alumno3 h2,
.alumno4 h2 {
    color: #65554e;
    margin-top: 2rem;
    margin-bottom: 1rem;
    
}


    .alumno1 :hover {
        color: #FFFDF4;
        transition: .5s;
    }  
    .alumno2 :hover {
        color: #FFFDF4;
        transition: .5s;
    }  
    .alumno3 :hover {
        color: #FFFDF4;
        transition: .5s;
    }   
    .alumno4 :hover {
        color: #FFFDF4;
        transition: .5s;
    }     
    

    .alumno1 :hover {
        background: #00CCAE;
        transition: .5s;
        padding: 1rem;
    }  
    .alumno2 :hover {
        background: #00CCAE;
        transition: .5s;
        padding: 1rem;
    }  
    .alumno3 :hover {
        background: #00CCAE;
        transition: .5s;
        padding: 1rem;
    }  
    .alumno4 :hover {
        background: #00CCAE;
        transition: .5s;
        padding: 1rem;
    }    
    


/***datos academicos obligatorios***/

h5 {
    margin-top: 4rem;
    text-align: center;
    color: #b27cff;
}

ul {
    list-style: none;
    text-decoration: none;
}

.datos-oblig {
    margin-top: 2rem;
   /** margin-left: 2rem; **/
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
}

.datos1,
.datos2,
.datos3 {
    width: 300px;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    background-color: #b27cff;
    border-radius: 1rem;
    
    list-style-type: none;
    padding: 1rem;
    text-align: center;
}


/***footer***/

footer {
    background-color: #5f008c;
    margin-top: 3rem;
    width: 100%;
    text-align: center;
}

footer p {
    padding: 1rem;
    font-size: smaller;
    
    
}

/*** responsive ***/

@media (max-width: 952px) 
{
.datos-oblig {
    display: grid;
    
}

.datos1 {
    border-radius: 0rem;
    
}
.datos2 {
    border-radius: 0rem;
    
}
.datos3 {
    border-radius: 0rem;
    
}
}



    /**width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text-decoration: none;

    article a.active, li a:hover{
        background: #093515;
        transition: .5s;
    }
    **/