inspire.css

/**
	Basic CSS so that the slideshow script functions as a slideshow
	@author Lea Verou
	@version 1.0
 */

:root {
	--transition-duration: .5s;
	--transition-properties: transform, opacity, left, top, right, bottom, background;
}

/**
 * Styles
 */

html,
body {
	height: 100%;
}

body {
	margin: 0;
}

.slide {
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	font-size: calc(100% + 1vw + 1vh);
	transition: var(--transition-duration);
	transition-property: var(--transition-properties);
}

/* So that people can override and do things like
   .slide { display: flex; }
   without having to specify :not(.target) all the bloody time
*/
@media screen {
	body:not(.show-thumbnails) .slide:not(.previous):not(:target):not(.next) {
		display: none !important;
	}
}

.slide.previous,
.slide:target,
.slide.next {
	visibility: hidden;
	overflow:hidden;
}

.slide:target {
	z-index: 100;
	opacity: 1;
	visibility: visible;
	overflow: auto;
}

/**
	Slide numbers
 */
#indicator {
	position: absolute;
	top: .2em;
	right: .5em;
	z-index: 1010;
	font-size: 2vh;
	text-align: center;
	font-weight: bold;
}

	#indicator::after {
		counter-reset: total var(--total);
		content: counter(total);
		display: block;
		border-top: 1px solid;
		line-height: 1.2;
		font-weight: 300;
	}

/**
	On-screen navigation
 */
#onscreen-nav {
	z-index: 1010;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1em 1.4em;
	font-size: 150%;
	opacity: 0;
	transition: 1s opacity;
}

#onscreen-nav.hidden {
	display: none;
}

@media (pointer: coarse) {
	#onscreen-nav.hidden {
		display: block;
		opacity: 1;
	}
}

#onscreen-nav:hover {
	opacity: 1;
}

	#onscreen-nav:not(:hover) button {
		margin-top: -1.5em;
		pointer-events: none;
	}

	button.onscreen-nav {
		padding: .2em .5em;
		border: 0;
		border-radius: .3em;
		background: rgba(0,0,0,.5);
		color: white;
		text-shadow: 0 -.05em .05em black;
		text-transform: uppercase;
		cursor: pointer;
	}

	button.onscreen-nav:hover {
		background: black;
	}

	button.onscreen-nav.prev {

	}

/* If there's nothing selected, show the first */
.slide:first-child {
	z-index: 2;
}

/* Delayed items that are shown incrementally after the slide is */
@media screen {
	.delayed,
	.delayed-children > * {
		opacity: 0;
		transition-property: var(--transition-properties);
	}

	.delayed.displayed,
	.delayed-children > .displayed {
		opacity: .3;
	}

	.delayed.current,
	.delayed-children > .current,
	.delayed.displayed.persistent,
	.delayed-children > .displayed.persistent,
	.delayed-children.persistent > .displayed {
		opacity: 1;
		transition-duration: var(--transition-duration);
	}
}

@media print {
	@page {
		size: landscape;
		margin: 0;
	}

	.slide.slide {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
		position: static;
		opacity: 1;
		visibility: visible;
	}

	#onscreen-nav,
	#indicator {
		display: none;
	}
}