#form-function {
	padding: 0;
	overflow: hidden;
	background: hsl(0 0% 45%);

	& .good,
	& .bad {
		display: flex;
		flex-flow: column;
		align-items: center;
		width: 100%;
		height: 50%;
		box-sizing: border-box;
		padding: 1em;
		transition-duration: .3s;
	}

	& .good {
		background: white;
		color: black;
		justify-content: end;

		& h1 {
			margin-top: .5em;
		}

		&.delayed:not(.current, .displayed) {
			transform: translateY(-50vh);
		}
	}

	& .bad {
		background: black;
		color: white;
		justify-content: start;

		& h1 {
			margin-bottom: .5em;
		}

		&.delayed:not(.current, .displayed) {
			transform: translateY(50vh);
		}
	}

	& h1 {
		font-weight: 300;
		font-size: 200%;
		margin: 0;
	}

	& .examples {
		display: flex;
		gap: .1em;

		& > img,
		& > video {
			height: calc(50vh - 6em);
		}
	}
}

#design-not-art {
	background: linear-gradient(100deg, #46473B 40%, transparent 52%), url("img/duchamp.jpg") no-repeat right / contain #46473B;
	align-items: start;

	& h1 {
		font-size: 300%;
	}
}

[id^="form-simplicity"] {

}

	[id^="form-simplicity"] form {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: .2em .5em;
		font-weight: normal;
		font-size: 120%;
	}

	[id="form-simplicity"] form {
		grid-template-columns: auto 1fr;
	}

		[id^="form-simplicity"] input {
			border: 1px rgba(0,0,0,.2) solid;
			background: white;
		}

		[id^="form-simplicity"] input::placeholder {
			color: rgba(0,0,0,.3);
		}

input[type=checkbox].switch {
	--off-c: var(--off-color, hsl(20, 100%, 50%));
	--on-c: var(--on-color, hsl(160, 60%, 50%));
	--color: var(--off-c);
	--duration: .4s;
	position: relative;
	-webkit-appearance: none;
	padding: 1px;
	margin: .1em;
	background: linear-gradient(to right, var(--off-c) 50%, var(--on-c) 0);
	background-size: 200% 100%;
	background-position: .5em 0;
	background-color: var(--off-c);
	color: white;
	font-size: 200%;
	border-radius: 1em;
	width: 3em;
	overflow: hidden;
	box-shadow: 0 0 .5em rgba(0,0,0,.1) inset,
				0 0 0 1px rgba(0,0,0,.2) inset;
	outline: none;
	transition: var(--duration) background-position;

	&:checked {
		--color: var(--on-c);
		background-position-x: 2.5em;
	}

	&::before,
	&::after {
		transition: var(--duration) left;
	}

	&::before {
		content: "";
		position: relative;
		left: 0;
		z-index: 1;
		display: block;
		width: 1em;
		height: 1em;
		border-radius: 1em;
		background: white;
		box-shadow: 0 .05em .1em rgba(0,0,0,.2),
					0 0 0 1px rgba(0,0,0,.2),
					0 0 0 1px var(--color);
	}

	&:checked::before {
		left: calc(2em - 2px);
	}

	&:not(.no-text) {
		&::after {
			content: "ON           OFF";
			white-space: pre;
			position: absolute;
			left: -3em;
			top: .05em;
			padding: 0 .7em;
			font: bold 60%/1.6 Helvetica Neue, Helvetica, sans-serif;
		}

		&:checked::after {
			left: 0;
		}
	}
}

.options {
	display: flex;
	counter-reset: option;
}

	.options > div {
		counter-increment: option;
		flex: 1;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		margin: 1em;
	}

	.options > div::before {
		content: counter(option, upper-latin);
		font-weight: bold;
		color: white;
		background: black;
		mix-blend-mode: multiply;
		border-radius: 1em;
		width: 1em;
		line-height: 1;
		padding: .2em;
		margin-bottom: 1em;
		text-align: center;
	}

#simplicity h1 strong {
	display: block;
	font-size: 58%;
	letter-spacing: -.04em;
}

#shapes {
	flex-flow: row;
}

	#shapes div {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30vmin;
		height: 30vmin;
		margin: 1em;
		background: black;
		transition: .5s border-radius;
		color: white;
		mix-blend-mode: multiply;
		font-weight: bold;
		font-size: 150%;
	}

	#shapes div.delayed:not(.current) {
		opacity: 1;
		border-radius: 50%;
	}

@keyframes optical-type {
	30% {
		transform: scale(5);
	}

	to {
		transform: scale(5) translateX(-2em);
	}
}

