@font-face {
	font-family: 'webapps';
	font-style: normal;
	font-weight: 400;
	src: url("fonts/webapps.woff2") format('woff2');
}

@font-face {
	font-family: 'Icons';
	font-style: normal;
	font-weight: 400;
	src: url("../shared/fonts/slide-icons.woff2") format('woff2');
}

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

#adjust-resolution h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	width: calc(var(--vw) * 1px);
	height: calc(var(--vh) * 1px);
	flex: none;
	padding: 1em;
	box-sizing: border-box;
	margin: 0;
	outline: 1px dashed hsla(0,0%,100%,.6);
	outline-offset: -1px;
}

	#adjust-resolution h1 span {
		display: block;
		font-size: 50%;
		font-weight: 300;
	}

#intro {
	align-items: flex-end;
	justify-content: flex-start;
	background: url(../html-secrets/img/htmlwallpaper.jpg) right 60% / 140% auto;
}

	#intro h1 {
		margin-top: .15em;
		margin-right: .3em;
		font-size: 310%;
		color: black;
		text-shadow: 0 0 1em #ffe;
	}

	#intro strong,
	#intro small {
		display: block;
	}

	#intro strong {
		font-size: 220%;
		line-height: .8em;
		display: none;
	}

	#intro span {
		font-size: 89%;
		text-transform: uppercase;
	}

	#intro small {
		font-size: 61%;
		font-weight: 300;
		line-height: 1;
	}

	#intro p {
		margin-top: 0;

		text-align: right;
		font-size: 150%;
		line-height: 1.1;
	}

	#intro p:first-line {
		font-size: 55%;
		font-weight: bold;
	}

		#why-html h1 {
			font-size: 500%;
			margin: auto;
			letter-spacing: -.05em;
		}

#lesbian {
	background: url(../shared/img/greece.svg) no-repeat center / auto 90vh #f06;
	background-origin: content-box;
	overflow: hidden;
}

	#lesbian[data-step] {
		background-size: auto 850%;
		background-position: 67% 36%;
	}

	#lesbian div {
		position: absolute;
		bottom: 1em;
		left: 1em;
		transition: .5s opacity;
	}

		#lesbian .funfact {
			position: fixed;
			top: 0;
			font-weight: bold;
			font-size: 300%;
		}

		#lesbian div p:last-of-type {
			font-size: 120%
		}

		#lesbian div p {
			transition: inherit;
			transition-property: height, opacity;
			height: 1em;
		}

		#lesbian:not([data-step]) > div p + p {
			opacity: 0
		}

			#lesbian:not([data-step="2"]) div p:last-of-type {
				height: 0;
				overflow: hidden;
			}

img.inline{
	height: .9em;
}

#book {

}

	#book a {
		text-decoration: none;
		color: white;
		font-size: 85%;
		font-weight: bold;
	}

	#book img {
		display: block;
		margin-bottom: 1em;
		box-shadow: 1px 1px #aab, 2px 2px #bbc, 3px 3px #99a, 4px 4px #aab, 5px 5px #889, 6px 6px #99a, 7px 7px #778, 8px 8px #889,
		            8px 8px 10px rgba(0,0,0,.6);
	}

#intro video {
	width: 100%;
	background: url("http://localhost:8000/mavo-website/demos/contacts/img/rolodex.jpg");
}

#the-problem {
	background: url(img/excited-coder.svg) left bottom / cover #d6e7eb no-repeat;
	transition: .5s background-image;
	color: black;
}

#the-problem[data-step="1"] {
	background-image: url(img/troubled-coder.svg);
}

#the-problem[data-step="2"] {
	background-image: url(img/frustrated-coder.svg);
}

#the-problem:after,
#jslogos:after {
	color: black;
	text-shadow: none;
	font-weight: 400;
}

	#the-problem ul {
		position: absolute;
		bottom: 0;
		right: 1em;
		padding: 0;
		list-style: none;
	}

		#the-problem li {
			font-weight: bold;
			font-size: 100%;
			line-height: 1;
			transition: 1s 1.1s transform, 4s 5s font-size;
		}

		#the-problem:not([data-step]) li:not(.special) {
			transform: translateY(-100vh);
		}

	#the-problem:not([data-step]) .special {
		font-size: 280%;
	}

	#the-problem .html {
		color: hsl(10, 100%, 50%);
		mix-blend-mode: multiply;
	}

	#the-problem .css {
		color: hsl(210, 100%, 50%);
		mix-blend-mode: multiply;
	}

