x-nav {
  display: block;
  position: fixed;
  left: 0;
  top: var(--theme-header-height);
  width: var(--theme-nav-width);
  padding: var(--theme-padding-md) 0;
  height: calc(100vh - var(--theme-header-height));
  background-color: var(--theme-background-color);
}
x-nav ~ main {
  margin-left: var(--theme-nav-width);
}
x-nav > * {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: var(--theme-padding-sm) var(--theme-padding-md);
}
x-nav > *:hover {
  cursor: pointer;
  background-color: var(--theme-primary-color);
  color: var(--theme-font-color-inverted);
}