#standards-bodies {
	display: block;
	background: white;
	color: black;

	& h1 {
		font-weight: bold;
	}

	& dl {
		flex: 1;
		display: flex;
		margin: 0;
		font-size: 200%;
	}

		& dt {
			grid-column: 1;
		}

		& div {
			flex: 1;
			grid-column: 2;
			border-bottom: .2em dotted hsl(var(--gray), 80%);

			&::before {
				content: "   "
			}
		}

		& dd {
			max-width: 200px;
			grid-column: 3;
			margin: 0;
			opacity: 1;
			font-weight: bold;
			color: #D93030;

			&.current,
			&.displayed {
				width: 200px;
				background: left / contain no-repeat;
				color: transparent;

				&[title=W3C] {
					background-image: url('img/w3c-logo.svg');
				}

				&[title=IETF] {
					background-image: url('img/ietf-logo.svg');
				}

				&[title=ECMA] {
					background-image: url('img/ecma-logo.svg');
				}

				&[title=WHATWG] {
					background-image: url('img/whatwg-logo.svg');
				}
			}
		}
}

#standards-bodies-summary {
	& dl {
		margin: 0;
		grid-gap: 1em;
	}

	& img {
		height: 3em;
	}

	& ul {
		margin: 0;
	}
}

dt.member-companies:before,
#wg-composition .member-companies {
	background: var(--accent1);
}

div.invited-experts,
dt.invited-experts:before,
#wg-composition .invited-experts {
	background: var(--accent2);
}

div.w3c-staff,
dt.w3c-staff:before,
#wg-composition .w3c-staff {
	background: var(--accent4);
}

#wg-composition {

	& h1 {
		margin: 0;
	}

	& > div,
	& li {
		display: inline-block;
		padding: 1em 2em;
		border-radius: 40px;
		margin: .3em;
		text-align: center;
		list-style: none;
		box-shadow: 1px 2px 8px rgba(0,0,0,.15) inset;
		font-size: 107%;
	}

	& ul {
		padding: 0;
		margin: 0;
	}

	& > div {
		position: relative;
		padding: 1em;
		background-color: var(--accent3-light);
		color: var(--accent3);
		text-shadow: 0 2px 2px hsla(0,0%,100%,.8);
	}

		& > div > ul {
			color: white;
			text-shadow: 0 -1px 2px rgba(0,0,0,.8);
		}

			& > div > ul > li {
				border-radius: 30px;
			}

			& > div > ul > li > ul > li {
				padding: .5em 1.5em .8em;
				background: rgba(0,0,0,.4);
				font-size: 75%;
				border-radius: 15px;
			}

				& li em {
					display: block;
					font: inherit;
					color: inherit;
					font-size: 70%;
				}

		& .displayed {
			opacity: 1;
		}
}

.pie {
	--size: 50vmin;
	width: var(--size);
	height: var(--size);
	background: conic-gradient(
		var(--color1) calc(var(--p1, 0) * 100%),
		var(--color2) 0  calc((var(--p1, 0) + var(--p2, 0)) * 100%),
		var(--color3) 0  calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0)) * 100%)
	);
	border-radius: 50%;
}

.wg.slide {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	grid-gap: 0 2em;
	padding: 15vmin;

	& h1 {
		grid-column: 1 / span 2;
	}

	& .pie {
		--p1: calc(var(--members) / var(--total));
		--p2: calc(var(--ies) / var(--total));
		--p3: calc(var(--w3c) / var(--total));
		--color1: var(--accent1);
		--color2: var(--accent2);
		--color3: var(--accent4);
	}
}

.legend {
	font-size: 80%;

	& dt {
		display: inline;

		&:before {
			content: '';
			display: inline-block;
			width: 1em;
			height: 1em;
			border-radius: 5px;
			margin-right: .3em;
			vertical-align: -.15em;
		}

		&:after {
			content: ': ';
		}
	}

	& dd {
		display: inline;
		margin: 0;
		font-weight: bold;

		&:after {
			content: '\A';
			white-space: pre;
		}
	}
}

#sausage-making {
	background: url(img/sausage-making.jpg) center / cover;

	& blockquote {
		padding: .8em 1em;
		background: rgb(0 0 0 / .5);
		font-size: 200%;
		line-height: 1.3;

		&::before {
			top: -.05em;
			margin-right: -.3em;
			color: white;
		}
	}
}

#html-1 {
	align-items: flex-start;
	justify-content: flex-end;

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

#html-5,
#html-5-w3c {
	background: url(../html/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(../html/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;
		}
	}
}

.history.slide {
	background-image: var(--image, black);
}

#web-proposal,
#public-domain {
	align-items: start;
	background: url(img/web-proposal.jpg) top right / auto 100% no-repeat;
	transition: .6s;

	& h1 {
		max-width: 14em;
		transition: .4s;
	}

	&[data-step~="1"] {
		transition-delay: .8s;
		background-size: auto 230%;

		& h1 {
			opacity: 0;
		}
	}

	& .highlight {
		position: absolute;
		top: 0;
		height: 2em;
		right: 20%;
		width: 12em;
		border: .3em solid red;
		transition: .6s;
		border-radius: .1em;
		opacity: 0;
	}

	&[data-step~="2"] .highlight {
		opacity: 1;
	}
}

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