.optical-type.slide {
	overflow: hidden;

	& h1 {
		position: relative;
		font-weight: bold;
		font-size: 500%;
		letter-spacing: -.04em;
		margin: 0;
		transition: .5s transform;
		transform-origin: 30% 50%;

		&.current {
			animation: optical-type 3s both;
		}

		&::after {
			content: "";
			border-top: 1px dashed red;
			border-bottom: 1px dashed red;
			height: 1ex;
			box-sizing: border-box;
			position: absolute;
			left: -1em;
			right: -1em;
			top: var(--top, .46em);
		}
	}

	& .delayed {
		opacity: 1;
	}
}

#padding {}

	#padding button {
		border: 0;
		background: slategray;
		color: white;
		margin: .5em;
	}

	#padding .delayed {
		opacity: 1;
	}

	#padding .current button {
		background: linear-gradient(slategray, slategray) content-box, hsl(118, 13%, 59%);
	}

.comparison {
	display: flex;
	flex-flow: row;
}

	.comparison > div {
		display: flex;
		align-items: center;
		justify-content: center;
	}

#visual-weight {

}

	#visual-weight > .comparison > div {
		background: hsl(30, 15%, 50%);
		width: 1em;
		height: 1em;
		padding: .5em;
		margin: 0 .5em;
		font-size: 400%;
		border-radius: 50%;
	}

	#visual-weight > .comparison > div::before {
		content: "";
		display: block;
		background: conic-gradient(from 240deg at right, var(--color-beige, white) 60deg, transparent 0);

		--size: 1em;
		width: 1em;
		height: calc(var(--size) * 1.18);
	}

	#visual-weight > .comparison > div + div::before {
		margin-right: -.3em;
	}

	#visual-weight[data-step] > .comparison > div,
	#visual-weight[data-step] > .comparison > div::before {
		outline: 1px dashed black;
	}

	#optical header.slide {
		background: hsl(20, 40%, 70%);

		& h1 {
			position: relative;
			width: 5em;
			background: none;
			color: hsl(0, 40%, 30%);
			font-weight: bold;
			letter-spacing: -.03em;
			font-size: 400%;
			line-height: 1;
			padding: .1em 0;
			opacity: 1;
			text-indent: -.13em;

			&.current::before {
				content: "";
				position: absolute;
				top: 0; bottom: 0;
				left: 0;
				right: .085em;
				border: dashed white;
				border-width: 0 2px;
				mix-blend-mode: difference;
			}

			&::first-line {
				font-size: 142%;
			}
		}

		& svg {
			width: 90vw;
		}
	}

		#eye-white {
			fill: white;
		}

		#iris {
			stroke: hsl(200, 50%, 50%);
			stroke-width: 14;
			fill: black;
		}

		@keyframes look {
			from, 30% { cx: 25px; }
			to, 60% { cx: 75px; }
		}

		.iris {
			animation: look 3s infinite alternate ease-in-out;
		}

		.second-eye {
			x: 150px;
		}

#safari-6-devtools {
	background-image: url(img/safari6-devtools.jpg);
	background-position: left bottom;
	background-size: 100% auto;
	transition: .5s background;
}

	#safari-6-devtools[data-step] {
		background-size: 200% auto;
	}

	#safari-6-devtools[data-step~="2"] {
		background-position: right bottom;
	}

#simplicity header.slide {
	background: black;
}

	#simplicity header.slide h1 {
		font-size: 400%;
	}

#directplastics .ribbon {
	font-size: 60%;
}

#nine-dots {}

	.dots {
		display: grid;
		grid-template: repeat(3, auto) / repeat(3, auto);
		grid-gap: 15vmin;
	}

	.dot {
		position: relative;
		top: 0;
		left: 0;
		background: white;
		border-radius: 50%;
		width: 10vmin;
		height: 10vmin;
		transition: .6s;
		transition-property: left, top, border-radius, background;
	}

	/* Random */
	#nine-dots:not([data-step]) .dot:nth-child(odd) {
		top: 6vmin;
		left: -7vmin;
	}

	#nine-dots:not([data-step]) .dot:nth-child(even) {
		top: -7vmin;
		left: 5vmin;
	}

	#nine-dots:not([data-step]) .dot:nth-child(3n) {
		top: 5vmin;
	}

	#nine-dots:not([data-step]) .dot:nth-child(3n - 1) {
		left: 5vmin;
	}

	#nine-dots:not([data-step]) .dot.dot-4 {
		top: 5vmin;
	}

	#nine-dots:not([data-step]) .dot.dot-5 {
		top: -5vmin;
	}

	#nine-dots[data-step]:not([data-step="1"])  .dot {
		left: -10vmin;
	}

	#nine-dots[data-step]:not([data-step="1"]) .dot:not(:nth-child(3n + 1)) {
		left: 10vmin;
	}

	#nine-dots[data-step$="3"] .dot-1,
	#nine-dots[data-step$="3"] .dot-5,
	#nine-dots[data-step$="3"] .dot-6,
	#nine-dots[data-step$="3"] .dot-8 {
		background: var(--color-orange);
	}

	#nine-dots[data-step$="4"] .dot-1,
	#nine-dots[data-step$="4"] .dot-5,
	#nine-dots[data-step$="4"] .dot-6,
	#nine-dots[data-step$="4"] .dot-8 {
		border-radius: 0;
	}

