@font-face {
	font-family: 'BLOKK';
	src: url('../fonts/BLOKKRegular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

#all-properties {
	display: block;
	text-align: left;
	column-width: 4.8em;
	bottom: auto;
	overflow: auto;

	& a {
		white-space: nowrap;
		display: block;
		font: 40%/1.5 var(--font-mono);
	}
}

#background-shorthands {
	& h1 {
		margin-bottom: 0;
	}

	& h2 {
		display: flex;
		align-items: center;
		margin-top: .3em;

		& a {
			position: relative;
			margin-right: 1rem;
			padding-left: .3rem;
			max-width: 19vw;
			text-align: left;
			font-size: 150%;

			&:nth-of-type(n + 2) {
				&::before {
					all: unset;
					content: "▸";
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 100%;
					background: none;
					color: white;
					font-size: 2rem;
				}
			}

			&:nth-of-type(n + 3) {
				font-size: 70%;
			}
		}

		& a::before {
			content: none;
		}
	}
}

@supports (-webkit-background-clip: text) {
	#shorthands h1 {
		font-weight: bold;
		color: transparent;
		background: linear-gradient(to right, var(--color-green), var(--color-magenta) 46%, white 0, white 56%, var(--color-magenta) 0, var(--color-aqua));
		-webkit-background-clip: text;
	}
}

#specificity-battle {

}

	#specificity-battle > div {
		display: flex;
		width: 100%;
	}

		#specificity-battle > div > div {
			flex: 1;
			margin: .5em;
			position: relative;
		}

		#specificity-battle > div input {
			width: 100%;
		}

		#specificity-battle > div output {
			display: flex;
			font-size: 350%;
			text-align: center;
			font-weight: bold;
		}

		/* #specificity-battle > div output.winner::after {
			content: "🏆";
			display: block;
			font-size: 126px;
			line-height: 1;
			position: absolute;
			left: 50%;
			transform: translateX(-50%)
		} */

			#specificity-battle > div output div {
				flex: 1;
			}

				#specificity-battle > div output div::after {
					font-size: 14%;
					display: block;
				}

			#specificity-battle > div output div:first-child {
				color: var(--color-aqua);
			}

				#specificity-battle > div output div:first-child::after {
					content: "#id selectors";
				}

			#specificity-battle > div output div:nth-child(2) {
				color: var(--color-green);
			}

				#specificity-battle > div output div:nth-child(2)::after {
					content: ".class selectors, [attribute] selectors, :pseudo-classes";
				}

			#specificity-battle > div output div:nth-child(3) {
				color: var(--color-orange);
			}

				#specificity-battle > div output div:nth-child(3)::after {
					content: "tag selectors";
				}

		#specificity-battle output[for="selector1, selector2"] {
			font-weight: bold;
			margin-top: .5em;
		}

#colors {
	background: transparent;
	align-items: stretch;
	justify-content: stretch;
	padding: 0;
}

	#colors input {
		flex: 1;
		margin: 0;
		font-size: 200%;
		padding-left: 1em;
		text-shadow: 0 0 1px black, 0 0 2px black;
		-webkit-text-stroke: 1px black;
		border: none;
	}

	#colors input:focus {
		outline: none;
	}

.button.next {
	position: absolute;
	bottom: 1em;
	right: 1em;
}

#basic-selectors {
	& h1 {
		max-width: 18em;
	}

	& td:last-child code {
		background: black;
		white-space: nowrap;
		padding: .2em .3em .1em;
		border-radius: .2em;
	}
}

.selector-matches {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto minmax(1fr, auto);
	grid-gap: 1em;

	& header {
		margin-bottom: 1em;
		grid-column-end: span 2;

		& h1 {
			& code {
				font-weight: bold;
				font-size: 150%;

				& mark {
					all: unset;
					background: none;
					color: var(--accent3-light)
				}
			}
		}

		& h2 {
			color: var(--accent3-light);
		}

		& h1,
		& h2 {
			margin: 0;
			line-height: 1;
		}
	}

	& > section {
		border: .15em solid var(--color);
		border-radius: .25em;
		padding: .8em;
		padding-top: 0;
		align-self: stretch;

		& h2 {
			background: var(--color);
			color: #263036;
			margin: -.1em -.65em .5em;
			padding: .2em .8em .3em;
			line-height: 1;
		}

		&:first-of-type {
			--color: var(--accent4);
		}

		&:nth-of-type(2) {
			--color: hsl(var(--c1-hs), 70%);
		}

		&:only-of-type {
			grid-column-end: span 2;
			width: fit-content;
			margin: 0 auto;
		}

		& input {
			transform-origin: bottom;
			transform: scale(2);
		}
	}
}

