@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@charset "utf-8"

*{ 
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;}

body {background-color: #f8eeff;
     font-family: 'Courier Prime', monospace;}

h1 {
font-style:oblique;
letter-spacing: -0.1em;}

h2 {
    font-style: italic;
    letter-spacing:-0.1em;}

header nav ul li {
        letter-spacing: 0.3em;
        line-height: 1em;
        text-decoration: underline;
        margin: 0;
        front-size: 1em;
}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;} 

header .contenedora {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-center;
    margin: 0;
    padding: 0;}

header nav .naveg {
    display: flex;
    flex:column;
    flex-wrap: wrap;
    justify-content:space-evenly;
    align-items: flex-center;
    }
 
ul{list-style:none;
font-size: 1em;}


header nav ul li a{color: white;
    background-color: rgb(114, 113, 113);
    border-radius: 8px;
    padding: 0.3em 2em 0.3em 2em;
    text-shadow: .2em .1em .2em rgb(255, 214, 241);
    width: 5em;
    display: block;
    margin: 1em 0.5em 1em 0.5em;
    text-align: center;
    text-transform: uppercase;
}

header nav ul li a:hover{
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    }

nav ul{margin: 1% 0 1% 0;
padding: 0;}

figure {
    margin: 1em 0 1em 0;}

figure img{
    width: 90%;
    height: auto;
    display: auto;
    display: inline;
    border-radius: 35px;
    margin: 0%;
    box-shadow: 0em 0em 0.3em 0.3em rgb(114, 113, 113);
    width: 40%;
    margin-top: 0.5em;}

#avatar img {
    display: block;
    width: 50%;
    margin: auto;
    border-radius: 2em;
    }
    
     

.dpcontenedora {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0%;
    border-radius: 0.5em;
    background-color:none;}
    

h1{
    color: rgb(24, 50, 121);
    display: inline;
    margin: 0;
    padding: 0;
    }

h2{
    color: black;
    background-color:none;
    
    border-radius: 20px;
    padding: 0;
    margin: 1% 0 0 0 ;}

body .macontenedora {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center ;
    align-items:center;
    background-color: rgb(207, 207, 253);}

body .meccontenedora {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items:center;
    background-color: rgb(193, 192, 255);}

h3{
    color: rgb(0, 88, 139);
    margin: 4% 0% 4% 0%;
    
    padding: 0;
    word-spacing: 2%;
    letter-spacing: 1%;
    border-bottom: 0.3em solid rgb(23, 97, 194);
    ;}

.macontenedora ol, .meccontenedora ol{
    color: black;
    margin: 0% 5% 0% 5%;
    border-radius: 20px;
    list-style: circle;
    word-spacing: 1%;
    letter-spacing: normal;}

body .odcontenedora {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items:center;}

.odcontenedora p, .dacontenedora p {
    border-radius: 0;
    margin: 0%}


.dacontenedora p{
line-height: 1em;
font-stretch:condensed;
}

body .dacontenedora {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items:center;}

 .odcontenedora h4{

    margin: 4% 0% 1% 0%;
    border-bottom: 0.3em solid rgb(185, 185, 185);
    word-spacing: 2%;
    letter-spacing: 1%;}

body #equipo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0%;
    padding: 0;
}

.estudiante{
    background-color: rgb(251, 232, 253);
    border: solid 0.1em rgb(7, 51, 65);
    text-align: center;
    margin: 0.3em 0em 0.3em 0em;
    padding: 0.3em 0.5em 0.3em 0.5em;
    width: 20%;
    max-width: 300px;
    min-width: 250px;
}

#equipo .estudiante{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

 h4 {
color:rgb(24, 50, 121);
background-color: rgb(250, 212, 247);
border-radius: 10%;
margin: % 0 2% 0;
text-transform: uppercase;
font-size: 2em;
text-align: center;}

#equipo h3 {
border-bottom:none;}

#equipo p {
    background-color:rgb(235, 212, 253);
    border-radius: 5em;
}
#equipo a {
    text-transform: uppercase;
    text-decoration:overline underline;
    font-size: 1.2em;
}

#academicos h2 {
    background-color:rgb(255, 214, 241);
    text-align: center;
    color: rgb(84, 84, 104);
    width: 100%;
    font-size: 1.2em;
    margin-top: 2em;
    font-style: normal;
    border-radius: 0%;
}

#logos ul {
    margin: 0;
    padding: 1em;
}

#logos ul li {
    margin: 0em 1em 1em 1em;
    padding: 0em;
    align-items: center;
}

#logos ul li img {
    max-width: 50%;}

#logos ul li h4 {
        font-size: 1.5em;
        color: rgb(5, 12, 51)}

#logos ul li p {
            font-size: 1em;
            color: rgb(8, 2, 8);
            letter-spacing: -0,5em;}

.odcontenedora h4, .odcontenedora p{
    color: rgb(0, 86, 112);
    background-color: none;}

.dacontenedora h4, .dacontenedora p{
       color: black;
    background-color: #8DB5E1;}

body .tareacontenedora {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items:center;}



body .tareacontenedora ul li a {
    color: #82A2D3;
  
}

body .tareacontenedora ul li {
 padding: 0;
  margin-bottom: 2em;
    margin-top: 1em;
    background-color: rgb(253, 230, 234);
    text-align: center;
    border-radius: 6px;
}

#tarea nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top:1em;
    margin-bottom: 1em;
}    

#tarea nav ul li {
    margin: 0.5em;
}

#tarea nav ul li a {
    background-color: rgb(0, 0, 0);
    text-decoration: none;
    display: block;
    width: 9em;
    margin: auto;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 1.5em;
    text-shadow: 0.1em 0.2em 0.2em rgb(250, 212, 247);
}



footer{
    margin: 0%;
    color: #AC85C1;
    background-color: #E7DBED;
    border-radius: 5px;
    line-height: 0.9em;
    word-spacing: -0,5em;
    letter-spacing: -0.1em;
    font-stretch:condensed;
    font-style: oblique}

/* -----FIN MOBILE FIRST ----*/


/* REGLAS PARA DISPOSITIVOS DE ESCRITORIO */

/* Escritorio pequeño / tablet */

@media screen and (min-width: 768px){
    body{background-color: #E7DBED;}

    header .contenedora {
        display: unset;
        display: flex;
        flex-direction: row;
        flex-wrap:nowrap;
        justify-content: space-around;
        align-items: center;}

        header nav ul {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;}



    body .dpcontenedora {
        display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-center;
    align-items: center;
    margin:0%;}

    
    body .mayeccont {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
    }

    
    body .macontenedora h3, body .meccontenedora h3 {
        margin: 0 0 1% 0;
    }
    body .meccontenedora{
        display: flex;
        flex-direction: column;
        justify-content: center;}   

    .meccontenedora {
        margin-left: 1em;
    }
    
    macontenedora {
        margin-right: 1em;
    }
    body .odcontenedora {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: flex-center;}
    
    #tarea nav ul {
        flex-direction: row;
    }
    
    body .odcontenedora h4, body .odcontenedora p {
        margin: 0 0 1% 0;
    }


    body .dacontenedora {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-end; 
    }


    body .dacontenedora p {
        margin: 0 0% 1% 60%;
    }
    
    


/* Escritorio grande */
@media screen and (min-width: 992px){
    
    #logos ul {
        display: flex;
        justify-content: space-between;
        margin: 2em;
        align-items: stretch;

    footer {background-color: #D6C1E1;
    color:#84509F}

}

    

/* Escritorio extra grande */
@media screen and (min-width: 1200px){
    
    
    footer {background-color: #C8B1D6;
    color:#6B4383}
}