html {
	scroll-behavior: smooth;
	height: 100%;
}

body {
	background-color: rgba(31, 31, 31, 1);
	color: rgba(255,255,255,1);
	font-family: "Quantico", "Play", "Roboto", Sans-serif;
	font-size: 1.2em;
}

#bodyBackgroundWrapper {
	position: fixed;
	left: 0vh;
	top: 0vh;
	height: 100vh;
	width: 100vw;
	overflow: hidden; /* Needed to hide the blurred edges of the wrapped background image. */
}

#bodyContentWrapper {
	overflow: hidden;
	position: relative;
	padding: 4vh 16vw;
	min-height: calc(100vh - 8vh - 1.75em); /* 1.75em is the footer height at one line. */
}

#bodyFooterWrapper {
	overflow: hidden;
	position: relative;
}

#bodyNavigationWrapper, #bodyLightboxWrapper, #bodyDialoguesWrapper{
	padding: 0vh 0vw;
	overflow: hidden;
	position: fixed;
	left: 0vh;
	top: 0vh;
	height: 100vh;
	width: 100vw;
	pointer-events: none;
}

#bodyLightboxesWrapper, #bodyDialoguesWrapper{
	pointer-events: none;
}

hr {
	border-width: 0px;
	height: 0.5vh;
	width: 90%;
	background-color: rgba(255, 255, 255, 1.0);
	margin: 8vh auto;
}

#mainPageIntro {
	height: 83.5vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: nowrap;
}

.scrollElement {
	scroll-margin-top: 1vh;
}

.pageStartScrollElement {
	scroll-margin-top: 1000vh;
}

.textDiv {
	background-color: rgba(0, 0, 0, 0.6);
	padding: 2vh;
	line-height: 1.2;
	margin: 0vh 0vh;
}

.textDivFixedMargin { /* Actual margins collapse around div elements, but not around images or videos, causing inconsistent spacing. */
	height: 1vh;
}

.textDivFixedMargin#pageStart {
	height: 0vh;
}

.textDivFixedMargin#pageEnd {
	height: 0vh;
}

.imageDiv, .videoDiv {
	margin-left: -1vh;
	margin-right: -1vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.imageDivItem, .videoDivItem {
	min-height: 0%;
	min-width: 0%;
	margin: 1vh;
}

.imageDivItem {
	max-height: 40vh;
	max-width: 48%;
	cursor: zoom-in;
}

.videoDivItem {
	max-height: 40vh;
	max-width: 100%;
}

.textDiv h1 { /* Page title. */
	font-size: 3em;
	margin-bottom: 0em;
	text-align: center;
	font-family: "Aldrich";
}

.textDiv h2 { /* Page subtitle */
	font-size: 2em;
	margin-bottom: 1em;
	text-align: center;
	font-family: "Aldrich";
}

.textDiv h3 { /* Section heading. */
	font-size: 2em;
	margin-bottom: 0.5em;
	text-align: center;
	font-family: "Aldrich";
}

.textDiv h4 { /* Project heading. */
	font-size: 2em;
	margin-bottom: 0.5em;
	font-family: "Aldrich";
}

.textDiv h5 { /* Section subheading. */
	font-size: 1.5em;
	margin-top: 1em;
}

.textDiv p {
	margin-top: 0.5em;
}

.textDiv p.pSpacedSmall, .textDiv p.pSpacedSmallIgnoreIndent {
	margin-top: 2em;
}

.textDiv p.pSpacedLarge, .textDiv p.pSpacedLargeIgnoreIndent {
	margin-top: 4em;
}

.textDiv ol {
	margin-left: 2em;
	list-style-type: upper-roman;
}

.textDiv ul {
	margin-left: 2em;
	list-style-type: square;
}

.textDiv p.pIndented, .textDiv p.pSpacedSmallIndented, .textDiv p.pSpacedLargeIndented {
	margin-left: 1em;
}

.textDiv ol.olIndented, .textDiv ul.ulIndented {
	margin-left: 3em;
}

.textDiv a:link {
	color: rgba(255, 187, 50, 1.0);
	text-decoration: none;
	font-weight: bold;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.textDiv a:visited {
	color: rgba(255, 118, 50, 1.0);
}

.textDiv a:hover {
	text-decoration: underline;
}

.textDiv a:active {
	color: rgba(255, 255, 255, 1.0);
}

.textDiv .linkDateDiv {
	margin-top: 2em;
}

.dateP {
	float: right;	
}

.linkP:nth-last-child(2) { /* The dateP will always be the last child. */
	float: left;	
}

.clearFloatDiv {
	clear:both;
}



/* Phones. */
@media (max-width: 70em) {
	
	body {
		font-size: 2em;
	}
	
	#bodyContentWrapper {
		padding: 2vw 2vw 10em; /* Extra room at the bottom, so the button for opening the sidebar doesn't cover part of the legal notice. */
		min-height: calc(100vh - 2vw - 10em - 3.25em);  /* 3.25em is the footer height at 2 lines. */
	}
	
	hr {
		width: 100%;
	}

	#mainPageIntro {
		height: auto;
		display: auto;
	}
	
	.imageDivItem, .videoDivItem {
		max-height: 80vh;
		max-width: 100%;
	}
	
	/* Landscape orientation. */
	@media (min-aspect-ratio: 5/3) {
		
		body {
			font-size: 1.2em;
		}
		
		#bodyContentWrapper {
			padding: 4vh 4vh 4.75em;
			min-height: calc(100vh - 4vh - 4.75em - 1.75em); /* 1.75em is the footer height at 1 line. */
		}
		
		.textDiv {
			padding: 2vw;
		}
		
		.scrollElement .textDiv, .pageStartScrollElement .textDiv {
			margin: 0vh 15vw;
		}
		
	}
	
}