<script>
</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;
        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>
</nav>

<div class="main-container fade">

    <slot />

</div>