#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 720px, 1280px 800px;
}

#intro {
	background-position: left;
	background-size: cover;
}

	#intro h1 {
		position: relative;
		width: 3em;
		color: hsl(45 40% 70%);
		margin: 0;
		padding: .4em;
		font-size: 450%;
		line-height: .8;
		letter-spacing: -.05em;
		font-weight: 300;
	}

	#intro h1 img {
		max-width: 100%;
	}

	/* #intro .q {
		color: yellow;
	}

	#intro span.q {
		position: absolute;
		left: 100%;
		font-weight: inherit;
	}

	#intro div.q {
		font-weight: bold;
		font-size: 300%;
	}

	#intro h1 {
		position: relative;
		width: 2em;
		background: yellow;
		margin: 0;
		padding: .4em;
		text-align: left;
		font-size: 450%;
		line-height: .8;
		letter-spacing: -.05em;
		font-weight: 300;
		color: black;
		text-align: right;
	}

		#intro h1::first-line {
			font-weight: bold;
		} */

		#intro::before {
			content: url(img/teapot.png);
			position: absolute;
			bottom: -85px;
			left: 0;
			z-index: 1;
			transform: scale(1.2);
			transform-origin: left bottom;
			-webkit-filter: hue-rotate(-28deg) saturate(1.7);

		}

	#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;
		left: 0;
		right: 0;
		text-align: center;
		color: white;
		font-size: 80%;
	}

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

#nope img {
	width: 500px;
}

/* footer.slide {
	text-align: center;
	padding: 1em 0 0;
}

	footer.slide h1 {
		margin-top: 0;
	}

	footer.slide > ul {
		margin: 0 auto;
		padding: 0 2em;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		list-style: none;
		background: #f06;
		text-align: center;
	}

		footer.slide > ul li {
			flex: 1
		}

		footer.slide > ul li::before {
			content: var(--icon);
			display: inline-block;
			margin-right: .2em;
		}

		footer.slide > ul a {
			text-decoration: none;
			font-weight: 500;
		}



	.stickers {
		position: absolute;
		top: -2em;
		right: -2em;
		width: 11em;
		height: 11em;
		object-fit: cover;
		border-radius: 50%;
		transition: .5s cubic-bezier(.3, .2, .5, 1.6);
	}

		.stickers.delayed:not(.current):not(.displayed) {
			transform: scale(0);
		}

		.stickercaption {
			font: 100%/1.5 var(--font-handwritten);
			position: absolute;
			top: -.5em;
			right: 9em;
			color: #f06;
		}

			.stickercaption:not(.current):not(.displayed) {
				transform: translateX(-150vw);
			} */

#boots {
	background: linear-gradient(to right, #e7ebef 35%, transparent 50%),
	            url(img/bad-rainboots.jpg) center right / auto 120% no-repeat #e7ebef;

}

#uinception,
#uinception div {
	background: url(img/slides.jpg) 50% 20% / cover;
	box-shadow: 0 0 .1em hsla(0,0%,100%,.5) inset, .3em .3em 1em rgba(0,0,0,.5);
	overflow: hidden;
}

	#uinception div {
		position: absolute;
		top: 0; left: 0;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100vh;
		text-align: center;
		transition: .3s transform;
		transform: translateY(-100vh) scale(.8);
		transform-origin: 50% 25%;
	}

	#uinception div.current {
		transform: scale(.8);
	}

		#uinception div::before {
			content: "Slides are a UI";
			display: block;
			background: rgba(0,0,0,.5);
			backdrop-filter: blur(4px);

			position: relative;
			z-index: 1;
			box-sizing: border-box;
			width: 100%;
			padding: .2em 0;
			margin: 0;
			margin-top: calc(50vh - 1em);
			white-space: nowrap;
			font-size: 200%;
			line-height: 1.2;
		}

#faucet {
	transition: .5s background;
	background-size: 100% auto;
}

	#faucet[data-step="1"] {
		background-position: 100% 70%;
		background-size: 200%
	}

#background {}

	#background img {
		display: block;
		max-width: 600px;
		max-height: 600px;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		margin: 0 auto .5em;
		border-radius: 50%;
	}

#research-teaching {
	justify-content: start;
}

	#research-teaching div {
		background: var(--image) 0 0 / cover;
	}

	#research-teaching h2 {
		color: white;
		backdrop-filter: blur(5px);
	}

#tag-member {
	background: url(img/tag.png) 0 0 / cover;
}