#everything-box {
	&[data-step="1"] em,
	&[data-step$="2"] h1,
	&[data-step~="3"] {
		outline: var(--outline-width) solid var(--color);
		--color: var(--accent1);
		--outline-width: 6px;

		&::before {
			content: "<" var(--tag, attr(data-tag)) ">";
			position: absolute;
			left: 0;
			padding: .3rem .6rem;
			border-radius: .3rem;
			font: bold 2.5rem/1 var(--font-mono);
			background: var(--color);
		}
	}

	& em,
	& h1 {
		position: relative;

		&::before {
			bottom: 100%;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
	}

	&[data-step~="3"] {
		--tag: "article";
		outline-offset: calc(-1 * var(--outline-width));

		&::before {
			top: var(--outline-width);
			border-top-right-radius: 0;
		}
	}

	&[data-step$="4"] {
		--tag: "body";
	}

	&[data-step$="5"] {
		--tag: "html";
	}
}

#box-painting {
	padding-bottom: 0;
	flex-flow: row;
	justify-content: start;

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

#block-inline-quiz,
#inherited-vs-noninherited {
	& code {
		background: black;
		padding: .1em .3em;
		border-radius: .1em;
		font-size: 150%;
		font-weight: bold;
	}

	& .block,
	& .inherited {
		background: var(--accent1);
	}

	& .inline,
	& .non-inherited {
		background: var(--accent2);
	}
}

#block-inline-quiz {
	& code {
		&::before {
			content: "<";
			opacity: .6;
		}

		&::after {
			content: ">";
			opacity: .6;
		}
	}
}


@keyframes layout-figure-width {
	to {
		width: var(--end-width, 40%);
	}
}

figure.layout {
	margin: 0;
	border: 3px solid white;
	width: 100%;
	animation: layout-figure-width 8s infinite alternate linear;
	box-sizing: border-box;
	line-height: 1;

	&,
	& div {
		padding: 10px;
	}

	& > div {
		background: white;
		color: hsl(0,0%,0%,.5);
		font: 40%/1.2 "BLOKK";

		&:nth-child(4n + 1) {
			background: var(--accent1-light);
		}

		&:nth-child(4n + 2) {
			background: var(--accent2-light);
		}

		&:nth-child(4n + 3) {
			background: var(--accent3-light);
		}

		&:nth-child(4n + 4) {
			background: var(--accent4-light);
		}
	}

	& .block {
		display: block;

		&:not(:last-child) {
			margin-bottom: 10px;
		}
	}

	& .inline {
		display: inline;
	}

	& .inline-block {
		display: inline-block;
		max-width: 15em;
	}

	& div.flexbox {
		border: inherit;
		padding: 5px;
		display: flex;
		margin: 10px 0;
		background: var(--accent3);

		& > div {
			margin: 5px;
			background: white;
			flex: 1;
		}
	}

	& strong,
	& em,
	& mark {
		color: black;
	}

	& mark {
		box-shadow: 0 0 0 .3em yellow;
	}
}

.demo.slide .demo-target {
	xall: unset;
}

#block-vs-inline,
#block-vs-inline-2,
#block-vs-inline-vs-inline-block {
	& h2 {
		margin: 0;
		position: relative;

		& code {
			position: absolute;
			right: .5em;
			top: 50%;
			transform: translateY(-50%);
			padding: .25em .4em .15em;
			width: fit-content;
			margin: auto;
			border-radius: .2em;
			font-size: 50%;
			background: black;
			font-weight: bold;
		}
	}

	& ul {
		margin: .5em 0;
	}
}

#block-vs-inline-vs-inline-block {
	overflow: hidden;

	& h2 {
		grid-row: 1;
		grid-column-end: span 2;
	}

	& figure.layout {
		grid-row: 3;
		grid-column-end: span 2;
		margin: auto;
		--end-width: 25%;
	}

	&[data-step~="1"] li:nth-child(1),
	&[data-step~="2"] li:nth-child(2),
	&[data-step~="3"] li:nth-child(3),
	&[data-step~="4"] li:nth-child(4),
	&[data-step~="5"] li:nth-child(5),
	&[data-step~="6"] li:nth-child(6) {
		&.correct {
			background: var(--accent4);
		}

		&:not(.correct) {
			opacity: .5;
			text-decoration: line-through;
		}
	}
}

#values-units-section {
	& .syntax-breakdown {

		justify-content: center;

		& .code {
			--length: 6em;
		}
	}

	& .slide[data-type="CSS weirdness"] {
		font-size: 400%;
	}
}

#ua-stylesheet {
	overflow: hidden;

	& h1 {
		position: relative;
		z-index: 2;
	}

	& pre {
		position: absolute;
		top: .5em;
		right: .5em;
		font-size: 50%;
	}
}

