<!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-cloud-surface
      dark:bg-sky-darker
      text-sky-darkest
      dark:text-sky-surface
    ">
  <!-- <sprite> -->
  <div class="min-h-screen md:flex">
    <div class="flex items-center justify-center w-full md:w-1/2">
      <div class="max-w-sm m-8">
        <div class="text-5xl font-bold dark:text-white md:text-15xl">
          {{ messages.statusCode }}
        </div>
        <div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
        <p class="
              mb-8
              text-2xl
              font-light
              leading-normal
              dark:text-cloud-lighter
              md:text-3xl
            ">
          {{ messages.description }}
        </p>
        <a href="/" class="
              px-4
              py-3
              font-bold
              bg-transparent
              rounded
              text-sky-darkest
              bg-primary
              hover:bg-primary-400
              dark:bg-primary
            ">
          {{ messages.backHome }}
        </a>
      </div>
    </div>
    <div class="
          relative
          w-full
          pb-full
          md:flex md:pb-0 md:min-h-screen md:w-1/2
        ">
      <img src="images/404.svg" class="object-cover">
    </div>
  </div>
</body>

</html>