:root{
	--colour-white1: #cccccc;
	--colour-white2: #c2c2c2;
	--colour-white3: #b8b8b8;
	--colour-white4: #aeaeae;
	--colour-lightgrey1: #a4a4a4;
	--colour-lightgrey2: #9a9a9a;
	--colour-lightgrey3: #909090;
	--colour-lightgrey4: #868686;
	--colour-darkgrey1: #7c7c7c;
	--colour-darkgrey2: #727272;
	--colour-darkgrey3: #686868;
	--colour-darkgrey4: #5e5e5e;
	--colour-black1: #545454;
	--colour-black2: #4a4a4a;
	--colour-black3: #474747;
	--colour-black4: #333333;
}

/* ==== FONTS ==== */
/* Regular */
@font-face {
	font-family: "Libron";
	src: url("../fonts/Libron-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Bold */
@font-face {
	font-family: "Libron";
	src: url("../fonts/Libron-Bold.woff2") format("woff2");
	font-weight: 800;
font-style: normal;
	font-display: swap;
}

/* Italic */
@font-face {
	font-family: "Libron";
	src: url("../fonts/Libron-Italic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/* Bold Italic */
@font-face {
	font-family: "Libron";
	src: url("../fonts/Libron-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

body {
	background-color: var(--colour-white1);
	font-family: "Libron", sans-serif;
	color: var(--colour-black4);
	font-size: 18px;

	/* alignment */
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Primary text and headers */
h1, h2 {
	color: var(--colour-black4);
	font-weight: 800;
}

/* sub-text/headers */
h3, h4, h5, h6, .sub-text {
	color: var(--colour-black1);
	font-weight: 700;
	font-style: italic;
}

/* MAIN FORMATTING */
#content h1, h2 {
	margin-top: 40px;
	margin-bottom: 10px;
}

#content h3, h4, h5, h6 {
	margin-top: 20px;
	margin-bottom: 6px;
}

#content p, ol, li {
	margin: 2px;
	padding: 4px;
}

.title {
	text-align: center;
}

pre.src {
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
}

.src {
	background-color: var(--colour-white2);
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.9em;
}

img {
	max-width: 80%;
	padding: 10px;
}

/* FONT SIZING */
h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2em;
}

h3, h4, h5, h6 {
	font-size: 1.25em;
}

/* FOOTER FORMATTING */
#postamble {
	margin-top: 60px;
}

#postamble p {
	margin-top: 2px;
	margin-bottom: 2px;
	font-size: 12px;
}