* {
	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%, 92%);
	--main-color-contrast: hsl(0, 0%, 60%);
	--main-color-border: hsl(0, 0%, 40%);
	--main-color-opaque: hsla(0, 0%, 99%, 0.7);
	--main-color-transparent: hsla(0, 0%, 99%, 0.3);
	--alt-one: hsl(262, 30%, 57%);
	--alt-one-shade: hsl(262, 100%, 99.5%);
	--alt-one-bias: hsl(262, 55%, 98%);
	--alt-one-border: hsl(262, 55%, 96%); 
	--alt-one-contrast: hsl(262, 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(--alt-one);
	background-color: var(--alt-one-bias);
	accent-color: var(--alt-one);
	font-size: 1rem;
}

.loader {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  display: block;
  margin: .6rem auto .8rem auto;
  position: relative;
  color: var(--alt-one-contrast);
  box-sizing: border-box;
  animation: animloader 2s linear infinite;
}

@keyframes animloader {
  0% {
	box-shadow: .7rem 0 0 -.1rem,  1.9rem 0 0 -.1rem,  -.7rem 0 0 -.1rem,  -1.9rem 0 0 -.1rem;
  }
  25% {
	box-shadow: .7rem 0 0 -.1rem,  1.9rem 0 0 -.1rem,  -.7rem 0 0 -.1rem,  -1.9rem 0 0 .1rem;
  }
  50% {
	box-shadow: .7rem 0 0 -.1rem,  1.9rem 0 0 -.1rem,  -.7rem 0 0 .1rem,  -1.9rem 0 0 -.1rem;
  }
  75% {
	box-shadow: .7rem 0 0 .1rem,  1.9rem 0 0 -.1rem,  -.7rem 0 0 -.1rem,  -1.9rem 0 0 -.1rem;
  }
  100% {
	box-shadow: .7rem 0 0 -.1rem,  1.9rem 0 0 .1rem,  -.7rem 0 0 -.1rem,  -1.9rem 0 0 -.1rem;
  }
}

h1 {
	font-size: 2.4rem;
	line-height: .9;
	margin-bottom: .6rem;
	max-width: max-content;
}

h2 {
	font-size: 2rem;
	line-height: 1.1;
	margin-bottom: .3rem;
}

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: min-content;
	max-width: 100vw;
	margin: 0 auto 0 auto;
	display: grid;
	grid-template-columns: repeat(10, minmax(min-content, max-content));	
	overflow: auto;
	scroll-snap-type: x mandatory;
	height: 100dvh;
}

.whiteboard {
	box-sizing: border-box;
	margin-top: .5rem;
	height: calc(100% - .5rem);
	width: 92vw;
	max-width: 32rem;
	padding: 1rem;
	overflow: auto;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
	background-color: var(--alt-one-bias);
}

.whiteboard:nth-child(2n+1) {
	background-color: var(--alt-one-shade);
	border-radius: .8rem .8rem 0 0;
	border: .07rem solid var(--alt-one-border);
	border-bottom: none;
}

label p {
	margin-bottom: 0rem;
}

.inputButton {
	display: flex;
	width: 100%;
}

.buttonBar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.buttonBar:has(form) {
	flex-wrap: wrap;
}

.buttonBar form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .3rem;
	align-items: center;
	justify-content: right
}

.buttonBar .emoji {
	cursor: pointer;
}

.buttonBar p {
	margin-bottom: 0;
}

input[type="text"] {
	height: 1.8rem;
	width: calc(100% - clamp(3rem, 20%, 4rem));
	border: .1rem solid var(--alt-one);
	border-radius: .3rem 0 0 .3rem;
	padding-left: .6rem;
	margin-bottom: .2rem;
	background: var(--main-color-shade);
	box-sizing: border-box;
}

input[type="text"]::placeholder {
	font-size: .9rem;
	color: var(--main-color-contrast);
}

.inputButton input[type="submit"] {
	font-size: .9rem;
	height: 1.8rem;
	width: clamp(3rem, 20%, 4rem);
	border: .1rem solid var(--alt-one);
	border-radius: 0 .3rem .3rem 0;
	margin-bottom: .2rem;
	color: var(--main-color-shade);
	background: var(--alt-one);
	box-sizing: border-box;
	cursor: pointer;
}

.wrapper {
	border-top: .1rem solid var(--alt-one);
	padding: .4rem 0 .6rem 0;
}

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

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

.cluster {
	display: flex;
	flex-flow: row wrap;
	gap: .4em;
	margin-bottom: .4em;
}


ul.cluster li {
	margin-bottom: .2em;
	padding: .3em .4em .3em .4em;
	color: var(--alt-one-shade);
	background-color: var(--alt-one);
	border: .06em solid var(--alt-one);
	border-radius: .4em;
	transform-origin: center;
}
	
ul.cluster li:nth-child(4n) {
	transform: rotate(-2deg);
}

ul.cluster li:nth-child(4n+1) {
	transform: rotate(1deg);
}

ul.cluster li:nth-child(4n+2) {
	transform: rotate(-1deg);
}

ul.cluster li:nth-child(4n+3) {
	transform: rotate(2deg);
}