:root {
  --page-bg: #4d5950;
  --page-fg: white;
  --nav-bg: black;
  --nav-fg: white;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Petit Formal Script", cursive;
  font-weight: 400;
  font-style: normal;
  background-color: var(--page-bg);
  color: var(--page-fg);
  scroll-timeline: --page block;
}

a,
a:link {
  color: inherit;
  &[aria-current="page"] {
    background-color: var(--nav-fg);
    color: var(--nav-bg);
    border-radius: 2px;
    text-decoration: none;
  }
}

nav {
  position: relative;
  z-index: 1;
  margin: 0;
  background-color: var(--nav-bg);
  color: var(--nav-fg);
  line-height: 2em;
  text-align: center;

  ul.link-list {
    justify-content: center;
  }
}

ul.link-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 1em;
  flex-wrap: wrap;

  li {
    display: inline-block;

    &.separator {
      width: 1px;
      background-color: currentcolor;
      height: 2ex;
      align-self: center;
    }
  }
}