@keyframes scrollbg {
	to { background-position-y: -977px; }
}

#jslogos {
	background: url(img/jslogos.png) 50% 0 white;
}

	#jslogos:target {
		animation: scrollbg 2s 2s infinite linear;
	}

#todomvc {
	flex-flow: row;
	padding: 3vw;
}

	#todomvc table {
		width: 40vw;
		margin: 0 3vw 0 0;
	}

	#todomvc thead th {
		padding-top: 0;
		padding-bottom: 0;
		font-size: 75%;
		background: orange;
	}

	#todomvc img {
		float: right;
		max-width: 51vw;
	}

	img[src$="todomvc.png"] {
		box-shadow: .1em .1em 2em black;
	}

.single-sentence h1 {
	font-weight: 100;
}

#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;
	}

.label {
	display: block;
	width: fit-content;
	padding: .2em .5em;
	margin: 0 auto .5em;
	background: orange;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 50%;
}

	#evaluation .label {
		background: hsl(85, 80%, 45%);
	}

#mavo {
	padding: 6em;
}

	#mavo .criteria {
		margin-top: 1em;
	}

#todo-code {

}

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

#data-source video {
	border-radius: 2px;
	box-shadow: 0 20px 80px rgba(0,0,0,.6);
}

.example.slide {
	padding: 0;
	flex-flow: column-reverse;
	align-items: stretch;
}

	.example.slide iframe {
		position: static;
		width: auto;
		margin: 1em;
		margin-bottom: 0;
		border-radius: 8px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	div.editor {
		position: relative;
		color: white;
		font-size: calc(var(--font-size-multiplier, 1) * 80%);
		line-height: 1.5;
		box-sizing: border-box;
		right: 0;
		box-shadow: 0 .1em .2em rgba(0,0,0,.3) inset;
	}

	@media (min-width: 1599px) {
		div.editor {
			font-size: calc(var(--font-size-multiplier, 1) * 100%);
		}
	}

		div.editor > textarea,
		div.editor > pre {
			padding: 1rem 2rem;
			line-height: inherit;
			box-sizing: border-box;
			background: transparent;
		}

		div.editor > textarea {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1;
			color: white;
			width: 100%;
			height: 100%;
			caret-color: white;
			color: transparent;
			white-space: pre;
			border: 0;
			outline: none;
		}

		div.editor > pre {
			margin: 0;
			max-height: 50vh;
			background: hsl(200, 10%, 20%) linear-gradient(rgba(0,0,0,.1) 50%, transparent 0);
			background-origin: content-box;
			background-size: auto 3em;
			background-attachment: local;
		}

		/*.editor label {
			position: absolute;
			top: .5em;
			right: .5em;
			padding: .1em .4em;
			border-radius: .3em;
			background: hsl(30, 100%, 50%);
			color: white;
			cursor: pointer;
			font-weight: bold;
			font-size: 1.5rem;
			text-transform: uppercase;
		}

			.editor label:hover {
				background: hsl(15, 100%, 45%);
			}*/

.mv-debug-storage {
	margin-top: 3rem;
	border-radius: .3em;
	background: rgba(0,0,0,.5);
	font-weight: bold;
	font-size: 1rem;
}

	.mv-debug-storage:not([open]) {
		width: fit-content;
	}

	.mv-debug-storage th,
	.mv-debug-storage td {
		text-align: left;
	}



#aggregate-expressions pre code div,
#aggregate-expressions .example-container > h1,
#aggregate-expressions .example-container > h1 ~ p {
	transition: .4s opacity;
}

#aggregate-expressions:not([data-step]) pre code div,
#aggregate-expressions:not([data-step]) .example-container > h1,
#aggregate-expressions:not([data-step]) .example-container > h1 ~ p {
	opacity: 0;
}

#aggregate-expressions [property=cat] ~ h1 {
	font-weight: bold;
	margin-bottom: .1em;
}

#aggregate-expressions [property=cat] ~ p {
	font-size: 80%;
	margin: 0;
}

#phone {
	padding-top: 0;
	padding-bottom: 0;
	justify-content: flex-start;
	flex-flow: row;
}

	#phone iframe {
		position: static;
		width: 44.4vh;
		height: 79vh;
		padding: 10vh 4vh 9vh;
		margin: 0 4vw;
		background: url(img/smartphone.png) center / auto 100% no-repeat;
	}

/* EVALUATION */

