@import url("reset.css");
@import url("variables.css");
@import url("nav.css");
@import url("fonts.css");
html {
  background-color: var(--HB_Color_Background);
  background-image: var(--background-image);
  font-family: var(--font-family);
}
body {
  max-width: 80rem;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.7);
  border: 0.1rem solid var(--HB_Color_Background);
  position: relative;
  line-height: 1.5;
  text-align: center;
}
body::before,
body::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,0 L100,0 L95,10 L5,10 Z" fill="%23c9ad6a"/></svg>');
  background-size: 100% 100%;
}
body::before { top: 0; }
body::after { bottom: 0; transform: rotate(180deg); }

h1, h2 {
    font-family: var(--font-family-headers);
    color: var(--HB_Color_HeaderText);
    margin-top: 1rem;
}
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }

a, a:visited {
    text-decoration: none;
    font-weight: 700;
}
a:hover {
    text-decoration: underline;
}

section > ul:first-of-type {
  padding: 0;
  justify-content: center;
  list-style: none;
  gap: 0.25rem;
}

section > ul:first-of-type li a, section > ul:first-of-type li a:visited {
  margin-top: 0.25rem;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: var(--HB_Color_HeaderText);
  color: var(--HB_Color_Background);
  text-decoration: none;
  border: medium;
  border-radius: 0.25rem;
  cursor: pointer;
}

section.level1 > ul:first-of-type {
    margin: 0;
    display: flex;
  }

section.level2 > ul:first-of-type {
    column-width: 25rem;
    column-gap: 2rem;
    li {
      break-inside: avoid-column;
    }
    li a, li a:visited {
      width: 20rem;
    }
}
h1.invisible {
  display: none
}