/* light mode */
:root {
	color-scheme: light dark;
	--colour-border: rgba(127, 127, 127, 0.5);
	--colour-shading: rgba(127, 127, 127, 0.2);
	--colour-background: #f0f0f1;
	--colour-surface: #dcdcde;
	--colour-surface-text: #01263a;
	--colour-accent: #135e96;
	--colour-text-primary: #101517;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--colour-background: #101517;
		--colour-surface: #1d2327;
		--colour-surface-text: #c5d9ed;
		--colour-accent: #72aee6;
		--colour-text-primary: #f0f0f1;
	}
}

/* Theme Colours */

html {
	background-color: var(--colour-background);
	color: var(--colour-text-primary);
}

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

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

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

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

a {
	color: var(--colour-accent);
}

th,
hr,
blockquote, 
table > tbody > tr + tr > td,
table > tbody > tr
{
	border-color: var(--colour-border);
}

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

aside ul li {
	border-color: var(--colour-border);
	background-color: var(--colour-shading);
}