#dom-tree {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;

	& #dom-tree-section {
		grid-column: 1 / span 2;
	}

	& li li li li .node:only-child {
		background: white;
		color: black;
		text-shadow: none;
	}

	& .legend > span {
		opacity: 0;
		transition: .4s;
		font-weight: bold;
		color: var(--accent2-light);
	}

	&[data-step$="1"] span.document-node,
	&[data-step$="2"] span.element-node,
	&[data-step$="3"] span.text-node {
		opacity: 1;
	}

	&[data-step$="1"] .document-node > a,
	&[data-step$="2"] .element-node > a,
	&[data-step$="3"] .text-node > a {
		box-shadow: 0 0 0 10px var(--accent2-light);
	}
}

#mavo {
	background: radial-gradient(transparent, rgba(0,0,0,.7)) hsl(200, 15%, 20%);
}

	#mavo h1 {
		background: none;
	}

	#mavo img {
		height: 0;
		filter: drop-shadow(0 0 .2em rgba(0,0,0,.5));
		transition: 1s height cubic-bezier(.31,.23,.5,1.5);
	}

	#mavo:target img {
		height: 2.5em;
	}

[id^="todo-code"]:not([data-step]) mark {
	background: transparent;
	box-shadow: none;
	text-shadow: none;
}

#semantics {
	background: url(img/semantics.jpg) center / cover;
	justify-content: flex-start;

	& h1 {
		margin-right: 2em;
		width: 5em;
		font-weight: bold;
		font-size: 350%;
		line-height: .85;
		letter-spacing: -.04em;
		text-align: left;
	}
}

#keyboard-accessibility {
	background-image: url(img/keyboard-mouse.jpg);

	& .caption {
		color: black;
		background: none;
	}
}

#bots {
	background-image: url(img/robot.jpg);
	align-items: flex-start;

	& .caption {
		width: 9em;
		background: none;
		padding-left: 1em;

		& h1,
		& h2 {
			text-align: left;
		}
	}
}

#block-inline-examples {
	& a {
		&::before {
			content: none;
		}
	}
}

#appropriate-controls,
#multiple-choices,
#two-choices {
	--preview-zoom: 1.5;
	--frame-height: 120px;
	--row-height: auto;

	& .media-frame {
		--height: var(--window-height);
	}

	& > div {
		display: flex;

		&:not(:first-of-type) {
			border-top: 1px solid hsla(0,0%,100%,.3);
			padding-top: .4em;
		}

		& .media-frame {
			margin-left: .5em;
		}
	}
}

#appropriate-controls {
	.wrong:first-of-type .media-frame {
		margin-top: -1.5em;
	}
}

#subtle-differences {
	overflow: hidden;
	--preview-zoom: 2;
	padding-bottom: 0;

	& img.mobile {
		right: 1em;
	}

	& pre {
		font-size: 150%;
		margin-bottom: .5em;
	}
}

#two-choices {
	--window-height: 4em;
}

img.mobile.mobile.mobile {
	width: 400px;
	height: auto;
	border: .3em solid transparent;
	background: linear-gradient(#666, #333) border-box;
	border-radius: 1em;
	box-shadow: .1em .1em .5em black;

	&.delayed {
		position: absolute;
		right: 2em;
		bottom: -1em;

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

.wrong,
.right {
	position: relative;

	&::after {
		position: absolute;
		top: .15em;
		right: .15em;
		font-size: 200%;
		line-height: 1;
	}
}

.wrong::after {
	content: "❎";
	filter: hue-rotate(-120deg) contrast(120%);
}

.right::after {
	content: "✅"
}

#types-of-nodes {
	& h2 {
		text-align: left;
	}
}

#history .slide:not(header) {
	&#html-1 {
		align-items: flex-start;
		justify-content: flex-end;

		& h1 {
			max-width: 15.5em;
		}
	}

	&#html-5,
	&#html-5-w3c {
		background: url(img/html5.jpg) 0% 50% / 150% auto;
		align-items: flex-start;

		& h1 {
			max-width: 15.5em;
		}
	}

	&#css-popular {
		align-items: flex-start;

		& h1 {
			max-width: 14em;
		}
	}

	&#xhtml-1 {
		background: url(img/xhtml1.png);
	}

	&#html-1-elements {
		& h1 {
			padding: .3em .5em;
		}

		& code {
			display: block;
			font-weight: bold;
			font-size: 120%;
		}

		& > div {
			columns: 3;
		}

		&[data-step] .obsolete {
			font-style: italic;
			color: gray;
			text-decoration: line-through;

			& .token {
				color: inherit;
			}
		}
	}
}



