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

body{
	background-color: lightgrey;
	color: black; 
	margin: 3%; 
  font-family: "Lora", serif;	
   font-size: 16pt; 
	
	}
	header{background-color: #C3A4E7;
	text-align: center;
	margin: 0; 
	}
	nav{
		background-color: thistle;
		padding:15px; 
		margin: 0; 
		}
		
		ul{list-style-type: none;
			margin: 20px 15px;
		}
			
			li{
			border: 1px solid black; 
			width: 12%; 
			margin: 5px;
			padding: 3px 6px; 
			background-color: lightyellow;
			}
	main{
		background-color: lightcoral;
		color: lightskyblue;
		margin: 0; 
		padding: 1%
		}
		h1{color: purple;
			margin: 1ex 2em;
			font-size: 150%		
		
		}
		
		h2{
			margin: 2ex 2em; 	
		}
			
		p{color: purple;
			line-height: 3.2ex;
			margin-bottom: 2ex; 
					
		}
		
	aside{background-color: lightblue;}
		figure{}
			img{}
	footer{
		background-color: purple; 
		margin: 0; 		
		}
	figure{margin: 0;}
			p{}
				a{
				text-decoration: none; 
				}
			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; 
}
			
/* Posicionamiento 
display, position, top, left, float
overflow
*/

/* 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; 
display: auto; 
}
/* Statics elements*/ 
body{
width: auto; 
min-width: 240px;
max-width: 1208px; 
margin: 2% auto;
}

header{
overflow: hidden;
}
footer{
clear: both; 
}

/*Layout (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; 
}