#mosaic {
	align-items: start;
	background: url(img/mosaic.jpg) calc(100% - 4vmin) 50% / auto 90vh no-repeat var(--accent4);

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

#netscape {
	align-items: flex-end;
	background: url(img/netscape.png) 4vmin 50% / auto 90vh no-repeat var(--accent3);

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

#netscape-stats {
	align-items: flex-end;
	justify-content: flex-start;
	background: url(img/Netscape-navigator-usage-data.svg) center / contain no-repeat var(--accent2-light);

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

#ie {
	align-items: flex-end;
	background: url(img/ie1.png) 4vmin 50% / auto 90vh no-repeat var(--accent3);

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

#browser-wars {
	justify-content: flex-end;
	background-image: url(img/browser-wars.png);
}

#wasp {
	background-image: url(img/wasp.jpg);
	background-position: -50% 0;
	align-items: flex-start;

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

#netscape-decline {
	justify-content: flex-end;
	align-items: flex-end;
	background: url('img/Browser_Wars_(en).svg') 3vmin 3vmin / auto 80vh no-repeat, radial-gradient(transparent, rgba(0,0,0,.7)) var(--dark1);

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

#ie-rise {

	align-items: flex-start;
	background: url('img/Browser_Wars_(en).svg') 50% 3vmin / auto 94vh no-repeat, radial-gradient(transparent, rgba(0,0,0,.7)) var(--dark1);

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

.question.slide {
	color: black;
	--q: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
	<style>@keyframes q { to {transform: rotate(-5deg)}}</style>\
	<text style="fill: white; fill-opacity: .2; font: bold 80px/1 Times; transform: rotate(-3deg); animation: q 1s infinite alternate;" 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: var(--accent3);

	& h1 {
		position: relative;
		padding: .8em 1em;
		border-radius: .15em;
		background: white;

		&::after {
			content: "";
			position: absolute;
			top: 100%;
			right: 30%;
			margin-top: -1px;
			padding: .5em;
			background: inherit;
			clip-path: polygon(0 0, 100% 0, 100% 100%);
		}
	}
}

.h1-frame.h1-frame.h1-frame {
	overflow: hidden;

	& .browser,
	& iframe,
	& h1 {
		transition: 1s;
	}

	&:not([data-step]) .browser {
		margin: 50vh 0 -100vh;
	}

	& iframe {
		width: 90vw;
		height: 54vh;
	}

	&[data-step~="2"] {
		& h1 {
			margin-top: -45vh;
			margin-bottom: 2em;
		}

		& iframe {
			height: 82vh;
		}
	}
}

#html-bodies {
	& img {
		height: 2em;
	}

	& dt {
		font-weight: bold;
	}

	& dl {
		xalign-items: center;

		& > * {
			padding: .5em;
			margin: 0;

			&:nth-of-type(even) {
				background: hsl(0 0% 100% / .3);
			}
		}


	}
}

#idea-outcomes {
	padding: 0;
	background: black;
}

	#idea-outcomes h1 {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		margin-top: -.6em;
	}

	#idea-outcomes ul {
		position: relative;
		padding: 0;
		margin: 0;
		display: flex;
		width: 100%;
		flex: 1;
	}

	#idea-outcomes li {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		list-style: none;
		background: no-repeat center / cover;
		text-align: center;
		color: black;
		font-weight: bold;
		font-size: 200%;
	}

	#idea-outcomes li.displayed {
		opacity: 1;
	}

.spec-levels {
	margin: 0;
	grid-gap: 0;

	& dt:not(:first-of-type),
	& dd:not(:first-of-type) {
		padding-top: 5rem;
	}

	& dt {
		padding-right: 1em;
		position: relative;
		font-weight: bold;
		line-height: .9;
		text-align: right;
		border-right: .2em solid var(--accent3);

		&::after {
			content: "";
			position: absolute;
			top: 5rem;
			right: -.5em;
			padding: .4em;
			border-radius: 50%;
			background: var(--accent3);
		}

		&:first-of-type {
			&::after {
				top: 0;
			}
		}

		&:last-of-type {
			&::after {
				top: auto;
				bottom: 0;
			}
		}
	}

	& dd {
		padding-left: 1em;
		font-size: 70%;

		& ul {
			margin: 0;
		}
	}


}

#chrome-implementing {
	overflow: hidden;

	& h1 {
		margin-bottom: 0;
	}

	& img {
		height: 100%;
		transition: 1s;
		transform-origin: 20% 0;
	}

	&[data-step] img {
		transform: scale(2.5);
	}

	& .party {
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
		transform: translate(-40%, 0%);
		font-size: 600%;
		text-shadow: 0 .1em .3em black;
		opacity: 0;
		transition: 1s;
	}

	&[data-step~="2"] .party {
		opacity: 1;
	}
}

#reftest {
	& .browser {
		flex: 1;
		padding: 1em;
		padding-top: 1.8em;
		margin-top: 2em;
		font-weight: bold;
	}

	& .new-tab {
		margin-top: 1em;
	}
}

#rise-chrome {
	justify-content: start;
	background: url(img/browsers-2009-2020.png) bottom / 90vw auto no-repeat white;
}