<script>
  import { _ } from "svelte-i18n";
</script>

<body class="antialiased font-sans">
  <div class="flex min-h-screen">
    <div class="w-full bg-white flex items-center justify-center ">
      <div class="max-w-sm m-8">
        <div class="text-black text-5xl md:text-15xl font-black">
          {$_('404title')}
        </div>
        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
        <p
          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
          {$_('404message')}
        </p>
        <a
          href="/"
          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
      </div>
    </div>
  </div>
</body>
