@font-face {
	font-family: 'Reenie Beanie';
	font-style: normal;
	font-weight: 400;
	src: local('Reenie Beanie'), local('ReenieBeanie'), url(https://fonts.gstatic.com/s/reeniebeanie/v8/z7NSdR76eDkaJKZJFkkjuvWxXPq1q6Gjb_0.woff2) format('woff2');
}

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

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 700;
  src: local('Arvo-Bold'), url(fonts/Arvo-Bold.woff2) format('woff2');
}

@font-face {
	font-family: 'Free Sans';
	src: url(fonts/FreeSans.woff);
}
@font-face {
	font-family: 'Free Sans';
	src: url(fonts/FreeSansBold.woff);
	font-weight: bold;
}

@font-face {
	font-family: 'amp';
	src: url(fonts/Rochester-Regular.otf);
	unicode-range: U+26;
	/* aargh the Firefox unicode-range bug strikes again ffs */
}

:root {
	--font-handwritten: 'Reenie Beanie', Marker Felt, cursive;
	--color-magenta: #f06;
}

section > header.slide > h1 {
	font-size: 200%;
}

@media (max-width: 1280px) {
	:root {
		font-size: 80%;
	}
}

.light.slide,
.demo.slide {
	background: var(--light1);
	color: black;
}

.delayed.displayed,
.delayed-children > .displayed {
	opacity: 1;
}

.hint {
	position: absolute;
	font-size: .8rem;
	font-weight: bold;
	line-height: 1;
	color: rgba(0,0,0,.2);
	mix-blend-mode: multiply;
}

	.slide:not(.horizontal) .hint {
		bottom: -5px;
		right: 10px;
	}

	.slide.horizontal .hint {
		top: -5px;
		left: 10px;
	}

input:not([type]),
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea:not([class]),
select {
	background: hsla(0,0%,100%, .2);
	border: .05em solid white;
	padding: 0 .3em;
	box-sizing: border-box;
	font-weight: bold;
}

pre:not(.prism-live) .token.comment {
	font-family: var(--font-handwritten);
}

.light.slide pre {
	background: var(--dark1);
	color: white;
	padding: 1em;
	align-self: stretch;
}