#textbook,
#lea-verou {
	grid-template-rows: auto repeat(var(--rows), var(--row-height, 1fr));
}

#textbook {
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr;

	& img {
		height: calc(100vh - 7em);
	}
}

#lea-verou {
	box-sizing: border-box;
	height: 100vh;
	contain: size;

	& article {
		display: flex;
		flex-flow: column;
		overflow: hidden;

		& h2 {
			font-size: 100%;
			margin: .5em 0;
		}

		& > div,
		& a {
			display: contents;
		}

		& img {
			width: 100%;
			height: calc(100% - 2em);
			object-fit: cover;
			object-position: top;
		}
	}
}


.file {
	display: inline-block;
	position: relative;
	filter: drop-shadow(.1em .1em .3em rgba(0,0,0,.5));
	--color: var(--accent4)
}

[data-ext="css"] {
	--color: var(--accent1);
}

[data-ext="js"] {
	--color: var(--accent3);
}

.image.file {
	--color: var(--accent2);
}

	.file::before {
		content: "📄";
		font-size: 3.5em;
		line-height: 1.1;
		letter-spacing: -.15em;
	}

	.image.file::before {
		content: "🖼"
	}

	.file::after {
		content: "." attr(data-ext);
		position: absolute;
		bottom: -.1em;
		right: -.8em;
		background: var(--color, black) linear-gradient(hsla(0,0%,100%,.3), transparent);
		font-weight: bold;
		border-radius: .2em;
		font-weight: bold;
		padding: 0 .3em .1em;
		font-size: .9em;
		line-height: 1.2;
		color: white;
	}

@keyframes typing { from { width: 0; } }
@keyframes caret { 50% { border-color: currentColor; } }

.typing,
.url-typing::after {
	width: calc(var(--length) * 1ch);
	overflow: hidden;
	white-space: nowrap;
	border-right: 1px solid transparent;
}

.typing {
	display: block;
	line-height: 1;
}

.url-typing::after {
	font-family: var(--font-mono);
}

:target .typing,
:target .url-typing::after {
	animation: typing calc(var(--length) * .23s) steps(var(--length)) both,
	           caret .5s step-end calc(.6 * var(--length) + 4) alternate;
}

@keyframes scale-grow {
	from { transform: scale(0); }
}

.speech {
	display: flex;

	& .subject {
		font-size: 400px;
		line-height: 1;
		margin-top: auto;
	}

	& .text {
		position: relative;
		margin-bottom: auto;
		margin-left: 1em;
		padding: 1em;
		border-radius: 1em;
		background: var(--rainbow);
		animation:  var(--rainbow-scroll);
		text-shadow: .05em .05em .1em rgba(0,0,0,.1);
		transform-origin: -.5em calc(100% - 2em);
		--color1: black; --color2: white; /* for syntax breakdown */

		:target & {
			animation: scale-grow .7s cubic-bezier(.4,.3,.7,1.4);
		}

		& .token {
			color: inherit;
			font-weight: bold;
		}

		&::after {
			content: "";
			position: absolute;
			width: .5em;
			height: 1em;
			right: 100%;
			bottom: 1.5em;
			background: inherit;
			clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
		}
	}

	&.subject-right {
		flex-direction: row-reverse;

		& .text {
			margin-left: 0;
			margin-right: 1em;
			transform-origin: calc(100% + .5em) calc(100% - 2em);

			&::after {
				right: auto;
				left: 100%;
				clip-path: polygon(100% 50%, 0% 100%, 0% 0%);
			}
		}
	}
}

#http-response {
	& .text {
		font-size: 95%;
	}

	& .text,
	& .text * {
		line-height: 1.4;
	}
}

#requests-html {
	& td:first-child {
		white-space: nowrap;
	}
}

#clients-servers {
	& p {
		text-align: center;
	}

	& p strong {
		display: inline-block;
		font-size: 200%;
		line-height: 1;

		&::before {
			display: block;
			font-size: 200%;
		}
	}

	& .the-web {
		position: relative;
		display: block;
		line-height: 3;

		&::before {
			content: "🌍";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: -1;
		}
	}

	& .clients::before {
		content: "💻📱";
	}

	& .servers::before {
		content: "🖥";
	}

	line {
		stroke: yellow;
	}

	svg {
		position: absolute;
	}
}

#localhost {
	& .delayed.displayed {
		opacity: 1;
	}

	& .media-frame {
		margin-top: 1em;
		margin-right: 60px;
		width: 8em;
		height: 2em;
		color: black;
		transform: scale(1.1);
		transform-origin: 0 0;
		background: white;
		white-space: nowrap;
		width: calc(var(--length) * .38ch + 8.5em);
		height: 3em;

		&.delayed:not(.displayed):not(.current) {
			transform: scale(0) translateY(-400px);
		}
	}
}

