<template>
  <div>
    <div class="min-h-dvh px-5 pb-5">
      <div class="flex flex-col gap-3 items-center justify-center text-center">
        <div @click="$router.push({path:'/'})"
          class="w-48 p-5 flex items-end">
          <Logo class="w-full" :dark="isDark" />
        </div>
        <NuxtPage />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const isDark = ref(false)

onMounted(() => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
  isDark.value = mediaQuery.matches
  mediaQuery.addEventListener('change', (e) => {
    isDark.value = e.matches
  })
})
</script>

<style></style>