:root {
	--nav-bg-color: #2a5f5a;
	--logo-color: seagreen;
	--off-white: #eee;
	--gray: #808080;
	--light-gray: #1f1f1f;
	--pane-bg-color: #1f1f1f;
	--pane-border-color: #eee;
	--accent-color: #00875f;
	--page-bg-color: #181818;

	--minor-header-font-size: 19.2px;
}

html {
	font-size: 1rem;
	font-family: ui-monospace;
	background-color: #1d1d1d;
	color: var(--off-white);
	scroll-behavior: smooth;
}

body {
	margin: 0px;

	/* Put squares in the background of the body.
	*  Each row is its own linear-gradient,
	*  positioned carefully with hardcoded values. */
	background-image:
		linear-gradient(90deg, #313131 18px, transparent 0),
		linear-gradient(90deg, #313131 14px, transparent 0),
		linear-gradient(90deg, #313131 10px, transparent 0),
		linear-gradient(90deg, #313131 6px, transparent 0),

		linear-gradient(90deg, #313131 6px, transparent 0),
		linear-gradient(90deg, #313131 10px, transparent 0),
		linear-gradient(90deg, #313131 14px, transparent 0),
		linear-gradient(90deg, #313131 18px, transparent 0);
	background-repeat:
		repeat no-repeat,
		repeat no-repeat,
		repeat no-repeat,
		repeat no-repeat,

		repeat no-repeat,
		repeat no-repeat,
		repeat no-repeat,
		repeat no-repeat;
	background-size:
		20px 18px,
		20px 14px,
		20px 10px,
		20px 6px,

		20px 6px,
		20px 10px,
		20px 14px,
		20px 18px;
	background-position:
		50% 1px,
		calc(50% + 3px + 9px) calc(18px + 3px),
		calc(50% + 5px) calc(36px + 5px),
		calc(50% + 7px + 9px) calc(54px + 7px),

		left calc(50% + 7px + 9px) bottom calc(54px + 7px),
		left calc(50% + 5px) bottom calc(36px + 5px),
		left calc(50% + 3px + 9px) bottom calc(18px + 3px),
		left 50% bottom 1px;
}

/* Trick to stop nav links from transitioning from seagreen before page fully loads. */
a {
	color: var(--off-white);
}
/* Same for the logo, but reverse. */
.logo a {
	color: var(--logo-color);
}

/* Links in paragraphs are seagreen. */
p a {
	color: var(--logo-color);
}

/* Add external link image when opening to new tab, which is always to external site. */
p a[target="_blank"]::after {
	content: "";
	mask-image: url('../img/icons8-external-link.svg');
	mask-size: cover;
	background-color: var(--logo-color);
	width: 16px;
	height: 16px;
	position: relative;
	top: 2px;
	margin-left: 4px;
	display: inline-flex;
}

.container {
	margin: 0px auto;
	width: min(80vw, 1094px);
	background-color: var(--page-bg-color);

	/* Push the footer to the bottom of the page. */
	/* Cf. https://stackoverflow.com/questions/55541850/how-to-make-footer-stay-at-bottom-of-the-page-with-flex-box */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

@media (max-width: 1000px) {
	.container {
		width: 100%;
	}
}

main {
	margin-top: 20px;

	/* Stretch this section to push footer to bottom. */
	/* Cf. https://stackoverflow.com/questions/55541850/how-to-make-footer-stay-at-bottom-of-the-page-with-flex-box */
	flex: 1 0 auto;
}

.inset {
	padding: 0px 20px;
	margin-left: 20px;
	margin-right: 20px;
}

@media (max-width: 1100px) {
	.inset {
		margin-left: 0px;
		margin-right: 0px;
	}
}

hr {
	border: 1px solid;
	/* color: inherit; */
	/* color: #00875f; */
	color: #484848;
}

.infobox {
	/* border: 2px #00875f solid; */
	padding: 20px 0px;
	background-color: var(--accent-color);

	/* Carefully cut a corner out of the block; leave space so it doesn't disrupt any drop-shadows if we have any. */
	/* clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25px); */
	clip-path: polygon(30px 0, 0px 0px, 0px -200%, 200% -200%, 200% 200%, -200% 200%, -200% -200%, 0px -200%, 0% 25px);

	/* animation: 1s 0.11s backwards expand-in cubic-bezier(.77,0,.18,1); */
}

.infobox > div {
	padding: 4px 20px;
	/* animation: 1s 0.15s backwards fade-in ease-out; */
}

.infobox header {
	font-size: var(--minor-header-font-size);
	font-weight: bold;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--off-white);
	margin-bottom: 8px;
}

.pane {
	color: var(--pane-border-color);
	border: 1px solid var(--pane-border-color);
	background-color: var(--pane-bg-color);
}