---
import Favicon from "../assets/Favicon.astro";
---

<header>

		<a href="/">Inicio</a>
		<a href="/trajectory">Trayectoria</a>
		<a href="/portfolio">Portfolio</a>
		<a href="/blog">Blog</a>
		<a href="/contact">Contacto</a>

</header>

<style lang="scss">
	@import "../../styles/shared.scss";

	header {
		color: $accent;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 2rem;

		padding: 2rem;

		a {
			text-decoration: none;
			font-weight: 700;
			font-size: 1.2rem;
			text-transform: uppercase;
			transition: color 0.2s ease-in-out,
				border-bottom-color 0.2s ease-in-out;
			color: $accent;
			line-height: 1;
			border-bottom: 2px solid transparent;

			&:hover {
				color: $accentDark;
				border-bottom-color: currentColor;
			}

			&.active {
				color: $accentDark;
			}
		}
	}

	@media (max-width: $breakpointTablet) {
	}

	@media (min-width: $breakpointTablet) {
	}

	@media (min-width: $breakpointDesktop) {
	}
</style>