:root {
	--width: 1280;
	--height: 720;
}

blockquote p {
	position: relative;
	padding: 2em 3em;
	font-style: italic;
}

blockquote ::before, blockquote ::after {
	font-size: 500%;
	position: absolute;
}

blockquote ::before {
	left: 0.1em;
	top: 0;
}

blockquote ::after {
	right: 0.1em;
	top: 0;
}

.color {
	width: 70%;
	margin: 1em auto;
	padding: 1em;
	border: 5px solid black;
	font-family: monospace;
	font-weight: bold;
}

.color.color-1 {
	background-color: salmon;
}

.color.color-2 {
	background-color: lightgoldenrodyellow;
}

#cascade {
	text-align: center;
}

h1 + .poster {
	height: calc(100% - 150px);
}

.slide:not(.current) #carousel { display: none; }

#carousel {
	display: flex;
	font-size: 200%;
	margin-top: 2em;
}

#carousel ul {
	position: relative;
	perspective: 300px;
	width: 5em;
	margin: 0 0.3em 0 0;
	padding: 0;
	list-style: none;
}

#carousel li {
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
	text-align: right;
	width: 100%;
	transition: all 1000ms;
	backface-visibility: hidden;
	--dir: -1;
	--dist: calc(var(--dir) * 1.5em);
	--angle: calc(var(--dir) * -95deg);
}

#carousel li:not(:nth-child(2)) {
	transform: translate(0, var(--dist)) rotateX(var(--angle));
}

#carousel li:nth-child(2) ~ li {
	--dir: 1;
}

.questions {
	margin-bottom: 0.4em;
	position: relative;
}

.copyright {
	font-size: 50%;
	opacity: 0.8;
}

.questions.no::before, .questions.no::after {
	content: "";
	position: absolute;
	left: 8px;
	width: 100%;
	height: 6px;
	background-color: red;
	transform-origin: 0 0;
	--angle: 11.7;
}

.questions.no::before {
	top: 0;
	transform: rotate(calc(var(--angle) * 1deg));
}

.questions.no::after {
	bottom: 0;
	transform: rotate(calc(var(--angle) * -1deg));
}