.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--spacing);
  flex-wrap: wrap;
  align-items: center;
}

.menu {
  margin: 0;
  padding: 0;
}

.menu a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5em;
}

.menu a:hover,
.menu a:focus,
.menu a:active{
  text-decoration: underline;
}

.menu a svg {
  width: 1em;
  height: auto;
  path{
    fill: currentColor
  }
}

.menu a.button{
  --button-bg: var(--color-secondary-a);
  padding: var(--spacing);
  border: 1px solid;
}