#csswg,
#tag-member {
	background-position: top;
	padding: 1em;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

	:is(#csswg, #tag-member) h1 {
		background: hsl(0 0% 0% / .9);
		backdrop-filter: blur(10px);
		max-width: 50%;
		text-align: left;
	}

	#csswg h1 {
		padding: .5em .5em;
	}

	#tag-member h1 {
		padding: .2em .5em;
	}

.sausage {
	background: linear-gradient(to right, #F38662 50%, transparent 70%), url(img/sausage.jpg) right / auto 100% no-repeat, #F38662;
	padding-right: 40%;
	color: black;
	font-weight: bold;
	letter-spacing: -.02em;
}

	.sausage ul ul li,
	.checkmark-list > li {
		list-style-type: "✅";
		padding-left: .3em;
		filter: hue-rotate(-35deg) grayscale(30%);
	}

	.sausage ul ul li::marker,
	.checkmark-list > li::marker {
		font-size: 80%;
		line-height: 2;
	}

#ten-commandments {
	background: url(img/moses.jpg) 50% 65% / cover;
	align-items: flex-end;
	justify-content: flex-end;
}

	#ten-commandments h1 {
		text-align: left;
		font-weight: bold;
		max-width: 80vw;
		margin-right: .2em;
		margin-bottom: 1.5em;
	}

		#ten-commandments h1 .number {
			font-size: 1050%;
			line-height: .1;
			color:var(--accent2);
			letter-spacing: -.1em;
			text-indent: -.24em;
		}

		#ten-commandments h1 .last-line {
			font-size: 96%;
			font-weight: 300;
		}

del, ins {
	font-family: var(--font-handwritten);
	font-size: 150%;
	line-height: .666;
}

ins {
	color: yellowgreen;
	text-decoration: none;
}

del {
	color:hsl(344, 88%, 73%)
}

.hall.slide {
	background: var(--background);
	--background: #111;
	--h1-background: hsla(0,0%,100%,.7);
	overflow: hidden;
}

	.hall.slide > h1 {
		position: relative;
		margin-bottom: auto;
		max-width: 8.3em;
		padding: .5em .6em .4em .3em;
		background: var(--h1-background);
		font-weight: 900;
		color: var(--background);
		font-size: 48px;
		text-align: left;
		border-radius: .15em;

		--poop-interval: 5s;
	}

		.hall.slide > h1 strong {
			font-size: 160%;
			letter-spacing: -.05em;
			white-space: nowrap;
		}

		.hall.slide > h1::before {
			/*content: "🏆";*/
			content: "";
			background: url("img/trophy.png") no-repeat center / contain;
			width: 1em;
			height: 1em;
			margin-right: .1em;
			position: relative;
			z-index: 1;
			float: left;
			font-size: 300%;
		}

	.demo.hall.slide > h1 {
		color: white;
	}

	.hall.shame.slide {
		--h1-background: hsla(0,100%,70%,.7);
	}

	.demo.hall.shame.slide {
		--h1-background: hsl(0,100%,40%);
	}

	.hall.fame.slide {
		--h1-background: hsla(80,100%,70%,.7);
	}

	.demo.hall.fame.slide {
		--h1-background: hsl(80,100%,30%);
	}

	.hall.meh.slide {
		--h1-background: hsla(50,100%,70%,.7);
	}

		@keyframes flip {
			from, 50% {
				transform: none;
			}
		}

		@keyframes strain {
			5% {
				transform: rotate(.5turn) scale(1.1);
			}

			10% {
				transform: rotate(.5turn);
			}
		}

		.hall.slide:not(.fame):target > h1::before {
			animation: 1s flip forwards infinite alternate;
			transform: rotate(.5turn) ;
		}

		.hall.shame.slide:target > h1::before,
		.hall.meh.slide:target > h1::before {
			animation: 1s flip forwards cubic-bezier(.1,1,.5,2);
			transform: rotate(.5turn);
		}

		.hall.shame.slide:target > h1::before {
			animation: 1s flip forwards cubic-bezier(.1,1,.5,2), var(--poop-interval) 1s strain infinite;
		}

		@keyframes show {
			from {
				opacity: 0;
			}
		}

		@keyframes poop {
			to {
				transform: translateY(200vh) scale(2);
			}
		}

		.hall.shame.slide > h1::after {
			content: "💩";
			position: absolute;
			left: 1.3em;
			top: 2.2em;
		}

		.hall.shame.slide:target > h1::after {
			animation: .1s 1s show both, var(--poop-interval) 1.2s poop infinite ease-in;
			transform-origin: top;
		}

		.hall.slide > :last-child {
			margin-bottom: auto;
		}

	.hall.slide > h1 + h2 {
		margin: 0 0 auto;
		color: var(--h1-background);
	}

