---
import "@/styles/global.css";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";

const { pageTitle } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <div id="center-container">
      <div id="main-container">
	<div id="header-container">
	  <Header homeUrl="/" blogUrl="/blog" />
	</div>
	<div id="main-content">
	  <slot />
	</div>
	<div id="footer-container"><Footer /></div>
      </div>
    </div>
  </body>
</html>

<style>
body {
  width: 100%;
  height: 100vh;

  background-image: url("/wood.svg");
  background-color: #f1e3d7;
  background-size: 32px;
}
#center-container {
  display: flex;
  justify-content: center;
}

#header-container {
  margin-top: 32px;
}

#main-container {
  flex-grow: 1;
  max-width: 1000px;
  border-radius: 15px;

  margin-top: 32px;
  margin-bottom: 32px;

  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.3);
  background: #edd8be;
}

#main-content {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 16px;
  min-height: 300px;
  background: #c99b5fff;
}

#main-content > :global(p) {
  margin-top: 16px;
}

#footer-container {
  margin-bottom: 32px;
  margin-left: 32px;
  margin-right: 32px;
}
</style>
