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


/* Reglas básicas */

body {
    background-color: #ede3d3;
    color: #626262;
    font-family: sans-serif;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

html {
    height: -webkit-fill-available;
}

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



main {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: .37em;
}

.perfiles {
    margin: .10em auto;
    text-align: center;
    max-width: 20em;
}
.perfil{
    display: flex;
}
.perfil img {
    border-radius: 30%;
    width: 30vw;
    height: 30vw;
    max-width: 6em;
    max-height: 6em;
    border: .15em solid #35163A;
    box-shadow: 0 .31em .3em rgba(0, 0, 0, .35) inset, 0 .35em .5em rgba(0, 0, 0, .35);
    margin: 0 .1em;
}
.perfiles a{
    color: #D68E09;
    text-decoration: none;
    font-size: .75em;
    }
p, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.3em;
}
h1, h4{
    color: #5b4871;
}
main ul {
    list-style: none;
}

footer{
    background-color: #282828;
    display: block;
    padding: .7em;
    flex-grow: 0;
    font-size: .7em;
    padding: .5em;
    text-align: center
}

















/*Estilos para el encabezado*/
.header{
	
	
 padding: 1em 1em 1em 1em;
    display: flex;
    background-color: #e8e8e8;
    justify-content: space-between;
  
}






.container .btn-menu label{
	color: #53215B;
	font-size: 25px;
	cursor: auto;
  

}

/*Fin de Estilos para el encabezado*/



/*Menù emergente lateral*/
#btn-menu{
	display: none;

    
}
.container-menu{
	position: absolute;
	
	width: 100%;
	height: 100vh;
	top: 0;left: 0;
	transition: all 500ms ease;
	opacity: 0;
	visibility: hidden;
    
}


#btn-menu:checked ~ .container-menu{
	opacity: 1;
	visibility: visible;
}
.cont-menu{
	width: 100%;
	max-width: 300px;
	background: #793284;
	height: 100vh;
	position: relative;
	transition: all 500ms ease;
	transform: translateX(-100%);
    
  
}
#btn-menu:checked ~ .container-menu .cont-menu{
	transform: translateX(0%);
}
.cont-menu nav{
	transform: translateY(15%);
}
.cont-menu nav a{
    text-align:left;
	display: block;
	text-decoration: none;
    padding: 1em 2em 1em 2em;
	
	color: #ffffff;
	border-left: 5px solid transparent;
	transition: all 400ms ease;
   border-bottom: 1px solid #c7c7c7;
}
.cont-menu nav a:hover{
	border-left: 5px solid #c7c7c7;
	background: #53215B;
}
.cont-menu label{
	position: absolute;
	right: 5px;
	top: 10px;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
    }