#subjects {
	display: block;
	--padding: 5vw;
	padding: var(--padding);
	text-align: center;
}

	#subjects svg.def {
		display: none;
	}

	#subjects svg {
		display: inline-block;
		--size: calc((100vw - var(--padding) * 2) / 10);
		width: var(--size);
		height: var(--size);
		margin-left: -.3em;
		opacity: 0;
		transition: .4s opacity, .4s fill;
	}

	#subjects:not([data-step]) svg {
		fill: white;
	}

	#subjects[data-step] svg {
		fill: var(--color);
	}

	#subjects:target svg {
		opacity: 1;
	}

	#subjects svg path {
		 stroke: white;
		 stroke-width: 5;
		 stroke-linecap: round;
		 fill: none;
	}

	.other {
		--color: yellowgreen;
	}

	#subjects[data-step]:not([data-step="1"]):not([data-step="2"]) .beginner {
		--color: orange;
	}

	.male {
		--color: hsl(340, 70%, 70%);
	}

	.female {
		--color: hsl(185, 70%, 60%);
	}

	#subjects[data-step]:not([data-step="1"]):not([data-step="2"]) .intermediate {
		--color: #f06;
	}

	.legend, .age,
	#subjects .contacts {
		opacity: 0;
		transition: .4s opacity;
	}

		#subjects[data-step] .gender,
		#subjects[data-step]:not([data-step="1"]) .age,
		#subjects[data-step]:not([data-step="1"]):not([data-step="2"]) .skill,
		#subjects[data-step="4"] .contacts {
			opacity: 1;
		}

	.legend > div {
		display: inline-block;
		padding: .35em;
		min-width: 1em;
		margin-left: .5em;
		border-radius: .1em;
		background: var(--color);
		line-height: 1;
		font-size: 80%;
		font-weight: bold;
		text-align: center;
	}

	.age, .legend ~ .legend {
		margin: .5em 0;
		padding-top: .5em;
		border-top: 1px solid hsla(0,0%,100%,.2);
	}

		.age strong {
			color: orange;
		}

#study-design {
	padding: 0;
}

.timeline {
	display: flex;
	width: 100%;
}

	.timeline > div {
		box-sizing: border-box;
		padding: .5em;
		font-weight: bold;
		white-space: nowrap;
		color: black;
	}

		.timeline > div div {
			font-size: 65%;
			font-weight: 300;
		}

	.timeline .tutorial {
		background: orange;
	}

	.timeline .structured {
		background: yellowgreen;
		flex: 1;
	}

	.timeline .unstructured {
		background: hsl(185, 70%, 60%);
		flex: 1;
	}

#tasks {
	padding-top: 40%;
}

	#tasks > h1 {
		margin: 0;
		font-weight: 100;
		font-size: 450%;
		letter-spacing: -.05em;
		color: orange;
	}

	#tasks p {
		font-weight: bold;
		margin: 0;
	}

	.round-item {
		position: absolute;
		padding: 20vw;
		background: center / cover;
		border-radius: 50%;
		--padding: 3vw;
	}

	.slide > .round-item:first-child {
		top: var(--padding);
		left: var(--padding);
	}

	.slide > .round-item:nth-child(2) {
		top: var(--padding);
		right: var(--padding);
	}

	.slide > .round-item:nth-child(3) {
		bottom: var(--padding);
	}

	.slide > .round-item.delayed {
		transition-timing-function: cubic-bezier(.3, .2, .5, 1.6);
	}

	.slide > .round-item.delayed:not(.current):not(.displayed) {
		transform: scale(0);
	}

		.slide > .round-item > :only-child {
			position: absolute;
			white-space: nowrap;
		}

		#tasks > article > h1 {
			padding: 1vw;
			background: hsl(200, 20%, 25%);
			font-weight: 100;
			font-size: 120%;
		}

			#tasks > article > h1 span {
				display: block;
				padding: .6vw;
				margin: 1vw -1vw -1vw;
				background: orange;
				font-size: 80%;
				font-weight: bold;
			}

	#tasks .progression {
		font-size: 120%;
		white-space: nowrap;
	}

		#tasks .progression > div {
			position: relative;
			display: inline-block;
		}

		#tasks .progression > div:first-of-type {
			width: 5em;
			text-align: right;
		}

			#tasks .progression div p {
				position: absolute;
				top: 100%;
				left: 0; right: 0;
				font-size: 50%;
				white-space: pre-line;
			}

