@import url("fonts/index.css");


:root {
	--serif: Adobe Caslon Pro, Baskerville, Garamond, Georgia, serif;
	--sans-serif: Helvetica Neue, Segoe UI, sans-serif;
}

.question.delayed {
	position: relative;
	display: inline-block;
	opacity: 1;
	border-bottom: .05em dotted var(--color-orange);
	font: 300%/.6 var(--font-handwritten);
}
.question.delayed::after {
	content: attr(data-answer);
}
.question.delayed:not(.current):not(.displayed)::before {
	content: "?";
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--color-orange);
}
.question.delayed:not(.current):not(.displayed)::after {
	visibility: hidden;
}

.charquiz {
	text-align: center;
}

	.charquiz:target {
		display: flex;
		flex-flow: column;
	}

	.charquiz p {
		margin: 0;
		font-size: 140%;
	}

	.charquiz .character {
		font: 80vh/.9 var(--serif);
	}

#ligatures {
	background: url(img/ligatures.png) center #E8E6E2 no-repeat;
}

#kerngame {
	background: url(img/kerngame.png) center / 100% auto no-repeat #3A3A44;

}

	#kerngame h2 {
		color: white;
		text-shadow: none;
	}

.word-def {
	font: 300%/1.2 Adobe Caslon Pro, Hoefler Text, Baskerville, serif;
}

#ben-bitdiddle {
	& > div {
		font-size: 100%;
		font-family: Hoefler Text Pro, Adobe Caslon Pro, serif;
		font-variant-numeric: lining-nums;
	}
}

	#ben-bitdiddle h5,
	#ben-bitdiddle h6 {
		font-size: inherit;
		margin: 0;
	}

	#ben-bitdiddle h5 {
		text-align: center;
	}

	#ben-bitdiddle h6 {
		margin-top: .5em;
	}

	#ben-container > div {
		flex: 1;
		margin: .5em;
		padding: .5em;
		background: white;
		box-shadow: 0 .1em .3em rgba(0,0,0,.2);
		max-width: 20em;
	}

	.small-caps {
		/* font-variant-caps: titling-caps; */
		font-variant-caps: all-small-caps;
	}

	.oldstyle {
		font-variant-numeric: oldstyle-nums;
	}

	#ben-bitdiddle span.delayed {
		opacity: 1;
	}

	#ben-bitdiddle span.current {
		color: red;
		background: hsl(0,100%,95%);
	}

	#ben-bitdiddle button {
		position: absolute;
		bottom: 1em;
	}

.split-definition.slide {
	padding: 0;
	align-items: stretch;
	justify-content: stretch;
}

	.split-definition dl,
	.split-definition pre {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	.split-definition > * > dt {
		font-size: 250%;
		line-height: 1.1;
		font-family: var(--heading-font);
		font-weight: bold;
	}

	.split-definition >:nth-child(1) {
		background: var(--accent1-light, white);
		color: black;

		& dt,
		& h1 {
			color: var(--accent1);
		}
	}

	.split-definition >:nth-child(2) {
		color: white;
		background: var(--accent1, black);

		& dt,
		& h1 {
			color: var(--accent1-light);
		}
	}

.slide > .browser:only-child > iframe:only-child {
	width: calc(100vw - 4vmin - 4vmax);
	height: calc(100vh - 4vmin - 4vmax - var(--frame-top) * 1px);
}

#familyface {
	align-items: flex-start;
	gap: 2em;
	background: var(--medium2, var(--medium1, var(--light1)));
	color: var(--dark1);
}

	#familyface article {
		width: fit-content;
		margin-left: 1em;
		font-size: 160%;
	}

	#familyface h1 {
		font-family: inherit;
		margin: 0;
		text-indent: .4em;
		line-height: .7;
		white-space: nowrap;
	}

	#familyface ul {
		position: relative;
		padding: .3em .8em;
		border-radius: .3em;
		margin: 0;
		width: fit-content;
		background: var(--dark1);
		color: white;
	}

	#familyface li {
		display: inline;
		list-style: none;
	}

	#familyface li.break::after {
		content: "\A";
		white-space: pre;
	}

	#familyface ul .note {
		position: absolute;
		left: 99%;
		white-space: nowrap;

	}

	#familyface .note {
		color: var(--red, #d00);
	}

#tofino-family {
	align-items: center;
}

	#tofino-family img {
		flex: 1;
	}

	#tofino-family p {
		position: absolute;
		padding: .7em 1em;
		border-radius: 50%;
		background: #b00;
		color: white;
		line-height: .9;
		font-size: 200%;
		transition-timing-function: cubic-bezier(.3,.2,.5,1.5);
		box-shadow: .1em .1em .3em rgba(0,0,0,.3);
		text-align: center;
		font-weight: bold;
	}

		#tofino-family p strong {
			display: block;
			font-size: 200%;
			font-weight: inherit;
		}

	#tofino-family p.delayed:not(.displayed):not(.current) {
		transform: scale(0);
	}