.ribbon {
	position: absolute;
	top: 0; left: 0;
	background: linear-gradient(to left, hsla(0,0%,100%,.4), transparent) hsl(0, 100%, 40%);
	text-transform: uppercase;
	transform: rotate(90deg) translateX(70.71068%) rotate(-90deg) rotate(-45deg) translateY(-100%);
	transform-origin: 0 0;
	padding: .2em 3em;
	box-shadow: 0 0.1em 0 0.1em rgba(0, 0, 0, 0.15);
	font-size: 80%;
	font-weight: bold;
	letter-spacing: -.05em;
}

.sin.slide,
.solution.slide,
.commandment.slide {
	font-size: 245%
}

.sin.slide {
	background: radial-gradient(rgba(0,0,0,.85) 20%, transparent 60%), url(img/hell.jpg) black center / cover;
}

.commandment.slide {
	background: radial-gradient(rgba(0,0,0,.8) 20%, transparent 60%), url(img/god.jpg) black center / cover;
}

	.sin.slide::before,
	.solution.slide::before,
	.commandment.slide::before,
	.caveat.slide::before,
	.definition.slide::before,
	.slide[data-label]::before {
		content: var(--content, "Deadly UX Sin");
		padding: .2em 1em;
		margin-bottom: .6em;
		background: var(--label-bg,  hsl(0, 100%, 40%));
		text-transform: uppercase;
		box-shadow: 0 0.1em 0 0.1em rgba(0, 0, 0, 0.15);
		font-size: 36px;
		font-weight: bold;
		letter-spacing: -.05em;
		text-align: center;
	}

	.solution.slide::before {
		--content: "UX Tip";
		--label-bg: hsl(80, 80%, 35%);
	}

	.definition.slide::before {
		--content: "Definition";
		--label-bg: var(--accent2);
	}

	.commandment.slide::before {
		--content: "UX Commandment";
		--label-bg: hsl(200, 60%, 50%);
	}

	.caveat.slide::before {
		--content: "Caveat"
	}

	.slide[data-label]::before {
		--content: attr(data-label);
	}

	.definition.slide > blockquote,
	.definition.slide > blockquote > p:first-child {
		margin-top: 0;
	}

	.slide:is(.solution, .definition, .caveat, .sin) > h1 {
		max-width: 80vw;
	}

.slide[id$="consistency-example"] {

}

	.slide[id$="consistency-example"] img {
		width: calc(90vw - 4em);
		margin: 0;
		transform: translate(0, -1em);
	}

	.slide[id$="consistency-example"] img + img {
		position: absolute;
		transform: translate(1em, 3em);
	}

	.slide[id$="consistency-example"] img + img + img {
		transform: translate(2em, 6em);
	}

#microwave {
	background: linear-gradient(#333, #444);
}

	#microwave > div {
		position: relative;
		transform: scale(1.8)
	}

		#microwave img:first-of-type {
			position: absolute;
			top: 9px;
			left: 2px;
			height: 94px;
		}

			#microwave img + img {

			}

#replaceChild {

}

	#replaceChild > div {
		position: relative;
	}

	#replaceChild pre {
		--interval: 2s;
		animation: var(--interval) blink infinite step-start;
	}

	@keyframes blink {
		50% {
			opacity: 0;
		}
	}

	#replaceChild pre + pre {
		position: absolute;
		top: 0; left: 0;
		animation-delay: calc(var(--interval) / 2)
	}


ul.good {

}

	ul.good > li {
		list-style: none;
	}

		ul.good > li::before {
			content: "✓";
			display: inline-block;
			vertical-align: middle;
			font-size: 130%;
			color: hsl(80, 80%, 50%);
			text-indent: -1em;
		}

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

	.talking.housewife.slide:target {
		background-size: 50vw auto;
	}

	.talking.slide > h1 {
			position: relative;
			padding: .5em .3em .5em .7em;
			border: .2em solid black;
			width: 7.8em;
			background: white;
			font-weight: bold;
			font-size: 200%;
			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;
		}