#structured {}

	#structured img,
	#freestyle img {
		width: 15vw;
		height: 15vw;
		border-radius: 50%;
		object-fit: cover;
	}

	#structured h1,
	#freestyle h1 {
		font-weight: 100;
		margin: 0;
	}

	#structured svg,
	#freestyle svg {
		fill: white;
		width: 2.5vw;
		height: 2.5vw;
	}

#estimate-before {}

	#estimate-before h1 {
		font-weight: 100;
	}

	#estimate-before .graph {

	}

		#estimate-before .graph > div {

		}

.bar-chart {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 80%;
	height: calc(100vh - 5rem - 3em);
	padding: 1em 0 0 0;
	border: solid white;
	border-width: 0 0 .1em .1em;
	background: linear-gradient(hsla(0,0%,100%,.1) 50%, transparent 0) 0 0 / auto calc(200% / var(--total, 6)) content-box content-box;
	list-style: none;
}

	.bar-chart::before {
		content: attr(title);
		position: absolute;
		transform-origin: -.8em 50%;
		transform: rotate(-90deg);
		font-weight: bold;
	}

	@keyframes bar-grow {
		from { height: 0; }
	}

	.bar-chart li {
		position: relative;
		flex: 1;
		--height: calc(100% * var(--people) / var(--total, 100));
		height: var(--height);
		margin: 0 5%;
		background: pink;
		text-align: center;
		font-size: 200%;
		font-weight: bold;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 100 120" fill="orange">\
			<circle r="26" cx="50" cy="26" />\
			<circle r="50" cx="50" cy="100" />\
		</svg>') top / auto calc(100% / var(--people)) repeat-y;
	}

	.slide:target .bar-chart li {
		animation: bar-grow 1s;
	}

		.bar-chart li::before {
			content: '“' attr(title) '”';
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			margin-top: .2em;
			font-size: 40%;
			font-weight: normal;
		}

.stat.slide {
	transition: .5s font-size;
	line-height: 1.2;
}

.stat.slide:target {
	font-size: 350%;
}

	.stat.slide h1 {
		display: block;
		width: fit-content;
		padding: .2em .5em;
		margin: 0 auto .5em;
		background: yellowgreen;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 80%;
	}

	.stat > strong:first-of-type {
		display: block;
		font-size: 400%;
		line-height: 1;
		color: yellowgreen;
		letter-spacing: -.05em;
	}

	.stat > strong .down-arrow {
		display: inline-block;
		font-size: 75%;
		vertical-align: .1em;
	}

#own-apps {
	align-items: flex-end;
}

	#own-apps h1 {
		position: absolute;
		left: 3vw;
		top: 3vw;
		max-width: 6.5em;
		text-align: left;
		font-size: 130%;
		hyphens: auto;
	}

footer.slide {
	padding: 1em 0 0;
}

	footer.slide .sections {
		display: flex;
		width: 100%;
		background: hsla(0,0%,100%,.1);
	}

		footer.slide .sections > section {
			display: flex;
			flex-flow: column;
			align-items: space-between;
			justify-content: center;
			flex: 1;
			padding: 1em;
		}

		footer.slide .sections > section:first-child {
			background: black;
		}

	footer.slide h1 {
		margin-top: 1em;
	}

	footer.slide img {
		max-width: 30vw;
		margin: auto;
		margin-top: 0;
	}

	footer.slide ul {
		margin: 1em auto 0;
		padding: 0;
		box-sizing: border-box;
		list-style: none;
	}

		footer.slide ul li {
			flex: 1
		}

		footer.slide ul li::before {
			content: var(--icon);
			display: inline-block;
			margin-right: .3em;
			font-family: Icons;
			font-weight: normal;
			color: #f06;
		}

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

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

#comic {
	background: white;
	color: black;
}

	#comic:not(:target) img {
		display: none;
	}

	#comic img + img {
		margin-top: .5em;
	}

	#comic[data-credits]::after {
		color: black;
		text-shadow: none;
	}

.criteria {
	padding: 0;
	margin: 0;
	list-style: none;

}

	.criteria li {
		display: flex;
		align-items: center;
		padding-right: .5em;
		font-weight: bold;
		--color: hsl(80, 100%, 35%);
		background: linear-gradient(hsla(0,0%,100%,.75), hsla(0,0%,100%,.75)), var(--color);
		color: var(--color);
	}

	.criteria li.fail {
		--color: #c00;
	}

		.criteria li::before {
			content: "✓";
			padding: .1em .5em;
			margin-right: .3em;
			background: var(--color);
			color: white;
		}

		.criteria li.fail::before {
			content: "✕";
		}

