<script lang="ts">
  import "../app.css";
  import Footer from "$lib/components/Footer.svelte"
</script>

<slot />

<Footer></Footer>

<style lang="postcss">
  :global(html) {
    background: theme(colors.slate.950);
    color: white;
  }

  :global(a) {
    text-decoration: underline;
    text-decoration-color: theme(colors.slate.500);
    text-underline-offset: 4px;
    transition: text-decoration-color .2s;

    &:hover {
      text-decoration-color: inherit;
    }
  }

  :global(p:not(:last-of-type)) {
    @apply mb-2;
  }

  :global(input, textarea) {
    font-size: 18px;
    transition: border .3s;
    @apply px-3 py-3 rounded-lg bg-slate-950 text-slate-400 border border-slate-500;
  }

  :global(input:focus, textarea:focus) {
    outline: none;
    border: 1px solid theme(colors.slate.50);
  }

  :global(textarea) {
    height: auto;
    resize: none;
  }
</style>