.console.slide {
	justify-content: flex-end;
}

	.language-console.overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: hsla(0, 0%, 25%, .8);
		backdrop-filter: blur(5px);
	}

	div.language-console:not(.overlay) {
		width: fill-available;
	}

	.language-console.language-console pre {
		margin: 0;
		padding: 0 .5em;
		transition: none;
		overflow: hidden;
	}

	.language-console pre.in {
		min-width: calc(var(--charcount) * 1ch);
	}

		.language-console pre:not(.error) code {
			display: inline-block;
			vertical-align: middle;
		}

	.language-console pre.error {
		color: red;
		white-space: normal;
	}

		.language-console pre.error > code {
			color: inherit;
			white-space: normal;
		}

		.language-console pre.error > code::before {
			content: "×";
			display: inline-block;
			width: 1.4ch;
			line-height: 1.4ch;
			margin-right: .6ch;
			text-align: center;
			background: red;
			color: white;
			border-radius: 50%;
		}

	.language-console pre.delayed:not(.current):not(.displayed) {
		height: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	@keyframes typing {
		from { width: 2ch }
	}

	.language-console pre.in.delayed.current code {
		overflow: hidden;
		width: calc(var(--charcount) * 1ch);
		animation: calc(var(--charcount) * .08s) typing forwards steps(calc(var(--charcount) - 2));
	}

		.language-console pre.in.delayed.current::after {
			content: "";
			border-right: 1px solid;
			animation: 1s blink infinite step-start;
		}

	.language-console pre:not(:first-of-type) {
		border-top: 1px solid hsla(0,0%,100%,.15);
	}

#future-observers {

}

	#future-observers li + li {
		margin-top: .6em;
	}

	#future-observers a {
		display: block;
		text-decoration: none;
		color: #0cf;
	}

.tweet {
	max-height: 80vh;
	box-sizing: border-box;
	border: 1em solid white;
	border-radius: 2vmin;
	box-shadow: .05em .1em .2em rgba(0,0,0,.5)
}

@keyframes matrix {
	to {
		background-position-y: calc(-1 * var(--size)), calc(3*var(--size) / 2);
	}
}

/*@keyframes pulse { to { font-size: 80px; }}*/

.whynot.slide {
	--q: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
	<text style="fill: white; fill-opacity: .1; font: bold 80px/1 Times;" y=".8em">?</text></svg>');
	--size: 30vmin;
	background: var(--q) 0 0, var(--q) calc(var(--size) / 2) calc(var(--size) / 2);
	background-size: var(--size) var(--size);
	background-color: black;
	animation: matrix 10s 5s infinite alternate ease-in;
}

.priorities.slide {

}

	.priorities.slide ol {
		list-style: none;
	}

		.priorities.slide ol li {
			position: relative;
			margin: 2em 0;
		}

			.priorities.slide ol li + li::before {
				content: ">";
				position: absolute;
				left: calc(50% - .5em);
				bottom: .2em;
				z-index: -1;
				font-size: 300%;
				font-weight: bold;
				color: #f06;
			}

input[type="range"].multirange.ghost {
	--track-background: linear-gradient(to right,
				transparent var(--low), var(--range-color) 0,
				var(--range-color) var(--high), transparent 0
			) no-repeat 0 55% / 100% 40%
}

.logo.slide {
	background: black no-repeat bottom right / auto 2em content-box border-box;
}

.demo.slide .editor-container {
	order: 999;
}

.demo.slide textarea {
	caret-color: white;
}

.demo.slide input {
	color: black;
	margin: 0 auto;
	transform: scale(3);
	transform-origin: top;
	font-size: 33%;
}

/* .demo.slide {
	text-align: center;
	justify-content: flex-start;
	background: hsl(200, 20%, 75%);
}

	.demo.hall.slide > h1 {
		margin-bottom: 1em;
	}

	.demo.slide input:not([type=checkbox]) {
		width: -webkit-fill-available;
		display: block;
	}

	.demo.slide input[type=file] {
		display: inline-block;
		width: fit-content;
		max-width: 15vw;
	}

	.demo.slide input:not([type]) + input:not([type]) {
		margin-top: .1em;
	}

	.demo.slide iframe {
		border-width: 1px;
		background: white;
	}

	.demo.slide:not(.dont-enlarge) [data-edit~="contents"],
	.demo.slide:not(.dont-enlarge) [data-edit~="css"] {
		width: 30%;
		margin: 0 auto;
		transform: scale(3);
		transform-origin: top;
		font-size: 33%;
	} */

#dialog p::before {
	content: url(img/ceilingcat.png);
	display: block;
}

