.slide {
	background: black;
}

@keyframes rainbow-scroll {
	to {
		background-position: 100vw 15px;
	}
}

section > header.slide {
	background: linear-gradient(90deg, red, yellow, lime, aqua, blue, fuchsia, red) repeat-x 0 15px black;
	background-size: 100% 5px;
	animation: rainbow-scroll 10s infinite linear;
	align-items: center;
	justify-content: center;
}

.rgb-wheel.slide {
	background-size: 80vmin 80vmin;
}

#white-pixel {
	& .pixel {
		background: url(img/pixel.svg);
		transition: .4s background-size;
		background-size: 100% 100%;
		background-repeat: round;

		&:not([data-step]) {
			background: white;
		}

		&[data-step="1"] {
			background: linear-gradient(90deg, red 33.3%, lime 0, lime 66.6%, blue 0);
		}

		&[data-step~="2"] {
			outline: 1px dashed white;
		}

		&[data-step$="3"] { background-size: 50% 50%; }
		&[data-step$="4"] { background-size: 33.333%; }
		&[data-step$="5"] { background-size: 25%; }
		&[data-step$="6"] { background-size: 12.5%; }
		&[data-step$="7"] { background-size: 8.3333%; }
		&[data-step$="8"] { background-size: 5%; }
		&[data-step$="9"] { background-size: 2.5%; }
		&[data-step$="10"] { background-size: 6px; }
		&[data-step$="11"] { background-size: 3px; }
	}
}

.pixel {
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: space-around;
	width: 90vmin;
	height: 90vmin;
	margin: 0 auto;

	& .subpixel {
		position: relative;
		height: 95%;
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15vmin;

		& > strong {
			font-size: 300%;
		}

		& p {
			position: absolute;
			left: 0;
			right: 0;
			display: block;
			margin-top: 6em;
			font-size: 80%;
		}
	}

	& .red {
		background: red;
	}

	& .green {
		background: lime;
		color: black;
	}

	& .blue {
		background: blue;
	}
}

#antialiasing {
	align-items: stretch;
	justify-content: stretch;
	padding: 0;
	background: linear-gradient(hsla(0,0%,100%,.2) 1px, transparent 0),
	            linear-gradient(to right, hsl(0,0%,20%) 1px, black 0);
	background-size: 57px 57px;
	background-position: calc(50% - 315px) calc(50% - 340px);

	& h1 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		font-weight: 100;
		background: url(img/diamond-vector.png) no-repeat 50%;

		&[data-step="1"] {
			background-image: url(img/diamond-fullpixel-antialiasing.png);
		}

		&[data-step$="2"] {
			background-image: url(img/diamond-subpixel.png);
		}
	}
}

#pixel-bits {
	display: block;
	text-align: center;

	& .pixel {
		float: left;
		outline: 1px dashed white;

		& ~ p {
			float: right;
			clear: right;
			max-width: 7em;
			text-align: right;
			font-size: 80%;
			line-height: 1;

			&:first-line {
				display: block;
				margin-bottom: 5em;
				font-size: 260%;
			}

			& strong:after {
				content: '\A';
				white-space: pre;
			}
		}
	}
}

