<script>
	import '../app.css';
	const splashes = [
		'no life since 1980 - 1jem',
		'also try fediverse - qugalet',
		'Усе тільки починається - Ternox'
	];
	const splash = splashes[Math.floor(Math.random() * splashes.length)];
</script>

<div
	class="bg-black bg-opacity-80 border-accent border p-4 sm:max-w-xl sm:min-h-0 min-h-screen flex flex-col gap-2"
>
	<slot />
	<div class="border-t-2 border-t-accent/40">
		<p
			class="text-green text-center text-lg text-green-600 mt-3 font-bold"
			style="font-family: 'Fira Mono', monospace !important;"
		>
			&gt; {splash}
		</p>
		<div class="flex flex-row gap-2 justify-center items-center">
			<p
				class="text-text/60 text-sm last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
			>
				&copy; qugalet 2022-2023
			</p>
			<a
				class="text-text/80 text-sm last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
				href="/">Home</a
			>
			<a
				class="text-text/80 text-sm last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
				href="https://st.m0e.space/status/m0espace"
				target="_blank"
				rel="noreferrer">Uptime</a
			>
		</div>
	</div>
</div>
