/* Global colors */
:root {
	--background-color: #2b5c1c;
	--default-color: #343434;
	--heading-color: #ffffff;
	--accent-color: #ccd6c6;

	--link-color: #2b5c1c;
	--link-hover-color: #7bb73f;
}

/* Fonts */

/* Avara by Raphaël Bastide, with the contribution of Wei Huang, Lucas Le Bihan, Walid Bouchouchi, Jérémy Landes. Distributed by velvetyne.fr. */
@font-face {
	font-family: "Avara Bold";
	src: url("../fonts/Avara-Bold.eot") format("embedded-opentype"),
		url("../fonts/Avara-Bold.woff2") format("woff2"),
		url("../fonts/Avara-Bold.woff") format("woff"),
		url("../fonts/Avara-Bold.ttf") format("opentype");
}

:root {
	--default-font: "Atkinson Hyperlegible Mono", Arial, sans-serif;
	--heading-font: "Avara Bold", Arial, sans-serif;
	--nav-font: "Atkinson Hyperlegible Mono", Arial, sans-serif;
}

/* Smooth scroll */
:root {
	scroll-behavior: smooth;
}

/* General */

body {
	background-color: var(--background-color);
	font-family: var(--default-font);
	background-image: url(../img/bg.png);
}

.page-container {
	max-width: 1200px;
}

.border,
.border-top,
.border-end {
	border-color: var(--accent-color) !important;
}

a {
	color: var(--link-color);
	transition: 0.1s;
}

a:hover {
	color: var(--link-hover-color);
}

/* Header */

#logo {
	width: 175px;
}

#header-title {
	font-family: var(--heading-font);
	color: var(--heading-color);
}

/* Sidebar */

#sidebar a {
	text-decoration: none;
}