:root {
	--darkgray: #333333;
	--mediumgray: #555555;
	--lightgray: #EEEEEE;

	font-family: "Proxima Nova", sans-serif;
	font-size: 0.9rem;
}

/* BEGIN SMOOTHMENU STYLING */

nav { --entry-height: 1rem; }
nav ul { list-style-type: none; }
nav li > a {
	font-size: var(--entry-height); line-height: 2;
	height: calc(var(--entry-height) * 2);
	margin-bottom: calc(var(--entry-height) * 0.5);
}

/* END NEW NAV */

/* BEGIN MAJOR LAYOUT */

body { margin: 0; padding: 0; }

nav {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 80vw;

	padding: 50px 25px 50px 25px;
}

main {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 20vw;
	right: 0;

	padding: 50px 25vw 50px 25px;
	overflow: scroll;
	overflow-x: hidden;
}

.filling {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 20vw;
	padding: 25px;
}
#enhance .filling {
	left: 0;
}

/* END MAJOR LAYOUT */

/* BEGIN ELEMENT LAYOUT */

aside {
	padding: 0 50px 0 50px;
	font-style: italic;
}

iframe {
	width: 100%;
	aspect-ratio: 1.41;
	border: none;
}

.blockquoteImage { margin: 40px 0 40px 0; width: 113%; }
.blockquoteImage img { display: inline-block; width: 52.5%; }
.blockquoteImage blockquote {
	display: inline-block;
	vertical-align: top;
	width: 32.5%;
	margin: 2% 5% 2% 5%;
	text-align: right;
}
.blockquoteImage.reversed { margin-left: -3% }
.blockquoteImage.reversed blockquote { text-align: left; }

.audioNote { margin: 40px 0 40px -3%; width: 113%; }
.audioNote audio { display: inline-block; width: 54%; }
.audioNote aside {
	display: inline-block;
	vertical-align: top;
	width: 40%;
	margin: 0 3% 0 3%;
	padding: 0;
	text-align: right;
}
.audioNote.reversed aside { text-align: left; }
.audioNote audio { width: 60%; }
.audioNote aside { width: 34%; }

.ref { margin: 20px 5% 20px 5%; }

.floatLeft {
	float: left;
	width: 43%;
	padding: 0 15px 10px 0;
}
.floatRight {
	float: right;
	width: 43%;
	padding: 0 0 10px 15px;
}

/* END ELEMENT LAYOUT */

@media (orientation: portrait) {
	:root {
		font-size: 1.6em;
	}

	/* BEGIN MAJOR LAYOUT */

	nav {
		position: static;
		padding: 50px 25px 50px 25px;
	}
	main {
		position: static;
		padding: 50px 25px 50px 25px;
	}

	.filling {
		position: static;
		padding: 0;

		width: 100%;
		aspect-ratio: 1 / 1.5;
	}

	/* END MAJOR LAYOUT */

	/* BEGIN ELEMENT LAYOUT */

	.audioNote { margin: 40px 0 40px 0; width: 100%; }
	.audioNote audio { width: 100%; }
	.audioNote aside { margin: 20px; width: calc(100% - 40px); }
	.audioNote.reversed aside { text-align: left; }

	.blockquoteImage { margin: 40px 0 40px 0; width: 100%; }
	.blockquoteImage img { width: 100%; }
	.blockquoteImage blockquote {
		display: inline-block;
		width: 100%;
		margin: 40px 0 40px 0;
		text-align: right;
	}

	.blockquoteImage.reversed { margin-left: 0 }
	.blockquoteImage.reversed blockquote { text-align: left; }

	.floatLeft, .floatRight {
		float: none;
		width: 100% !important;
		padding: 0;
	}

	/* END ELEMENT LAYOUT */
}