:root {
	--bg: #282a2e;
	--fg: #ffffff;
	--fgdim: #ffffff80;
	--fluxer: #6563f0;
	--spey-red: #ff4580;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #ffffff;
		--fg: #282a2e;
		--fgdim: #282a2e80;
		--fluxer: #4641d9;
	}
}

html {
	display: flex;
	flex-direction: column;
	background-color: var(--bg);
	color: var(--fg);
	height: 100%;
	line-height: 1.6;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	padding: 0 2rem;
}

main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	max-width: 42rem;
	padding: 3rem 1rem 5rem 1rem;
	gap: 3rem;

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

		p {
			margin: 0.5rem 0;
		}

		&.card {
			background: color-mix(var(--fg), transparent 90%);
			border: 1px solid color-mix(var(--fg), transparent 80%);
			border-radius: 1rem;
			padding: 1rem 2rem;

			.description {
				display: flex;
				flex-direction: column;
				margin-bottom: 1rem;
				line-height: 1.5;
				gap: 0.8rem;

				p {
					margin: 0;
					text-wrap: wrap;
				}
			}
		}
	}
}

footer {
	position: fixed;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);

	margin-bottom: -1px;
	padding: 0.5rem 1rem;

	border-radius: 1rem 1rem 0 0;
	background: color-mix(var(--bg), transparent 20%);
	backdrop-filter: blur(10px);

	display: flex;
	justify-content: right;
}

h1 {
	font-family: "Bricolage Grotesque";
	font-size: 100px;
}

h2,
h3,
p,
footer {
	font-family: "IBM Plex Sans";
}

h1,
h2,
h3,
p {
	margin: 0;
}

a {
	color: color-mix(var(--fluxer), var(--fg) 40%);
	transition: 100ms color ease-out;
	&:hover {
		color: var(--spey-red);
	}
}

kbd {
	font-family: "IBM Plex Mono", monospace;
	background: color-mix(var(--bg), transparent 30%);
	padding: 0.2em 0.25em;
	border-radius: 0.3em;
	border: 1px solid color-mix(var(--fg), transparent 70%);
}

button {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 727;
	font-size: 1em;
	color: var(--fg);
	border: none;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	cursor: pointer;
	transition: background 100ms ease-out;
	box-shadow: 0 4px 0.5em #0004;

	background: color-mix(var(--bg), var(--fg) 30%);
	&:hover {
		background: color-mix(var(--bg), var(--fg) 50%);
	}
	&:active {
		background: color-mix(var(--bg), var(--fg) 10%);
	}

	&.primary {
		background: var(--fluxer);
		&:hover {
			background: color-mix(var(--fluxer), white 20%);
		}
		&:active {
			background: color-mix(var(--fluxer), black 20%);
		}
	}
}

#floaty-ghost-game {
	overflow: hidden;
	border-radius: 1rem;
	width: calc(min(640px, 5 * 16vw));
	height: calc(min(360px, 5 * 9vw));
	font-size: calc(min(16px, 3vw));

	h1,
	h2,
	h3,
	p,
	button {
		color: white;
	}

	#floaty-ghost-canvas {
		width: 100%;
		height: 100%;
	}

	#floaty-ghost-overlay-outer {
		display: flex;
		justify-content: stretch;
		align-items: stretch;
		pointer-events: none;

		#floaty-ghost-overlay-inner {
			display: flex;
			flex-grow: 1;
			justify-content: end;
			align-items: end;
			padding: 1em 1.5em;
			pointer-events: none;
		}
	}

	#floaty-ghost-its-joever,
	#floaty-ghost-menu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 0.5em;
	}

	#floaty-ghost-its-joever {
		background: #500000c0;
	}
}