#rgb-2d {
	display: block;
	font-size: 250%;
}

	.plane,
	#rgb-2d output {
		height: 650px;
	}

	#rgb-2d input {
		width: 650px;
	}

	.plane {
		position: relative;
		float: left;
		width: 650px;
		background: white;
	}

		.plane:before,
		.plane:after {
			content: attr(data-label-x) " (0 → 255)";
			position: absolute;
			bottom: -1.5em;
			left: 0;
		}

		.plane > div {
			height: inherit;
			background: white;
			mask: url(img/masks.svg#gradient-mask);
			-webkit-mask: linear-gradient(white, transparent);
		}

			.plane:after {
				content: attr(data-label-y) " (0 → 255)";
				left: -.5em;
				transform-origin: bottom left;
				transform: rotate(-90deg) translateX(1.5em);
			}

			.plane:before {
				bottom: -1.3em;
			}

		.plane-thumb {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 5%;
			height: 5%;
			padding: 0;
			border: 2px solid black;
			border-radius: 50%;
			box-sizing: border-box;
			margin: -2.5%;
			box-shadow: 0 0 0 3px hsla(0,0%,100%,.6);
			background: white;
			cursor: pointer;
		}

	#rgb-2d select {
		-webkit-appearance: none;
		appearance: none;
		position: absolute;
		top: 685px;
		left: 699px;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		font: inherit;
		text-indent: 1px;
		text-overflow: '';
		cursor: pointer;
	}

	#rgb-2d select,
	.plane:before,
	.plane:after {
		font-size: 50%;
		line-height: 1;
		font-weight: bold;
		text-transform: uppercase;
	}

	.color-slider {
		-webkit-appearance: none;
		appearance: none;
		border: 0;
		background: transparent;
		height: 1em;
	}
		.color-slider::-moz-range-track {
			border: 0;
			background: transparent;
			padding: .5em 0;
		}

		.color-slider::-moz-range-thumb {
			border-radius: .05em;
			border: 2px solid black;
			box-shadow: 0 0 0 3px hsla(0,0%,100%,.6);
			background: transparent;
			cursor: pointer;
			width: .3em;
			padding: .1em 0;
		}

		.color-slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			border-radius: .05em;
			border: 2px solid black;
			box-shadow: 0 0 0 3px hsla(0,0%,100%,.6);
			background: transparent;
			cursor: pointer;
			width: .3em;
			height: 1em;
			padding: .1em 0;
		}

	#rgb-2d input {
		position: absolute;
		left: 7vmin;
		margin: 0;
		transform-origin: 100% 0;
		transform: rotate(-90deg);
	}

		#rgb-2d input::-moz-range-track {
			border: 0;
			background: transparent;
			padding: .5em 0;
		}

		#rgb-2d input::-moz-range-thumb {
			width: .3em;
			padding: 0 .1em;
			border-radius: .05em;
			border: 2px solid black;
			box-shadow: 0 0 0 3px hsla(0,0%,100%,.6);
			background: transparent;
			cursor: pointer;
		}

	#rgb-2d output {
		position: absolute;
		top: 0; right: 0;
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: repeat(3, auto) 1fr;
		grid-gap: .1em .4em;
		align-items: start;
		padding: .5em .8em;
		width: 240px;
		width: calc(100vw - 670px - 4.5rem - 5vmin);
		border-radius: 10px 0 0 10px;
		box-sizing: border-box;
		margin: 4vmin 0 0 4vmin;
		line-height: 1.2;
	}

	@media (min-width: 1200px) {
		#rgb-2d output {
			font-size: 200%;
		}
	}

#hex[data-step="1"] {
	background: #ff005a;
}

	#hex h1 {
		margin: 0;
		font-size: 500%;
		line-height: 1;
		font-weight: bold;
	}

		#hex .delayed-children > span {
			opacity: 1;
		}

		#hex h1 .red.current {
			color: red;
		}

		#hex h1 .green.current {
			color: lime;
		}

		#hex h1 .blue.current {
			color: blue;
		}

	#hex p {
		padding-left: 1em;
		margin: .5em 0 0;
		font-size: 250%;
		line-height: 1.2;
		text-indent: -.85em
	}

.thinking {
	background: url(img/thinking.jpg) bottom right / cover;

	& h1 {
		background: transparent;
		position: absolute;
		left: 37vw;
		right: 20vw;
		top: 7vh;
		margin: 0;
		color: black;
		font-size: 120%;
		font-family: Reenie Beanie;
		white-space: normal;
		text-shadow: 0 1px white, 0 0 1px white;

		& div {
			text-align: right;
			margin-right: 2em;
		}
	}
}

#hsl {

}

	#hsl > div {
		position: relative;
		width: 500px;
		height: 500px;
		border-radius: 50%;
		margin: auto;
	}

	#hue-sat > div {
		height: 100%;
		--hue-wheel: conic-gradient(from -90deg, red, yellow, lime, aqua, blue, fuchsia, red);
		background: var(--hue-wheel);
		background-size: contain;
		border-radius: 50%;
	}

		#hue-sat:after {
			content: 'Hue';
			display: block;
			position: absolute;
			bottom: -1.2em;
			left: 0;
			right: 0;
			text-align: center;
			line-height: 1;
			font-weight: bold;
		}

	#hue-sat[data-step] > div {
		background: radial-gradient(closest-side, gray, hsla(0,0%,50%,0)), var(--hue-wheel);
		background-size: contain;
	}

		#hue-sat[data-step]:after {
			content: 'Hue & Saturation';
		}

	#hsl label {
		display: block;
		visibility: hidden;
		text-align: center;
		font-weight: bold;
	}

	#hue-sat[data-step~="2"] ~ label {
		visibility: visible;
	}

		#lightness {
			display: block;
			background: linear-gradient(90deg, black, transparent, white);
			background-color: gray;
			margin: 2em auto 0;
			width: 600px;
			font-size: 80%;
		}

	#hue-sat button,
	#hue-sat ~ output {
		visibility: hidden;
	}

	#hue-sat[data-step$="3"] button,
	#hue-sat[data-step$="3"] ~ output {
		visibility: visible;
	}

	#hsl output {
		position: absolute;
		top: 0; right: 0;
		padding: 20px;
		border-radius: 10px 0 0 10px;
		box-sizing: border-box;
		margin: 5vmin 0 0 4vmin;
		font-size: 160%;
		line-height: 1.2;
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: repeat(3, auto) 1fr;
		grid-gap: .1em .4em;
		align-items: start;
	}

