<script>
  import { page } from "$app/state";
  import { _ } from "$lib/locale.js";
</script>

<main>
  <h1>{$_("error.title")}</h1>
  <code>{page.error.message}</code>
  <a href={import.meta.env.WEBSITE_REPORT_URL}>{$_("error.report")}</a>
  <img src="/assets/sad.png" alt="" />
</main>

<style>
  main {
    background: var(--transparent);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    gap: 10px;

    padding: 50px;
    font-size: var(--size-4);
  }

  main h1 {
    font-size: var(--size-6);
    text-shadow: var(--text-shadow);
    color: var(--color);
  }

  main code {
    font-size: var(--size-4);
    color: var(--white-2);
  }

  main img {
    width: 250px;
    position: absolute;
    right: 50px;
    bottom: 0;
  }
</style>
