<script lang="ts">
    import DesktopHeader from "./desktop.svelte"
    import MobileHeader from "./mobile.svelte"
</script>

<main class="headercontainer">
    <nav>
        <div class="mobile-header">
            <MobileHeader />
        </div>
        <div class="desktop-header">
            <DesktopHeader />
        </div>
    </nav>
</main>
<div class="placeholder"></div>

<style global lang="less">
    @import "../../assets/css/main.less";
    @import "../../assets/css/variables.less";

    @desktop: ~"only screen and (min-width: 1440px)";
    .HP {
        h2 {
            font-size: 2.1rem !important;
            @media @tablet {
                font-size: 3.2rem !important;
            }
        }
    }

    .ignore {
        display: none !important;
        visibility: hidden;
    }
    nav {
        position: relative;
        height: 100%;
        width: 100%;
        
    }
    .placeholder {
        height: 105px;
    }
    .headercontainer {
        display: flex;
        position: fixed;
        z-index: 5500;
        top: 0px;
        justify-content: space-between;
        width: 100%;
        color: var(--normal-font-color);
        height: 105px;
       
    }
    @media @desktop {
        .headercontainer,
        .placeholder {
            height: 120px;
        }
        nav {
            position: initial;
        }
    }

    @media @mobile {
        .desktop-header {
            display: none;
        }
        .mobile-header {
            display: inherit;
        }
    }
    @media @desktop {
        .mobile-header {
            display: none;
        }
        .desktop-header {
            display: inherit;
        }
    }
</style>
