/*
** Stylesheet to style HTML structured as
**
** <article>
**   <section> (title slide) </section>
**   <section> (slide 2) </section>
**   <section> (slide ...n) </section>
** </article>
** 
** into a basic "slide deck presentation".
**
** Michael Thornburgh, <zenomt@zenomt.com>
**
** Based on "Creating a Slide Deck with Just HTML and CSS"
** by Nathan Knowler, https://codepen.io/knowler/pen/eYGRwyb
*/

* { box-sizing: border-box; }

:root {
	font-family: Avenir Next, Arial, Helvetica, system-ui;
}

html, body {
	block-size: 100%;
	counter-reset: slide;
	margin: 0;
}

@media screen {
	article {
		block-size: 100%;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		scroll-snap-type: y mandatory;
	}
}

h1, h2 { font-size: 120%; }

section > * { margin: 0 0 2vh; }

/* Show the slide counter */
article > ::before {
	content: counter(slide);
	position: absolute;
	inset-block-end: 1vh;
	inset-inline-end: 1vh;
	padding: 1.5vh;
	font-size: 3.0vmin;
	font-weight: 700;
	font-variant: tabular-nums;
	line-height: 1;
}

section {
	flex: 0 0 100%;
	scroll-snap-align: start;
	block-size: 100%;
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5vw;
	break-before: page;
	counter-increment: slide;
	max-height: 100vh;
	contain: layout;
}

/* Title slide layout */
section:first-of-type {
	display: grid;
	place-content: center;
	text-align: center;
	font-size: 7.0vmin;
	line-height: 1.1;
}

section:first-of-type > * { margin: 0; }

/* Regular slide layout */

/* Put regular slide first element at the top */

section:nth-of-type(n+2) {
	align-content: center;
	justify-content: start;
	text-align: left;
	font-size: 5.0vmin;
	line-height: 1.3;
}

section:nth-of-type(n+2) > :first-child {
	flex: 0 0 auto;
	margin-bottom: 0;
	width: 100%;
}

section:nth-of-type(n+2) > :not(:first-child) {
	flex: 0 0 1fr;
	margin-inline: 2.5vw;
}

/* Center the 2nd through last items in the space after the first item */
section:nth-of-type(n+2) > :nth-child(2) { margin-top: auto; }
section:nth-of-type(n+2) > :last-child { margin-bottom: auto; }

p {
	min-height: 0;
	max-height: 100%;
}

pre { font-size: 2.5vmin; }

svg, img {
	padding: 2vh 0;
	margin: 0;
	min-height: 0;
	max-height: 100%;
	min-width: 0;
	max-width: 100%;
	object-fit: contain;
}

p :is(img, svg) {
	width: 100%;
	height: 100%;
}

ul > li > ul { list-style-type: square; }

ul, ol { padding-left: 4vw; }

section > :is(ul, ol) { padding-right: 4vw; }

blockquote {
	padding: 0 2vw;
	border-left: 0.75vw solid;
	font-size: larger;
}

blockquote > * { margin: 0 }

table {
	font-size: 2.5vmin;
	border-collapse: collapse;
	color: inherit;
}

th, td {
	padding: 1vh;
	border: 0.25vh solid;
}