<h1>Navigation Demo</h1>

<ul>
  <li>
     <a href="/home">Home</a>
  </li>
  <li>
    <a href="/about-us" aria-current="page">About us</a>
  </li>
  <li>
    <a href="/pricing">Pricing</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

/* Define variables for your colors */
:root {
  --color-shades-dark: rgb(25, 25, 25);
  --color-shades-light: rgb(165, 167, 175);
  --color-highlight: rgb(24, 54, 145);
}

/* Use the alternative box model */
* {
  box-sizing: border-box;
}

body {
  font-family: Segoe UI,system-ui,-apple-system,sans-serif;
  font-size: 1.6rem;
}

/* Remove default list styling and create layout for list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
    --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

/* Change the border-color on :hover and :focus */
a:where(:hover, :focus) {
  --border-color: var(--text-color);
}

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}