#weight-anim {
	align-items: center;
	font-family: "Kairos Sans";
	line-height: 1;
	padding: 2em;
}

	#weight-anim ul {
		flex: 1;
		display: flex;
		flex-flow: column;
		width: fit-content;
		width: -moz-fit-content;
		margin: 0;
		padding: 0;
		position: relative;
		font-size: 150%;
		color: var(--light1, white);

		&::before {
			content: '';
			position: absolute;
			top: .6em;
			bottom: .5em;
			left: -.6em;
			width: .1em;
			background: currentColor;
		}
	}

	#weight-anim li {
		white-space: nowrap;
	}

	#weight-anim .w300 {
		font-weight: 300;
	}

	#weight-anim .w800 {
		margin-top: auto;
		font-weight: 800;
	}

	@keyframes weight {
		from, 5% {
			font-weight: 300;
			top: 0;
		}

		95%, to {
			font-weight: 800;
			top: calc(100% - 1em);
		}
	}

	#weight-anim .variable {
		position: absolute;
		top: 0;
		font-weight: 300;
		color: var(--medium1, var(--light1, white));
	}

	#weight-anim .variable::after {
		content: " " var(--font-weight, "300");
	}

	#weight-anim .variable.current {
		animation: weight 3s linear infinite alternate;
	}

.vardemo.vardemo {
	padding: 0;
	flex-flow: row;
	overflow: hidden;
	color: black;
	background: var(--accent1-light);
}

	.vardemo > div {
		position: relative;
		align-self: stretch;
	}

	.vardemo.slide.slide pre {
		box-sizing: border-box;
		height: 100%;
		box-shadow: none;
		padding: 1em;
		font-size: 85%;
		background: hsl(var(--gray), 20%);
		color: white;
	}

	.vardemo p {
		margin: auto;
	}

#poo input[type=range] {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0;
	width: 49.9vh;
	transform: translate(-25vh, 49vh) scale(2) rotate(-90deg);
}

#poo p {
	font: 800%/1 Poo;
	font-variation-settings: "crap" 100;
}

	@supports (-webkit-clip-path: initial) {
		/* Chrome */
		 #poo p {
			 font-size: 333%;
		 }
	}

#decovar p {
	font: 500%/.8 Decovar;
	text-align: center;
}

	#decovar p span {
		display: block;
	}

	#decovar p span:nth-child(1) {
		font-size: 170%;
	}

	#decovar p span:nth-child(2) {
		font-size: 135%;

	}

	#decovar p span:nth-child(3) {
		text-indent: .1em;
	}

#illum {
	background: url(img/illum.jpg) center / cover;
	padding: 0;
}

#emoji {
	padding: 0;
	background: var(--light1);

	& h1 {
		position: absolute;
	}
}

	#emoji > div {
		text-align: justify;
		text-align-last: justify;
		margin: 3rem;
		font-size: calc(20vh - 2.2em);
		font-size: min((100vh - 5rem) / 5, .75 * (100vw - 5rem) / 12);
		line-height: 1.2;
	}

@keyframes caslon-123 {
	0%, 50% {
		background-image: url(img/caslon-1.png);
	}
	55%, 75% {
		background-image: url(img/caslon-2.png);
	}
	80%, 100% {
		background-image: url(img/caslon-3.png);
	}
}

#caslon-123 {
	background: url(img/caslon-1.png) center / contain hsl(var(--gray), 75%) no-repeat;
	animation: caslon-123 4s linear infinite alternate;
}

#A-glyph {
	background: url(img/A-glyph.png) center / contain hsl(var(--gray), 75%) no-repeat;
	padding-left: 50vw;
	padding-right: 8vw;

	& .word-def {
		font-size: 250%;
		hyphens: auto;
	}
}

.zwj {

	border: .1em dashed;
	padding: .5em .5em;
	display: inline-block;
	max-width: 4em;
	font-size: 30%;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;

	&::before {
		content: "Zero width joiner";
	}
}

.arabic-text {
	font-size: 300%;
	line-height: 1;
	min-height: 1em;
}

dl.glyphs {
	display: grid;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	align-items: stretch;
	justify-content: stretch;

	& dt,
	& dd {
		border: 1px solid black;
		color: black;
		text-align: center;
	}

	& dt {
		grid-row: 1;
		padding: .3em 0 .2em;
		font: bold 75% var(--font-mono);
		background: hsl(var(--gray), 80%);
	}

	& dd {
		grid-row: 2;
		background: white;
		padding: .3em;
		margin: 0;
		font: 200%/1 var(--serif);
		min-width: 1em;
	}
}