#maintenance {
	grid-gap: 0;
	--row-height: auto;

	& pre {
		display: flex;
		align-items: center;
	}

	& pre:nth-of-type(3),
	& pre:nth-of-type(4) {
		background: hsla(0,0%,100%,.1);
	}

	& pre[data-title] {
		padding-left: 2em;
		box-sizing: border-box;

		&::before {
			content: attr(data-title);
			width: 8em;
			font: bold 70%/1.2 var(--font-heading);
			text-transform: uppercase;
			white-space: normal;
		}
	}
}

#amazon-books {
	& h1 {
		position: absolute;
		top: 16vh;
		left: 31%;
		padding: .3em .5em;
		background: black;
		font-size: 150%;
	}

	& > div {
		position: relative;

		& .highlight {
			position: absolute;
			top: 16vh;
			left: 16%;
			width: 14%;
			height: 42vh;
			border: 5px solid red;
		}
	}
}

#amazon-horrible-html {
	& .delayed {
		font-size: 500%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);

		&:not(.current) {
			transform: translate(-50%, -100vh);
		}
	}
}

#ryanair {
	& video {
		object-fit: contain;
	}
}

#trees > ul {
	& .node {
		position: relative;
	}
	& .selected {
		outline: .15em solid white;
	}

	& [data-relationship]::after {
		content: attr(data-relationship);
		position: absolute;
		left: 0;
		bottom: 100%;
		margin: .2em;
		font: bold 1.2rem/1 var(--font-body);
		background: hsl(0 0% 0% / .5);
	}
}

#css-is-reactive {
	grid-template-rows: auto auto auto;
	gap: 1em;
	align-items: start;

	& h2 {
		margin: 0;
	}
}

.vue-syntax.vue-syntax {
	& h1 {
		margin: 0;
	}

	& input {
		color: black;
		width: 1.2em;
		text-align: center;
	}

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

#vue-is-reactive,
#vue-is-data-first {
	grid-template-columns: 2fr 1fr;

	& .demo-target {
		font-size: 200%;
	}
}

#vue-lists {
	grid-template-columns: 2.5fr 1fr;
}

#vue-actions {
	grid-template-columns: 3fr 1fr;

	& button {
		display: block;
		margin-top: .5em;
	}
}

#vue-input-actions {
	grid-template-columns: 3fr 1fr;

	& .demo-target {
		font-size: 200%;

		& input {
			width: 3em;
		}

		& label {
			display: block;
		}
	}


}

.templating-slide {
	/* https://get.foundation/templates.html */
	background: var(--color-yellow);

	& svg {
		height: 80vh;
		filter: drop-shadow(0 0 .3em rgb(0 0 0 / .3));
		margin-top: -1em;

		& .article-outline {
			fill: none;
			stroke: var(--color-red, red);
			stroke-width: 2;
		}
	}

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

	& pre {
		position: relative;
		padding: .4em;
		border-radius: .3em;
		background: var(--dark1);
		margin: 0;
	}

	& .repetitive-code,
	& .template-code {
		position: absolute;
		bottom: 52%;
		left: 18%;
		font-size: 50%;
		display: flex;

		&::after {

		}
	}

	& .repetitive-code pre::after,
	& .template-code .pointer {
		content: "";
		background: var(--dark1);
		position: absolute;
		width: 1.4em; height: .7em;
		top: calc(100% - 1px);
		left: calc(50% - .5em);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	& .repetitive-code {
		gap: 5%;

		& pre {
			width: 10em;

			& > code {
				display: block;
				width: 100%;
				overflow: hidden;
				-webkit-mask: linear-gradient(to right, white 70%, transparent);
			}
		}
	}

	& .template-code {
		justify-content: center;
		font-size: 62%;

		& .pointer {
			left: calc(8% + (var(--index) - 1) * 27%)
		}
	}

	&:not([data-step$="2"]) .repetitive-code {
		display: none;
	}

	&:not([data-step~="3"]) .template-code {
		display: none;
	}
}

#emmet {
	& video {
		width: 80vw; height: calc(80vh - 5em);
		object-fit: cover; object-position: top;
	}
}

#js-data {
	align-items: start;

	&[data-step="1"] {
		& .js-only {
			background: hsl(0 100% 50% / .5);
		}

		& h1 .json {
			display: inline;
		}
	}

	&:not([data-step~="2"]) .json,
	&[data-step~="2"] .json-hide {
		display: none;
	}
}