#length-units {
	& code {
		font-weight: bold;
		background: black;
		padding: .1em .3em;
		border-radius: .2em;
	}
}

#shorthands-section {
	& .syntax-breakdown {
		justify-content: center;
	}
}

.syntax-breakdown[mv-app],
.syntax-breakdown.left {
	align-items: start;

	& .code {
		white-space: nowrap;
	}
}

#trbl {
	& .clock {
		font-size: 800%;
		line-height: 1;
	}

	& > div {
		position: relative;

		& > div {
			position: absolute;
			padding: 1em;
			font-weight: bold;
			font-size: 150%;
		}

		& .top,
		& .bottom {
			left: 50%;
			transform: translateX(-50%);
		}

		& .left,
		& .right {
			top: 50%;
			transform: translateY(-50%);
		}

		& .top {
			bottom: 100%;
		}

		& .bottom {
			top: 100%;
		}

		& .left {
			right: 100%;
		}

		& .right {
			left: 100%;
		}
	}
}

header#dry {
	& h1 {
		text-align: left;
		line-height: 1;
	}

	& span {
		font-size: 50%;
	}
}

#avoiding-duplication {
	& strong {
		display: block;
	}

	& .delayed {
		display: inline-block;
		max-width: 0;
		overflow: hidden;
		vertical-align: bottom;
		transition: 1s max-width;
		margin: 0 .1em;
	}

	& .delayed.current,
	& .delayed.displayed {
		max-width: 10em;
		margin: 0 .2em;
	}


}

#avoiding-duplication .delayed.displayed:first-of-type,
.strike.delayed.displayed {
	text-decoration: line-through;
	text-decoration-color: #e88;
}

#use-shorthands-wisely {
	& .tabs {
		display: flex;
		margin: 0 auto .5em;

		& > div {
			background: var(--rainbow);
			animation: var(--rainbow-scroll);
			font-weight: bold;
		}
	}
}

#use-font-relative-units {
	& button {
		margin-bottom: 1rem;
		background: var(--rainbow);
		animation: var(--rainbow-scroll);
		border: 0;
		font-weight: bold;

		&.large {
			font-size: 300%;
		}
	}
}

[id^="minimal-list"] .demo-target {
	& h2 {
		margin-bottom: 0;
		text-align: left;
		font-size: 200%;
		letter-spacing: -.03em;
		color: black;
	}

	& ul {
		margin: 0;
		padding: 0;

		& ol {
			padding-left: 2em;
		}
	}
}

#the-cascade {
	background: url(img/cascade.jpg) center / cover;

	& h1 {
		max-width: 16.7em;
		padding: .5em;
		background: hsla(0,0%,0%,.2);
		backdrop-filter: blur(9px);
	}
}

#custom-properties {
	& header {
		font-size: 150%;
	}

	& h1,
	& h2 {
		margin: 0;
	}

	& .strike + .delayed {
		display: inline-block;
		vertical-align: bottom;
		max-width: 0;
		transition: 1s max-width;
		white-space: nowrap;
		overflow: hidden;

		&.current {
			max-width: 15em;
		}
	}
}

.specificity-quiz {
	& .demo-target div {
		padding: .5em .8em;
		font-weight: bold;
		font-size: 150%;
	}
}

#css-vars-inherit {

	& section {
		padding: 1rem;
		padding-top: 0;
		border-radius: .3em;
		margin: 1rem 0;

		& h1 {
			margin: 0 -1rem;
			padding: .2em 0 .3em;
			font-size: 150%;
		}

		& li::marker {
			font-weight: bold;
		}

		& ol {
			margin: .5em 0;
		}
	}
}

.syntax-breakdown.vertical {
	align-items: start;
}

iframe.box-model {
	width: 100%;
	margin-top: .5em;
	height: calc(100% - 1em);
	height: -webkit-fill-available;
}

.browser {
	color: black;

	& :is(input, button, textarea) {
		all: revert;
		font-size: 1em;
	}
}

#box-sizing {
	& .browser {
		overflow: auto;
		margin-top: 1em;
	}

	& textarea {
		padding: 1em;
		width: 100%;
	}

	& > div:nth-of-type(2) {
		& textarea {
			box-sizing: border-box;
		}
	}
}

#block-or-inline {
	& input {
		border:hsl(220 10% 50%) 2px solid;
	}
}

#img-block-inline {
	& .browser {
		height: 400px;

		& img {
			object-fit: initial;
		}
	}
}

#selectors-section {
	& > section > header.slide {
		background: var(--accent1);

		& h1 {
			&::before {
				content: "Selectors";
				display: block;
				width: min-content;
				padding: .3em .5em;
				border: .1em solid black;
				border-radius: .15em;
				margin: -1.5em auto 0;
				font-size: 50%;
				font-weight: bold;
				text-transform: uppercase;
				background: var(--rainbow);
				animation: var(--rainbow-scroll);
			}
		}
	}
}

