@charset "UTF-8";
/* Hoja de estilos del website */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');

body{
	background-color: whitesmoke;
	color: black;
	margin: 2%;
	 font-family: "DM Serif Text", serif;
	 font-size: 15pt;
	}
	header{background-color: whitesmoke;
	text-align: center;
	margin: 0;
	}
	nav{background-color: thistle;
	padding: 15px;
	margin: 0;
	}
		ul{
			list-style-type: none;
			margin: 50px 15px;
			}
			
			li{
			border: 1px solid black;
			width: 15%;
			margin: 5px;
			padding: 3px 6px;
			background-color: lightsteelblue;
			}
			
	main{
		background-color: lightcoral;
		color: darkslategray;
		margin: 0;
		padding: 1%
		}
		
		h1{
			color:darkviolet;
			margin: 1ex 0;
			font-size: 200%
			}
			
		h2{
		margin: 2ex 2em;
		font-size: 150%
		}
		
		p{
			line-height: 3ex;
			color: black;
			margin: 2ex 2em;
			margin-bottom: 2ex;
			padding: 0;
			}
		
	aside{
		background-color: #60A5DE;
		margin: 0;
		}
		figure{margin: 0;}
			img{vertical-align: middle;}
	footer{
		background-color: lightcyan;
		margin: 0;
		}
			a{
			color: darkmagenta;
			text-decoration: none;
				}
				
/* 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

/* ul>li{
	display: inline;
} */

/* Layout en columnas flexible */

/* Reset */

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

/* 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;
padding: 3%;
}