/* Colourschemes. */
:root {
	--bg: #222222;
	--fg: #ffffff;
	--nav-bg: #222222;
	--nav-fg: #ffffff;
	--nav-button-bg: #444444;
	--nav-button-bg-alt: #555555;
	--nav-button-fg: #ffffff;
	--nav-button-border: #666666;
}

@font-face {
	font-family: Transport Heavy;
	src: url("/assets/fonts/transportheavy/Transport Heavy.ttf");
}

@font-face {
	font-family: Transport;
	src: url("/assets/fonts/transportmedium/Transport Medium.ttf");
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Main. */
body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: Inter;
	font-size: 1em;
	color: var(--fg);
	padding: 0;
	margin: 0;
	overflow-y: scroll;
}
header,main,footer {
	font-weight: 250;
	margin: auto;
}
hr {
	border: none;
	background-color: var(--fg-alt);
	height: 1px;
}
h1,h2,h3,h4,h5,h6 {
	font-family: VarelaRound, Arial, sans-serif;
}

/* Main classes. */
.midrule {
       margin-left: 20vw;
       margin-right: 20vw;
}
.title {
	text-align: left;
	padding: 0;
	margin: 0;
	font-size: 3em;
	font-weight: 300;
}
.nav-sticky-container {
	z-index: 2;
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: 0;
}
nav {
	background-color: var(--nav-bg);
	color: var(--nav-fg);
	padding: 1em;
	height: 10em;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5em;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5);
	font-weight: 250;
}
.logo {
	height: 100%;
}
.nav-sep::before {
	content: "";
	height: 8em;
	border: 1px solid #444444;
	display: inline-block
}
.title-nav-container {
	display: flex;
	flex-direction: column;
}
.nav-links {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, 25%);
	margin: 0;
	padding: 0;
}
.nav-links li {
	display: flex;
}
.nav-links a {
	background-color: var(--nav-button-bg);
	padding: 0.75em;
	margin: 0.25em;
	border-radius: 4px;
	border: solid 1px var(--nav-button-border);
	text-decoration: none;
	color: var(--nav-button-fg);
	width: 100%;
	text-align: center;
}
.nav-links a:hover {
	background-color: var(--nav-button-bg-alt);
	text-decoration: underline;
}

@media screen and (max-width: 800px) {
	nav {
		height: 8em;
		padding: 0.5em;
	}
	.title-nav-container {
		width: 100%;
	}
	.logo {
		height: 50%;
	}
	.title {
		font-weight: 200;
		font-size: 1em;
		text-align: center;
	}
	.nav-links {
		grid-template-columns: repeat(auto-fit, 50%);
	}
}