<script lang="ts">
	import Toasts from "$lib/components/Toasts/Toasts.svelte";
    import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
</script>

<style>
    .main-container {
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 2em;
    }

    @media (max-width: 800px) {
        .main-container {
            margin: 0em;
            padding-top: 1em;
        }
    }

    nav {
        position: relative;
        font-weight: bold;
        font-size: 110%;
        overflow: visible;
        display: flex;
        justify-content: center;
        gap: 1.5em;
        padding: 0em 0em 1.5em 0em;
        z-index: 2;
        height: 1.5em;
        border-radius: 4px;
    }

    .fade {
        -webkit-animation: fadeinout 1s linear forwards;
        animation: fadeinout 1s linear forwards;
    }

    @-webkit-keyframes fadeinout {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    @keyframes fadeinout {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
</style>

<nav>
    <a href = "/">//Profile</a>
    <a href = "/repos">//Repos</a>
    <a href = "/contact">//Contact</a>
    <ThemeSwitcher />
</nav>

<div class="main-container fade">
    <Toasts />
    <slot />
</div>