.property.slide {
	padding: 0;
	text-align: center;
	font-size: 300%;
	background: var(--light1);
	color: black;

	& pre {
		padding: 1em;
		margin: 1em 0 2em;
		background: hsl(var(--gray), 20%);
		color: white;
		align-self: stretch;

		& input[type="number"],
		& select {
			-webkit-appearance: none;
			-moz-appearance: textfield;
			color: inherit;
			background: transparent;
		}

		& select {
			text-align: right;
		}
	}

	& td {
		padding: 0;
	}

	& .figure {
		margin: auto;
		font-family: var(--serif);
		font-size: min(32vh - 3em, 370%);
		line-height: 1.2;
		max-width: 80vw;
	}
}

	#ordinal {
		& .figure {

		}
	}

	#fractions p,
	#no-fake-bold-italic p {
		margin: 0;
		font-family: LinBio;
		font-size: 350%;
	}

	#tabular table {
		margin: 0 auto;
		text-align: right;
		font-family: LinBio;
		font-size: 220%;

		& td {
			text-align: right;
		}

		& th {
			padding: 0;
			padding-right: .7em;
		}
	}

	#line-height,
	#line-width,
	#justify {
		& .figure {
			white-space: normal;
			font-size: 100%;
			text-align: left;
		}
	}

	#line-width,
	#justify {
		overflow: hidden;
		justify-content: start;

		& pre {
			position: absolute;
			left: 0; right: 0; bottom: 0;
		}

		& .figure {
			margin: 1em;
			font-size: 70%;
		}
	}

@keyframes custom-axes {
	to { --value: 300 }
}
#custom-axes {
	--value: 100;
	animation: custom-axes 3s linear infinite alternate;

	& h1 {
		font-family: '-OC Format Shards';
		font-variation-settings: 'SHTR' var(--value);
		font-size: 400%;
	}

	& .value::before {
		counter-reset: value var(--value);
		content: counter(value);
		color: white;
	}
}

.slide[data-image] {
	background: black;
	overflow: hidden;
}

.slide[data-image]::after {
	content: "";
	position: absolute;
	z-index: -1;
	--blur: 30px;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: calc(-2 * var(--blur));
	background: var(--img) center / cover;
	filter: blur(var(--blur));
	opacity: .6;
}

	.slide[data-image] img {
		box-shadow: .1em .2em 2em rgba(0,0,0,.3);
		border-radius: 6px;
		min-height: 80vh;
	}

#css-measurements {
	padding: 0;

	& figure {
		width: 100%;
		text-align: center;
		font: 800%/1 Adobe Garamond Pro, var(--serif);
		--percentage: 0%;
		--percentage2: 0%;
		background: linear-gradient(to right, var(--accent2) var(--percentage2), transparent 0) 50% 54% / 100% 1ex,
		            linear-gradient(to right, var(--accent1) var(--percentage), transparent 0) bottom / 100% 1em
		 ;
		background-repeat: no-repeat;

		& span {
			display: inline-block;
			--bg: var(--accent3);
			width: 1ch;
			mix-blend-mode: screen;
		}
	}

	&[data-step~="1"] {
		& figure {
			--percentage: 100%;
		}
	}

	&[data-step~="2"] {
		& figure {
			--percentage2: 100%;
		}
	}

	&[data-step~="3"] {
		& span {
			background: var(--bg);
			box-shadow: 0 1em var(--bg), 0 -1em var(--bg);
		}
	}

	& .legend {
		display: flex;
		position: absolute;
		left: 1em;
		bottom: 1em;
		font-weight: bold;
		font-size: 200%;

		& div {
			padding: .1em .5em;
		}

		& > div:nth-child(1) {
			background: var(--accent1);
		}

		& > div:nth-child(2) {
			background: var(--accent2);
		}

		& > div:nth-child(3) {
			background: var(--accent3);
			mix-blend-mode: screen;
		}
	}
}

twitter-widget {
	transform: scale(2) !important;
}

#comic-sans {
	background: white url(img/ban-comic-sans.jpeg) no-repeat center / auto 80%;
	color: black;

	& img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: rotate(var(--rotate, 0deg)) translate(-50%, -50%);
		--rotate: calc(var(--arity, 1) * (var(--index, 1) + 1) * 2deg);
		box-shadow: .05em .05em .5em hsl(0 0% 0% / .2);

		&:nth-child(odd) {
			--arity: -1
		}
	}
}

#serif {
	background: #EFE9E9;

	&:not(:target) object {
		width: 0;
		height: 0;
	}
}

.tweet {
	display: block;
	background: white;
	border-radius: .3em;
}

.amp {
	font-style: italic;
	font-family: Baskerville;
}

#why-kern {
	background: linear-gradient(to right, white 50%, #FFF7ED 0);
}