* {
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	overflow: hidden;
	background-color: #000000;
	color: #ffffff;
}

/* Full-viewport stage: StPageFlip centres the book inside this box and
   clamps its height to the box, so the spread always fits the screen. */
.flipbook-viewport {
	width: 100%;
	height: 100%;
	padding: 2vmin;
	display: flex;
	align-items: center;
	justify-content: center;
}

#book {
	width: 100%;
	height: 100%;
}

#book .page {
	background-color: #ffffff;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Absolute so the library's shadow divs, appended as siblings,
   still paint over the scan. */
#book .page img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	margin: 0;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

/* Instructions page. It is a size container so the text can be sized in
   cqw and scale with the page exactly like the scans. The text sits in an
   inner box because StPageFlip overwrites the page's own inline style.
   The background is a hair lighter than the black body so the page edge
   stays visible (#121212 is Material Design's dark surface tone). */
#book .page-intro {
	background-color: #121212;
	color: #ffffff;
	container-type: size;
}

#book .page-intro-text {
	position: absolute;
	left: 7cqw;
	right: 7cqw;
	bottom: 9cqw;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 16px;
	font-size: 4.6cqw;
	line-height: 1.35;
}

#book .page-intro-text p + p {
	margin-top: 1.35em;
}