:root {
	accent-color: darkred;
	text-align: justify;
}

* :any-link {
	color: inherit;
	text-decoration: underline;
}

aside {
	max-width: max(40%, 12rem);
	background: darkred;
	color: white;
	float: inline-end;
	margin: 0.5rem;
	margin-inline-start: 1rem;
	padding: 0.5rem;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	max-inline-size: 100%;
	display: block;
}

img,
svg,
video,
canvas {
	block-size: auto;
}

picture {
	display: contents;
}

@media screen {

	* :any-link:hover,
	* :any-link:active {
		font-style: italic;
	}

	body {
		max-width: min(100dvw, 58rem);
		min-height: 100dvh;
		padding: 0.5rem;
		margin-inline-start: auto;
		margin-inline-end: auto;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			'header'
			'main'
			'footer';
		display: grid;

		&>header,
		&>footer {
			padding: 1rem;
			font-weight: bolder;
			background-color: darkred;
			color: white;

			& *:any-link {
				text-decoration: none;
			}
		}

		&>header {
			grid-area: header;

			& nav>a {
				margin-inline-end: 0.5rem;
			}
		}

		&>main {
			grid-area: main;
		}

		&>footer {
			align-self: end;
			grid-area: footer;
		}

	}

}

@media (forced-colors: active) {

	header,
	footer {
		border: 2px solid;
	}

	aside {
		border: 2px solid;
	}
}

@media print {

	header,
	footer {
		display: none;
	}

	section,
	table {
		orphans: 4;
		break-inside: auto;
	}

	tr {
		break-inside: avoid;
		break-before: auto;
	}
}