:root {
	--headerHue: 54;
	--handHue: 88;
	--borderHue: 194;
	--quoteHue: 328;
	--hueRotation: 51.42857143;
}
body {
	font-family: "Manu 12", Noteworthy, "Marker Felt", "Bradley Hand", Chalkboard, "Comic Sans", "Comic Sans MS", "serif";
	font-size: clamp(1.414em, 4vw,2em);
	padding: 11.1111vh 11.1111vw 22.2222vh;
	margin: 0;
	line-height: 1.2;
}

h1 {
	font-family: "Nara Sans 16", Georgia, 'Times New Roman', Times, serif;
	font-weight: 600;
	font-size: clamp(.7em,6.66vw,2.55em);
	position: relative;
	margin: 0 0 1em;
}
h1::before {
	content: "";
	background-color: hsla(var(--headerHue), 80%, 62%, 1.0);
	position: absolute;
	top: -.5em;
	left: -.5em;
	bottom: -.5em;
	right: -.5em;
	z-index: -1;
	transform: rotate(-3deg);
}
q, del {
	/* font-style: normal; */
}
del {
	text-decoration-style: wavy;
}

article {
	max-width: 30em;
}

.answer {
	background-image: url(dots.svg);
	background-repeat: repeat;
	background-size: .6em 1.2em;
	transform: rotate(1deg);
}
p, ol {
	margin:0 0 1.2em;
}

figure {
	margin: 0 auto 1em;
	background-color: white;
	padding: 1em 1em 0;
	overflow: hidden;
	transform: rotate(1deg);
	box-shadow: .2em .2em .2em .2em silver;
}
figure:nth-of-type(2) {
	transform: rotate(-1deg);
}
img {
	max-height: 90vh;
	max-width: 100%;
	width: auto;
	height: auto;
}
.portrait {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}