<script>
    import Nav from '../components/Nav.svelte';
    import userManager from '../components/userManager.svelte'
    import Modal from '../components/Modal.svelte'

    export let segment;
</script>

<style>

    main {
        position: relative;
        max-width: 56em;
        background-color: white;
        padding: 2em;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Dark theme */
    :global(html[data-theme='dark']) {
        --background-color: #222222;
        --headings-color: #ffffff;
        --font-color: #ffffff;
    }

    :global(body) {
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        line-height: 1.8;
        background-color: var(--background-color);
        color: var(--font-color);
        box-sizing: border-box;
    }

    </style>

<Modal
<Nav {segment} rightComponent={userManager}/>

<slot></slot>

