@font-face {
	font-family: 'Reenie Beanie';
	font-style: normal;
	font-weight: 400;
	src: local('Reenie Beanie'),
		local('ReenieBeanie'),
		url("fonts/reenie-beanie.woff2") format('woff2');
}

:root {
	--font-handwritten: 'Reenie Beanie', Marker Felt, var(--font-body);
	--color1: hsl(40, 100%, 50%);
	--color2: hsl(178, 80%, 40%);
	--color3: #f06;
	--color4: yellowgreen;
	--color5: yellow;
	--color-orange: var(--color1);
	--color-aqua: var(--color2);
	--color-magenta: var(--color3);
	--color-green: var(--color4);
}

body {

}

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

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

section > header.slide {
	--stripe: 15vw;
	--stripe-gap: 10px;
	background: repeating-linear-gradient(-30deg, white 0, white var(--stripe-gap), transparent var(--stripe-gap), transparent var(--stripe)),
	repeating-linear-gradient(-30deg,
	                  hsl(35, 100%, 50%) 0, hsl(35, 100%, 50%) var(--stripe),
					  hsl(330, 100%, 50%) var(--stripe), hsl(330, 100%, 50%) calc(2 * var(--stripe)),
					  hsl(85, 80%, 45%) calc(2 * var(--stripe)), hsl(85, 80%, 45%) calc(3 * var(--stripe)),
					  hsl(200, 90%, 55%) calc(3 * var(--stripe)), hsl(200, 90%, 55%) calc(4 * var(--stripe))
			    );
}

/* Syntax highlighting */

code.de-emphasize,
span.de-emphasize {
	opacity: .4;
}

.hint {
	position: absolute;
	bottom: -5px;
	right: 10px;
	font-size: .8rem;
	font-weight: bold;
	line-height: 1;
	opacity: .15;
}