<script>
  import Navbar from "$components/navbar.svelte";
  import Footer from "$components/footer.svelte";
  import Header from "$components/header.svelte";
  import Head from "$components/head.svelte";
  import Card from "$components/card.svelte";

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

<Head title="donate" desc="give me all of your life savings" />
<Navbar />
<Header picture="money" title={$_("donate.title")} />
<main>
  <Card>
    <p>{@html $_("donate.desc")}</p>
    <br />
    <p>{@html $_("donate.info")}:</p>
    <div>
      <code>
        46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F
      </code>
    </div>
    <p>{$_("donate.thanks")}</p>
  </Card>
</main>
<Footer />

<style>
  main {
    background: var(--black-1);
    flex: 1;
    padding: 40px;
  }

  main div {
    background: var(--black-2);
    border: solid 1px var(--black-3);
    padding: 6px;
    margin: 15px 0;
  }

  code {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
  }
</style>
