af/components/MainMenu.vue

<template>
    <nav id="main_menu" 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>
#main_menu {
    background: black url('/images/hscroller-01.png') bottom center no-repeat;

    @media screen(sm) {
        background: black;
    }

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

        a {
            color: white;
        }

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