:root {
	--color-primario: #31326F; /* El azul más oscuro de la cabecera */
	--color-secundario: #4FB7B3; /* El fondo, más claro y más verde */
	--color-tercero: #ffffff; /* El fondo blanco del contenido */
	--color-cuarto: #637AB9; /* El color de la barra de navegación (azul) */
	}

	body {
		font-family: Arial, Times New Roman;
		font-size: 14px;
		line-height: 1.6;
		background-color: var(--color-secundario);
	}

	main {
		color: #252525;
		width: 90%;
		max-width: 800px;
		background-color: var(--color-tercero);
		margin: 0 auto;
	}

	div {
		margin: 0 auto;
		padding: 10px;
		border: 0;
	}

	section {
		padding: 10px;
		padding-left: 20px;
		padding-right: 20px;
		border: 0;
	}

	.recuadro {
		border: 1px dashed;
		border-color: var(--color-primario);
		padding: 10px;
		margin: 40px;
	}
	
	header {
		width: 90%;
		max-width: 800px;
		text-align: center;
		color: var(--color-tercero);
		background-color:var(--color-primario);
		margin: 0 auto;
		padding: 10px;
		border: 0;
	}
	
	nav ul {
		font-size: 14px;
		color: var(--color-primario);
		background-color: var(--color-cuarto);
		padding: 0px;
		text-align: center;
		list-style-type: none;
	}
	
	nav li {
		display: inline;
	}

	footer {
		width: 90%;
		max-width: 800px;
		text-align: center;
		color: var(--color-tercero);
		background-color: var(--color-primario);
		margin: 0 auto;
		padding: 20px;
		border: 0;
	}

	h1 {
		font-family: Century Gothic, Arial;
		color: var(--color-tercero);
		text-align: center;	
	}
	
	
	h2, h3, h4 {
		font-family: Century Gothic, Arial;
		color: var(--color-primario);
		text-align: center;
	}

	h1 {
		font-size: 72px;
	}

	h2 {
		font-size: 28px;
	}

	h3 {
		font-size: 24px;
	}
	
	h4 {
		font-size: 20px;
	}
	
	p{
		text-align: justify;
		font-family: Arial, Times New Roman;
		font-size: 14px;
	}

	.pie {
		text-align: center;
	}
	
	
	
	figcaption {
		font-size: 10px;
		font-style: italic;
		text-align: center;
	}

	a:link {
		color: var(--color-primario);
		text-decoration: underline;
	}
	
	a:visited {
		color: var(--color-primario);
		text-decoration: underline;
	}

	a:hover {
		color: var(--color-primario);
		text-decoration: underline;
	}


	img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	figure {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	@media screen and (max-width: 640px) { 
	body {
		font-size: 20px;
	}
	
	main {
		width: auto;
		font-size: 20px;
		margin: 0 auto;
		background-color: var(--color-secundario);
	}
	
	nav ul {
		font-size: 20px;
	}
	
	div {
		font-size: 20px;
	}
	
	header {
		padding: 10px;
	}
	
	h1 {
		font-size: 42px;
	}

	h2 {
		font-size: 32px;
	}
	
	h3 {
		font-size: 28px;
	}
	
	h4 {
		font-size: 24px;
	}
	
	p {
		font-size: 20px;
	}
	
	figcaption {
		font-size: 14px;
	}
	
	img {
		max-width: 100%;
	}
	
	}