*,
::before,
::after {
	box-sizing: border-box;
}

html {
	line-height: 1.15;
	tab-size: 4;
	color-scheme: dark light;
	accent-color: darkred;
}

* :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;
}

article {
	text-align: justify;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
table,
pre[class*="language-"],
object {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	max-width: 90%;
}

h1 {
	margin-block: 0.67em;
	font-size: 2em;
}

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

picture {
	display: contents;
}

table {
	border-collapse: collapse;
}

table,
th,
td {
	border: 1px solid;
}

th,
td {
	padding: 1rem;
}

th {
	background: darkred;
	color: white;
}

code {
	font-size: 0.9rem;
	font-family: monospace;
}

code[class*="language-"],
pre[class*="language-"] {
	line-height: 1.5;
	white-space: pre;
}

pre[class*="language-"] {
	border: solid;
	padding: 1rem;
	border-radius: 0.25rem;
	min-width: 70%;
}

.token {
	&:is(.comment, .prolog, .doctype, .cdata) {
		color: darkgreen;
		font-style: italic;

		@media (prefers-color-scheme: dark) {
			color: lightgreen;
		}
	}

	&.punctuation {
		color: dimgray;

		@media (prefers-color-scheme: dark) {
			color: lightgray;
		}
	}

	&:is(.property, .tag, .constant, .symbol, .deleted) {
		color: firebrick;

		@media (prefers-color-scheme: dark) {
			color: lightgray;
		}
	}

	&:is(.boolean, .number) {
		color: teal;

		@media (prefers-color-scheme: dark) {
			color: cyan;
		}
	}

	&:is(.selector, .attr-name, .string, .char, .builtin, .inserted) {
		color: saddlebrown;

		@media (prefers-color-scheme: dark) {
			color: wheat;
		}
	}

	&:is(.operator, .entity, .url, .variable) {
		color: darkmagenta;

		@media (prefers-color-scheme: dark) {
			color: orchid;
		}
	}

	&:is(.atrule, .attr-value, .keyword) {
		color: darkred;
		font-weight: bold;

		@media (prefers-color-scheme: dark) {
			color: tomato;
		}
	}

	&:is(.function, .class-name) {
		color: mediumblue;
		font-weight: bold;

		@media (prefers-color-scheme: dark) {
			color: dodgerblue;
		}
	}

	&:is(.regex, .important) {
		color: chocolate;

		@media (prefers-color-scheme: dark) {
			color: goldenrod;
		}
	}
}

@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;
	}

	th,
	aside {
		border: 2px solid;
	}
}

@media print {
	* {
		print-color-adjust: exact;
	}

	header,
	footer {
		display: none;
	}

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

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

	h2,
	h3,
	th {
		page-break-after: avoid;
	}

	a[href]:after {
		content: " <" attr(href) "> ";
	}

	abbr[title]:after {
		content: " (" attr(title) ") ";
	}

	abbr {
		text-decoration: none;
	}

	pre[class*="language-"] {
		background: none;
		color: black;
		border: solid black;
		box-shadow: none;
		page-break-inside: avoid;
	}

	pre[class*="language-"] {
		background: none;
		color: black;
		border: solid black;
		box-shadow: none;
		page-break-inside: avoid;
	}
}