#for-browser {
	background: #333;
	background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,.5)), linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,.5));
	background-repeat: no-repeat;
	background-size: 1280px 768px, 1024px 768px;
}

#intro {
	display: flex;
	align-items: center;
	justify-content: center;
}

	#intro h1 {

		margin: 0;
		text-align: left;
		font-size: 200%;
		line-height: .8;
		letter-spacing: -.05em;
	}

	#intro h2 {
		width: 8em;
		margin: .4em 0 0;
		font-size: 160%;
		line-height: 1;
		color: black;
		letter-spacing: -.05em;
		position: absolute;
		right: 0;
		bottom: .8em;
		transform-origin: bottom right;
		transform: rotate(90deg) translateY(2.5em);
		text-align: right;
	}

	#intro .attribution {
		position: absolute;
		bottom: -.5em;
		color: white;
		font-size: 80%;
		mix-blend-mode: difference;
	}

		#intro .attribution a {
			text-decoration: none;
		}

kbd {
	position: absolute;
	bottom: 1em;
	right: 1em;
	z-index: 2;
	padding: .1em .5em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: .3em;
	background: linear-gradient(rgba(0,0,0,.2), transparent) #eee;
	font-size: 120%;
	font-weight: bold;
	font-family: var(--font-body);
	box-shadow: 3px 3px hsl(0,0%,40%), 3px 3px 10px rgba(0,0,0,.4);
}

#specs {
	color: white;
	padding: 0;
	align-items: stretch;
}

	#specs > a {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		padding: 1em;
		padding-left: 3em;
		background: url(img/w3c.svg) no-repeat 1em / auto 50% #1a5e9a;
		text-align: right;
		font-size: 180%;
	}

		#specs > a:not(:hover) {
			text-decoration: none;
		}

	#specs .w3c.ed {
		background-color: #d00;
	}

		.fordemo {
			font-family: var(--font-handwritten);
			position: absolute;
			bottom: -.2em;
			right: .5em;
			color: hsl(0, 50%, 60%);
			line-height: 1rem;
			font-size: 140%;
		}

.block,
.blocks div {
	display: flex;
	padding: 1em;
	margin-bottom: 1em;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: -.05em;
	background: white;
}

	.block .block,
	.blocks div .block,
	.blocks div div {
		background: #f06;
		margin: 1em;
	}

.browser-support {
	align-items: center;
	justify-content: center;
}

	.browser-support table {
		border-spacing: .1em;
	}

	.browser-support thead img {
		height: 2em;
	}

		.browser-support thead img[alt="Firefox"] {
			height: 2.2em;
		}

	.browser-support th,
	.browser-support td {
		vertical-align: middle;
		text-align: center;
		padding: .5em;
		border: 1px solid hsla(0, 0%, 100%, 0);
		font-weight: bold;
	}

	.browser-support th {
		border: 0;
	}

	.browser-support tbody th {
		text-align: right;
		padding-left: 0;
	}

	.browser-support thead th {
		vertical-align: top;
		padding-bottom: 0;
		padding-top: 0;
	}

	.browser-support td {
		background: hsl(80, 80%, 40%);
	}

	.browser-support td.incomplete {
		background: hsl(45, 100%, 50%);
	}

	.browser-support td:empty {
		background: hsl(0, 100%, 55%);
	}

		@keyframes poop-dance {
			from, 49% { transform-origin: -50% 100%; }
			50%, 75%, to { transform-origin: 150% 100%; }
			25% { transform: rotate(-10deg); }
			50% { transform: rotate(0deg); }
			75% { transform: rotate(10deg); }
		}

		.browser-support td:empty::before {
			display: block;
		}

@keyframes pulse {
	to { transform: scale(1.4); }
}
span.heart {
	display: block;
	font-size: 160px;
	animation: pulse .2s infinite alternate;
}

span.poop,
.browser-support td:empty::before {
	animation: poop-dance .8s 2s infinite alternate ease-in-out;
}

span.poop {
	display: inline-block;
}

	span.poop:empty::before,
	.browser-support td:empty::before {
		content: "💩";
	}

.poop.slide {

}

	.plus, .equals {
		position: relative;
		z-index: -1;
		display: block;
		font-size: 200%;
		line-height: .8;
		color: #f06;
		margin-top: -.2em;
		font-weight: bold;
	}

	.poop.slide span.poop {
		font-size: 250px;
		line-height: 1.1;
	}


