<script lang="ts">
	import 'normalize.css/normalize.css';
	import '@fontsource/b612';
	import '@fontsource/b612/700.css';
	import '@tabler/icons-webfont/tabler-icons.css';
	import '../index.css';
	import { onMount } from 'svelte';

	let idleTimeout: NodeJS.Timeout | undefined;
	onMount(() => {
		window.addEventListener('mousemove', () => {
			clearTimeout(idleTimeout);
			document.body.classList.remove('idle');
			idleTimeout = setTimeout(() => {
				document.body.classList.add('idle');
			}, 3000);
		});
	});
</script>

<slot />

<style>
	:global(.hide-idle) {
		transition: opacity 1s;
		opacity: 1;
	}

	:global(body.idle .hide-idle) {
		opacity: 0;
	}
</style>
