:root {
	--colour-border: rgba(127, 127, 127, 0.25);
	--colour-shading: rgba(127, 127, 127, 0.2);

	--colour-background: #101517;
	--colour-surface: #1d252977;
	--colour-surface-text: #b5e6ff;
	--colour-accent: #72aee6;
	--colour-radial: #2c2230;
	--colour-text-primary: #f0f0ff;
}

html {
	min-height: 100vh;
	background: 
		radial-gradient(ellipse at 40% 5%, var(--colour-radial) 0%, transparent 40%),
		radial-gradient(ellipse at 2% 65%, var(--colour-radial) 0%, transparent 25%),
		radial-gradient(ellipse at 90% 85%, var(--colour-radial) 0%, transparent 30%),
		var(--colour-background);
	color: var(--colour-text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
header > p {
	color: var(--colour-accent)
}

/* drop shadows */

nav > div,
img,
blockquote,
footer > div,
nav > div > ul > li > a {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

/* borders */

th,
hr,
blockquote, 
table > tbody > tr + tr > td,
table > tbody > tr,
nav > div,
img,
blockquote,
footer > div,
nav > div > ul > li > a,
div[data-container-diagram] ul li
{
	border-color: var(--colour-border);
}

/* shaded backgrounds */

pre,
th,
blockquote,
table tr:nth-child(2n),
nav > div > ul > li > a,
div[data-container-diagram] ul li
{
	background-color: var(--colour-shading);
}

/* specific items */

nav > div,
footer > div {
	background-color: var(--colour-surface);
}

nav > div > h1 {
	color: var(--colour-surface-text)
}

footer > div::after
{
	color: var(--colour-accent);
}