* {
	margin: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
	background: #cecece;
	color: #2e2e2e;
	font-family: 'Open Sans', sans-serif;
}

main {
	margin: 0 5rem;
}
section {
	padding: 3rem;
	font-size: 1.7rem;
	display: grid;
	gap: 1rem;
	& #header p {
		font-size: 1.2rem;
		padding: 0 4rem;
		text-align: center;
	}
	h2 {
		font-size: 2em;
		margin-bottom: 1rem;
		text-align: center;
	}
	h3 {
		font-size: 1.7em;
		margin-bottom: 1rem;
		text-align: center;
	}
	h4 {
		font-size: 1.4em;
		margin-bottom: 1rem;
		text-align: center;
	}
	&#inicio {
		align-items: stretch;
		grid-template:
			'img pyt' auto
			'img nmb' auto
			'img mod' auto
			'img des' auto
			/ 1fr 1fr;

		> img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 8px;
		}

		> div {
			display: flex;
			align-items: flex-end;
		}
		> #nmb,
		> #mod,
		> #pyt {
			text-align: center;
		}
	}
	&#objetivo {
		grid-template:
			'he he' auto
			'o1 o2' auto
			'm1 m2' auto
			/ 1fr 1fr;

		> ul {
			font-size: 0.75em;
			margin-block-start: 0;
			margin-block-end: 0;
			padding-inline-start: 0;
			margin-top: 1rem;
			list-style: inside disc;
			> li {
				display: block;
				padding-left: 1em;
				margin-bottom: 0.5rem;
			}
		}
	}
	&#organizacion {
		display: block;
		font-size: 1.5rem;
		> .fase {
			background-color: #b9b9b9;
			margin: 1em 0;
			padding: 1em;
			border-radius: 1em;
			display: grid;
			grid-template:
				'titl titl' auto
				'act1 act2' 1fr
				/ 1fr 1fr;
			> .actividad {
				display: grid;
				grid-template:
					'til til' auto
					'tr1 tr2' 1fr
					/ 1fr 1fr;
				&.solo1 {
					grid-template:
						'til' auto
						'tr1' 1fr
						/ 1fr;
				}
				> .tarea {
					display: flex;
					flex-direction: column;
					height: 100%;
					position: relative;
					> p.duracion {
						font-size: 0.8em;
						font-style: italic;
						margin-top: auto;
						padding-top: 0.5rem;
						align-self: flex-end;
					}
				}
			}
		}
	}
	&#extremos {
		align-items: stretch;
		grid-template:
			'he he' auto
			'e1 e2' auto
			/ 1fr 1fr;
		> .extremo {
			display: flex;
			flex-direction: column;
			margin: 1em 0;
			padding: 1em;
			border-radius: 1em;
			background-color: #b9b9b9;
			& h3 {
				font-size: 1.4em;
			}
			&.neg {
				background-color: rgba(228, 0, 0, 0.212);
			}
			&.pos {
				background-color: rgba(0, 228, 0, 0.212);
			}
		}
	}
}
header {
	background-color: #2e2e2e;
	color: white;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 2rem;

	& a {
		color: currentColor;
		text-decoration: none;

		&:hover {
			color: color-mix(in srgb, currentColor 70%, transparent);
		}
		&:active {
			color: #ff6600;
		}
		&:not([href='/']) {
			background-color: rgba(0, 0, 0, 0.3);
			padding: 0.5rem 1rem;
			border-radius: 6px;
			display: inline-block;

			box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.5);

			transition: all 0.2s ease;
		}
	}
	& > h1 {
		margin-block-start: 0.67em;
		margin-block-end: 0.67em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
	}
	& > nav > ul {
		list-style: none;
		display: flex;
		gap: 1.5rem;
		margin: 0;
		padding: 0;
	}
}

@media screen and (max-width: 800px) {
	section#inicio {
		grid-template:
			'pyt' auto
			'img' auto
			'des' auto
			'nmb' auto
			'mod' auto
			/ 1fr;
	}
}
@media screen and (max-width: 600px) {
	main {
		margin: 0 1rem;
	}
}