@keyframes multirange {
	from {
		bottom: -669px;
		transform: none;
		box-shadow: 0 970px 40px 150px transparent inset;
	}

	50% {
		bottom: 0;
		transform: none;
		box-shadow: 0 970px 40px 150px transparent inset;
	}

	80% {
		box-shadow: 0 970px 40px 150px transparent inset;
	}
}

@keyframes multirange-h1 {
	from { opacity: 0 }
}

#multirange {
	overflow: hidden;

}

#multirange:target::before {
	animation: multirange 4s 3s both;
}

	#multirange::before {
		content: "";
		position: absolute;
		bottom: 0;
		background: url(img/multirange.png) no-repeat center / cover;
		width: 1280px;
		height: 1445px;
		transform: scale(1.25);
		transform-origin: bottom;
		box-shadow: 0 970px 40px 150px rgba(0,0,0,.5) inset;
	}

	#multirange h1 {
		margin-top: -1em;

	}

	#multirange:target h1 {
		animation: multirange-h1 1s 9s both;
	}

#smashing-html-apis a {
	font-size: 90%;
}

.guideline {
	font-weight: bold;
	letter-spacing: -.02em;
}

	.guideline::before,
	.guideline::after {
		display: inline-block;
		vertical-align: -.28em;
		font-size: 200%;
	}

	.guideline::before {
		content: "👉🏼";
		margin-right: .2em;
	}

	.guideline::after {
		content: "👈🏼";
		margin-left: .2em;
	}

h1 .cite {
	font-size: 50%;
	text-decoration: none;
	font-style: italic;
}

.pros-cons {

}

	.pros-cons li {
		padding-left: .3em;
	}

	.pros-cons li::marker {
		font-size: 120%;
	}

	.pros-cons li.pro::marker {
		content: "👍🏼";
	}

	.pros-cons li.con::marker {
		content: "👎🏼"
	}

.multiple-examples {

}

	.multiple-examples img {
		position: absolute;
		box-shadow: .1em .1em .5em rgb(0 0 0 / .2);
		transform: rotate(1deg);
	}

	.multiple-examples img:nth-child(odd) {
		transform: rotate(-2deg);
	}

	.multiple-examples img:nth-child(4n + 1) {
		top: 2em; left: 2em; scale: 1.5; transform-origin: top left;
	}
	.multiple-examples img:nth-child(4n + 2) {
		top: 2em; right: 2em; scale: 1.5; transform-origin: top right;
	}
	.multiple-examples img:nth-child(4n + 3) {
		bottom: 2em; left: 2em; scale: 1.5; transform-origin: bottom left
	}
	.multiple-examples img:nth-child(4n + 4) {
		bottom: 2em; right: 2em
	}

	.big-emoji {
		font-size: min(500%, 300px);
	}

	.multiple-examples .big-emoji {
		position: relative;

		transition: transform .4s cubic-bezier(.2,.5,.5,1.7);
		transform: translateY(-1em) rotate(-15deg);
		transform-origin: -20% 100%;
	}

	.multiple-examples .big-emoji.current {
		transform: none;
	}

#github-profile {
	background-image: url(img/github-profile.png);
	background-position: 40% 0%;
	background-size: 100% auto;
}

	#github-profile[data-step="1"] {
		background-size: 300% auto;
	}


#slider {

}

	#slider input {
		transform: scale(2);
		width: 20vw;
	}

.full-slide {
	width: 100vw;
	height: 100vh;
	object-fit: contain;
}

#parting {
	background: url(img/bye.jpg) center / cover;
}

	#parting h1 {
		margin: 1em 1em auto auto;
		font-weight: bold;
		letter-spacing: -.02em;
		text-align: right;
	}

#summary {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: black;
	font-size: 65%;
	text-align: left;
	max-width: 22em;
	/* background: hsl(0 0% 100% / .5); */
	padding: 1em;
	border-radius: .2em;
}

	#thankyou #summary ul {
		all: unset;
		font-weight: 400;
		margin: 0;
	}

	#summary h2 {
		padding: .2em 1em;
		width: fit-content;
		margin: 0 0 .5em;
		background: black;
		text-transform: uppercase;
		font-size: 36px;
		letter-spacing: -.05em;
		text-align: center;
		color: hsl(344, 88%, 73%);
	}

	#summary li {
		padding-left: .5em;
	}

	#summary li.sin {
		list-style-type: "👿";
	}

		#summary li.sin::before {
			content: "Avoid ";
			font-weight: bold;
		}

	#summary li.commandment {
		list-style-type: "😇";
	}

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