#concatenation-and {
	& table {
		& thead th code {
			font-weight: bold;
		}

		& th,
		& td {
			border-right: 1px solid hsl(0 0% 100% / .2);
		}

		& td:nth-child(n + 2) {
			text-align: center;

			width: 1em;
			font-size: 200%;
			line-height: 1;
		}
	}
}

.cascade.slide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto 1fr;
	align-items: stretch;
	justify-content: stretch;

	& pre {
		position: relative;
		background: black;
		padding: .2em .3em .1em;
		border-radius: .2em;
		margin: 0;

		&[title]::before {
			content: attr(title);
			position: absolute;
			top: .4em;
			right: .4em;
			padding: .2em .4em;
			border-radius: .15em;
			background: var(--accent2);
			font: bold 75%/1 var(--font-body);
			text-transform: uppercase;
		}

		& + pre {
			&::after {
				content: "vs";
				position: absolute;
				top: 50%;
				left: -1.2em;
				transform: translateY(-50%);
				background: var(--accent1);
				border-radius: 50%;
				padding: .22em .3em .4em;
				font: bold 100%/1 var(--font-body);
			}
		}
	}

	&[data-step~="1"] pre.winner {
		box-shadow: 0 0 0 .1em var(--color-green);
	}

	& .media-frame {
		grid-column-end: span 2;
		padding: 1.5em 1em 1em;
		transition: .3s .5s;
	}

	&:not([data-step]) .media-frame {
		opacity: 0;
	}
}

#nav-containers {
	& .browser h1,
	& ul {
		margin: 0;
	}

	& header {
		--tag: "header";
		display: flex;
		flex-flow: row;
		gap: .3em;
		align-items: center;
		background: hsl(220 10% 20%);
		padding: .5em;
	}

	& nav {
		--tag: "nav";
		display: flex;
	}

	& img {
		width: 1em;
	}

	& ul {
		--tag: "ul";
		display: flex;
		gap: .3em;
		list-style: none;
		padding: 0;
	}

	& form {
		--tag: "form";
		display: flex;
		margin: 0;
		margin-left: auto;
	}

	& form:focus-within {
		flex: 1;
	}

	& input[type=search] {
		flex: 1;
	}

	& nav a {
		color: white;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
	}

	& nav a:hover {
		background: #f30;
	}

	&[data-step~="1"] header,
	&[data-step~="2"] nav,
	&[data-step~="3"] ul,
	&[data-step~="4"] form {
		position: relative;
		outline: .15em solid var(--accent3-light);
		filter: drop-shadow(0 0 .1em rgb(0 0 0 / .25));

		&::before {
			content: "<" var(--tag) ">";
			position: absolute;
			bottom: 100%;
			padding: .1em .3em;
			border-radius: .2em .2em 0 0;
			background: var(--accent3-light);
			color: black;
			font-size: 60%;
			font-weight: bold;
		}
	}
}

#font-relative,
#viewport-relative {
	& input {
		display: block;
		width: 100%;
	}

	& .browser {
		margin-top: 1em;
		width: 80%;
		height: 8em;
	}
}

#viewport-relative {
	& .browser {
		margin-top: 1em;
		height: 8em;

		& > iframe {
			width: 100%;
		}
	}
}

#grid-flex {
	& .flex,
	& .grid {
		height: calc(100vh - 12em);
	}
	& .flex {
		display: flex;
		gap: .3em;

		& > div {
			flex: 1;
			background: var(--color-green);

			&:nth-child(3) {
				flex: 2;
			}
		}
	}

	& .grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: .3em;

		& > div {
			background: var(--color-aqua);

			&:nth-child(2),
			&:nth-child(3) {
				grid-column-end: span 2;
				background: var(--color-magenta);
			}

			&:nth-child(4) {
				grid-row-end: span 2;
				background: var(--color-yellow);
			}
		}
	}

	& strong {
		display: block;
	}

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

#pseudoelement-examples {
	& iframe {
		width: 100%;
		height: 9em;
	}
}

.minimal.demo.slide {
	display: grid;
	grid-template-columns: 1fr minmax(auto, 1fr);
	grid-template-rows: auto 1fr;
	align-items: stretch;

	& .editor-container {
		grid-column: 1;
		grid-row: 2;
		min-height: 10em;
		margin: auto 0;
	}

	& .demo-target {
		grid-column: 2;
		grid-row: 2;
	}

	& .demo-controls:has(button.replay) {
		display: flex;
		grid-column: 1 / span 2;
		grid-row: 1;
		color: white;
	}
}

#background-initial {
	grid-template-columns: 3fr minmax(auto, 1fr);

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

}