.page {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.page::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: color-mix(in srgb, var(--color-text) 11%, transparent);
	-webkit-mask-image:
		url("/assets/images/dots.svg"),
		radial-gradient(
			ellipse 70% 65% at 50% 40%,
			#000 0%,
			rgba(0, 0, 0, 0.55) 45%,
			transparent 75%
		);
	mask-image:
		url("/assets/images/dots.svg"),
		radial-gradient(
			ellipse 70% 65% at 50% 40%,
			#000 0%,
			rgba(0, 0, 0, 0.55) 45%,
			transparent 75%
		);
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-size: 1.25rem 1.25rem, 100% 100%;
	mask-size: 1.25rem 1.25rem, 100% 100%;
	-webkit-mask-position: 0 0, center;
	mask-position: 0 0, center;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.page > * {
	position: relative;
	z-index: 1;
}

.page__main { padding-top: var(--header-offset); }
.page--home .page__main,
.page--contact .page__main,
.page--projects .page__main { padding-top: 0; }

@media (max-width: 450px) {
	.page__main { padding-top: 0; }

	.page {
		padding-bottom: calc(var(--space-sm) + 4rem);
	}
}