---
import Header from "../components/Header.astro";

interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/icon" href="/favicon.ico" />
    <meta name="generator" content={Astro.generator} />
  </head>

  <body>
    <Header />

    <slot />

    <footer>
      <p>
        FINAL FANTASY is a registered trademark of Square Enix Holdings Co.,
        Ltd. FINAL FANTASY XIV © 2010-2024 SQUARE ENIX CO., LTD. All Rights
        Reserved. We are not affiliated with SQUARE ENIX CO., LTD. in any way.
      </p>
    </footer>
  </body>
</html>

<style is:global>
  :root {
    --fg: #ececec;
    --fgalt: #8d8d8d;
    --bg: #303030;
    --card: #424242;
    --xl: #2196f3;
    --dalamud: #ff0000;
  }

  @media (prefers-color-scheme: light) {
    :root {
      --fg: #303030;
      --bg: #ececec;
      --card: #f5f5f5;
    }
  }

  html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 1.2rem;
    background-color: var(--bg);
    color: var(--fg);
  }

  body {
    max-width: min(100vw, 50rem);
    margin: 0 auto;
    padding: 1rem;
  }

  a {
    color: var(--xl);
  }

  footer {
    color: var(--fgalt);
  }

  img {
    height: auto;
    max-width: 100%;
  }
</style>
