<style>
    :global(main) {
        max-width: 42rem;
        margin: 0 auto;
        padding:  0 15px;
    }

    #header {
        background-color: #4f5f68;
    }

    #nav-main {
        max-width: 30rem;
        margin:  0 auto;
        display:  grid;
        grid-template-columns:  1fr 1fr 1fr;
    }

    #nav-main a {
        font-size: 1.5rem;
        color:  white;
        text-decoration: none;
        text-align: center;
        padding:  0.25rem 0;
        max-width: 8rem;
    }

    #nav-main a:hover {
        background-color: #00000025;
    }
</style>

<div id="header">
    <nav id="nav-main">
        <a sveltekit:prefetch href="/">Home</a>
        <a sveltekit:prefetch href="/posts">Posts</a>
        <a sveltekit:prefetch href="/">About</a>
    </nav>
</div>

<main>
    <slot></slot>
</main>