#related-work {}

	#related-work h1 {
		margin: 0;
		font-weight: 900;
		line-height: .78;
		font-size: 250%;
		letter-spacing: -.05em;
		color: hsl(200, 15%, 20%);
		text-indent: -.06em;
	}

	#related-work .criteria {
		box-shadow: 0 0 .4em hsla(0, 0%, 0%, .4);
	}

	#related-work .round-item {
		padding: 18vw;
		font-size: 70%;
	}

	#related-work .round-item > :only-child {
		left: 9vw;
		top: 45%;
	}

	#related-work .ref {
		display: inline-block;
		vertical-align: .2em;
		font-weight: 600;
		font-size: 40%;
		letter-spacing: -.03em;
	}

	#related-work .ref::before { content: "["; }
	#related-work .ref::after { content: "]"; }

#stat-summary {
	flex-flow: row wrap;
}

	#stat-summary article {
		width: 50%;
		text-align: center;
	}

#crud-apps {
	overflow: hidden;
	padding: 0;
}

	#crud-apps h1 {
		width: 3em;
		position: absolute;
		left: 0;
		font-weight: 100;
		background: orange;
		padding: .5em;
		color: black;
		font-size: 220%;
	}

		#crud-apps h1 span {
			position: relative;
			display: block;
			font-size: 40%;
			line-height: 1.2;
			font-weight: bold;
			margin-top: 1em;
		}

			#crud-apps h1 span::before {
				content: "&";
				position: absolute;
				left: 0;
				right: 0;
				top: -.63em;
				color: hsla(0,0%,0%,.3);
				text-align: center;
				font: italic 500%/1 Baskerville, serif;
				mix-blend-mode: multiply;
			}

	@keyframes credits {
		to {
			transform: translateY(-100%);
		}
	}

	#crud-apps ul {
		position: absolute;
		top: 0;
		list-style: none;
		line-height: 1.5;
		font-weight: bold;
		margin: 0;
		padding: 0;
		text-shadow: 0 calc(var(--total) * 1.5em - .3em);
		animation: credits 5s linear infinite;
	}

ul.blocks {
	display: flex;
	align-items: center;
	font-size: 120%;
}

	ul.blocks li {
		list-style: none;
		margin: 1em;
		text-align: center;
	}

	ul.blocks li::before {
		content: attr(data-icon);
		font-family: 'webapps';
		display: block;
		font-weight: normal;
		color: var(--color1);
		font-size: 200%;
	}

	ul.blocks li:nth-child(2)::before {
		color: var(--color4);
	}

	ul.blocks li:nth-child(3)::before {
		color: var(--color3);
	}

	ul.blocks li:nth-child(4)::before {
		color: var(--color2);
	}

	ul.blocks li:nth-child(5)::before {
		color: var(--color5);
	}

#hard-conditionals h1,
#hard-refs h1 {
	font-size: 140%;
}

#hard-conditionals p,
#hard-refs p {
	text-align: center;
	margin: .5em 0;
}

#hard-refs th {
	padding: .1em .5em;
	background: hsla(0,0%,100%,.3);
}

#hard-refs td {
	padding: .2em .5em;
}

#uist {

}

	#uist img {
		opacity: 1;
		transform: translateY(100vh);
		box-shadow: 0 0 1em rgba(0,0,0,.5);
	}

	#uist .delayed.current {
		transform: translateY(10vh);
	}

#form-elements .mv-bar {
	display: none;
}

#html.slide {
	display: flex;
	flex-flow: row;
	justify-content: center;
}

	#html.slide img {
		height: 60%;
		margin-top: -2em;
	}

