:root {
	--bg: #dff2fd;
	--ink: #14202b;
	--accent: #0000cc;
	--link: #0000cc;
	--link-visited: #663399;
	--nav-bg: #ffffff;
	--nav-border: #14202b;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--ink);
	line-height: 1.5;
}

.site {
	display: grid;
	grid-template-columns: 12em 1fr;
	grid-template-areas:
		"header header"
		"nav    main"
		"footer footer";
	max-width: 68em;
	margin: 0 auto;
	min-height: 100vh;
}

.site-header {
	grid-area: header;
	padding: 1em 1.5em 0.5em;
}
.site-header .site-title {
	font-size: 2em;
	font-weight: bold;
	color: var(--accent);
	text-decoration: none;
}
.site-header .tagline {
	margin: 0.25em 0 0;
	font-style: italic;
}

.site-nav { grid-area: nav; padding: 0 1em 1em; }
.site-nav ul.navbar {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav ul.navbar li {
	margin: 0.4em 0;
	padding: 0.3em;
	border: 0.08em solid var(--nav-border);
	background: var(--nav-bg);
	border-radius: 0.25em;
}
.site-nav ul.navbar li.nav-section {
	border: none;
	background: transparent;
	padding: 0.6em 0.3em 0.1em;
}
.site-nav ul.navbar a:link { color: var(--link); text-decoration: none; }
.site-nav ul.navbar a:visited { color: var(--link-visited); }
.site-nav ul.navbar a:hover { background: cyan; color: #000; }
.site-nav ul.navbar img { max-width: 100%; }

.site-main {
	grid-area: main;
	padding: 0 1.5em 2em;
	background: #fff;
	border-radius: 0.5em;
}
.site-main h1 { color: var(--accent); text-align: center; }
.site-main h2 { color: var(--accent); }
.site-main img { max-width: 100%; height: auto; }
.site-main table { border-collapse: collapse; max-width: 100%; }
.site-main table img { max-height: 320px; width: auto; }

.archived-comments { list-style: none; padding: 0; margin: 0; }
.archived-comments li {
	padding: 0.5em 0.75em;
	margin: 0.4em 0;
	background: var(--bg);
	border-radius: 0.4em;
}

.site-footer {
	grid-area: footer;
	text-align: center;
	font-size: 0.8em;
	padding: 1em;
	opacity: 0.75;
}

@media (max-width: 44em) {
	.site {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"nav"
			"main"
			"footer";
	}
	.site-nav ul.navbar { display: flex; flex-wrap: wrap; gap: 0.4em; }
	.site-nav ul.navbar li { margin: 0; }
	.site-nav ul.navbar li.nav-section { width: 100%; }
}