.terminal {
	position: relative;
	border-style: solid;
	border-width: 32px 27px 123px 27px;
	padding: 30px 20px;
	border-image: url(img/screen.png) 20 25 120 22 fill stretch stretch;

	& pre {
		font-size: 28px;
		white-space: pre-line;

		& code.typing {
			font-weight: bold;
		}
	}
}

#confusing-tap {
	background-position: 50% 30%;
	background-size: auto 150%;


	&[data-step="1"] {
		background-position: 100% 70%;
		background-size: auto 250%;
	}
}


#costly,
#deadly,
#commercial-success {
	& img {
		object-fit: cover;
	}

	& a {
		box-shadow: .1em .1em .2em rgb(0 0 0 / .3);
	}
}

#communicating,
#users {
	& .caption {
		width: auto;
		margin-left: auto;
		padding: 1em;
		text-align: right;

		& h1 {
			white-space: pre-line;
			text-align: inherit;
			margin-top: 0;
		}

		& p {
			margin-top: .2em;
			margin-bottom: 0;
			font-size: 70%;
		}
	}
}

#users {
	background-color: white;
	background-size: contain;
	background-position: left;
}

#ask-users {
	background: url(img/question.jpg) 0 0 / cover;
	color: black;
	padding-right: 50vw;

	align-items: flex-start;

	& h1 {
		text-align: left;
	}

	& > div {
		color: var(--accent1);

		& .bounce {
			font-size: 500%;
			margin: 0;
			letter-spacing: -.04em;
			transform-origin: 0 0;
			line-height: 1;
			--transition-duration: .4s;
		}
	}
}

#handset {
	background: url(img/handset.jpg) center / cover;
	color: black;
	padding-left: 20vw;
	justify-content: flex-start;

	& p {
		line-height: 1.5;
		margin-top: 0;
		letter-spacing: -.01em;
	}

	& > p:first-of-type {
		margin-left: 19vw;
	}

	& > p:nth-child(2) {
		margin-right: 18vw;
		font-size: 130%;
	}
}

#google-results {
	background: url(img/google.jpg) 0 0 / cover;
	padding-right: 58vw;

	justify-content: flex-start;

	& > p {
		margin: 0;
		margin-right: 2vw;
		line-height: 1.45;

		&:nth-child(2) {
			margin-top: auto;
			color: black;
			font-size: 130%;
		}
	}
}

#terminal-commands {
	background: url(img/keyboard.jpg) center / cover;
}

#les,
#importance-by-task {
	& > div {
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: end;
		background: linear-gradient(transparent, black), var(--image) top;
		text-align: center;
		padding: .5em;
		padding-top: 2em;
		box-sizing: border-box;
		font-size: 150%;
		line-height: 1.2;
		text-align: center;
	}
}

#les {
	& > div {
		padding-top: .5em;
		justify-content: space-between;

		&:nth-of-type(1) {
			--color: var(--accent1);
			--color-light: var(--accent1-light);
		}

		&:nth-of-type(2) {
			--color: var(--accent2);
			--color-light: var(--accent2-light);
			background-position: bottom;
		}

		&:nth-of-type(3) {
			--color: var(--accent3);
			--color-light: var(--accent3-light);
			background-position: bottom;
		}

		& h3 {
			color: var(--color-light);
			margin: 0;

			&::before {
				content: attr(data-letter);
				display: flex;
				margin: 0 auto .1em;
				align-items: center;
				justify-content: center;
				width: 1em;
				line-height: 1;
				padding: .2em;
				border-radius: 50%;
				background: var(--color-light);
				font-size: 200%;
				font-weight: bold;
				text-align: center;
				color: black;
				mix-blend-mode: screen;
			}
		}

		& p {
			font-size: 90%;
			margin: 0;
		}
	}
}

#other-dimensions {
	& h2 {
		margin: 1em;

		& div {
			font-weight: 300;
		}
	}
}

#system-attributes {
	& ul ul {
		columns: 2;
	}

	&[data-step] li li {
		&:not(.important) {
			text-decoration: line-through;
			text-decoration-color: var(--accent1-light);
		}

		&.important {
			font-weight: bold;
			text-decoration: none;
			color: var(--accent1-light);
		}
	}

	&:not([data-step="2"]) .delayed {
		opacity: 0;
	}
}

