<script>
  import 'normalize.css';
  import '../app.css';
  import themeDark from 'svelte-highlight/styles/apprentice';
  import themeLight from 'svelte-highlight/styles/atelier-forest-light';
  import Header from '$lib/Header.svelte';
  import Footer from '$lib/Footer.svelte';

  let theme = `<style>
@media (prefers-color-scheme: light) {
${themeLight.slice(7, -7)}
}
@media (prefers-color-scheme: dark) {
${themeDark.slice(7, -7)}
}
</style>
`;
</script>

<svelte:head>
  {@html theme}
</svelte:head>

<style>
  main {
    width: 100%;
  }
  .content {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  footer {
    width: 100%;
  }
</style>

<main>
  <header>
    <Header/>
  </header>
  <div class="content">
    <slot></slot>
  </div>
</main>
<footer>
  <Footer/>
</footer>