body {
	margin: 0;
}

.page {
	--container-max: 1200px;
	--container-width: min(var(--container-max), calc(100vw - 4em));
	--wave-height: calc(var(--container-width) * 0.04);
	background: color-mix(in srgb, var(--page-colour), var(--reverse-highlight) 20%);
	display: grid;
	grid-template-columns: [background-start] 1fr [header-start content-start footer-start] var(--container-width) [header-end content-end footer-end] 1fr [background-end];
	grid-template-rows: [header-start] auto [header-end background-start] var(--wave-height) [content-start] 1fr [content-end footer-start] auto [footer-end background-end];
	min-height: 100vh;
	width: 100%;
}

header {
	grid-area: header;
}

.background {
	/*noinspection CssInvalidFunction*/
	--background-colour: var(--reverse-highlight);
	/*noinspection CssInvalidFunction*/
	background: linear-gradient(var(--background-colour), color-mix(in srgb, var(--background-colour), var(--page-colour)));
	mask-image: url(/theme/images/wave.svg), linear-gradient(black, black);
	mask-repeat: no-repeat;
	pointer-events: none;
	position: relative;
	
	&:after {
		background: url(/theme/images/logo.svg) 0 0, url(/theme/images/logo.svg) 50px 50px;
		background-size: 100px 100px;
		content: "";
		height: 100%;
		filter: invert(100%);
		left: 0;
		opacity: 0.3;
		position: absolute;
		top: 0;
		width: 100%;
		
		@media (prefers-color-scheme: dark) {
			filter: invert(0%);
		}
	}
}

.page-background {
	grid-area: background;
	mask-position: center top, center var(--wave-height);
	mask-size: 100% var(--wave-height), 100% calc(100% - var(--wave-height));
}

main {
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 1em;
	grid-area: content;
	margin: 1em -1em 0.5em;
	z-index: 1;
	
	section {
		--pane-colour: var(--page-colour);
		padding: 1em 1em 0.5em;
	}
}

footer {
	display: flex;
	font-size: 0.8rem;
	gap: 1em;
	grid-area: footer;
	justify-content: center;
	padding: 0.5em 0 1em;
	z-index: 1;
}