#architecture {
	overflow: hidden;

	& article {
		position: relative;
		color: white;
		min-width: 10em;
		padding: 3.2em 1em;
		margin: 0 1em;
		border-radius: 50%;
		text-align: center;
		transition-duration: 1s;

		& > * {
			margin: 0;
			line-height: 1.2;
		}

		& h2 {
			font-size: 200%;
			color: inherit;
			line-height: 1.1;
		}

		& h3 {
			text-transform: uppercase;
			font-weight: 300;
			color: black;
		}

		& p {
			font-family: var(--font-handwritten);
			font-size: 2.5rem;
		}

		& .file {
			position: absolute;
			transform: translate(calc(-50%), .5em);
			z-index: 2;
		}
	}

	&  > div {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 70%;

		& > article::after {
			content: "";
			position: absolute;
			bottom: 90%;
			height: 2em;
			width: .5em;
			z-index: -1;
			background: linear-gradient(to bottom, var(--accent4) 10%, transparent 90%);
			background-color: inherit;
			transform-origin: bottom;
		}
	}

	& article#html-box {
		background: var(--accent4);
	}

	& article#css-box {
		background: var(--accent1);

		&::after {
			left: 75%;
			transform: translateX(-50%) rotate(25deg);
		}
	}

	& article#js-box {
		background: var(--accent3);

		&::after {
			left: 25%;
			transform: translateX(-50%) rotate(-25deg);
		}
	}

	&[data-step] {
		& .file,
		& article::after {
			display: none;
		}

		& article {
			filter: blur(100px);
			animation: architecture 5s linear infinite;
			transition: 10s filter;
		}

			& #html-box {
				transform-origin: 50% 80%;
			}

			& #css-box {
				transform-origin: 80% 20%;
			}

			& #js-box {
				transform-origin: 20% 20%;
			}
	}
}

@keyframes architecture {
	to {
		transform: rotate(1turn);
	}
}

#instructors {
	& h2 {
		position: relative;
		text-align: left;
		margin-top: 20vmin;
	}

	& .avatar {
		position: absolute;
		bottom: -.5em;
		right: .5em;

		& .delayed {
			position: absolute;
			top: 12.6%;
			left: 20%;
		}
	}

	& img:first-of-type {
		width: 30vmin;
		height: 30vmin;
		border-radius: 40vmin;
		object-fit: cover;
	}

	& ul {
		padding-left: 1em;
		font-size: 95%;
		letter-spacing: -.01em;
	}
}

#tas {
	& article {
		font-weight: bold;

		&[title]::after {
			font-size: 150%;
			letter-spacing: -.03em;
			white-space: nowrap;
		}

		& img {
			width: 100%;
			object-position: 50% 30%;
		}
	}
}

#dragons {
	background: url(img/dragons.jpg) top / cover;

	& ul {
		margin: 0;
		margin-top: auto;
		background: hsla(0,0%,100%,.3);
		backdrop-filter: blur(5px);
		padding: .5em .5em .5em 1.5em;

	}
}

#dogfood {
	background: linear-gradient(to bottom right, rgb(0 0 0 / .5) 20%, transparent 60%), url(img/dogfood.jpg) bottom / cover;
	align-items: start;
	justify-content: start;
	padding-right: 50vw;

	& h1 {
		text-align: left;
	}
}

#user-testing {
	display: block;
	background: linear-gradient(to bottom right, #F3FBFE 30%, #E2F0F3, #DBEAEC 70%);


	& ul,
	& p:first-of-type {
		margin: 0;
	}

	& video {
		float: right;
		width: 950px;
		margin-left: 1em;
		object-fit: contain;
		object-position: top;
	}
}

#five-users {
	& img {
		object-fit: contain;
	}
}

#software-usability {
	grid-template-columns: 1fr auto;
	grid-auto-flow: dense;

	& h1 {
		grid-column-end: initial;
	}

	& > div {
		grid-column: 1;
		padding: 0 1em;
	}

	& > video,
	& > figure {

	}

	& > figure {
		margin: 0;
		grid-row-end: span 2;

		& video {
			height: calc(100% - 1em);
		}

		& figcaption {
			text-align: center;
			font-size: 60%;
			font-style: italic;
		}
	}
}

#html-vs-css {
	text-align: center;

	& h1 {
		font-size: 270%;
		margin-bottom: .5em;
	}

	& > div {
		font-size: 120%;

		& h2 {
			font-weight: 300;
			font-size: 140%;
			margin: .4em 0;
			filter: brightness(150%);

			& strong {
				display: block;
				letter-spacing: -.02em;
			}
		}

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

		&:nth-of-type(2) h2 {
			color: var(--accent1);

		}

		& p {
			margin: 0;
			line-height: 1.4;
			font-size: 100%;
		}
	}
}

[class*="heading-"] > * > img {
	height: 100%;
	object-fit: cover;
}

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

#html-structure {
	align-items: end;
	justify-content: end;
	color: black;

	& h1 {
		padding-right: 1.2em;
		text-transform: uppercase;

		& strong {
			position: absolute;
			transform-origin: .4em 50%;
			transform: rotate(-90deg);
		}

		& abbr {
			font-weight: bold;
			text-decoration: none;
			background: linear-gradient(-78deg, transparent .3em, white 0 calc(100% - .3em), transparent 0);
		}
	}
}

#naked-web {
	grid-template-columns: 1fr auto;

	& video {
		object-fit: contain;
		clip-path: inset(11px 12px 18px 12px round 8px);
	}
}

.slide.with-preview {
	& .media-frame,
	& .browser {
		margin-top: 1em;
	}
}