@charset "UTF-8";


/* === sizes === */

/* common. */
html {
	--headfoot-nonfixed-maxwidth: 40.0rem;
	--header-nonfixed-height: 3.0rem;
	--header-button-height: 2.0rem;
	--main-radius: 0.5rem;
	--header-button-radius: 0.5rem;
	--link-radius: 0.25rem;
	--primary-gap: 1.0rem;
	--main-maxwidth: 40.0rem;
	--footer-contactkey-width: 5.5rem;
	--footer-contactkey-height: 2.5rem;
	--footer-bottom-height: 2.0rem;
	--footer-bottom-fontsize: 0.9rem;
}

/* header full-width mode 0 (0 <= width < 30rem). */
html {
	--headfoot-radius: 0;
	--header-button-minwidth: 4.0rem;
	--header-button-fontsize: 0.8rem;
}

/* header full-width mode 1 (30rem <= width < 35rem). */
@media screen and (min-width: 30rem) {
	html {
		--header-title-minwidth: 7.0rem;
		--header-title-fontsize: 1.0rem;
		--header-button-minwidth: 4.0rem;
		--header-button-fontsize: 0.8rem;
	}
}

/* header full-width mode 2 (35rem <= width < 40rem). */
@media screen and (min-width: 35rem) {
	html {
		--header-title-minwidth: 8.0rem;
		--header-title-fontsize: 1.15rem;
		--header-button-minwidth: 4.25rem;
		--header-button-fontsize: 0.85rem;
	}
}

/* header and footer border radii as viewport approaches 40rem. */
@media screen and (min-width: 39rem) {
	html {
		--headfoot-radius: calc((100vw - 39rem) / 2);
		--header-title-minwidth: 9.0rem;
		--header-title-fontsize: 1.3rem;
		--header-button-minwidth: 4.5rem;
		--header-button-fontsize: 0.9rem;
	}
}

/* max-width header and footer (40rem <= width < 70rem). */
@media screen and (min-width: 40rem) {
	html {
		--headfoot-radius: 0.5rem;
	}
}

/* header and footer fixed to left (70rem <= width). */
@media screen and (min-width: 70rem) {
	html {
		--headfoot-radius: 0;
		--headfoot-fixed-width: 30.0rem;
		--footer-height: 18.0rem;
	}
}

/* increase scale from the 70rem breakpoint. */
@media screen and (min-width:  70rem) { html { --scale: 1.00; } }
@media screen and (min-width:  75rem) { html { --scale: 1.05; } }
@media screen and (min-width:  80rem) { html { --scale: 1.10; } }
@media screen and (min-width:  85rem) { html { --scale: 1.15; } }
@media screen and (min-width:  90rem) { html { --scale: 1.20; } }
@media screen and (min-width:  95rem) { html { --scale: 1.25; } }
@media screen and (min-width: 100rem) { html { --scale: 1.30; } }
@media screen and (min-width: 105rem) { html { --scale: 1.35; } }
@media screen and (min-width: 110rem) { html { --scale: 1.40; } }
@media screen and (min-width: 115rem) { html { --scale: 1.45; } }
@media screen and (min-width: 120rem) { html { --scale: 1.50; } }
@media screen and (min-width: 125rem) { html { --scale: 1.55; } }
@media screen and (min-width: 130rem) { html { --scale: 1.60; } }
@media screen and (min-width: 135rem) { html { --scale: 1.65; } }
@media screen and (min-width: 140rem) { html { --scale: 1.70; } }
@media screen and (min-width: 145rem) { html { --scale: 1.75; } }
@media screen and (min-width: 150rem) { html { --scale: 1.80; } }
@media screen and (min-width: 155rem) { html { --scale: 1.85; } }
@media screen and (min-width: 160rem) { html { --scale: 1.90; } }
@media screen and (min-width: 165rem) { html { --scale: 1.95; } }
@media screen and (min-width: 170rem) { html { --scale: 2.00; } }


/* === light and dark themes === */

/* common. */
html {
	--header-button-normal-bg: rgba(255, 255, 255, 0.5);
	--header-button-hover-bg: rgba(255, 255, 0, 0.75);
	--header-button-active-bg: yellow;
	--link-active-colour: red;
	--link-active-bg: yellow;
}

