.material.slide {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	background: white;
	grid-gap: 1em;
	color: black;

	& video {
		grid-column: 1;
		grid-row: 1 / span 2;
		height: 100%;
	}

	& h1 {
		grid-column: 2;
		text-align: left;
		font-size: 280%;
		margin: 0;

		& .label {
			color: white;
		}

		/* No text, just a heading */
		&:nth-last-child(3) {
			grid-row-end: span 2;
		}
	}

	& p,
	& > div,
	& ul {
		grid-row: 2;
		grid-column: 2;
		align-self: start;
	}

	&.bg-video {
		padding: 0;
		grid-template-columns: 60vw 1fr;
		background: #E9E9E9;

		& video {
			position: absolute;
			left: -15vw;
		}

		& h1,
		& p,
		& > div {
			margin: 1rem;
			position: relative;
			z-index: 1;
		}
	}
}

.video.slide {
	& .caption {
		position: absolute;
		bottom: 1em;
	}
}

.minimal.demo.slide {
	& button {
		border-radius: .3em;
		padding: .3em .6em;
		text-transform: uppercase;
		font-weight: 500;
		cursor: pointer;
		border: none;
		background: hsl(var(--gray), 85%);
	}

	& .panel {
		position: relative;
		background: white;
		border-radius: .2em;
		border: 1px solid gray;
		margin-top: 1em;
		margin-right: 1em;
		color: black;
		padding: .5em;

		&::before {
			content: "";
			position: absolute;
			top: -.4em;
			left: 2em;
			padding: .4em;
			background: inherit;
			border: inherit;
			border-bottom: 0;
			border-right: 0;
			transform: rotate(45deg);

		}
	}
}

#circle {
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: radial-gradient(hsl(0 0% 100% / .5), transparent) var(--accent1);
}

#interpolation-examples,
#interpolation-examples-2 {
	padding: 5vmin;
	display: grid;
	grid-template-columns: auto auto;

	grid-gap: 0 2em;

	& h1 {
		margin: 0;
		grid-column: 1 / span 2;
	}

	& .progression:nth-of-type(odd) {
		grid-column: 1 / span 1;
	}

	& .progression:nth-of-type(even) {
		grid-column: 2;
	}
}

#gradient-animation {
	align-items: stretch;
	grid-template-columns: 1fr 10vw;

	& .container {
		width: 100%;
		height: 100%;
	}
}

#easing-in-css {
	& .editor-container {
		width: 60vw;
		height: calc(7 * 1.55em);
	}
}

.progression {
	font: 100% Monaco, Consolas, monospace;
	white-space: pre-line;
	text-align: right;
	font-size: 90%;
}

	.progression > .interpolated {
		color: hsla(0,0%,100%,.5);
	}

	.progression > .property {
		color: var(--accent1-light);
	}

	.progression > .start-value,
	.progression > .end-value {
		white-space: nowrap;
	}

	.progression > .end-value:before {
		content: 'to ';
		color: var(--accent1-light);
		font-style: italic;
	}

#easing {
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: #F0F0F0;
	color: black;

	& h1 {
		margin-bottom: 0;
	}

	& p {
		margin: 0;

		& .delayed {
			transition-property: font-size;

			&:not(.current) {
				font-size: 0;
			}
		}
	}

	& video {
		height: 100%;
		margin: 0 auto;
	}

}

#fbf {
	display: grid;
	grid-template-columns: 1fr minmax(auto, 1fr);
	grid-template-rows: auto 1fr;
	align-items: start;
	background: linear-gradient(to right, hsl(var(--gray), 95%) 50%, transparent);

	& header {
		grid-column: 1 / span 2;
	}

	& .editor-container {
		grid-column: 1;
		grid-row: 2;
	}

	& textarea {
		caret-color: black !important;
	}

	& #wave {
		transform: scale(3);
		margin-top: 5em;
		outline: 1px dashed black;
	}

	& figure {
		position: relative;
		width: fit-content;
		margin: auto;
		text-align: center;
		transition: 1s transform;
		z-index: 1;
		transform-origin: top right;

		&:hover {
			transform: scale(3);
		}

		& img {
			background: white;
			box-shadow: .05em .1em .3em rgb(0 0 0 / .3);
		}

		& figcaption {
			font-weight: bold;
			font-size: 70%;
		}
	}

	& .editor-container {
		width: 70vw;
		height: calc(100vh - 3em);
	}
}

#typing-animation {
	& h1 {
		font: bold 200% Consolas, Monaco, monospace;
		white-space: nowrap;
		overflow: hidden;
	}

	& .editor-container {
		width: 90vw;
		height: calc(100vh - 3em);
	}
}

#appropriate-animation {
	& .delayed.slow {
		transition-duration: 5s;
	}

	& .delayed.fast {
		transition-duration: 300ms;

		&:not(.current):not(.displayed) {
			transform: translateY(-100vh);
		}
	}
}

.browser:nth-child(-n + 2):nth-last-child(-n + 2) {
	& > iframe:only-child {
		width: 80vw;
		height: 80vh;
	}

	& + .caption {
		position: absolute;
		bottom: 1em;
		left: 0;
		right: 0;
	}
}

#bathwater {
	background: url(img/baby-bathwater.jpg) bottom / cover;
	color: black;
	justify-content: start;
}

twitter-widget {
	transform: scale(1.4) !important;
}

@keyframes slide-in-right {
	from {
		right: -1em;
	}

	to {
		right: 1em;
	}
}

@keyframes slide-out-right {
	from {
		right: 1em;
	}

	to {
		right: -1em;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

/* Source: https://jarv.is/notes/css-waving-hand-emoji/ */
@keyframes wave {
	from, 60%, to { transform: rotate( 0deg) }
	10%, 30% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
	20% { transform: rotate(-8.0deg) }
	40% { transform: rotate(-4.0deg) }
	50% { transform: rotate(10.0deg) }
}

.emoji {
	font-size: 200%;
}

#peripheral-vision {
	align-items: start;
	justify-content: start;
	overflow: hidden;

	& blockquote {
		margin: 0;
		font-size: 70%;
		max-width: 57ch;
		font-weight: 400;
		hyphens: auto;

		& > p:first-child {
			margin-top: 0;
		}

		&::before {
			content: none;
		}
	}

	& .emoji {
		position: absolute;
		right: -1em;
		top: calc(50% - .5em);
		transform-origin: bottom right;
		opacity: 1;
	}

	& .emoji.fade {
		opacity: 0;
		right: 1em;

		&.current {
			animation: fade-in 5s forwards, fade-out 4s 5.5s forwards;
		}
	}

	& .emoji.slow.current {
		animation: slide-in-right 5s forwards, slide-out-right 4s 5.5s forwards;
	}

	& .emoji.fast.current {
		animation:
			slide-in-right 2s forwards,
			wave 1.2s 2s 3,
			slide-out-right 2s 5s forwards;
	}
}

#css-animations .editor-container {
	width: 60vw;
}

#showing-content-smoothly {
	& .demo-target {
		justify-content: start;
	}
}