:root {
  padding: 0;
  margin: 0;
  overflow: auto;
  color-scheme: light dark;
  
  --main-nav-height: 3rem;
  scroll-padding-top: var(--main-nav-height);
}

body {
  --content-background-color: light-dark(#f8f8f8, #031331);
  --content-color: light-dark(black, #e8e8e8);
  --accent-background-color: light-dark(#3363b8, #0a2048);
  --accent-color: white;
  --header-background-color: hwb(from var(--accent-background-color) h w b / 0.8);

  padding: 0;
  margin: 0;

  background: var(--accent-background-color);
  color: var(--accent-color);

  font-family: sans-serif;
  font-size: 14pt;
}

a {
  color: inherit;
}

h1, h2 {
  font-weight: 200;
}

header {
  background: var(--header-background-color);
  padding: 1.5em;
  h1 {
    margin: 0;
  }
}

header, nav {
  color: var(--accent-color);

  width: 100%;
  box-sizing: border-box;
}

nav {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: center;
  background-color: var(--header-background-color);
  background-blend-mode: darken;
  backdrop-filter: blur(0.125em);

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;

    @media(hover:hover) {
      &:hover>a {
        background: var(--accent-color);
        color: var(--accent-background-color);
      }
    }
  }

  a {
    padding: 0.25em 0.5em 0.25em 0.5em;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    font-weight: 500;
  }

  &>ul {
    &>li {
      display: inline-block;
      position: relative;

      ul {
        display: none;
        position: absolute;
        left: -1px;
        background: var(--accent-background-color);
        border: 1px solid var(--accent-background-color);
        border-top: none;
      }

      @media(hover:hover) {
        &:hover>ul {
          display: block;
        }
      }
    }
  }
}

main {
  &>section {
    box-shadow: 0px 3px 10px rgba(3, 19, 49, 0.8);
  }

  section {
    margin: 0.5em;
    margin-bottom: 1em;
    background: var(--content-background-color);
    color: var(--content-color);

    li {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }

    section {
      margin-left: 0;
      margin-right: 0;
    }
  }

  &>section {
    padding: 0.5em;
  }
}