/* Minimal styling to create scrolling space */
html {
  padding: 2rem 2rem;
}
body {
  font-family: sans-serif;
  min-height: 300vh;
  margin: 0 auto;
  color: #333;
  max-width: 80em;
}

pre code {
  display: block;
  padding: 1em;
  max-width: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}

code {
  background: #eee;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
}

a {
  color: #0050bf;
}

.sticky-polite {
  border-radius: 0.5em;
  background: #eee;
  transition: box-shadow 0.2s linear;
}

.sticky-polite[data-polite-state="intersect"],
.sticky-polite[data-polite-state="sticky"] {
  box-shadow: 0 1em 1em -0.5em rgba(0, 0, 0, 0.1),
    0 0.25em 0.5em -0.25em rgba(0, 0, 0, 0.4);
}

header {
  top: 2rem;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: calc(min(52rem, min(calc(100vw - 4rem), 100%)));
  margin: auto;

  h1,
  h2,
  p {
    margin: 0;
  }
}

#main-header {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;

  h1 {
    max-width: 7em;
    margin-right: 2rem;
  }

  ol {
    list-style-type: none;
    justify-content: center;
    display: flex;
    margin: 0;
    padding: 0.25em 0;

    li {
      margin: 0;
      padding: 0;

      &::before {
        content: "\2022";
        margin: 0 0.5em;
      }
      &:first-child::before {
        content: none;
      }
    }
  }
}

li {
  padding: 0 0 1em;
}

header,
footer {
  z-index: 3;
}

.nested-test header {
  z-index: 2;
  top: 0px;
}

.nested-test footer {
  z-index: 2;
  bottom: 0px;
}

footer {
  bottom: 1rem;
  padding: 0.5rem 1rem;
  max-width: min(50rem, min(100vw, 100%));
  margin: 1.4em auto;
}

.content {
  width: 50em;
  max-width: min(100vw, 100%);
  margin: 1.4em auto;
  line-height: 1.4em;
}

.nested-test {
  height: 20rem;
  overflow-y: auto;
  padding: 1em;
  border: 2px solid #ccc;
  margin-bottom: 2rem;

  &.horizontal {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;

    .menu-left {
      left: 0rem;
    }
    .menu-right {
      right: 0rem;
    }
    .menu-left,
    .menu-right {
      min-width: 6em;
      margin: 0;
      padding: 0.75em;
      list-style-type: none;
      li {
        padding: 0.25em 0.5em;
        margin: 0;
        border-bottom: 1px solid #ccc;
      }
    }
    .dummy {
      height: 100%;
      min-width: 200vw;
      p {
        padding: 0.5em 1em;
        background: #fff;
        margin: 0;
        display: inline-block;
      }
    }
  }
}

.horizontal-spacer {
  height: 0px;
  width: 500vw;
}

.dummy {
  height: 140em;
  background: repeating-linear-gradient(
    45deg,
    #fff0,
    #fff0 0.5em,
    #eee 0.5em,
    #eee 0.7em
  );
}