* {
    
    box-sizing: border-box;

	
    list-style: none;
    margin: 0;
    padding: 0;
}

body {
    font-family: "rosario", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #d8d8d8;
}
 
h1 {
    font-family: rosario;
    text-align: center;
    color:#ffffff
}

a {
    text-decoration: none;
}

h2,
h3
{
    color: #1b1562;
    border-bottom:  3px rgba(0, 0, 0, 0.12);
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

h4 {
    color: rgb(219, 86, 86)
    
}

p {
    padding-bottom: 1em;
    max-width: 35em;
}

footer p {
    padding-bottom: 1em;
    max-width: 100%;
}

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

article figure {
    border-radius: 50%;
    overflow: hidden;
    max-width: 50%;
   
    
	margin: 1em auto;
    box-shadow: 0 0.35em 0.5em 0 rgba(0, 0, 0, 0.2);
}

figure>img,
#logo>img {
    display: block
}

article{
    text-align: center;
}

article h2{
    text-align: left;
}

#contenedor {
    background-color: white;
    box-shadow: 0 0 0 1em rgba(0, 0, 0, 0.1);
    margin: auto;
    max-width: 70em;
    min-height: vh;
    width: 90%;
}

header,
footer, footer p{
    background-color: rgba(158, 191, 255, 0.54);
    padding: 1em;
    text-align: center;
}

#logo {
    border-radius: 100em;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    width: 100em;
    box-shadow: 0 0 0 0.2em rgba(0, 0, 0, 0.2);
    display: inline-block;
    padding: 0.0em;
    height: 100px;
    width: 100px;
}

nav {
    margin-top: 1em;
    box-shadow: 0 0 0 0.5em rgba(0, 0, 0, 0.2);
}

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

nav ul li {}

nav ul li a {
    background-color: rgba(255, 111, 111, 0.72);
    border: solid 2px #ffffff;
    border-radius: 5px;
    color: white;
    display: block;
    padding: 0.25em;
    text-align: center;
}

nav ul li a:hover {
    color: black;
    background-color: rgb(244, 159, 159);
}

main,
aside {
    padding: 0em;
}

article {
    margin-bottom: 0em;
}

aside {
    background-color: lightcoral;
}

section {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.5em;
}

footer, footer p {
	width: 100%;
    color: #1b1562;
}


#contenedor {
  
	
    display: flex;

	
    flex-direction: column;
   
    justify-content: space-between;
}

header,
footer {
}

.contenidos {
   
	display: flex;
	
 
	flex-direction: column;
    
    
	justify-content: space-between;
    
}



@media screen and (min-width:20em) {
    nav ul {
    
        display: flex;
		flex-direction: column;
    }
    nav ul li {
      
        flex-grow: 1;
    }
}


@media screen and (min-width:30em) {
    header {
       
        display: flex;
        
		
		
        justify-content: space-between;
        
		
        align-items: center;
    }
	
    nav {
        margin: 0;
       
        flex-basis: calc( 100% - 8em);
    }
	
	nav ul{
		flex-direction: row;
	}