#closure {
	flex-flow: row;
	justify-content: space-around;
	background: white;
}

	#closure img {
		height: 30vh;
	}

	#closure img[src*=wwf] {
		height: 35vh;
	}

	#closure img[src*=ibm] {
		height: 20vh;
	}

#principle-frequency {

	& .bar-chart {
		margin-bottom: 6em;
		height: calc(100vh - 16em);

		--cutoff: 60;
		--bar-width: 1.4em;
		--bar-spacing: .45em;
	}
}

header.slide[data-type="Design Principle"] {
	background: black;

	& h1,
	& p {
		margin: 0;
	}

	& h1 {
		padding: 0 .3em;
		font-size: 500%;
		white-space: nowrap;
		font-weight: 300;
	}

	& p {
		font-weight: bold;
		letter-spacing: -.02em;
		font-size: 150%;
		line-height: 1.1;
		text-align: center;
	}

	& > div {
		width: min-content;
	}

	&::after {
		padding: .3em 6em;
		width: 20em;
		box-sizing: border-box;

		&::first-line {
			font-size: 150%;
		}
	}
}

#contrast {
	&:not([data-step]) {
		& h1 {
			font-size: 200%;

			font-weight: 500;
		}

		& p {
			font-weight: 400;
		}
	}

	& h1 {
		min-width: 50rem;
	}

	& h1,
	& p {
		transition: 1s;
		transition-property: font-size;
	}
}

#proximity {
	&:not([data-step]) {
		& h1 {
			margin-bottom: 1em;
		}

		& p {
			margin-top: 1em;
		}
	}

	& h1,
	& p {
		transition: 1s margin;
	}
}

#alignment {
	overflow: hidden;

	&:not([data-step]) {
		& h1 {
			padding-right: 1em;
			margin-right: 1em;
		}
	}

	& h1,
	& p {
		text-align: right;
		position: relative;
	}

	& h1 {
		padding: 0;
		margin: 0;
		margin-right: -.11em; /* account for t */
		transition: 1s;
	}

	& p {
		width: 17em;

		&::before {
			content: "";
			position: absolute;
			top: -60vh; left: 100%;
			z-index: -1;
			width: 1vw;
			height: 1vh;
			transition: 1s height, 1s background, 1s 1s width;
		}
	}

	&[data-step~="1"] {
		& .punctuation {
			position: absolute;
		}
	}

	&[data-step$="2"] {
		& p::before {
			background: hsl(220, 10%, 35%);
			width: 30vw;
			height: 110vh;
		}
	}
}

#contrast-how {
	& > article {
		background: white;
		color: black;
		text-align: center;
		margin: 0;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;

		& > h2,
		& > p {
			margin: 0;
			color: inherit;
			font: inherit;
			line-height: 1;
		}
	}
}

#contrast-context {
	& figure {
		display: flex;
		align-items: center;
	}
}

.circle {
	margin: 0 .5em;
	width: 0;
	background: hsl(220, 10%, 50%);
	border-radius: 50%;
	padding: 1em;


	&.big {
		padding: 2.5em;

		&.delayed {
			background: black;
		}
	}
}

#contrast-vs-conflict {
	& h2 {
		all: unset;
		font-size: 120%;
		margin: 0;
		white-space: nowrap;
		transition: 1s font-size;
	}

	& p {
		margin: 0;
	}

	& .side-by-side {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 50vh;
		grid-gap: 1em;

		& > div {
			margin: 0;
			background: hsla(0,0%,100%,.2);
			padding: 2em;
		}
	}

	& .circles {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	& .small.circle {
		padding: 2em;
		transition: 1s padding;
		background: var(--color-green);
	}

	& .big.circle {
		background: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.3)) var(--color-green);
	}

	&[data-step] {
		& h2 {
			font-size: 200%;
			font-weight: bold;
		}

		& .small.circle {
			padding: 1em;
		}

		& .big.circle {
			background: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.6)) var(--color-green);
		}
	}
}

#contrast-rule {
	& article {
		background: white;
		color: black;
		padding: 1em;

		& h2 {
			all: unset;
			display: block;
			font-weight: bold;
		}

		& h2,
		& ul {
			border-bottom: 4px solid;
		}

		& ul {
			list-style: none;
			padding-left: 0;
			margin: 0;
		}

		& li {
			padding: .3em;

			&:not(:last-child) {
				border-bottom: 2px solid;
			}
		}

		&:nth-child(2) {
			& h2 {
				font-size: 200%;
				font-weight: 900;
				line-height: 1;
			}

			& h2,
			& ul {
				border-bottom-width: 10px;
			}

			& li {
				border-bottom-width: 1px;
			}
		}
	}
}

