@import url('https://fonts.googleapis.com/css?family=Londrina+Solid');

#cover-cheat {
	font-family: var(--font-handwritten);
}

	#cover-cheat h1 {
		filter: url(#squigglevision-filter);
	}

	#cover-cheat h1 {
		border: 3px solid;
		padding: .15em .2em;
		position: relative;
		font: 400%/.9 Londrina Solid, var(--font-heading);
		text-transform: uppercase;
		color: hsla(0,0%,100%,.9);
	}

	#cover-cheat h1 div:first-child {
		font-size: 38%;
		line-height: 1.2;
	}

	#cover-cheat h1 div:nth-child(3) {
		font-size: 120%;
	}

	@keyframes spin {
		to { transform: rotate(1turn); }
	}

	#cover-cheat svg {
		position: absolute;
		width: 12em;
		height: 12em;
		margin-top: 1.5em;
		margin-left: 5em;
		animation: 25s spin infinite linear;
	}

	#cover-cheat textPath {
		font: 16.5px var(--font-handwritten);
		text-transform: none;
		fill: var(--color-orange);
		text-shadow: .1em .1em 1em rgba(0,0,0,.6);
	}

	#cover-cheat .attribution {
		margin-top: 3em;
		margin-bottom: 0;
		font-size: 120%;
		color: var(--color-aqua);
		font: 110%/.9 Londrina Solid, var(--font-heading);

	}

		#cover-cheat .attribution a {
			text-decoration: none;
		}

#fancy-borders-2 {
	background: white;
}

		#fancy-borders-2 h1 {
			width: 3em;
			width: min-content;
			padding: .3em .3em .1em;
			color: black;
			text-align: center;
			font: 500%/1 var(--font-handwritten);
			filter: url(#squigglevision-filter);
			background: none;
		}

		#fancy-borders-2:target h1 {
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">\
				<style>\
				@keyframes draw {\
					to {stroke-dasharray: 400% 400%}\
				}\
				</style>\
				<rect width="100%" height="100%" \
				      stroke="black" stroke-width="15" fill="none"\
					  style="animation: draw 3s both; stroke-dasharray: 0 400%;" \
					   />\
			</svg>');
		}

#custom-bullets ul,
#smiley-bullets ul {
	margin: .5em 0;
	font-size: 300%;
	line-height: 1;
	max-width: 10em;
	max-width: fit-content;
}

	#custom-bullets li,
	#smiley-bullets li {
		margin: .3em 0;
	}

.worms {
	display: flex;
	flex-flow: row;
	background: white;
	color: black;
}

	.worms > div {
		font-size: 150%;
		flex: 1;
	}

	.worms h1 {
		text-align: left;
	}

		.worms h1 code {
			font-weight: bold;
		}

ul.sad.emojilist,
.emojilist .sad.li {
	list-style-image: url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 100 100">\
		<text y=".9em" font-size="100">☹️</text>\
	</svg>');
}

ul.happy.emojilist,
.emojilist li.happy {
	list-style-image: url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 100 100">\
		<text y=".9em" font-size="100">🤩</text>\
	</svg>');
}

.slide .ribbon {
	content: attr(data-type);
	position: fixed;
	top: 0;
	right: 0;
	padding: .2em;
	color: white;
	font-size: 150%;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	background: hsl(40,100%,50%);
	background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
	line-height: 1.2;
	min-width: 20em;
	box-shadow: 0 10px 5px -5px rgba(0,0,0,.2);
	transform: rotate(45deg) translate(6.2em, -3.5em);
	white-space: pre-line;
	background-color: var(--color-magenta);
}

	.slide .ribbon::first-line {
		font-size: 70%;
	}

.emoji-on-top {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 150px;
	filter: drop-shadow(0 0 .5em black);
}

#squigglevision h1 {
	filter: url(#squigglevision-filter);
	font: 600% var(--font-handwritten)
}

#squigglevision svg {
	display: none;
}

#squigglevision-examples {
	background: /*url(img/squigglevision.gif) top left,*/
	            url(img/squigglevision2.gif) right,
	            url(img/squigglevision3.gif) left,
	            /*url(img/squigglevision4.gif) bottom right*/
				white;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
}

#fancy-borders-section .slide.demo:not(.displacement-map) svg {
	transform: scale(2);
}

.displacement-map foreignObject {
	width: 100%;
	height: 100%;
	overflow: visible;
}

	.displacement-map foreignObject div {
		width: 0;
		height: 0;
		padding: 20%;
		background: linear-gradient(black 2px, transparent 0), linear-gradient(to right, black 2px, transparent 0),
		            linear-gradient(#888 1px, transparent 0), linear-gradient(to right, #888 1px, transparent 0),
					hsla(0,0%,100%,.5);
		background-size: 20% 20%, 20% 20%, 2% 2%, 2% 2%;
	}