<!DOCTYPE html>
<html>
  <head>
    <title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title>
    <meta charset="utf-8"/>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"/>
    <script type="module" src="/styles.ts"></script>
  </head>
  <body class="font-sans antialiased bg-white px-10 pt-12 dark:bg-[#020420] text-black dark:text-white min-h-screen flex flex-col">
    <h1 class="text-6xl sm:text-8xl font-medium mb-4">{{ messages.statusCode }}</h1>
    <p class="text-xl sm:text-2xl mb-8 font-light leading-tight">{{ messages.description }}</p>
    <a href="https://nuxt.com/docs/getting-started/error-handling?utm_source=nuxt-error-dev-page" target="_blank" class="absolute top-6 sm:right-6 mx-auto inline-block hover:underline underline-offset-3 text-sm font-medium hover:text-[#00DC82]">Customize this page</a>
    <div class="rounded-t-md border border-b-0 border-black/5 bg-gray-50/50 dark:border-white/10 dark:bg-white/5 flex-1 overflow-y-auto h-auto">
      <pre class="text-xl font-light leading-tight z-10 p-8">{{{ messages.stack }}}</pre>
    </div>
  </body>
</html>
