.big {
	line-height: 1.5;
	font-size: 1.4em;
}

.mono {
	font-family: monospace;
}

.stretch {
	align-self: stretch;
}

.center {
	text-align: center;
}

.tip {
	display: block;
	margin: 0;
	margin-top: 1em;
	text-align: center;
	font: italic 0.8em serif;
	color: Gray;
}

* {
	scroll-margin: 5vh;
}

:target {
	outline: 2px dotted Blue;
	outline-offset: 0.5em;
}

.row,
.col {
	display: flex;
	gap: 2px;
	align-items: center;
	justify-content: space-around;
}

.col {
	flex-direction: column;
}

.hover {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
}

.hover > p {
	position: absolute;
	margin: 0;
	font-weight: bold;
	font-size: 5em;
	color: LightGray;
}

html {
	font-family: sans-serif;
	font-size: 12pt;
}

body {
	margin: auto;
	padding: 2em 3em;
}

figure {
	margin: 1em auto;
	max-width: 100%;
}

#bar {
	display: flex;
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0.2em 1em;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9em;
	border-bottom: 0.15em solid;
	background: White;
	color: Gray;
	pointer-events: none;
	z-index: 1;
}

#title {
	font-weight: bold;
}

h1 {
	margin: 3em 0 2em 0;
	text-align: center;
}

h1 > span {
	white-space: nowrap;
}

h2 {
	padding: 1em 2em;
	background: WhiteSmoke;
}

blockquote {
	margin: 1em 0;
	padding: 1em;
	line-height: 1.5;
	background: WhiteSmoke;
}

blockquote p:first-child::before,
blockquote p:last-child::after {
	font-size: 1.2em;
	line-height: 0;
}

blockquote p:first-child::before {
	content: "\275D";
}

blockquote p:last-child::after {
	content: "\275E";
}

details {
	padding: 1em;
	border: 1px solid LightGray;
}

summary {
	outline: none;
	cursor: pointer;
}

summary::marker,
summary::-webkit-details-marker {
	display: none;
}

details[open] > summary {
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid LightGray;
}

details[open] > summary > .tip {
	display: none;
}

q {
	font-weight: bold;
	font-size: 0.9em;
}

q::before {
	content: "\201C";
}

q::after {
	content: "\201D";
}

a {
	color: Blue;
}

a:hover {
	background: Blue;
	color: White;
}

img, video {
	max-width: 100%;
}

img {
	min-width: 0;
	cursor: zoom-in;
	object-fit: contain;
}

img.static {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	filter: brightness(0.8);
}

img.gif {
	position: relative;
}

.hover > img.gif {
	opacity: 0;
}

.hover > img.gif:hover {
	/* hack around flicker of resetting gif */
	opacity: 1;
}

#apology {
	align-items: flex-start;
}

#trx {
	flex: 0 0 30em;
	overflow: auto;
	border: 0.1em solid;
}

#trx table {
	border-spacing: 1em;
	font-size: inherit;
}

#trx td {
	vertical-align: top;
}

#trx td:first-child {
	line-height: 1rem;
	font-size: 0.9em;
	color: Gray;
}

#age {
	scroll-margin: 10vh;
}

#overlay {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	overflow: auto;
	background: rgba(0,0,0,0.9);
	z-index: 2;
}

#overlay:empty {
	display: none;
}

#audio {
	width: 100%;
	gap: 1em;
}

hr {
	margin: 2em 0;
}

ul {
	padding: 0;
	list-style-type: '-';
	font-size: 1.1em;
}

li {
	margin: 1em;
}

li > * {
	display: inline-block;
	margin-left: 1em;
}

#overlay {
	margin: 0;
}

#overlay > img {
	display: block;
	margin: auto;
	max-width: none;
	height: 100%;
	cursor: zoom-out;
}

#overlay > img.fit {
	--width: 100%;
}

@media screen and (orientation: portrait) {
	@media (max-width: 1200px) {
		img {
			width: 100%;
		}

		.row {
			flex-direction: column;
		}

		#trx {
			flex-basis: 15em;
		}
	}

	@media (max-width: 600px) {
		body {
			padding: 2px;
		}

		h1 {
			margin-top: 3.5em;
		}
	}
}

@media screen and
(min-width: 1200px), (orientation: landscape) {
	body {
		max-width: 1200px;
	}

	h1 {
		margin: 2em 3em;
	}

	ul {
		margin: 2em;
	}

	.size, .size > *,
	figure, figure > * {
		flex: var(--flex);
		width: var(--justify);
	}

	#apology {
		gap: 1em;
	}
}

@media screen and (orientation: landscape) {
	#overlay > img {
		width: var(--width);
	}
}

@media screen and (orientation: portrait) {
	#overlay > img {
		min-width: var(--width);
	}
}