<script lang="ts">
	import '../app.scss';
	import '../typography.css';
	import '../prism/gruvbox/light.css';

	import Spacer from '$lib/Spacer.svelte';
	import Footer from './Footer.svelte';
	import Header from './Header.svelte';
</script>

<Header />
<div class="main-wrapper">
	<main><slot /></main>
</div>
<Spacer />
<Footer />

<style lang="scss">
	@import '../vars';

	main {
		margin: 0 0 6rem 0;
		max-width: min($size-container, 100vw);
		display: flex;
		flex-direction: column;
		padding: 0 2rem;
	}
	.main-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
