:root {
	--primary: #fff;
	--secondary: #6e3;
	--background: #333;
	--select-color: #0337a0;
}

body {
	padding: 0;
	margin: 0;

	font-family: monospace;
	font-size: 50px;

	overflow-x: hidden;
}

#bg {
	position: fixed;
	top: 0;
	left: 0;

	z-index: -2;
}

#content-body {
	position: absolute;
	top: 0;
	left: 0;

	width: 100vw;
	height: fit-content;
}

#start-wrapper {
	width: 100vw;
	height: 100dvh;

	min-height: fit-content;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;

	color: var(--primary); /*green: 6e3*/
	background: var(--background);

	mix-blend-mode: multiply;

	& > div {
		display: flex;
		align-items: center;

		cursor: default;
		user-select: none;
	}

	#down-arrow {
		cursor: pointer;
	}
}

#content-wrapper {
	width: 100vw;
	height: calc(100vh - 4em);

	min-height: fit-content;

	background: #333;
	mix-blend-mode: multiply;

	padding: 0 1em 0 1.5em;
	box-sizing: border-box;
}

p {
	margin: 0;
}

a {
	text-decoration: none;
	color: var(--secondary);
}

ul.hoverable a:hover, li.selected>a {
	background: var(--select-color);
}

li::marker {
	content: "- ";
	color: var(--secondary);
}

h1 {
	margin: 0;
	font-size: 4em;
}