@charset "utf-8";

/*reglas generales*/

*{box-sizing: content-box;
    text-align: center;
    text-decoration: none;
    padding: 0;
    border: 0;
   font-family: "quicksand"; "sansserif";}

header {
    background: whitesmoke;
     height: 50px;}

#barra li {
padding: 0; ;
display: inline;
padding-left: 200px;}

#barra li a {
 font-family:"quicksand"; "sansserif"
 font-size: 8px;
 text-decoration: none;
 float: centre;
 padding:10px;
 background-color: whitesmoke;
 color: black;
 }

.fondobarra {background-color:whitesmoke;}



















body {
    background-color: transparent;
    
    display: flex;
    flex-direction: column;

}















.yo {
        margin: 1em;
        padding: 0.5em;
        display: flex;
        flex-direction: column;
        align-items: center;
    
}


.yo > img {
    width: 170px;
    height: 170px;
    border-radius: 50%;
   
}

.yo > h1 {
    font-family: 'quicksand', sans-serif;
    font-weight: 600;
    font-size: 3 em;
    color: mediumvioletred;
    
    text-transform: uppercase;
    letter-spacing: 0.03em;

}





















section {
    padding: 0.5em;
    margin: 1em;
    
    border-top: solid 0.05em mediumvioletred;

}

ul li {
    list-style: none;
    padding: 0em;
    margin: 0em;

}







h4 {
    font-family: 'quicksand', sans-serif;
    font-weight: 600;
    color: mediumvioletred;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    
    
}




.integrantes li a {
    color: black;    
}


.integrantes li a:hover {
    font-weight: 600;
}


.integrantes 
ol li 
{display: inline-block;
width: 8em;
height: 100px;}

h2 {
    font-family: 'quicksand', sans-serif;
    font-weight: 600;
    color: mediumvioletred;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    
    
}



.bocetos
{display: contents;
width: 8em;
height: 100px;}


.datosacademicos
h2 {color:black;
float: inherit;
background: white}









footer {
    background-color: lightgrey;
    margin: 0em;
    padding: 0em;


    
}

footer > p {
    padding: 0.5em;
    font-size: 0.8em;
    font-weight: 200;


}









@media (min-width: 30em) {
    
    * { 
        font-size: 0.95em;
    }
    
    
    
    
 
    

@media (min-width: 40em) {
    

    
    
    main {
          max-width: 50%;
        margin-left: 25%;
    }
    
    
    
    .yo > img {
        width: 250px;
        height: 250px;
        border-radius: 50%;    
     }
        
}

    
    

@media (min-width: 60em) {
    
    
    * { 
        font-size: 1em;
    }
    
    
    
    
    
    .yo > img {
        width: 300px;
        height: 300px;
        border-radius: 50%;    
     }
        
}