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

:root {
	--main-color: hsl(223.81 0% 13%);
	--main-color-shade: hsl(223.81 0 100%);
	--main-color-contrast: hsl(223.81 0% 99%);
	--main-color-border: hsl(223.81 0% 95%);
	--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%);
	
	/* --main-color: oklch(25% 0 300);
	--main-color-shade: oklch(100% 0 300);
	--main-color-contrast: oklch(99% 0 300);
	--alt-one: oklch(60% 0.1 300);
	--alt-one-shade: oklch(100% 0.1 300);
	--alt-one-contrast: oklch(70% 0.1 300);
	--alt-two: oklch(60% 0.1 30);
	--alt-two-shade: oklch(100% 0.1 30);
	--alt-two-contrast: oklch(70% 0.1 30);
	--alt-three: oklch(60% 0.1 120);
	--alt-three-shade: oklch(100% 0.1 120);
	--alt-three-contrast: oklch(70% 0.1 120);
	--alt-four: oklch(60% 0.1 210);
	--alt-four-shade: oklch(100% 0.1 210);
	--alt-four-contrast: oklch(70% 0.1 210); */
}

body {
	color: var(--main-color);
	background-color: var(--main-color-shade);
	font-size: 1.1rem;
}

h1 {
	font-size: 2.8rem;
	line-height: .9;
	margin-bottom: .6rem;
}

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

h3 {
	font-size: 1.5rem;
	line-height: 1.1;
	margin-bottom: .8rem;
}

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

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

ol {
	list-style-position: inside;
}

ul {
	list-style: none;
}

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

.multiplayer {
	display: grid;
	grid-template-columns: repeat(15, minmax(min-content, max-content));	
	overflow: auto;
	scroll-snap-type: x mandatory;
	box-sizing: border-box;
	height: 25dvh;
}

.default-greeting {
	box-sizing: border-box;
	height: 100%;
	width: 100vw;
	max-width: 28rem;
	padding: 1rem;
	overflow: auto;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;
}

.live-stream {
	box-sizing: border-box;
	height: 100%;
	width: 90vw;
	max-width: 24rem;
	padding: .5rem 0 .5rem .5rem;
	overflow: auto;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

.live-stream:last-child {
	padding-right: .5rem;
}

.invintus-player {
	font-family: Atkinson Hyperlegible, sans-serif;
	height: calc(25dvh - 1rem) !important;
	border-radius: .7rem !important;
}

.iauLG {
	height: calc(25dvh - 1rem) !important;
	border-radius: .7rem !important;
}

.jRLTSd .video-js.vjs-fill {
	height: calc(25dvh - 1rem) !important;
	border-radius: .7rem !important;
}

.vjs-control-bar {
	border-radius: 0 0 .7rem .7rem !important;
}

.page-content {
	display: grid;
	grid-template-columns: repeat(10, minmax(min-content, max-content));	
	overflow: auto;
	scroll-snap-type: x mandatory;
	height: 75dvh;
}

.whiteboard {
	box-sizing: border-box;
	height: 100%;
	width: 90vw;
	max-width: 28rem;
	padding: 1rem;
	overflow: auto;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

.whiteboard:nth-child(2n+1) {
	background-color: var(--main-color-contrast);
	border-radius: .8rem .8rem 0 0;
	border: .06em solid var(--main-color-border);
	border-bottom: none;
}

.whiteboard:first-of-type {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	border-radius: 0 .8rem 0 0;
	border-left: none;
}

.whiteboard:first-of-type > a.sticky-note {
	margin-top: .6em;
}

.whiteboard:last-of-type {
	border-radius: .8rem 0 0 0;
	border-right: none;
}

.sticky-note {
	display: block;
	width: fit-content;
	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;
	transform-origin: 0% 50%;
	transform: rotate(-0.5deg);
}

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

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

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

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

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

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

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

.quick {
	display: flex;
	flex-flow: row wrap;
	gap: .6em;
}

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

ul.quick li:nth-child(4n) a {
	color: var(--alt-one);
	text-decoration: none;
}

ul.quick li:nth-child(4n+1) {
	color: var(--alt-two);
	background-color: var(--alt-two-shade);
	border-color: var(--alt-two);
	transform-origin: center;
	transform: rotate(-1deg);
}

ul.quick li:nth-child(4n+1) a {
	color: var(--alt-two);
	text-decoration: none;
}

ul.quick li:nth-child(4n+2) {
	color: var(--alt-three);
	background-color: var(--alt-three-shade);
	border-color: var(--alt-three);
	transform-origin: center;
	transform: rotate(1deg);
}

ul.quick li:nth-child(4n+2) a {
	color: var(--alt-three);
	text-decoration: none;
}

ul.quick li:nth-child(4n+3) {
	color: var(--alt-four);
	background-color: var(--alt-four-shade);
	border-color: var(--alt-four);
	transform-origin: center;
	transform: rotate(-2deg);
}

ul.quick li:nth-child(4n+3) a {
	color: var(--alt-four);
	text-decoration: none;
}

ul.contact li a {
	display: inline-block;
	width: fit-content;
	padding: .3em .4em .3em .4em;
	border: .06em solid var(--alt-three-contrast);
	border-radius: .6em;
	color: var(--alt-three);
	background-color: var(--alt-three-shade);
	text-decoration: none;
	transform-origin: center;
	transform: rotate(-1deg);
}

ul.contact li a:nth-of-type(2n) {
	display: inline-block;
	width: fit-content;
	padding: .3em .4em .3em .4em;
	border: .06em solid var(--alt-four-contrast);
	border-radius: .6em;
	color: var(--alt-four);
	background-color: var(--alt-four-shade);
	text-decoration: none;
	transform-origin: center;
	transform: rotate(1.5deg);
}

details {
	padding: .5em .6em .5em .6em;
	margin-bottom: 0.6rem;
	border: .06em solid var(--alt-three-contrast);
	border-radius: .6em;
	color: var(--alt-three);
	background-color: var(--alt-three-shade);
}

summary {
	line-height: 1.2;
}

details ul {
	margin: .6em 0 0 .6em;
}

details ul li {
	margin-bottom: .4em;
}

details p {
	margin-bottom: .4rem;
}

th {
	text-align: left;
	line-height: 1.2;
	padding: 0 0 .3em .3em;
}

td {
	line-height: 1.2;
	padding: 0 0 .3em .3em;
}

details[open] summary {
	margin-bottom: .4em;
}

details.alt-one-schema {
	color: var(--alt-one);
	background-color: var(--alt-one-shade);
	border-color: var(--alt-one-contrast);
}

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

details.alt-two-schema {
	color: var(--alt-two);
	background-color: var(--alt-two-shade);
	border-color: var(--alt-two-contrast);
}

details.alt-two-schema a {
	color: var(--alt-two);
}

details.alt-three-schema {
	color: var(--alt-three);
	background-color: var(--alt-three-shade);
	border-color: var(--alt-three-contrast);
}

details.alt-three-schema a {
	color: var(--alt-three);
}

details.alt-four-schema {
	color: var(--alt-four);
	background-color: var(--alt-four-shade);
	border-color: var(--alt-four-contrast);
}

details.alt-four-schema a {
	color: var(--alt-four);
} 

@media screen and (max-width: 31.1rem) {
	.quick {
		gap: .4em;
	}
	
	ul.quick li {
		padding: .3em .4em .3em .4em;
	}
	
	.whiteboard:first-of-type > a.sticky-note {
		padding: .3em .4em .3em .4em;
	}
}