nav {
  position: relative;
  
  --marker-width: 0;
  --marker-height: 0;
  --marker-left: 0;
  --marker-top: 0;
  
  --marker-pad-x: 20;
  --marker-pad-y: 10;
}

@media (max-width: 768px) {
  nav {
    --marker-pad-x: 10;
  }
}

nav ul {
  display: flex;
  gap: 4rem;
  padding: 0;
  margin-bottom: 0;
  margin-inline: calc(var(--marker-pad-x) * 1px);
} 

nav li {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 250ms linear;
}

nav li.selected {
  color: var(--menu-font-color);
}

nav .tab-marker {
  position: absolute;
  width: calc(var(--marker-width) * 1px);
  height: calc(var(--marker-height) * 1px);
  left: calc(var(--marker-left) * 1px);
  top: calc(var(--marker-top) * 1px);
  background-color: var(--second-color);
  border-radius: .25rem;
  transition: all 250ms ease-in-out;
  z-index: -1;
}