/* Fonts */

@font-face {
	font-family: "Geist";
	src: url("./font/geist.ttf");
}

@font-face {
	font-family: "Geist Mono";
	src: url("./font/geist-mono.ttf");
}

/* Page setup */

html {
	--bg-0: #f1f1f1;
	--bg-1: #e7e7e7;
	--bg-2: #cccccc;
	--fg-0: #1b1b1b;
	--fg-1: #383838;
	--link-normal: #383838;
	--link-hover: #1b1b1b;
	background-color: var(--bg-0);
	color: var(--fg-1);
	font-family: "Geist", sans-serif;
	font-weight: 500;
	font-size: medium;
}

@media (prefers-color-scheme: dark) {
	html {
		--bg-0: #080808;
		--bg-1: #101010;
		--bg-2: #222222;
		--fg-0: #cccccc;
		--fg-1: #b1b1b1;
		--link-normal: #999999;
		--link-hover: #ffffff;
	}
}

@media (prefers-contrast: more) {
	html {
		--bg-0: #000000;
		--bg-1: #101010;
		--bg-2: #ffffff;
		--fg-0: #ffffff;
		--fg-1: #ffffff;
		--link-normal: #FFFF00;
		--link-hover: #FF0000;
	}
}

/* TODO: forced-colors */

html:before {
	content: '';
	position: fixed;
	width: 100%;
	height: 999px;
	top: -999px;
	background-color: var(--bg-1);
}

body {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 16rem 1fr;
	grid-template-rows: 1fr;
	grid-row-gap: 0; 
	height: 100vh;
	grid-template-areas: "nav main";
}

body > * {
	max-height: 100vh;
	overflow-y: scroll;
}

/* Header */

header::before {
	content: "Navigation";
	font-size: large;
	font-weight: 800;
	margin-bottom: 0.75rem;
}

header {
	border-right: 1px solid var(--bg-2);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	overflow: auto;
	grid-area: nav;
}

header > a {
	white-space: nowrap;
}

header > a#skip-navigation-link {
	position: absolute;
	top: -99999px;
	left: -99999px;
}

header > a#skip-navigation-link:focus {
	position: static;
}

/* Basic content */

main {
	padding-inline: max(calc(50% - 28rem), 1rem);
	grid-area: main;
}

h1 {
	font-family: "Geist Mono";
	color: var(--fg-0);
	font-weight: 900;
	font-size: x-large;
	text-align: center;
}

h2 {
	font-family: "Geist Mono";
	color: var(--fg-0);
	font-weight: 700;
	font-size: larger;
	margin: 0;
}

a:link, a:visited {
	color: var(--link-normal);
	text-decoration: underline 1px var(--bg-2);
}

a:hover, a:active {
	color: var(--link-hover);
	text-decoration: underline;
}

header > [aria-current="page"] {
	color: var(--fg-0);
}

/* Special content */

ul > li {
	margin-bottom: 4px;
	list-style: disc;
}

ul.complex > li {
	margin-bottom: 12px;
}

code::before {
	content: "$ ";
	opacity: 0.5;
}

code {
	display: block;
	font-family: "Geist Mono", monospace;
	font-weight: 500;
	border-left: 1px solid var(--bg-2);
	padding-left: 0.75em;
	user-select: all;
	text-wrap: nowrap;
	overflow-x: scroll;
}

code.output::before {
	content: none;
}

code > .highlight {
	text-decoration: underline dashed var(--bg-2);
}

/* FUCKING TABLES! */

.table-container {
	padding: 16px 40px;
}

table {
	width: 100%;
    table-layout: fixed;
	border-spacing: 0;
	border-collapse: separate;
	border: 1px solid var(--bg-2);
}

th, td {
	border-right: 1px dashed var(--bg-2);
	border-bottom: 1px dashed var(--bg-2);
	padding: 6px;
	overflow: hidden;
}
 
tr:last-child > td, tr:last-child > th {
	border-bottom: 0px;
}

tr > th:last-child, tr > td:last-child {
	border-right: 0px;
}

/* Media queries */

@media print {
	html {
		--bg-0: transparent;
		--bg-1: transparent;
		--link-normal: var(--fg-0);
		--link-hover: var(--fg-0);
	}

	body {
		display: block;
		height: none;
	}

	body > * {
		max-height: none;
		overflow-y: scroll;
	}

	header {
		display: none;
	}

	nav {
		display: none;
	}
}

@media screen and (width < 800px) {
	body {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas: "nav" "main";
	}

	header {
		border-right: 0;
		border-bottom: 1px solid var(--bg-2);
		flex-direction: row;
		gap: 0.8rem;
		overflow: auto;
		min-height: 0;
	}

	header::before {
		content: none;
	}
}