:root {
	font-size: 20px;
	--ff: 'Ubuntu', sans-serif;
	--ffh: 'Jersey 10', sans-serif;
	--h1: 3rem/1.2em var(--ffh);
	--h2: 2.25rem/1.2em var(--ffh);
	--h3: 1.5rem/1.2em var(--ffh);
	--h4: 1.12rem/1.6em var(--ffh);
	--h5: 0.8rem/1.6em var(--ffh);
	--h6: 0.75rem/1.8em var(--ffh);
	--big: 1rem/1.6em var(--ff);
	--p: 0.8rem/1.6em var(--ff);
	--small: 0.75rem/1.8em var(--ff);
	--smaller: 0.65rem/1.4em var(--ff);

	--margin-xxs: 0.25rem;
	--margin-xs: 0.5rem;
	--margin-s: 0.75rem;
	--margin-m: 1rem;
	--margin-l: 1.25rem;
	--margin-xl: 1.75rem;
	--margin-xxl: 2.5rem;

	--border-w: 2px;
	--border-r: 1rem;
	--border-error: #c75252;

	--color-dark-5: #021220;
	--color-dark-4: #0d2b45;
	--color-dark-3: #203c56;
	--color-dark-2: #544e68;
	--color-dark-1: #8d697a;
	--color-light-4: #d08159;
	--color-light-3: #ffaa5e;
	--color-light-2: #ffd4a3;
	--color-light-1: #ffecd6;

	--bg: var(--color-dark-5);

	--text-secondary: var(--color-dark-5);
	--text: var(--color-light-1);
	--text-muted: var(--color-dark-1);

	--cursor-pointer: url('assets/pointers/candle-pointer.png') 3 6, auto;
	--cursor-door-pointer: url('assets/pointers/door-pointer.png') 3 5, auto;

	/* shadows */
	/* top highlight, dark shadow, soft shadow; */
	--shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
	--shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
	--shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;
	/* inverse shadows to look recessed */
	--ishadow-s: inset 0 1px 2px #00000070, inset 0 -1px 2px #ffffff30, inset 0 -2px 4px #ffffff15;
	--ishadow-m: inset 0 1px 2px #00000070, inset 0 -2px 4px #ffffff30, inset 0 -4px 8px #ffffff15;
	--ishadow-l: inset 0 1px 2px #00000070, inset 0 -4px 6px #ffffff30, inset 0 -6px 10px #ffffff15;
}

html,
body {
	width: 100%;
	margin: 0;
}

body {
	color: var(--text);
	font: var(--p);
	background-color: var(--bg);
	cursor: var(--cursor-pointer);
}

table {
	width: 100%;
	border-spacing: 0;
	font: var(--p);
}

thead,
th {
	text-align: left;
}

ul {
	padding: 0 0 0 var(--margin-s);
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text);
}
h1 {
	font: var(--h1);
}
h2 {
	font: var(--h2);
}
h3 {
	font: var(--h3);
}
h4 {
	font: var(--h4);
}
h5 {
	font: var(--h5);
}
h6 {
	font: var(--h6);
}
.big {
	color: var(--text);
	font: var(--big);
}
p {
	font: var(--p);
}
.small {
	color: var(--text-muted);
	font: var(--small);
}
.smaller {
	color: var(--text-muted);
	font: var(--smaller);
}
a {
	color: var(--text);
}
button {
	font: var(--p);
}

.shadow-s {
	box-shadow: var(--shadow-s);
}
.shadow-m {
	box-shadow: var(--shadow-m);
}
.shadow-l {
	box-shadow: var(--shadow-l);
}

.ishadow-s {
	box-shadow: var(--ishadow-s);
}
.ishadow-m {
	box-shadow: var(--ishadow-m);
}
.ishadow-l {
	box-shadow: var(--ishadow-l);
}

.bordered {
	padding: var(--margin-s);
	color: var(--text);
	background: none;
	image-rendering: pixelated;
	border-image-source: url('assets/pixel-frame.png');
	border-image-repeat: stretch;
	border-image-slice: 2 2 2 2;
	border-image-width: var(--margin-s);
}

.decorated {
	padding: 0 var(--margin-s);
	color: var(--text);
	background: none;
	image-rendering: pixelated;
	border-image-source: url('assets/pixel-decor.png');
	border-image-repeat: space;
	border-image-slice: 0 5 0 5;
	border-image-width: 0 var(--margin-s) 0 var(--margin-s);
}
.decorated.m {
	padding: 0 var(--margin-m);
	border-image-width: 0 var(--margin-m) 0 var(--margin-m);
}

li.decorated {
	border-image-slice: 0 0 0 5;
	border-image-width: 0 0 0 var(--margin-s);
	padding: 0 0 0 var(--margin-m);
}

a {
	cursor: var(--cursor-door-pointer);
}

.landing {
	width: 550px;
}

.flex {
	display: flex;
}
.col {
	flex-direction: column;
}
.row {
	flex-direction: row;
}
.align-center {
	align-items: center;
}
.justi-center {
	justify-content: center;
}
.grow {
	flex-grow: 1;
}
.gap-s {
	gap: var(--margin-s);
}
.gap-m {
	gap: var(--margin-m);
}

@media only screen and (max-width: 600px) {
	main {
		margin: 0;
	}
}