---
import { data } from '@/data/data'

const { basics } = data.profile
---

<nav>
  <a href='/'>{basics.name}</a>
  <div>{basics.tagline}</div>
</nav>

<style lang='less'>
  nav {
    margin: 0 auto;
    width: 100%;
    max-width: var(--content-width);
    text-align: center;
    padding: var(--space-lg) var(--space-lg);
  }

  a {
    font-size: var(--font-xl);
  }

  div {
    font-size: var(--font-md);
    color: var(--color-text-light);
    font-weight: 300;
  }
</style>