/* light. */
html {
	--default-text-colour: black;
	--body-bg: #201020;
	--headfoot-bg: linear-gradient(to right, #b8860b, #b448b4);
	--article-content-bg: white;
	--article-content-link-colour: purple;
	--footer-contact-value-normal-bg: linear-gradient(135deg,
		rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25),
		rgba(128, 128, 128, 0.25));
	--footer-contact-value-hover-bg: linear-gradient(135deg,
		white, white, rgba(128, 128, 128, 0.5));
	--footer-link-colour: black;
	--link-hover-bg: rgba(255, 255, 0, 0.75);
}

/* dark. */
@media (prefers-color-scheme: dark) {
	html {
		--default-text-colour: white;
		--body-bg: black;
		--headfoot-bg: linear-gradient(to right, #8a6408, #602060);
		--article-content-bg: #281428;
		--article-content-link-colour: yellow;
		--footer-contact-value-normal-bg: linear-gradient(135deg,
			rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25),
			rgba(128, 128, 128, 0.25));
		--footer-contact-value-hover-bg: linear-gradient(135deg,
			black, black, rgba(128, 128, 128, 0.5));
		--footer-link-colour: white;
		--link-hover-bg: rgba(192, 0, 192, 0.75);
	}
}


/* === global === */

html {
	overflow-x: hidden;
	font-family: sans-serif;
}

body {
	margin: 0;
	color: var(--default-text-colour);
	background-color: var(--body-bg);
}

code {
	font-size: 1.0rem;
}


/* === header and footer === */

/* remove bullets from some unordered lists. */
header ul,
#contact {
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}


/* === header === */

header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	width: 100vw;
	height: var(--header-nonfixed-height);
	background-image: var(--headfoot-bg);
	border-bottom-left-radius: var(--headfoot-radius);
	border-bottom-right-radius: var(--headfoot-radius);
}

@media screen and (min-width: 40rem) {
	header {
		/* position in middle of viewport. */
		left: calc((100vw - var(--headfoot-nonfixed-maxwidth)) / 2);
		width: var(--headfoot-nonfixed-maxwidth);
	}
}

/* icon in header. */
header > img {
	/* don't display until the 70rem breakpoint is reached. */
	display: none;
	width: 160px;
	height: 160px;
}

/* header heading text. */
header > h1 {
	/* don't display until 30rem viewport width is reached. */
	display: none;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	height: var(--header-nonfixed-height);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	margin: 0;
	min-width: var(--header-title-minwidth);
	font-size: var(--header-title-fontsize);
}

@media screen and (min-width: 30rem) {
	header > h1 {
		display: flex;
	}
}

/* header buttons. */
header > nav {
	display: flex;
	justify-content: space-around;
	width: 100vw;
}

@media screen and (min-width: 40rem) {
	header > nav {
		width: var(--main-maxwidth);
	}
}

header > nav > ul {
	display: flex;
}

header > nav > ul > li > a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	min-width: var(--header-button-minwidth);
	height: var(--header-button-height);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	margin-left: 0.25rem;
	margin-right: 0.25rem;
	font-size: var(--header-button-fontsize);
	color: black;
	text-decoration: none;
	background-color: var(--header-button-normal-bg);
	border-radius: var(--header-button-radius);
}

header > nav > ul > li > a:hover {
	background-color: var(--header-button-hover-bg);
}

header > nav > ul > li > a:active {
	background-color: var(--header-button-active-bg);
}


/* === footer === */

footer {
	width: 100vw;
	background-image: var(--headfoot-bg);
	border-top-left-radius: var(--headfoot-radius);
}

footer,
#contact > li:nth-child(1) > div:nth-child(2) {
	border-top-right-radius: var(--headfoot-radius);
}

@media screen and (min-width: 40rem) {
	footer {
		/* position in middle of viewport. */
		position: relative;
		left: calc((100vw - var(--headfoot-nonfixed-maxwidth)) / 2);
		width: var(--headfoot-nonfixed-maxwidth);
	}
}

footer code {
	overflow-wrap: anywhere;
}

@media screen and (min-width: 32rem) {
	#contact > li {
		display: flex;
	}
}

#contact > li > div {
	display: flex;
	align-items: center;
	padding-left: 1.0rem;
	padding-right: 1.0rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

