function setViewportOffset(viewport) {
	// Calculate the distance from the top of the element to the center of the screen.
	// This is an accurate rendering, but we might want to change it for artistic effects.
	const windowHeight = window.innerHeight;
	const rect = viewport.getBoundingClientRect();
	if (rect.top > windowHeight || rect.bottom < 0) {
		return;
	}
	const yOffset = windowHeight / 2 - rect.top;
	viewport.style.setProperty('--y-offset', yOffset+"px");
}

const viewports = document.querySelectorAll(".viewport");
function updateViewports() {
	for (const viewport of viewports) {
		setViewportOffset(viewport);
	}
}
window.addEventListener("scroll", updateViewports, { passive: true });
window.addEventListener("resize", updateViewports, { passive: true });
updateViewports();