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

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

body { margin: 0; padding: 0; }

h3 { font-size: 1.5em }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
b {
	font-weight: 600;
	color: black;
}
p { text-indent: 1.5em; }
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p,
p:first-of-type { text-indent: 0; }

/*
 * Within the nav menu:
 * Links will be colored dark gray and go a slightly lighter gray when hovered
 * to signal that they are links
 * dropdowns will be followed by an ellipsis and will be black
 */

/* clean up lists and the details tag */
nav ul {
	list-style-type: none;
	padding-inline-start: 20px;
}
nav > ul { padding-inline-start: 0px; }
nav summary { list-style-type: none; }
nav summary:hover { color: var(--darkgray); }

li > details { height: calc(1em + 10px); }

.menuBox > ul > li > a,
.menuBox > ul > li > details > summary { font-weight: 600; }
.menuBox { font-size: 1.1em; }

nav li { margin-top: 10px; }
nav details li:last-child { margin-bottom: 20px; }
nav details { transition: height 0.35s; }

/* link styling */
nav a:link, nav a:visited, nav a:focus {
	color: var(--darkgray);
	text-decoration: none;
}

nav a:hover {
	color: var(--mediumgray);
}

/* COMMON link styling */
a:link, a:visited, a:focus {
	color: var(--darkgray);
	text-decoration: none;
}

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

/* hgroup styling */
nav h1 {
	font-size: 1.3em;
}

/*
 *    Will be using the nav and the main tags side by side
 *
 *    crj |              |
 *    ----| slideshow    |
 *    nav |--------------|
 *        |              |
 *        |              |
 */

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

	padding: 50px 25px 50px 25px;
	overflow: hidden;
}

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

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

nav > *:first-child, main > *:first-child { margin-top: 0; }

/* heading styling in the body */

main h2 {
	text-align: center;
	font-size: 3em;
	/*font-family: "Lust Text";*/
}

/* description list styling */
dt { font-weight: 600; }
dd { margin-bottom: 1em; }

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

iframe {
	width: 100%;
	aspect-ratio: 1.41;
	border: 1px solid var(--mediumgray);
}

blockquote {
	color: var(--darkgray);
	font-style: italic;
}

.smallTitle {
	text-align: center;
	font-weight: 600;
}

/* slideshow styling */
.slideshow {
	margin: 0;
	margin-top: 50px;
	margin-bottom: calc(30px + 25px);
	width: calc(55vw - 25px);
	height: calc((55vw - 25px) / 1.5);
	display: flex;
	cursor: zoom-in;
}
.slideshow.full {
	--full-overhang: 18vw;
	margin-right: calc(-1 * var(--full-overhang));
	width: calc(55vw - 25px + var(--full-overhang));
	height: calc(100vh - 100px);
}
.slideshow > *:not(span) {
	display: inline-block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.slideshow > span {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	width: 27%;
	height: 100%;
	line-height: 100%;
	z-index: 0;
	color: var(--darkgray);
	flex-wrap: nowrap;
	transition: opacity 0.5s;
}
.slideshow > span:hover { opacity: 0.65; }
.slideshow > span > img {
	height: 1em;
	pointer-events: none;
}
.prev {
	justify-content: flex-end;
	margin-left: -2%;
	margin-right: -25%;
	cursor: w-resize;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.next {
	justify-content: flex-end;
	margin-left: -25%;
	margin-right: -2%;
	cursor: e-resize;
}

.slideshow:first-child { margin-top: 0; }

.centering {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.centering * { display: inline-block; }

/* block-quote by image */
.blockquoteImage {
	width: 113%;
	margin: 40px 0 40px 0;
}
.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;
}

/* audio player next to text */
.audioNote {
	width: 113%;
	margin: 40px 0 40px -3%;
}
.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%; }

/* styling the dimmer */
#dim {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(51,51,51,0);
	backdrop-filter: blur(0px);
	transition: background-color 0.5s, backdrop-filter 0.5s;
	cursor: zoom-out;
}
#dim span {
	position: absolute;
	top: 20px;
	left: 20px;
	color: white;
	font-size: 1.2em;
	cursor: pointer;
	opacity: inherit;
}
#dim span:hover { color: lightgray; }
#enlargeCopy {
	pointer-events: none;
}

