body {
  margin: 0;

  background-color: var(--main-bg-color);

  font-family: var(--font-family-main);
}

header {
  height: 10svh;

  display: flex;
  align-items: center;

  background-color: var(--main-contrast-color);

  padding: 0 1em;
}

header > a {
  flex: 1 1 0;
  color: var(--main-text-color);

  margin: 0;

  font-family: var(--font-family-emph);
  font-size: xx-large;
  font-weight: normal;
  text-decoration: none;

  text-align: center;
  text-shadow: var(--main-bg-shadow-color) 2px 2px;
}

.header-link {
  flex: 0 0 auto;
}

.header-logo {
  height: 8svh;
}

.sidebar-open-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.wave {
  width: 100%;
  height: 5svh;
  position: absolute;
}

.wave-bottom {
  height: 8.139535svh;
  bottom: 0;
}

.content {
  height: 85svh;

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: scroll;

  gap: 3svh;

  padding: 5svh 1em 0; /* free space for top wave */

  &::before {
    content: ""; /* apply gap to start */
  }

  &::after {
    display: block;

    content: "";

    height: 5.139535svh; /* free space for bottom wave (+ implicit end gap) */
    width: 100%;

    flex-shrink: 0;
  }
}

.heading {
  color: var(--main-text-color);

  margin: 0;

  font-family: var(--font-family-emph);
  font-size: xx-large;
  font-weight: normal;

  text-align: center;
  text-shadow: var(--main-bg-shadow-color) 2px 2px;
}