* {
	font-family: Atkinson Hyperlegible, sans-serif;
	margin: 0;
	padding: 0;
}

:root {
	
	--main-color: hsl(0, 0%, 13%);
	--main-color-shade: hsl(0, 0%, 99%);
	--main-color-bias: hsl(0, 0%, 98%);
	--main-color-contrast: hsl(0, 0%, 60%);
	--main-color-soft: hsl(0, 0%, 75%);
	--main-color-border: hsl(0, 0%, 95%);
	--main-color-opaque: hsla(0, 0%, 99%, 0.7);
	--main-color-transparent: hsla(0, 0%, 99%, 0.3);
	--alt-one: hsl(261.64 30% 57%);
	--alt-one-shade: hsl(261.64 100% 99%);
	--alt-one-contrast: hsl(261.12 44% 70%);
	--alt-two: hsl(8.3 37% 53%);
	--alt-two-shade: hsl(8.3 100% 97%);
	--alt-two-contrast: hsl(8.53 53% 66%);
	--alt-three: hsl(73.48 36% 39%);
	--alt-three-shade: hsl(70.6 100% 86%);
	--alt-three-contrast: hsl(74.26 30% 51%);
	--alt-four: hsl(187.3 77% 36%);
	--alt-four-shade: hsl(180 100% 93%);
	--alt-four-contrast: hsl(188.33 50% 51%);
}

body {
	color: var(--main-color);
	background-color: var(--main-color-bias);
	accent-color: var(--alt-one);
	font-size: 1rem;
}

h1 {
	font-size: 2rem;
	line-height: 1;
}

h2 {
	font-size: 2rem;
	line-height: 1;
}

h3 {
	font-size: 1.3rem;
	line-height: 1.1;
	margin-bottom: .2rem;
}

p {
	line-height: 1.4;
	margin-bottom: .6rem;
}

a {
	color: var(--alt-one);
}

a.emoji {
	text-decoration: none;
}

ol {
	list-style-position: inside;
}

ul {
	list-style: none;
}

li {
	line-height: 1.2;
	margin-bottom: .2rem;
}

li p, li a {
	margin-bottom: 0;
}

main {
	width: 32rem;
	max-width: 96vw;
	margin: 0 auto 0 auto;
	padding: 2rem 0 2rem 0;
}

.whiteboard {
	box-sizing: border-box;
	padding: 1rem 1.5rem 1rem 1.5rem;
	overflow: auto;
}

.whiteboard:nth-of-type(2n+1) {
	background-color: var(--main-color-shade);
	border: .1rem solid var(--main-color-border);
	border-radius: .5rem;
}

.emoji {
	font-size: 1.1rem;
	font-family: "Noto Emoji";
	color: var(--alt-one);
}

.math {
	font-size: 1rem;
	font-family: "Noto Sans Math";
}

.sticky-note {
	display: block;
	width: fit-content;
	margin: 0 auto .4em auto;
	padding: .5em .7em .5em .7em;
	border: .06em solid var(--alt-one-contrast);
	border-radius: .6em;
	color: var(--alt-one);
	background-color: var(--alt-one-shade);
	text-decoration: none;
	text-align: center;
	transform-origin: 0% 50%;
	transform: rotate(-0.5deg);
}

.sticky-note a {
	text-decoration: none;
}

.whiteboard:nth-of-type(4n+2) .sticky-note {
	color: var(--alt-two);
	background-color: var(--alt-two-shade);
	border-color: var(--alt-two);
	transform: rotate(1deg);
}

.whiteboard:nth-of-type(4n+2) .sticky-note a {
	color: var(--alt-two)
}

.whiteboard:nth-of-type(4n+3) .sticky-note {
	color: var(--alt-three);
	background-color: var(--alt-three-shade);
	border-color: var(--alt-three);
	transform: rotate(-1deg);
}

.whiteboard:nth-of-type(4n+3) .sticky-note a {
	color: var(--alt-three)
}

.whiteboard:nth-of-type(4n) .sticky-note {
	color: var(--alt-four);
	background-color: var(--alt-four-shade);
	border-color: var(--alt-four);
	transform: rotate(0.5deg);
}

.whiteboard:nth-of-type(4n) .sticky-note a {
	color: var(--alt-four)
}