@charset "utf-8";

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

body{
    font-family: "trebuchet ms", arial, helvetica, sans-serif;background-color: aliceblue;
        
    /*caja flexible*/
    display: flex;
    
    /*direccion de sus elementos*/
    flex-direction: column;
    
    /*org de los elemntos segun el eje pincipal*/
    
    justify-content: space-between;
}

img{
    max-width: 100%; height: auto;
}

header{
    background-color: rgba(178, 133, 133, 0.51); background-size:cover;
}

.contenedor { max-width: 90em; margin-left: 5em; margin-right: 5em}

header .contenedor {
    
 display: flex; justify-content: space-around; align-items: center; flex-direction: row;
}

#dgpc{ display: flex;
    justify-content: center;
    width: 5em;
    align-items: center;
margin:2px}

header ul{ display: flex;
    margin-right: 100px;
    width: 5em;
    list-style: none;
    padding: 0;
    
    /*caja flexible*/
    display:flex;
    text-align: center;
}
header ul li{ padding: 10%;
    text-decoration: none;
    font-weight: bold;
    text-align: center; background-color: #E8E1E1;
    margin: 2px;}

header ul li a {
    color: #AE9696;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    
    /*caja flexible*/
    
    /*centrado horizontal*/
    
    /*centrado en la vertical*/
    
    
}

li a:hover {color:rgba(178, 133, 133, 0.51);}

main{ padding: 8%;
    
    /*llenas la caja contenedora*/
     flex-grow: 1;
    /*caja flexible conetenedora*/
    display:flex;
}

.usuario{
    margin:auto;
    text-align: center;
    max-width: 35em;
}

#avatar {  width:300px ; height:300px; padding-bottom: 5%}

#materias h2{ border-bottom: .2em solid rgba(178, 133, 133, 0.51); padding-top: 5%}

#materias h3{ padding-bottom: 2%; padding-top: 2%}

#titulo {padding-top: 5%; padding-bottom: 1%}

#nombre {padding: 5%;background-color:rgba(178, 133, 133, 0.51); font-size: 2em }

.portfolio { background-color: aliceblue; padding-right: 8%; padding-left:8%; padding-top: 3%;; display:flex; flex-direction: column}

.trabajos {display: flex; flex-wrap: wrap; justify-content: space-between;align-items: center; padding-top: 1em}

.trabajos article {
    background-color: #E8E1E1; margin: .5em 0 ; padding: 1em; width: 30%; border-radius:.25em; display: flex; flex-direction: column; align-items: center;
}

.trabajos img {
    box-shadow: 0 5px 5px rgb(0 0 0 / 20%), 0 5px 5px rgb(0 0 0 / 20%) inset; max-width: inherit;
}

.trabajos h3 { padding:2%; text-align: center}

.usuario h2{padding-top: 1em}

a{text-decoration: none; color: #AE9696 }

#mockup{ padding: 3em}

.usuario a:hover{ color: black}

#paginas{list-style: none; padding: 1em}

#paginas ul{display: flex; justify-content: space-around; text-align: center; font-weight: bold}

#paginas li{ font-weight: bold; margin-bottom: 1em; background-color: #E8E1E1}

#abajo {
     background-color: rgba(178, 133, 133, 0.51); padding: 1em; position: absolute; bottom: 0;
}

footer{background-color: rgba(178, 133, 133, 0.51); padding: 1em;}