@charset "UTF-8";
/* Hoja de estilos del website */
@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap');

body{
	background-color: whitesmoke;
	color: black;
	margin: 3%;
	font-family: "Baskervville", serif;
	font-size: 14pt;
	}
	header{
		margin: 0;
		background-color:aliceblue;
		text-align: center;	
	}
	nav{background-color: lightcyan;
		padding: 1%;
		margin: 0;
	}	
		ul{
			list-style-type: none;
			text-decoration: none; 
		}
			li{
				border: 1px solid black;
				width: 50%;
				margin: 5px;
				padding: 3px 6px;
				background-color: lightsteelblue;			
			}	
	main{
		background-color: lightskyblue;
		margin: 0;
		padding: 1%;
		}
		h1{color: red;
			font-size: 200%;		
		}
		
		h2{
			font-size: 160%;	
		}
		p{
			line-height: 3ex;
			margin-bottom: 2ex;
			
		}
	aside{background-color: turquoise;
		margin: 0;	
	}
			a{color: black;
			text-decoration: none;}
				img{}
	footer{background-color: lightseagreen;}
		figure{margin: 0;}
			p{}
			img{vertical-align: middle;}
		
/* Columnas */	
main{
		column-count: 2;
		column-gap: 3em;
		column-rule: 1px solid black;
	}
	
h1,h2{
	column-span: all;
	}	
	
main>p{
		text-align: justify;	
		hyphens: auto;
	}
		
/* Display y Posicionamiento
display,position, top, left, float 
overflow
*/


/* Layout en columnas flexibles */

/* Reset */

body,header,nav,main,aside,footer,figure{
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	border: none;
	border-radius: 0;
	box-shadow: none;
	display: auto;
}

/* Layout (statics elements) */
body{
	width: auto;
	min-width: 240px;
	max-width: 1208px;
	margin: 2% auto;
}

header{
	overflow: hidden;
}

footer{
	clear: both;
}

/* Flex elements */

#central {
	display: flex;
	flex-direction: row;
	justify-content: flex-start; 
}

#central>nav, #central>aside{
	width: 240px;
}

#central>main{
	max-width: 728px;
	min-width: 240px;
}