.graph-1d {
	position: relative;
	width: 80%;
	--thickness: 10px;
	--text-distance: 4em;
	height: var(--thickness);
	margin: calc(1em + var(--text-distance));
	background: linear-gradient(to right, var(--color1), var(--color2));
	border-radius: .3em;
}

	.graph-1d::before,
	.graph-1d::after {
		position: absolute;
		white-space: pre;
		font-weight: bold;
		font-size: 40%;
		margin-top: -1.2em;
		text-transform: uppercase;
	}

	.graph-1d::before {
		content: attr(data-label-before);
		color: var(--color1);
		right: 100%;
		margin-right: 2em;
		text-align: right;
	}

	.graph-1d::after {
		content: attr(data-label-after);
		color: var(--color2);
		left: 100%;
		margin-left: 2em;
	}

	.graph-1d > * {
		position: absolute;
		top: var(--text-distance);
		left: calc(var(--x) * 100%);
		font-size: 80%;
		line-height: 1.2;
		white-space: nowrap;
		font-weight: bold;
	}

	.graph-1d > :nth-child(even) {
		top: calc(-1 * var(--text-distance) - var(--thickness) * 1.5);
	}

		.graph-1d > ::before {
			content: "";
			position: absolute;
			top: calc(-1 * var(--text-distance));
			width: 0;
			height: 0;
			padding: calc(var(--thickness) * 1.5);
			margin: calc(-1 * var(--thickness));
			border-radius: 50%;
			background: var(--color1);
			box-shadow: 0 0 0 1em hsla(180, 100%, 40%, var(--x)) inset;
		}

		.graph-1d > :nth-child(even)::before {
			top: calc(var(--text-distance) + var(--thickness) * 1.5);
		}

		.graph-1d > ::after {
			content: "";
			position: absolute;
			left: calc(var(--thickness) * .5);
			bottom: 1.5em;
			border-left: 1px solid white;
			height: calc(var(--text-distance) - 1.5em);
			opacity: .3;
		}

		.graph-1d > :nth-child(even)::after {
			top: 1.5em;
			bottom: auto;
		}

@keyframes qqq {
	from { --x: .15; }
	to { --x: .85; }
}

#landscape .qqq {
	animation: qqq 5s infinite alternate linear;
}

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

#karger {
	background: url(img/david-karger.jpg) right / contain no-repeat, linear-gradient(to bottom, hsl(200, 7%, 39%), 55%, hsl(200, 5%, 63%));
}

	#karger h1 strong {
		display: block;
	}

	#karger h1 a {
		display: block;
		font-size: 50%;
		text-decoration: none;
	}

#workflow-quote {

}

	#workflow-quote blockquote {
		font-size: 140%;
	}

	#workflow-quote p:last-of-type {
		font-style: normal;
		font-size: 70%;
	}

	#workflow-quote small {
		display: block;
		font-size: 50%;
		font-weight: 300;
		text-indent: 2.6em;
	}

#iceberg {
	background-image: url(img/iceberg.jpg);
	font: 500%/1 var(--font-handwritten);
	transition: 2s background-position-x;
}

	#iceberg:target {
		background-position-x: left;
	}

	#iceberg p {
		position: absolute;
		right: 1em;
		margin: 0;
		transition: 2s right;
		text-shadow: 0 0 .1em rgba(0,0,0,.8);
	}

	#iceberg:target p {
		right: 4em;
	}

	#iceberg p:first-of-type {
		top: 20vh;
	}

	#iceberg p:last-of-type {
		bottom: 40vh;
	}

#data-interactions .annotation svg {
	width: 22%;
	height: 11%;
	top: 77%;
	left: 73%;
}

#access-control {

}

	#access-control div {
		width: 35em;
		font-size: 50%;
		border: 1px solid hsla(0,0%,100%,.4);
		border-radius: .3em;
		margin-bottom: .5em;
		padding: .8em;
		background: hsla(0,0%,100%,.1);
	}

	#access-control p {
		margin: 0;
		margin-left: 7em;
	}

	#access-control p:first-of-type {
		font-family: Blokk;
	}

	#access-control p:last-of-type {
		font-weight: bold;
		margin-top: .5em;
	}

		#access-control a {
			text-decoration: none;
			margin-right: 1em;
			font-size: 120%;
		}

		#access-control a::before {
			display: inline-block;
			vertical-align: middle;
			margin-right: .3em;
		}

		#access-control .reply::before {
			content: "↩";
			transform: scaleY(-1);
			color: hsl(200, 100%, 80%);
			vertical-align: .1em;
		}

		#access-control .edit::before {
			content: "✏️";
		}

		#access-control .delete::before {
			content: "❌";
			color: #f44;
		}

	#access-control img {
		float: left;
		width: 6em;
		height: 6em;
		border-radius: 50%;
		margin: 0 1em 0 0;
	}

#get-involved a {
	font-weight: bold;
	letter-spacing: -.03em;
}

#realtime {
	background: hsl(264, 55%, 56%);
}

.delayed.strike {
	position: relative;
	opacity: 1;
}

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

	.delayed.strike.current::after,
	.delayed.strike.displayed::after {
		width: 105%;
	}