#animation-poop {

}

	#animation-poop h1 {
		line-height: 1;
		margin: 0;
		font-weight: 100;
	}

#daisy-chain {
	padding: 2em;
	background: url(img/daisy-chain.jpg) no-repeat top / auto calc(100vh - 5em) black;
	justify-content: flex-end;
}

	#daisy-chain code span {
		--lengthD: var(--length, 15);
		display: inline-block;
		vertical-align: middle;
		white-space: nowrap;
		overflow: hidden;
	}

	@keyframes typing {
		from { width: 0 }
		to {
			width: calc(var(--lengthD) * 1ch);
		}
	}

	@keyframes caret {
		50% { box-shadow: .03em 0; }
	}

	#daisy-chain span.delayed {
		width: 0;
	}

	#daisy-chain span.current {
		box-shadow: .03em 0 transparent;
	}

	#daisy-chain span.current,
	#daisy-chain span.displayed {
		width: auto;
		--typing-duration: calc(var(--lengthD) * .15s);
		animation: typing var(--typing-duration) steps(var(--lengthD)),
		           caret .9s step-start calc(var(--lengthD) * .2 / .9);
	}


.typing.demo.slide {
	background: hsl(200, 10%, 25%);
}

	.typing.demo.slide .typing {
		display: inline-block;
		white-space: nowrap;
		font: bold 200% var(--font-mono);
		color: white;
	}

	.typing.demo.slide div.editor > textarea.editor {
		max-height: 65vh;
	}

.background.slide {
	background: center / cover;
}

#wtf {
	background-image: url(img/wtf.jpg);
}

#limitations {
	background-image: url(img/sad.jpg);
}

	.background.slide .caption {
		padding: 0 1em;
		background: rgba(0,0,0,.7);
		transition: .4s;
	}

	#wtf .caption {
		min-width: 20em;
		font-size: 100%;
		width: auto;
		margin: auto;
		padding: 1em;
	}

		#wtf .caption ul {
			font-size: 150%;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		#wtf .caption .punctuation {
			color: white;
		}

	.background.slide[data-step] .caption {
		opacity: 0;
	}

	#wtf h1 {
		background: orange;
		border-radius: 50%;
		width: 3.5em;
		height: 3.5em;
		display: flex;
		align-items: center;
		justify-content: center;
		float: right;
		margin: 0;
		font-stretch: condensed;
		font-family: HelveticaNeue-CondensedBold;
		font-size: 155%;
	}

	#limitations h1 {
		color: orange;
	}

.takeaway.slide {

}

	.takeaway.slide h1 {
		font-weight: 100;
	}

		.takeaway.slide h1::before {
			counter-reset: takeaway var(--takeaway);
			content: "Takeaway #" counter(takeaway);
			display: block;
			width: fit-content;
			padding: .2em .5em;
			margin: 0 auto .5em;
			background: orange;
			font-weight: bold;
			text-transform: uppercase;
			font-size: 60%;
		}

#responsive .demo-target {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	padding: 1em;
}

	#responsive section {
		color: rgba(0,0,0,.5);
		background: linear-gradient(currentColor 50%, transparent 0) 0 0 / 100% 10% content-box content-box, silver;
		background-repeat: round;
		padding: .6em;
		box-sizing: border-box;
		mix-blend-mode: multiply;
		flex: 25%;
	}

	#responsive section.wide3 {
		flex: 100%;
		background-color: #f06;
		color: hsla(0,0%,100%,.6);
	}

	#responsive section.wide2 {
		flex: 60%;
		background-color: orange;
	}

.talking.housewife.slide {
	display: block;
	background: #978 url(img/housewife.png) no-repeat bottom right / 50vmin auto;
	padding: 2em;
	transition: 1s ease-in-out background-size;
	color: black;
}

	.talking.housewife.slide:target {
		background-size: 70vmin auto;
	}

	@media (min-aspect-ratio: 16/10) {
		.talking.housewife.slide:target {
			background-size: 90vh auto;
		}
	}

	.talking.slide > h1 {
			position: relative;
			padding: .5em .3em .5em .7em;
			border: .2em solid black;
			width: 9em;
			background: white;
			font-weight: bold;
			font-size: 170%;
			border-radius: .8em;
			text-align: left;
		}

		.talking.slide > h1:before,
		.talking.slide > h1:after {
			content: '';
			position: absolute;
			right: -.99em;
			bottom: 1em;
			width: 0;
			height: 1px;
			border: solid transparent;
			border-width: 0 .8em .8em 0;
		}

		.talking.slide > h1:before {
			border-bottom-color: black;
			z-index: -1;
		}

		.talking.slide > h1:after {
			margin-right: .5em;
			margin-bottom: .2em;
			border-bottom-color: white;
		}