.swatches.swatches.swatches.swatches.swatches {
	display: grid;
	grid-template-columns: repeat(var(--columns, 2), 1fr);
	grid-auto-flow: row;
	align-items: stretch;
	justify-content: stretch;
	grid-gap: 0;
	background: transparent;
	padding: 0;

	& input {
		margin: 0;
		font-size: 170%;
		text-shadow: 0 0 1px black, 0 0 2px black;
		-webkit-text-stroke: 1px black;
		border: none;
		text-align: center;

		/* We want 1 column for 1-3 colors, 2 columns for more */
		&:first-of-type:nth-last-of-type(-n + 3) {
			&, & ~ input {
				grid-column-end: span 2;
			}
		}

		/* If last item is odd, span */
		&:last-of-type:nth-of-type(odd) {
			grid-column-end: span 2;
		}

		&:first-of-type:last-of-type {
			&, & ~ input {
				font-size: 300%;
			}
		}

		&:first-of-type:nth-last-of-type(2),
		&:first-of-type:nth-last-of-type(3) {
			&, & ~ input {
				font-size: 200%;
			}
		}

		&:first-of-type:nth-last-of-type(n + 10) {
			&, & ~ input {
				font-size: 100%;
			}
		}

		&:invalid {
			background: linear-gradient(to bottom right, transparent calc(50% - 2px), red 0, red calc(50% + 2px), transparent 0),
			            linear-gradient(to top right, transparent calc(50% - 2px), red 0, red calc(50% + 2px), transparent 0),
						rgba(0,0,0,.4);
			background-blend-mode: multiply;
			outline: 1px dashed #d00;
			outline-offset: -1px;
		}

		&:focus {
			outline: none;
		}

		&.selected {
			outline: .1em dashed black;
			outline-offset: -.15em;
			box-shadow: 0 0 0 .2em inset white;
		}
	}

	&.reveal input {
		transition: 1s;
	}

	&.reveal:not([data-step]) input {
		color: transparent;
		text-shadow: none;
		-webkit-text-stroke: 0;
	}
}

#perceptual-uniformity {
	align-items: start;

	& h1 {
		font-weight: bold;
		font-size: 500%;
		line-height: .9;
		text-align: left;
		margin: 0;
	}

	& p.delayed {
		color: red;
		font-weight: bold;
	}
}

#not-as-pictured {
	align-items: start;
	justify-content: start;

	& img {
		position: absolute;
		top: calc(2em * var(--index));
		left: calc(2em * var(--index));
		margin: 1em;
		box-shadow: .1em .1em 1em rgba(0,0,0,.8);

		&:nth-child(odd) {
			transform: rotate(2deg);
		}

		&:nth-child(even) {
			transform: rotate(-1deg);
		}
	}
}

#color-is-communication {
	& div {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 50vh;
		line-height: 1;
		text-align: center
	}
}

.chromaticity {
	& object {
		height: 80vh;
		overflow: visible;
	}
}

h1 > .balance-lines {
	margin: auto;
}

#gamuts-3d,
#gamuts-3d-2 {
	& iframe {
		background: transparent;
		width: 100%;
		height: 90%;
		overflow: hidden;
	}

	& figure {
		margin: 0;
	}

	& figcaption {
		font-weight: bold;
		text-align: center;
	}
}

.lots {
	font-weight: bold;
	color: var(--accent1-light);
}

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;
		}
	}
}


#icc-profiles {
	justify-content: start;
	background: url(img/icc-profiles.png), radial-gradient(at 50% 70%, #3b3e4d, black 88%);
	background-size: contain;
	background-position: bottom;
	background-color: #101117;
	background-repeat: no-repeat;
}

#color-harmonies,
#color-harmonies-2,
#from-photos,
#from-photos-2 {
	& h1 {
		margin-bottom: 0;
	}

	& img {
		height: 100%;
	}
}

#from-photos,
#from-photos-2 {
	padding: 0;

	& img {
		width: 100%;
		object-position: top;
		object-fit: cover;
	}
}

#from-photos-2 img {
	object-position: bottom;
}