#too-many-variables {
	& article {
		background: white;
		color: black;
		padding: 1em;
		font-size: 80%;

		& h2 {
			all: unset;
			display: block;
			font-weight: bold;
			margin: 0 0 .3em;
			line-height: 1;
			letter-spacing: -.02em;
		}

		& p {
			margin: 0;
		}
	}

	& article:nth-of-type(n + 2) {
		& h2 {
			font-size: 200%;
		}
	}

	& article:nth-of-type(n + 3) {
		& h2 {
			color: var(--accent4);
		}
	}

	& article:nth-of-type(n + 4) {
		& p {
			font-family: Garamond, serif;
		}
	}

	& article:nth-of-type(n + 5) {
		& h2 {
			text-transform: uppercase;
			letter-spacing: .2em;
		}
	}

	& article:nth-of-type(n + 6) {
		& p {
			font-style: italic;
		}
	}
}

#repetition-as-consistency {
	align-items: start;
	background: url(img/increment-issues.png) 200% / auto 100% no-repeat #F2F2F2;

	& h1 {
		max-width: 5em;
		text-align: left;
		color: black;
	}
}

#repetition-in-action {
	& h1 > div {
		display: inline-flex;
		vertical-align: middle;
	}

	& > div {
		text-align: center;
	}

	& button {
		font-size: 40%;
		font-weight: bold;
		background: none;
		padding: .1em .3em;
		border: 2px solid;
		border-radius: .2em;
		margin: 0 .3em;
		cursor: pointer;
		color: inherit;

		&:active {
			background: var(--accent1);
		}

		&.active {
			background: var(--accent4);
		}
	}

	& img {
		display: inline-block;
		object-fit: contain;
		height: 35vh;
		margin: .5em .6em;
		transition: 1s;
		transition-property: width, border-radius, filter, box-shadow;
	}

	&.aspect-ratio img {
		width: 35vh;
		object-fit: cover;
	}

	&.shape img {
		border-radius: 50%;
	}

	&.colors img {
		filter: grayscale(100%) sepia() hue-rotate(220deg);
	}

	&.border img {
		box-shadow: 0 0 0 12px var(--accent3), 1px 1px 1em 12px black;
	}
}

.krause-alignment.krause-alignment.krause-alignment {
	padding-top: 0;
	grid-gap: .6em 2.2em ;

	& img {
		grid-column-end: span 3;
		height: auto;
	}

	& article {
		font-size: 90%;
		line-height: 1.2;
	}
}

.business-card {
	position: relative;
	background: white;
	width: 17.5em;
	height: 10em;
	box-sizing: border-box;
	color: black;
	box-shadow: .1em .1em 1em black;

	& .company {
		font-size: 150%;
		font-weight: bold;
		white-space: nowrap;
		letter-spacing: -.02em;
	}

	& .name.bold {
		font-weight: bold;
	}

	& > div {
		font-size: 80%;
		line-height: 1;
	}

	&:not(.grouped) {
		& > div {
			position: absolute;
			margin: 1.5rem 2rem;
		}

		& .company {
			left: 50%;
			top: 50%;
			margin: 0;
			transform: translate(-50%, -50%);
		}

		& .name {
			top: 0;
			left: 0;
		}

		& .phone {
			top: 0;
			right: 0;
		}

		& .street {
			left: 0;
			bottom: 0;
		}

		& .city {
			right: 0;
			bottom: 0;
		}
	}

	&.grouped {
		display: flex;
		flex-flow: column;
		text-align: right;
		padding: 1.5rem 2rem;

		& > div {
			line-height: 1.3;
		}

		& .name {
			margin-bottom: auto;
		}
	}
}

#proximity-headings {
	& article {
		white-space: pre-line;
		font-size: 60%;
		background: hsl(var(--c2-hs), 90%);
		padding: 1em;
		margin-bottom: auto;
		color: black;
		box-shadow: .1em .1em 1em black;

		& strong {
			display: inline-block;
		}
	}

	& article + article {
		& strong {
			margin-top: .5em;
		}
	}
}

#breaking-rules {
	background: url(img/chaos-poster.jpg) calc(100% - 2vh) 50% / auto 96vh no-repeat black;
	align-items: start;

	& h1 {
		max-width: 11em;
		text-align: left;
	}
}

#repetition {
	& h1 {
		font-weight: 500;
		letter-spacing: -.03em;
		background: var(--rainbow);
		animation: var(--rainbow-scroll);
		-webkit-background-clip: text;
		color: transparent;
	}
}