/* caption styling */
.caption {
	display: block;
	color: white;
	background-color: black;
	padding: 2px;
}
.caption:last-child {
}

/* reference styling */
*:target {
	background-color: lightgray;
}
.ref {
	margin: 20px 5% 20px 5%;
}

/* attribution figure */
.attributionFigure { margin-bottom: -1.4em; }
.attributionFigure figcaption {
	display: inline-block;
	height: 1em;
	width: auto;
	margin: 0;
	margin-bottom: -1.4em;
	padding: 0.2em;
	transform: translate(20px, calc(-20px - 1em));

	color: rgba(255,255,255,0.5);
	background-color: rgba(0,0,0,0.5);
	font-style: italic;
}

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

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

.menuBack { display: none; }
.menuBar { display: none; }

#enlargeCopyBox { pointer-events: none; }
#enlargeCopy {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#enlargeCopyBox > span {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	width: 27%;
	height: 100%;
	line-height: 100%;
	z-index: 0;
	color: var(--darkgray);
	flex-wrap: nowrap;
	transition: opacity 0.5s;
}
#enlargeCopyBox .prev {
	justify-content: flex-end;
	margin-left: -2%;
	margin-right: -25%;
	cursor: w-resize;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
#enlargeCopyBox .next {
	justify-content: flex-end;
	margin-left: -25%;
	margin-right: -2%;
	cursor: e-resize;
}


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

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

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

	.blockquoteImage {
		width: 100%;
		margin: 40px 0 40px 0;
	}
	.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;
	}

	.slideshow, .slideshow.full {
		margin: 0;
		margin-top: 50px;
		margin-bottom: calc(30px + 25px);
		width: calc(100vw - 50px);
		height: calc((100vw - 50px) / 1.5);
	}
	.slideshow > *:not(span) {
		display: inline-block;
		width: 92%;
		height: 100%;
		object-fit: contain;
	}
	.slideshow > span {
		position: relative;
		display: inline-flex;
		align-items: center;
		vertical-align: top;
		width: 27%;
		height: 100%;
		line-height: 100%;
		z-index: 0;
		cursor: pointer;
		color: var(--darkgray)
	}
	.prev {
		margin-left: -2%;
		margin-right: -22%;
	}
	.next {
		margin-left: -22%;
		margin-right: -2%;
	}

	/* MENU RELATED RULES */
	.menuBar {
		display: block;
		color: white;
		background-color: var(--darkgray);
		margin: 0 -25px 0 -25px;
		padding: 25px 50px 25px 50px;
		cursor: pointer;
	}
	.menuBox {
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		display: none;
		align-items: center;
		justify-content: center;
		font-size: 1.5em;
		line-height: 1.5em;
		opacity: 0;
		z-index: 100;

		color: white;
		background-color: var(--darkgray);
		transition: opacity 0.5s;
	}
	.menuBox summary:hover { color: var(--lightgray); }
	.menuBox a:link, .menuBox a:visited, .menuBox a:focus { color: var(--lightgray); }
	.menuBox a:hover { color: white; }
	.menuBack { display: block; }
	.menuBack img {
		cursor: pointer;
		height: 0.75em;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.slideshow { height: calc(55vw - 25px); }
	.slideshow.full { height: calc((55vw - 25px + var(--full-overhang)) * 1.5); }

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

@media (orientation: landscape) {
	.scroll { overflow: scroll; }
	img:not(.menuBack > img) { cursor: zoom-in; }

	main:has(> .full) {
		overflow: hidden;
	}

	.menuBox { margin-bottom: 15em; }
}