<template>
<section class="menu">
    <nav class="container">
        <ul >
            <div>
                <router-link to="/" tag="li"><a> Inicio</a></router-link>
                <router-link to="/convocatoria" tag="li"><a>Convocatoria</a></router-link>
                <router-link to="/costos" tag="li"><a>Costos de Inscripción</a></router-link>
                <router-link to="/fechas" tag="li"><a>Fechas</a></router-link>
                <router-link to="/mesas" tag="li"><a>Mesas Temáticas</a></router-link>
                 </div>
           </ul>
    </nav>
</section>
</template>

<script>

</script>

<style>

.menu {
    background-color: #BB8800;
}

.menu nav ul {
    display: flex;
    justify-content: space-between;
    margin: 0 1rem;
}

.menu nav ul div {
    display: flex;
    justify-content: space-between;
}

.menu nav ul li {
    list-style: none;
}

.menu nav ul li a {
    display: block;
}

.menu nav ul li a, .menu nav ul li button, .menu nav ul li p {
    padding: 1rem;
    font-size: 1rem;
    color: white;
    transition: .5s;
}

.menu nav ul li a:hover, .menu nav ul li button:hover {
    background-color: #936900;
}

.active {
    background-color: #936900;
}

@media screen and (min-width: 480px) {
    .menu nav ul {
        margin: 0 1.5rem;
    }

    .menu nav ul li a, .menu nav ul li button, .menu nav ul li p {
        padding: 1.25rem;
        font-size: 1.25rem;
    }
}

@media screen and (min-width: 1024px) {
    .menu nav ul {
        margin: 0 2rem;
    }

    .menu nav ul li a, .menu nav ul li button, .menu nav ul li p {
        padding: 1rem;
        font-size: 1rem;
    }
}
</style>