extras.css

/* Mark slides as incomplete to spot them easier */
.incomplete.slide::after {
	content: 'INCOMPLETE';
	font-weight: bold;
	position: absolute;
	top: 40%;
	left: 30%;
	padding: .1em .4em 0;
	border: .1em solid;
	color: rgba(255, 0, 0, .8);
	font-size: 140%;
	border-radius: .2em;
	transform: rotate(30deg);
}

/* Ribbon */
[data-type].slide::after,
.ribbon {
	content: attr(data-type);
	position: fixed;
	top: 0;
	right: 0;

	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	background: var(--accent2);
	background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
	font-size: 80%;
	line-height: 1.6;
	min-width: 20em;
	box-shadow: 0 10px 5px -5px rgba(0,0,0,.3);
	transform: rotate(45deg) translate(6em, -2em);
}

/* Full image slides */

.image.slide {
	padding: 0;
	background: center / cover no-repeat black;
	image-rendering: crisp-edges;
}

.bottom-heavy.image.slide {
	background-position: center bottom;
}

.top-heavy.image.slide {
	background-position: center top;
}

	.slide > .caption,
	.image.slide > h1:only-child {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		width: 100%;
		padding: .2em 0;
		margin: 0;
		margin-top: calc(50vh - 1em);
		text-align: center;
		font-family: inherit;
		font-weight: inherit;
		color: white;
		background: rgba(0,0,0,.4);
		text-shadow: 0 .05em .1em rgba(0,0,0,.3);
		white-space: nowrap;
	}

	.slide > .caption,
	.image.slide > h1:only-child {
		font-size: 200%;
		line-height: 1.2;
	}

	.top-heavy.image.slide > .caption,
	.top-heavy.image.slide > h1:only-child {
		position: fixed;
		left: 0; right: 0;
		bottom: .5in;
	}

	.bottom-heavy.image.slide > .caption,
	.bottom-heavy.image.slide > h1:only-child {
		margin: .5in 0 0;
	}

		.slide > .caption h1 {
			font: inherit;
			margin-bottom: 0;
		}

		.slide > .caption h1 + a {
			font-size: 30%;
			display: block;
			text-shadow: inherit;
		}

.slide[data-credits]:after {
	content: "Media credits: " attr(data-credits);
	position: absolute;
	bottom: 5px;
	right: 10px;
	z-index: 100;
	color: white;
	font-size: 15px;
	font-weight: 300;
	text-shadow: 0 0 .1em black;
	text-shadow: 0 0 .1em .1em black;
}

.image.slide > h1:only-child,
.slide > .caption {
	text-shadow: none;
	background: rgba(0,0,0,.5);
}

kbd {
	display: inline-block;
	padding: 0 .4em;
	border: 1px solid rgba(0,0,0,.8);
	border-radius: .15em;
	box-shadow: 0 0 0 2px white inset, 0 .05em .2em rgba(0,0,0,.5);
	color: black;
	background-color: hsla(0,0%,100%,.85);
	font: 70%/1.6 sans-serif;
	font-family: inherit;
	text-shadow: 0 1px 0 white;
}

	kbd + kbd {
		margin-left: .1em;
	}