:root {
	--image-white: linear-gradient(white, white);
}

#house {
	background: #f6f8fa;
	color: black;

	&::after {
		text-shadow: none;
		font-weight: bold;
		color: inherit;
	}

	& img {
		object-fit: contain;
		height: 100%;
	}
}

#grid-terminology {
	& h1 {
		margin: 0;
		font-size: 300%;
		font-weight: 300;
	}

	& h2 {
		margin: 0;
	}

	& header {
		margin-bottom: 1em;
	}

	& .cell {
		width: 220px;
		height: 212px;
		rx: 8px;
		stroke: var(--accent3);
		stroke-width: 16px;
	}

	& [data-step] {
		display: none;
	}

	&:not([data-step]) [data-step="0"],
	&[data-step="1"] div[data-step="1"],
	&[data-step$="2"] div[data-step="2"],
	&[data-step$="3"] div[data-step="3"],
	&[data-step$="4"] div[data-step="4"],
	&[data-step$="5"] div[data-step="5"],
	&[data-step$="6"] div[data-step="6"],
	&[data-step$="7"] div[data-step="7"],
	&[data-step$="8"] div[data-step="8"],
	&[data-step$="9"] div[data-step="9"],
	&[data-step$="10"] div[data-step="10"] {
		display: block;
	}

	& .highlight {
		transition-duration: .4s;
		transition-property: x, y, width, height;
	}

	&:not([data-step]) .highlight {
		display: none;
	}

	& svg {
		--cw: 238px;
		--ch: 232px;
		--gh: 28px;
	}

	&[data-step$="1"] .highlight,
	&[data-step$="10"] .highlight {
		/* Grid cell */
		x: 532px;
		width: var(--cw);
		height: var(--ch);
	}

	&[data-step$="2"] .highlight {
		/* Grid line */
		x: 248px;
		width: 8px;
		height: 100%;
	}

	&[data-step$="3"] .highlight {
		/* Grid area */
		x: 268px;
		width: 504px;
		height: 100%;
	}

	&[data-step$="4"] .highlight {
		/* Grid track */
		x: 268px;
		width: 238px;
		height: 492px;
	}

	&[data-step$="5"] .highlight {
		/* Grid track (horiz) */
		y: 0;
		width: 100%;
		height: var(--ch);
	}
	&[data-step$="6"] .highlight {
		/* Grid row */
		y: 263px;
		width: 100%;
		height: var(--ch);
	}

	&[data-step$="7"] .highlight {
		/* Grid column */
		x: 0;
		width: 238px;
		height: 492px;
	}

	&[data-step$="8"] .highlight {
		/* Gutter */
		x: 234px;
		width: 34px;
		height: 100%;
	}

	&[data-step$="9"] .highlight {
		/* Container */
		width: 100%;
		height: 100%;
	}
}

#column-sorting {
	background: white;
	--division: 50;

	& .creatures {
		font-size: 120%;
	}

	& article {
		border: 1px solid;
		border-color: hsl(var(--color), calc(var(--lightness, 90%) - 20%));
		background: hsl(var(--color), var(--lightness, 90%));
		padding: .2em .5em;
	}

	& .cat.male {
		--color: 200, 100%;
	}

	& .cat.female {
		--color: 350, 100%;
	}

		& .cat::before {
			content: "😻 "
		}

	& .hooman {
		--color: 80, 60%;
		--lightness: 80%;
	}

		& .hooman.male::before {
			content: "👨🏼 ";
		}

		& .hooman.female::before {
			content: "👩🏽 "
		}
}

@keyframes out-of-flow {
	to {
		top: 1em;
		left: 1em;
		box-shadow: .3em .3em 1em black;
	}
}

#breaking-out-of-flow {
	& .illustration {
		width: 9em;
		position: relative;

		& > div {
			height: 2em;
			margin: .5em 0;
			box-sizing: border-box;
		}

		& > :nth-child(1) {
			background: var(--accent4);
		}

		& > :nth-child(2) {
			border: 5px dashed var(--accent3);
		}

		& > :nth-child(3) {
			background: var(--accent3);
			position: absolute;
			top: 2.5em;
			left: 0em;
			width: inherit;
			animation: out-of-flow 1s 1s infinite alternate;
		}
	}
}

[id^="flexbox-concepts"] {
	& figure {
		& figcaption {
			width: fit-content;
			margin: auto;
			margin-top: 1em;

			& code {
				white-space: pre-line;
			}
		}
	}
}

.flex-container {
	position: relative;
	display: flex;
	gap: .5em;
	padding: .5em;
	border: .2em solid var(--accent3-light);
	margin: 2em 0 0 2em;
	font-size: 60%;
	border-radius: .1em;

	& > .item {
		background: var(--accent1-light);
		color: black;
		padding: .3em .5em;
		mix-blend-mode: screen;
		font-weight: bold;
		xlex: 1;
	}

	&.vertical {
		flex-flow: column;
	}

	&:not(.vertical) {
		& > .item {
			min-height: 6em;

			&:nth-child(3n + 1) {
				min-height: 8em;
			}

			&:nth-child(3n + 2) {
				min-height: 4em;
			}
		}
	}
}

.arrow {
	position: absolute;
	display: flex;
	gap: .2em;
	white-space: nowrap;
	font-weight: 400;

	--r-triangle: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">\
		<polygon points="0,0 100,50 0,100" fill="white"/>\
	</svg>');
	--b-triangle: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">\
		<polygon points="0,0 100,0 50,100" fill="white"/>\
	</svg>');
	--line-thickness: 2px;

	&::before,
	&::after {
		content: "";
		flex: 1;
		min-inline-size: 1em;
		background: var(--line);
	}

	&::after {
		background: var(--line), var(--triangle);
	}

	&.h {
		top: -2em;
		left: 0;
		right: 0;

		&::before,
		&::after {
			--line: var(--image-white) no-repeat center / 100% var(--line-thickness);
			--triangle: var(--r-triangle) no-repeat right / 1em .5em;
		}
	}

	&.v {
		top: 0;
		bottom: 0;
		left: -2em;
		writing-mode: tb-rl;

		&::before,
		&::after {
			--line: var(--image-white) no-repeat center / var(--line-thickness) 100%;
			--triangle: var(--b-triangle) no-repeat bottom / .5em 1em;
		}

	}
}

.legend {
	margin-top: .5em;

	& > span {
		display: inline-block;
		vertical-align: middle;
		width: 1.2em;
		height: 1.2em;
		margin: 0 .2em;
		border-radius: 50%;

		&:nth-of-type(n + 2) {
			margin-left: 1.5em;
		}
	}
}