:root {
	--scheme: light;
	--accent: #00aeff80;
	--a-colour: #00aeff;
	--text: #333;
	--body: white;
	--background: #CFCFCF;
	--border: #30303060;
	color-scheme: var(--scheme);
	background-color: var(--background);

	--text-shadow: none;
	--button-shadow: none;
	--svg-shadow: none;
}

/* https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting */
[data-theme="dark"] {
	--scheme: dark;
	--accent: #00aeff80;
	--text: #FFF;
	--body: #333;
	--background: #121212;
	--border: #ffffff60;

	--text-shadow: 0 0 3px var(--text);
	--button-shadow: 0 1px 6px var(--text);
	--svg-shadow: drop-shadow(0 0.25em 1em var(--text));
}

@media (prefers-contrast: more) {
	:root {
		--text-shadow: none;
		--button-shadow: none;
		--svg-shadow: none;
	}
}

body {
	font-family: system-ui;
	font-style: normal;
	font-variant: normal;
	color: var(--text);
}

header {
	border-radius: 1rem;
	color: var(--text);
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
	font-style: normal;
	font-size: min(3rem, 10vw);
}

.back a {
	color: var(--text);
	text-decoration: none;
}

.gloss-glow {
	background-color: var(--accent);
	backdrop-filter: blur(0.5rem);
	text-shadow: var(--text-shadow);
	border: 1px solid var(--border);
	box-shadow: 0 0.25em 1em 0.125em var(--accent);
	border-radius: 0.5em;
}

.gloss-button {
	cursor: pointer;
	color: var(--text);
	transition-property: box-shadow, text-shadow, filter;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.gloss-button:hover {
	box-shadow: 0 0.25em 2em 0.5em var(--accent);
	text-shadow: var(--button-shadow)
}

.gloss-button:hover>* {
	text-shadow: var(--button-shadow);
}

.gloss-link-list {
	display: inline-flex;
	flex-direction: column;
	align-items: baseline;
}

.gloss-link {
	color: var(--text);
	padding: 0.75em 1em;
	border-radius: 1em;
	box-shadow: 0 0.25em 1em 0.125em var(--accent);
	transition: transform 0.05s ease-out, box-shadow 0.25s ease-in-out, text-shadow 0.25s ease-in-out;
}

.gloss-link:hover {
	transform: translate(0, -0.125em);
	box-shadow: 0 0.375em 1em 0.25em var(--accent);
	text-shadow: 0 1px 6px;
}

section {
	border-radius: 1em;
	background-color: var(--body);
	box-shadow: 0 0.25em 3em 0.125em var(--body);
	border: 1px solid var(--border);
}

h1 {
	margin-block-start: 0;
	font-weight: normal;
	font-size: 2em;
}

img {
	transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

img:hover {
	-webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

table {
	box-shadow: 0 0.25em 4em -1.25em var(--accent);
}

.themeButton {
	font-size: 3em;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
	color: var(--text);
	text-shadow: 0 0 3px;
	background-color: transparent;
	border: none;
}


/* container theming */
.container {
	font-size: 1.25em;
	font-family: system-ui;
}

.container .section {
	text-decoration: none;
	text-align: center;
	padding: 0.25em 0.5em;
	transition-property: box-shadow, width;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.container .section svg {
	transition-property: transform, filter;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.container .section p {
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease-in-out;
}

.container .section:hover svg {
	transform: translate(0, -0.25em);
	filter: var(--svg-shadow);
}

.container .section:hover p {
	transform: scale(120%);
}