@charset "utf-8";
/* CSS Document */
body{
	background:linear-gradient(30deg, crimson,sienna, royalblue, indianred, purple);
	font-size: 2em;
	color:white;
}
aside,header,nav,section#contenedor,section#contenido,footer{
	border-radius:.5em;
	background-color:#A359EB;
	margin:.3em auto;
	padding:.3em;
	text-align:center;
	width:95%;
	}
aside,section#contenido{
	display:inline-block;
	background-color:#DEC3F3;
	min-height:200px;
	vertical-align:top;
	width:65%;
	}
		
aside{
	width:30%;
}
footer{
	font-size:.7em;
}
header{
	font-size:2em;
}
ul{
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:row;
	}
li{ flex-grow:1;}
a{
	display:block;
	padding:0.2em;
	background-color:LightGray;
	text-align:center;
	margin-right:0.2em;
	margin-bottom:0.2em;
	text-decoration:none;
	color:#000000;
}
a:hover {background-color:LightCoral;}

#marco{
	background-color: white;pading: 10px;
	margin: 10px;
	border: 3px solid black;
}
#contenedor{
	display: -webkit-box;
	display: -ms-flexbox;	
	display: -webkit-flex;
	display:flex;
	
	-webkit-flex-wrap: wrap;
	flex-wrap:wrap;
	}
	.vertical{
		padding: 3px;
		border: 1px solid black;
		background-color: white;
		width: 300px;
		height: 400px;
	}
	.horizontal{
		border: 1px solid white;
		background-color: white;
		width: 300px;
		height: 196px;
	}
	
	p {
		font-family: 'Caesar Dressing', cursive;
		font-size: xx-large;
		}

		@font-face {
		font-family: FiraMono;
		src: url(FiraMono-Medium.otf) format("otf"),
		url(FiraMono-Medium.eot) format("embedded-opentype");
		}
		.FireFox {
		font-family: FiraMono, serif;
		}