<style>
	body {
		margin: 0;
	}

	img {
		z-index: 99999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
	}

	h1 {
		z-index: 100000;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
		font-size: max(8rem, 5vw);
		font-family: sans;
		color: #fff;
		<!-- backdrop-filter: contrast(500%) hue-rotate(var(--rotate)); -->
		pointer-events: none;
	}

	.unselectable {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
</style>

<img class="unselectable" src="/themes/{{ theme }}/images/offline.jpg">
<h1 class="unselectable">{{ title ?? '🪦'}}</h1>

<script>
	const title = document.getElementsByTagName('h1')[0];

	let rotate = 0;

	setInterval(() => title.style.setProperty('--rotate', (rotate += 5) + 'deg'), 10)
</script>
