:root {
	color-scheme: light dark;

	--white: #f2effc;
	--black: #15131c;

	--green: light-dark(#60693c, #a5af79);
	--green_bg: oklch(from var(--green) l c h / calc(alpha - 0.85));
	--lesser_green: #827148;
}

html {
	border-block-start: 0.25rem solid var(--green);
}

body {
	display: flex;
	flex-direction: column;
	margin-inline: 4rem;
	color: light-dark(var(--black), var(--white));
	background-color: light-dark(var(--white), var(--black));

	@media (max-width: 45rem) {
		margin-inline: 0.8rem;
	}
}

.beta-notice {
	inline-size: 100cqi;
	margin-inline-start: calc(50% - 50cqi);
	background: var(--green);
	color: light-dark(var(--white), var(--black));
	text-align: center;
	font-weight: bold;
	font-style: italic;
	padding-block: 0.4rem;
	border-block-end: 0.25rem solid var(--green);

	a {
		color: light-dark(var(--white), var(--black));
	}
}

main {
	flex-grow: 1;
}