<script lang="ts">
    import favicon from '$lib/assets/favicon.svg';
    let { children } = $props();
</script>

<svelte:head>
    <link rel="icon" href={favicon} />
</svelte:head>

<div class="container"> 
    <main class="content">
        {@render children()}
    </main>
</div>

<style>
    :global(body) {
        margin: 0;
        padding: 0;
    }   

    .container {
        width: 100%;
        max-height: 100vh;
    }

    .content {
        max-width: 1000px;
        margin: 0 auto;
        padding: 2rem;
        background-color: var(--background-alpha);  
        
        border-left: 4px solid var(--accent);
        border-right: 4px solid var(--accent);
        min-height: 100vh;
    }


    @media (max-width: 768px) {
        .content {
            padding: 1rem;
            border-left-width: 2px;
        }
    }
</style>
