<template>
    <nav id="main_menu" role="navigation" class="order-last bg-black print:hidden">
        <div class="inner_box overflow-x-scroll overflow-y-hidden whitespace-no-wrap border-b-[1px] border-b-slate-700">
        <ul class="flex md:px-0 py-2 justify-start ti:justify-around mx-auto max-w-screen-md">
            <li class="ml-0"><a href="/" class="text-white pr-3">Home</a></li>
                <li><a href="/cv" class="text-white pr-3">CV</a></li>
                <li><a href="/research" class="text-white pr-3">Research</a></li>
                <li><a href="/development" class="text-white pr-3">Development</a></li>
                <li><a href="/writing" class="text-white pr-3">Writing</a></li>
                <li><a href="/contact" class="text-white pr-3">Contact</a></li>
            </ul>
        </div>
    </nav>
</template>

<style lang="pcss" scoped>
@reference '../assets/css/main.css';

#main_menu {
    background: black url('/images/hscroller-01.png') bottom center no-repeat;

    @media screen and (width >= theme(breakpoint.sm)) {
        background: black;
    }

    li {
        font-family: Oswald;
        font-size: var(--text-xl);
        text-align: center;
        width: 100%;
        padding: theme(spacing.3) theme(spacing.3);

        a {
            color: white;
            text-decoration: none;
        }

        @media screen and (width >= theme(breakpoint.sm)) {
            font-size: theme(fontSize.xl);
            padding: theme(spacing.3) theme(spacing.0);
        }
    }
}
</style>