<style>
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
 
::-webkit-scrollbar-thumb {
	@apply bg-light-40;
	@apply dark:bg-dark-40;
	@apply rounded-md;
	@apply border-2;
	@apply border-solid;
	@apply border-transparent;
	@apply bg-clip-padding;
}
 
::-webkit-scrollbar-thumb:hover {
	@apply bg-light-50;
	@apply dark:bg-dark-50;
}

.loading {
	@apply w-full;
	@apply h-full;
	@apply flex;
	@apply items-center;
	@apply justify-center;
	@apply before:border-4;
	@apply before:border-accent-purple;
	@apply before:border-t-transparent;
	@apply before:rounded-full;
	@apply before:w-8;
	@apply before:h-8;
	@apply before:animate-spin;
}
</style>

<script setup lang="ts">
const page = ref();
</script>

<template>
	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
		<NuxtRouteAnnouncer></NuxtRouteAnnouncer>
		<NuxtLayout>
			<NuxtPage ref="page"></NuxtPage>
		</NuxtLayout>
	</div>
</template>
