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

import "@/style/globals.css";

import { ClientRouter } from "astro:transitions";

import Header from "@/components/header";
import Footer from "@/components/footer";
import Background from "@/components/background";
---

<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" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <title>{content.title}</title>
    <ClientRouter />
	</head>
  <body class="bg-background text-foreground">
    <Header client:load />
    <main transition:animate="fade">
      <Background layout="index" client:only="react" />
      <slot />
    </main>
    <Footer client:load transition:persist fixed=true />
	</body>
</html>
