@charset "UTF-8";
/* Hoja de estilos del website de Miguel González */

/* Importación de tipografías externas */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

/* Formato básico */

body{
	background-color: hsl(190, 100%, 95%);
	color: black;
	margin: 3%;
	font-family: "Exo", sans-serif;
	font-size: 14pt;
	background-image: url('../graphics/lorem-ipsum.gif');
	background-attachment: fixed;
	}
	header{
		background-color: #1D5F91;
		text-align: center;
		margin: 0;
	}
	nav{
		background-color: hsl(200, 85%, 85%);
		margin: 0;
	}
		ul{
			padding: 2ex 3em;
			margin: 0;
			list-style-type: none;
		}
			li{
				margin: 1.5ex 0;
			}
			a{
				color: hsl(220, 60%, 40%);
				text-decoration: underline dotted;
			}
	main{
		background-color:hsl(205, 80%, 80%);
		margin: 0;
		padding: 2ex 3em;
	}
		h1{
			margin: 1ex 0;
			font-size: 180%;		
		}
		h2{
			margin: 2ex 0;
			font-size: 130%;		
		}
		blockquote{
			margin: 0;
			padding: 0;		
		}
		p{
			font-family: "Newsreader", serif;
			font-weight: 300;
			font-size: 110%;
			line-height: 3.2ex;
			margin: 1ex 0;
			padding: 0;
			hyphens: auto;
		}
	aside{
		background-color:hsl(210, 75%, 75%);
		margin: 0;
		text-align: center;
	}
	footer{
		background-color:hsl(215, 70%, 70%);
		text-align: right;
		margin: 0;
	}
	figure{
		margin: 0;
	}
	a{
		text-decoration: none;	
	}
	img{
		vertical-align: middle;
	}
	span {
		color: #333;
		font-family: "Kosugi Maru", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 70%;
	}	



/* Display  y  Posicionamiento
display, position, top, left, float 
overflow
*/


/* Start Layout */

	/* Layout (reset) */

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

	/* Layout (static elements) */

body{
	margin: 2% auto;
	width: auto;
	min-width: 240px;
	max-width: 1208px;
	box-shadow: 4px 6px 10px 2px hsl(215, 20%, 20%);
	border-radius: 40px;
}

header{
	overflow: hidden;
	background-image: linear-gradient(to left, hsl(200, 85%, 85%) 968px, hsl(210, 75%, 75%) 240px);
	border-radius: 40px 40px 0 0;
}

footer{
	clear: both;
	padding: 1ex 1em;	
	border-radius: 0 0 40px 40px;
}

	/* Layout (flex elements) */

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

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

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



/* Layout (By floating elements) /

#central{
	float: left;
}

#central>nav{
	float: left;
	width: 240px;
}

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

#central>aside{
	float: left;
	width: 240px;
	text-align: right;
}

/* End Layout */


/* Headers */

h1{
	margin: 1ex 1em;
}
h2 {
	margin: 2ex 1.5em;
}

/* Columnas */

blockquote{
	column-count: 2;
	column-gap: 3em;
	column-rule: 1px solid black;
	margin: 3ex 2em;
}
blockquote>p{
	text-align: justify;
	line-height: 3ex;
	margin: 0 auto 3ex auto;
	hyphens: auto;
}



	/* Pseudoclases y pseudoelementos */

footer>figure:first-child, main>blockquote>p:last-child {text-align: right;}
main>blockquote>p:last-child::before{content: "Fuente: ";}
footer>figure:last-child{text-align:left;}

	/* Menú */ 
}
nav{text-align: left;}
nav>ul{
	margin: 0; padding: 0;
	margin-top: 3ex;
	list-style-type: none;
}

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

nav>ul>li>a{
	display: inline-block;
	padding: 1ex 2em;
	color: hsl(20, 100%, 10%);
	text-decoration: underline dotted;
	width: 100%;
}

	/* Efectos dinámicos del menú */

nav>ul>li>a:hover{background-color: hsl(210, 75%, 75%); text-decoration: none;}

nav>ul>li>a:hover::after{content: " →";}

nav>ul>li:first-child>a:hover::before{content: "← ";}

nav>ul>li:first-child>a:hover::after{content: "";}


	/* Letra capitular 
main>blockquote>p:first-child{
	margin-top: 8ex;
}
main>blockquote>p:first-child::first-letter{
	float: left;
	margin-right: 0.1em;
	color: hsl(220, 60%, 40%);
	font-size: 550%;
	font-weight: 400;
	text-shadow: 2px 3px 5px hsl(215, 20%, 20%);
}
	*/