@font-face {
	font-family: lexend;
	src: local(Lexend),
		url(Lexend.ttf);
}

:root {
	--font-size: clamp(16px, 0.75rem + 0.8vw, 24px);
	--font-size-h1: calc(var(--font-size) * 1.8);
	--font-size-h2: calc(var(--font-size) * 1.6);
	--font-size-h3: calc(var(--font-size) * 1.3);
	--font-size-h4: calc(var(--font-size) * 1.2);
	--font-size-small: calc(var(--font-size) * 0.8);
	--bezier: cubic-bezier(0, 0, 0, 1);
	--bezier-bounce: cubic-bezier(0, 1, 0, 1.5);
	--off-black: #222;
	--off-white: #eee;
	--c-light: #555;
	--box-light: #0001;
	--c-dark: #aaa;
	--box-dark: #fff5;
}

body {
	color: var(--text);
	font-family: lexend, lxgw;
	font-size: var(--font-size);
	hyphens: auto;
	margin: 0;
	background-color: var(--bg);
}

html {
	&.dark body {
		--text: var(--off-white);
		--bg: var(--off-black);
		--c: var(--c-dark);
		--box: var(--box-dark);

		& .theme-toggle>div {
			left: 36px;

			& svg:first-child {
				display: none;
			}

			& svg:last-child {
				display: block;
			}
		}
	}

	&.light body {
		--text: var(--off-black);
		--bg: var(--off-white);
		--c: var(--c-light);
		--box: var(--box-light);

		& .theme-toggle>div {
			left: 0px;

			& svg:first-child {
				display: block;
			}

			& svg:last-child {
				display: none;
			}
		}
	}
}

h1,
h2,
h3,
h4 {
	color: var(--text);
	line-height: 2;
	font-family: troika, lexend;
	letter-spacing: 3px;
	font-weight: normal;
	margin-bottom: .75em;
	margin-top: 1.25em;
}

h1 {
	font-size: var(--font-size-h1);
	text-align: center;
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

hr {
	border: 0;
	border-bottom: 8px dashed var(--box);
	margin: 2em 0;
}

blockquote {
	margin: 1em;
	padding: .5em 1.5em;
	position: relative;
	border-left: 8px solid var(--c);

	& p:first-child {
		margin-top: 0;
	}

	& p:last-child {
		margin-bottom: 0;
	}
}

main {
	margin: 2em auto;
	padding: 0 2em;
}

p {
	color: var(--text);
	line-height: 2;
	text-align: justify;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--c);
	text-decoration-thickness: .2em;
	text-underline-offset: .3em;
	text-decoration-skip-ink: none;
	transition: all .2s var(--bezier);

	&:hover {
		color: var(--c);
		text-underline-offset: .2em;
	}
}

.box-nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin: 1em 0;

	&>a {
		background-color: var(--c);
		color: var(--bg);
		cursor: pointer;
		padding: .4em .6em;
		border-radius: .3em;
		text-decoration: none;
		transition: all .2s;
		user-select: none;

		&:hover {
			transform: translateY(-.3em);
			opacity: 1;
		}
	}

	&>a {
		opacity: .5;

		&[aria-current] {
			opacity: 1;
		}
	}

	&.solid>a {
		opacity: 1;
	}
}

.lighter-text {
	opacity: .5;
}

.smaller-text {
	font-size: var(--font-size-small);
}

button {
	background-color: var(--c);
	border: 0;
	border-radius: 8px;
	color: var(--bg);
	cursor: pointer;
	font-size: var(--font-size);
	font-family: lexend;
	padding: .5em 1em;
	user-select: none;
}

header {
	width: 100%;
	height: 6em;
	user-select: none;
	background-size: cover;
	background-position: center;
}

header a {
	width: 100%;
	height: 100%;
	display: block;
}

.theme-toggle {
	position: fixed;
	z-index: 99;
	background-color: var(--c);
	border-radius: 999px;
	cursor: pointer;
	height: 36px;
	padding: 4px;
	transition: all .3s;
	width: 72px;
	bottom: 1em;
	right: 1em;
	box-shadow: 0 0 16px var(--c);

	&>div {
		align-items: center;
		background-color: var(--bg);
		border-radius: 999px;
		display: flex;
		height: 36px;
		justify-content: center;
		position: relative;
		transition: all .3s var(--bezier);
		width: 36px;

		& svg {
			stroke: var(--text);
		}
	}
}

.external-link::after {
	content: '☍';
}

::selection {
	background-color: var(--text);
	color: var(--bg);
}

a::selection {
	background-color: var(--c);
	color: var(--off-white);
}

table {
	border-collapse: collapse;
	width: fit-content;
	margin: auto;
	line-height: 2;
}

thead tr {
	background-color: var(--c);
	color: var(--bg);
}

tbody tr:nth-child(odd) {
	background-color: var(--box);
}

th,
td {
	padding: 1em;
	border: 0;
	text-align: left;
	white-space: nowrap;
}

th.sortable {
	cursor: pointer;
	user-select: none;

	&.sorted:before {
		content: '↓ ';
	}

	&.sorted-reverse:before {
		content: '↑ ';
	}
}

#wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;

	& p {
		text-align: center;
	}
}