#default-values {}

	#default-values .delayed-children {
		display: flex;
		flex-flow: column;
	}

		#default-values .delayed-children > div {
			font-weight: bold;
			padding: .6em 1em;
			margin: .2em;
			font-weight: bold;
			letter-spacing: -.05em;
			text-align: center;
		}

	#default-value pre {
		margin-bottom: 0;
		margin-top: 2em;
		overflow: visible;
	}

#multiple-default-values[data-step] {
	background: yellowgreen;
}

	#multiple-default-values:not([data-step]) pre + pre {
		opacity: 0;
	}

	#multiple-default-values[data-step] pre {
		filter: invert(100%);
		mix-blend-mode: multiply;
		transition: .4s all, .4s 1s opacity;
	}

#purple-shadow .block {
	width: 9.3em;
	font-size: 120%;
	color: rebeccapurple;
}

#scrolling .demo-target {
	padding: 0 3rem 1rem;
}

.scrolling {
	overflow: auto;
	max-height: 50vh;
	border: .2em solid white;
	background: hsla(0,0%,100%,.2) no-repeat;
	text-align: left;
	padding: .5em 1em;
	font: 100% Baskerville, Palatino, Georgia, serif;
}

#svg-eyes {
	background: hsl(20, 40%, 70%);
	--font-size-multiplier: .8;
}

	#svg-eyes svg {
		width: 90vw;
	}

	#svg-eyes #eye-white {
		fill: white;
	}

	#svg-eyes #iris {
		stroke: hsl(200, 50%, 50%);
		stroke-width: 14;
		fill: black;
	}

	#svg-eyes .second-eye {
		x: 150px;
	}

.note {
	font-family: var(--font-handwritten);
	color: orange;
}

@keyframes fall {
	from { transform: translateY(-160vh); }
}

@keyframes pos {
	10% { left: 10vw }
	20% { left: 80vw }
	30% { left: 50vw }
	40% { left: 30vw }
	50% { left: 85vw }
	60% { left: 20vw }
	70% { left: 70vw }
	80% { left: 0vw }
	90% { left: 60vw }
	to { left: 50vw }
}

.future.slide {
	overflow-y: hidden;
}

.future.slide h1::before {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="140"><text style="font-size:90px" y="1em">🔮</text></svg>');
	position: absolute;
	bottom: -50vh;
	z-index: 1;
	animation: fall 3s infinite ease-in, pos 30s steps(1) infinite;
	filter: drop-shadow(0 10px 10px rgba(0,0,0,.5));
}

#edgestatus {
	justify-content: flex-start;
	background-image: url(img/edgestatus.png);
}

	#edgestatus h1 {
		position: absolute;
		width: auto;
		margin: 0;
		padding: .5em 1em;
		background: black;
	}

		#edgestatus h1 a:not(:hover) {
			text-decoration: none;
		}

#url-cases {

}

	#url-cases table td {
		vertical-align: top;
		padding: .5em;
		font-weight: bold;
		border-top: 1px solid hsla(0,0%,100%,.2);
	}

	#url-cases pre > code {
		font-size: 75%;
	}

	#url-cases img {
		display: inline-block;
		vertical-align: middle;
		height: 1.6em;
	}

	#url-cases a.bug {
		font-size: 80%;
	}

button.run {
	font-weight: bold;
	padding: .1em .5em;
	background: yellowgreen;
	color: white;
	border: 0;
	border-radius: .2em;
}

.delayed.strike {
	position: relative;
	opacity: 1;
	line-height: 1.2;
}

	.delayed.strike::before {
		content: "";
		position: absolute;
		top: .4em;
		left: -.1em;
		height: .1em;
		background: hsla(0, 100%, 80%, .9);
		width: 0%;
		border-radius: 1em;
		transition: .5s;
	}

	.delayed.strike.current::before,
	.delayed.strike.displayed::before {
		width: 100%;
	}

#preprocessors {

}

	#preprocessors code {
		font-size: 200%;
	}

	#preprocessors strong {
		color: hsla(0, 100%, 80%, .9);
	}

img[alt="Mavo"] {
	filter: drop-shadow(0 0 .2em rgba(0,0,0,.5));
}