* {
    margin: 0.5em; 
    padding: 0em;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    box-sizing: border-box;
    background-color: transparent;
    
}














header {
    background-color: mediumvioletred;
    margin: 1em;
    max-width: 100%;
    height: auto;
    padding: 0.3em;
    
    
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
    
}

.navegador {
    background-color: transparent;

}

.navegador > a {
    background-color: transparent;

}



header nav a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}


header nav a:hover {
    font-weight: 600;
}

















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: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 2.5em;
    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: 'Poppins', 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;
}
















.propuesta {
    padding: 0.5em;
    margin: 1em;
    
    
}

.propuesta a {
    text-decoration: none; 
    
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: mediumvioletred;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: underline;
    
}


.propuesta img {
    width: 240px;
    border: solid .04em black;
    
}














.datos p {
    padding: 0.5em;
    margin: 0.5em;
    
    font-weight: 200;
    font-size: 0.8em; 


}















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;
    }
    
    
    
    
    .yo > img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
    
    
    
}
    






@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%;    
     }
        
}