:root {
	--dark-grey: #23282D;
	--grey: #4B5055;
	--light-grey: #A0A5AA;
	--white: #FFF;
	--orange: #F0B450;
	--dark-orange: #E09313;
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans Regular'), local('OpenSans-Regular'),
		url('open-sans-v17-latin-regular.woff2') format('woff2'),
		url('open-sans-v17-latin-regular.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: local('Open Sans Italic'), local('OpenSans-Italic'),
		url('open-sans-v17-latin-italic.woff2') format('woff2'),
		url('open-sans-v17-latin-italic.woff') format('woff');
	font-display: swap;
}

*, *::before, *::after {
	font-family: 'Open Sans', 'Trebuchet MS', sans-serif;
	font-kerning: auto;
}

html {
	background: var(--dark-grey) url("mesh.webp") repeat;
}

html, body {
	line-height: 1.5rem;
	font-size: 1rem;
	color: var(--white);
}

strong {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 3.25rem;
	line-height: 3.25rem;
	padding: 0 1rem;
	margin: 0;
}

strong > span {
	color: var(--dark-grey);
}

h1 {
	color: var(--orange);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.5rem;
	margin: 2rem 0 1rem 0;
}

h2 {
	color: var(--orange);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.25rem;
	margin: 0;
}

h3 {
	color: var(--light-grey);
	font-style: italic;
	font-weight: 400;
	font-size: 1rem;
	margin: 0;
}

p {
	text-align: justify;
	text-justify: inter-word;
}

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

abbr[title] {
	text-decoration: none;
	border-bottom: 1px dotted var(--orange);
}

.page {
	max-width: 61rem;
	margin: 2rem auto;
	border-left: 5rem solid var(--orange);
	background: var(--dark-grey) url("noise.webp") repeat;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

nav > ul {
	width: max-content;
	margin: auto 0 auto auto;
	padding: 1.25rem 2.5rem;
	list-style: none;
	text-indent: -1rem;
}

nav > ul > li:before {
	padding-right: 2rem;
	float: left;
}

#m:before {
	content:"m.";
}

#e:before {
	content:"e.";
}

#w:before {
	content:"w.";
}

#a:before {
	content:"a.";
}

header {
	display: flex;
	height: 7.5rem;
	filter: drop-shadow(4px 4px 2px rgba(5,5,5,0.25));
}

.spacer {
	max-width: 10rem;
	margin-right: 0.5rem;
	display: flex;
	flex-grow: 1;
	background-color: var(--white);
	clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
}

.title {
	min-width: 19rem;
	margin-left: 0.5rem;
	padding-left: 2rem;
	display: flex;
	flex-grow: 1;
	align-items: center;
	background-color: var(--orange);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20px 50%);
}

main {
	padding: 1rem 4rem;
}

table {
	margin-bottom: 1rem;
	table-layout: fixed;
	border-collapse: collapse;
}

table tr td:nth-child(1) {
	width: 8rem;
	padding-right: 1rem;
	font-style: italic;
	color: var(--light-grey);
}

@media print {
	@page {
		size: A4;
		margin: 0;
	}

	html, body {
		font-size: 14px;
		color: var(--dark-grey);
		print-color-adjust: exact !important;
		-webkit-print-color-adjust: exact !important;
		background: none;
	}

	a {
		color: var(--dark-orange);
		text-decoration: none;
	}

	abbr[title] {
		border-bottom: 0;
	}

	.page {
		margin: 0;
		background: none;
		box-shadow: none;
	}

	header {
		filter: none;
	}

	.spacer {
		background-color: rgba(255, 255, 255, 0);
	}

	main {
		padding: 3rem 3rem 3rem 3rem;
	}

	.pagebreak {
		break-before: page;
		padding-top: 3rem;
	}
}

/* Tablets */
@media screen and (max-width: 1024px) {
	html, body {
		font-size: 17px;
	}

	.page {
		margin: 0 auto;
		border-left: 3rem solid var(--orange);
	}

	main {
		padding: 2rem;
	}
}

/* Mobiles */
@media screen and (max-width: 480px) {
	html, body {
		font-size: 13px;
	}

	.page {
		margin: 0 auto;
		border-left: 0rem solid var(--orange);
		background: var(--dark-grey);
	}

	main {
		padding: 1rem;
	}
}