#contact > li > div:nth-child(1) {
	flex-shrink: 0;
}

#contact > li > div:nth-child(2) {
	background-image: var(--footer-contact-value-normal-bg);
}

#contact > li > div:nth-child(2):hover {
	background-image: var(--footer-contact-value-hover-bg);
}

/* switch contact key--value pairs to horizontal. */
@media screen and (min-width: 32rem) {
	#contact > li > div:nth-child(1) {
		justify-content: right;
		width: var(--footer-contactkey-width);
		height: var(--footer-contactkey-height);
	}

	#contact > li > div:nth-child(2) {
		width: calc(100vw - var(--footer-contactkey-width) - 2.0rem);
	}
}

.footer-bottom {
	text-align: center;
	min-height: var(--footer-bottom-height);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.footer-bottom > p {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0.5rem;
	padding-left: 1.0rem;
	padding-right: 1.0rem;
	font-size: var(--footer-bottom-fontsize);
}


/* === main === */

main {
	max-width: var(--main-maxwidth);
	margin-top: calc(var(--header-nonfixed-height) + var(--primary-gap));
}

@media screen and (min-width: 40rem) {
	main {
		/* position in middle of viewport. */
		position: relative;
		left: calc((100vw - var(--main-maxwidth)) / 2);
	}
}

.article-heading {
	margin: var(--primary-gap);
	margin-bottom: 0;
	padding: var(--primary-gap);
	background-image: var(--headfoot-bg);
	border-top-left-radius: var(--main-radius);
	border-top-right-radius: var(--main-radius);
}

.article-heading > h1 {
	margin-top: 0;
	margin-bottom: 0;
}

.article-heading > p {
	margin-top: 1.0rem;
	margin-bottom: 0;
}

.article-content {
	min-height: calc(100vh - (var(--header-nonfixed-height)
	                 + (var(--primary-gap) * 6)
	                 + (var(--footer-contactkey-height) * 2)
	                 + var(--footer-bottom-height)));
	margin: var(--primary-gap);
	margin-top: 0;
	padding: var(--primary-gap);
	border-bottom-left-radius: var(--main-radius);
	border-bottom-right-radius: var(--main-radius);
	background-color: var(--article-content-bg);
}

.article-content p,
.article-content ol,
.article-content ul {
	font-size: 18px;
	line-height: 25px;
}

.article-content li {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}


/* === links in main and footer === */

main a {
	color: var(--article-content-link-colour);
}

footer a {
	color: var(--footer-link-colour);
}

main a:hover,
footer a:hover {
	background-color: var(--link-hover-bg);
	border-radius: var(--link-radius);
}

main a:active,
footer a:active {
	color: var(--link-active-colour);
	background-color: var(--link-active-bg);
	border-radius: var(--link-radius);
}

a[href^="/files/"]::after {
	content: " ⬇️";
}

/* display elements in centre. */
.display {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* === 70rem breakpoint === */

/*
lay out header and footer to the left (fixed),
and main to the right (but otherwise centred),
assuming a scale of 1.
*/

@media screen and (min-width: 70rem) {
	header, footer, main {
		scale: var(--scale);
	}

	header, footer {
		left: 0;
		width: var(--headfoot-fixed-width);
	}

	header {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		z-index: 0;
		transform-origin: left top;
	}

	header > img {
		display: revert;
		margin: 1.0rem;
		margin-bottom: 0.5rem;
	}

	footer {
		position: fixed;
		bottom: 0;
		max-height: calc((100vh - var(--scale) * var(--footer-height))
		                 / var(--scale));
		overflow-y: auto;
		transform-origin: left bottom;
	}

	header > nav {
		width: unset;
		justify-content: center;
	}

	header > nav > ul > li > a {
		min-width: 5.0rem;
		font-size: 1.0rem;
	}

	main {
		position: absolute;
		left: calc(var(--scale) * var(--headfoot-fixed-width)
		           + (100vw - var(--scale) * (var(--headfoot-fixed-width)
		           + var(--headfoot-nonfixed-maxwidth))) / 2);
		margin-top: 0;
		transform-origin: left top;
	}

	.article-content {
		min-height: unset;
	}
}


/* === utils === */

.hide {
	display: none;
}