/* Font Import */

	@font-face {
		font-family: "gg sans";
		src: url("fonts/ggsans-Normal.otf");
		src: url('fonts/ggsans-Normal.eot'); /* IE9 Compat Modes */
		src: url('fonts/ggsans-Normal.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('fonts/ggsans-Normal.woff') format('woff'), /* Modern Browsers */
		url('fonts/ggsans-Normal.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/ggsans-Normal.svg') format('svg'); /* Legacy iOS */
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		text-rendering: optimizeLegibility;
	}

	@font-face {
		font-family: "gg sans";
		src: url("fonts/ggsans-Normal-Italic.otf");
		src: url('fonts/ggsans-Normal-Italic.eot'); /* IE9 Compat Modes */
		src: url('fonts/ggsans-Normal-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('fonts/ggsans-Normal-Italic.woff') format('woff'), /* Modern Browsers */
		url('fonts/ggsans-Normal-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/ggsans-Normal-Italic.svg') format('svg'); /* Legacy iOS */
		font-style: italic;
		font-weight: 300;
		font-display: swap;
		text-rendering: optimizeLegibility;
	}

	@font-face {
		font-family: "gg sans";
		src: url("fonts/ggsans-Bold.otf");
		src: url('fonts/ggsans-Bold.eot'); /* IE9 Compat Modes */
		src: url('fonts/ggsans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('fonts/ggsans-Bold.woff') format('woff'), /* Modern Browsers */
		url('fonts/ggsans-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/ggsans-Bold.svg') format('svg'); /* Legacy iOS */
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		text-rendering: optimizeLegibility;
	}

	@font-face {
		font-family: "gg sans";
		src: url("fonts/ggsans-Bold-Italic.otf");
		src: url('fonts/ggsans-Bold-Italic.eot'); /* IE9 Compat Modes */
		src: url('fonts/ggsans-Bold-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('fonts/ggsans-Bold-Italic.woff') format('woff'), /* Modern Browsers */
		url('fonts/ggsans-Bold-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/ggsans-Bold-Italic.svg') format('svg'); /* Legacy iOS */
		font-style: italic;
		font-weight: 700;
		font-display: swap;
		text-rendering: optimizeLegibility;
	}

	@font-face {
		font-family: "Ginto Nord";
		src: url("fonts/Ginto-Nord-Medium.otf");
		src: url('fonts/Ginto-Nord-Medium.eot'); /* IE9 Compat Modes */
		src: url('fonts/Ginto-Nord-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('fonts/Ginto-Nord-Medium.woff') format('woff'), /* Modern Browsers */
		url('fonts/Ginto-Nord-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/Ginto-Nord-Medium.svg') format('svg'); /* Legacy iOS */
		font-style: normal;
		font-weight: 500;
		font-display: swap;
		text-rendering: optimizeLegibility;
	}

	@font-face {
		font-family: "Ginto Nord";
		src: url("fonts/Ginto-Nord-Black.otf");
		src: url('fonts/Ginto-Nord-Black.eot'); /* IE9 Compat Modes */
		src: url('fonts/Ginto-Nord-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('fonts/Ginto-Nord-Black.woff') format('woff'), /* Modern Browsers */
		url('fonts/Ginto-Nord-Black.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/Ginto-Nord-Black.svg') format('svg'); /* Legacy iOS */
		font-style: normal;
		font-weight: 900;
		font-display: swap;
		text-rendering: optimizeLegibility;
	}

	/* Design */

		:root {
			--body: #2f3136;
			--text: #AEB4B8;
			--wrapper: rgba(54, 57, 63, 0.5);
			--accent-1: #728c9a;
			--accent-2: #596a75;
			--accent-3: #79786c;
			--accent-4: #999862;
			--border: 1px solid #41464d;
			--background: rgba(31, 33, 38, 0.75);
			--white: #fafafa;
			--dark: #1F2024;
			--font-1: "gg sans", sans-serif;
			--font-2: "Ginto Nord", serif;
		}

	/* Resetting */

		* {
			margin: 0;
			padding: 0;
			text-align: center;
			box-sizing: border-box;
		}

	/* Scrollbar & selection */

		::-webkit-scrollbar {
			width: 1ex;
		}

		::-webkit-scrollbar-track {
			background: var(--body);
		}
		 
		::-webkit-scrollbar-thumb {
			background: var(--accent-2);
		}

		::-webkit-scrollbar-thumb:hover {
			background: var(--accent-3);
		}

		::selection {
			background: var(--accent-2);
			color: var(--white);
		}

	/* Base layout */

		body {
			background: url("img/background.png") top center no-repeat var(--body) fixed;
			font: 300 10.5pt/130% var(--font-1);
			color: var(--text);
			background-size: cover;
		}

		nav ul, div.top-image, #wrapper, footer {
			width: 50%;
			min-width: 800px;
			max-width: 1080px;
			margin: 0 auto;
		}

		#wrapper {
			padding: 4em 8em 6em;
			background: var(--wrapper);
			backdrop-filter: blur(1ex);
			border-left: var(--border);
			border-right: var(--border);
			border-bottom: var(--border);
		}

		div.top-image {
			height: 608px;
			background-position: center center;
			border-left: var(--border);
			border-right: var(--border);
			border-bottom: var(--border);
		}

		footer {
			margin-bottom: 4em;
			padding: 4em 6em 6em;
			background: var(--background);
			color: var(--accent-2);
			font-size: 0.9em;
			border-left: var(--border);
			border-right: var(--border);
		}

		footer#index {
			margin-bottom: 0;
			padding: 4em;
		}

	/* Links & images */

		a {
			text-decoration: none;
			color: var(--accent-4);
			transition: color 0.33s ease;
		}

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

		p a {
			display: inline-block;
			line-height: 95%;
			border-bottom: 1px solid;
		}

		a img {
			transition: all 0.33s ease;
		}

		a img:hover {
			border-color: var(--accent-1);
		}

		img {
			max-width: 100%;
			border: var(--border);
		}

		img.float {
			margin: 5% auto 3%;
		}

	/* Navigation */

		nav {
			position: fixed;
			bottom: 0;
			width: 100%;
			background: var(--body);
			border-top: 3px solid var(--accent-3);
			font-size: 0;
			box-shadow: 0 0 4rem var(--dark), 0 0 2rem var(--dark), 0 0 1rem var(--dark);
			z-index: 3;
		}

		nav ul {
			list-style: none;
		}

		nav ul li {
			display: table-row;
			float: left;
		}

		nav a {
			display: block;
			padding: 1.5em 1em;
			font: 500 0.8rem/100% var(--font-2);
			text-transform: uppercase;
			color: var(--accent-1);
			border: none;
		}

		nav a:hover {
			background: rgba(89, 106, 117, 0.33);
		}

		nav li:nth-of-type(odd) {
			width: 37.5%;
		}

		nav li:nth-of-type(even) {
			width: 25%;
			border-left: var(--border);
			border-right: var(--border);
		}

		nav li:first-of-type a::before {
			content: "←";
			margin-right: 1ex;
		}

		nav li:last-of-type a::after {
			content: "→";
			margin-left: 1ex;
		}

		#scroll-button, #scroll-button-index {
			position: fixed;
			right: 1.5em;
			bottom: 5em;
			cursor: pointer;
			z-index: 2;
		}

		button {
			padding: 1em;
			font: 500 1rem/1.0 var(--font-2);
			color: var(--accent-4);
			background: var(--body);
			border: var(--border);
			box-shadow: 0 0 1em var(--dark), 0 0 1ex var(--dark);
		}

		button:hover {
			color: var(--white);
			border-color: var(--accent-2);

		}

		#scroll-button-index {
			bottom: 1.5em;
		}

	/* Index page */

		div.index {
			display: flex;
			flex-flow: nowrap;
		}

		div.index > div {
			width: 23%;
			margin: 1.5ex 1.5%;
		}

		div.index a {
			font: bold 125%/100% var(--font-1);
			font-weight: bold;
			color: var(--accent-1);
			cursor: pointer;
			transition: all 0.33s ease;
			border: none;
			text-transform: capitalize;
			vertical-align: top;
		}

		div.index a:hover {
			color: var(--white);
			text-shadow: 0 0 1ex var(--accent-1);
		}

		div.index a img {
			width: 100%;
			height: 20em;
			cursor: pointer;
			margin-bottom: 0.5ex;
			object-fit: cover;
			object-position: 30%;
			border-color: var(--accent-1);
			filter: grayscale(100%);
			opacity: 0.5;
		}

		div.index a:hover img {
			opacity: 1;
			box-shadow: 0 0 2em var(--dark), 0 0 1em var(--dark);
			transition: all 0.5s ease;
			transform: translateY(-1ex);
			filter: grayscale(0%);
			opacity: 1;
		}

		div.index > div:first-of-type {
			margin-left: 0;
		}

		div.index > div:last-of-type {
			margin-right: 0;
		}

		div.index a.wip::before {
			display: inline-block;
			content: "Coming Soon";
			position: relative;
			top: 45%;
			width: 100%;
			padding: 1ex 0;
			font-weight: normal;
			color: var(--text);
			background: var(--background);
			backdrop-filter: blur(1ex);
			z-index: 2;
		}

		div.index a.wip {
			position: relative;
			top: -2em;
		}

		div.index a.wip:hover::before {
			color: var(--white);
			transition: color 0.5s ease;
		}

	/* Header Div */

		#header {
			padding: 6em 0 2em;
			vertical-align: middle;
		}

		#header h1, h1:first-of-type {
			margin: 0 0 0.75em;
		}

	/* Headers */

		h1 {
			margin: 0.5em 0 0.75em;
			font: 900 200%/110% var(--font-2);
			color: var(--accent-1);
			text-transform: uppercase;
			letter-spacing: 1.5pt;
			border-bottom: 3px solid;
			clear: both;
		}

		h2 {
			margin: 1.5em 0 1em;
			font: 500 150%/125% var(--font-2);
			color: var(--accent-3);
			text-transform: uppercase;
			border-bottom: 1px solid;
		}

		h1 a, h2 a {
			font: inherit;
			color: inherit;
		}

		h1 a:hover, h2 a:hover {
			color: inherit;
			cursor: default;
		}

		h3 {
			margin: 1.75em 0 1em;
			font: 700 90%/120% var(--font-1);
			color: var(--accent-4);
			text-align: left;
			text-transform: uppercase;
			letter-spacing: 0.5pt;
			border-bottom: var(--border);
		}

		h3::before {
			content: "↪ ";
			font-weight: normal;
		}

	/* Introduction */

		#introduction {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}

		div.chapters {
			width: 30%;
			padding: 1.25em 1.5em 1.5em;
			text-align: left;
			background: var(--body);
			border: var(--border);
		}

		div.chapters b {
			display: block;
			text-align: left;
		}

		div.chapters ul {
			list-style: none;
			margin-top: 0.5ex;
		}

		div.chapters ul li {
			margin-left: 2em;
			text-align: left;
			text-transform: capitalize;
		}

		div.chapters ul + b {
			margin-top: 0.75em;
		}

		div.chapters ul li a::before {
			content: "↪ ";
			color: var(--accent-2);
		}

		div.prologue {
			width: 70%;
			padding-left: 1.5em;
		}

	/* Text */

		p {
			font-size: 1em;
			text-align: justify;
			-webkit-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
			transition: color 0.33s ease;
		}

		p + p {
			margin-top: 0.8em;
		}

		em {
			font-style: normal;
			color: var(--accent-1);
			transition: color 0.33s ease;
		}

		b {
			font-weight: bold;
			color: var(--accent-1);
			transition: color 0.33s ease;
		}

		p:hover, p:hover > b, p:hover > i, p:hover > em, p:hover > i b, p:hover > b i {
			color: var(--white);
		}

		footer p {
			text-align: center;
		}

		footer p + p {
			margin-top: inherit;
		}

		sup {
			position: relative;
			top: 0.4ex;
			line-height: 0.5em;
		}

	/* Resolution fixes */

		@media only screen and (max-width: 1920px) {
			nav ul, div.top-image, #wrapper, footer {
				width: 66%;
				min-width: 600px;				
			}

			#wrapper {
				padding: 4em 6em;
			}

			div.index > div {
				width: 22%;
				margin: 1.5ex 2%;
			}
		}

		@media only screen and (max-width: 1280px) {
			nav ul, div.top-image, #wrapper, footer {
				width: 80%;
				min-width: 360px;			
			}

			#wrapper {
				padding: 4em;
			}

			footer {
				padding: 4em 4em 6em;
			}
		}

		@media only screen and (max-width: 992px) {
			nav ul, div.top-image, #wrapper, footer {
				width: 100%;
				border-left: none;
				border-right: none;
			}

			div.top-image {
				height: 540px;
			}

			#wrapper {
				margin: 0;
				padding: 2em;
			}

			h2 {
				margin-top: 1em;
			}

			img {
				height: 100%;
				object-fit: cover;
			}

			div.index {
				flex-wrap: wrap;
			}

			div.index > div {
				width: 45%;
				margin: 1.5ex 5%;
			}

			div.index > div:nth-of-type(odd) {
				margin-left: 0;
			}

			div.index > div:nth-of-type(even) {
				margin-right: 0;
			}

			#introduction {
				flex-wrap: wrap;
			}

			div.chapters {
				width: 100%;
				margin-bottom: 1.5em;
			}

			div.prologue {
				width: 100%;
				padding-left: 0;
			}

			footer {
				padding: 3em 2em 5em;
			}
		}