main {
  padding-bottom: 70vh; }

#heightGauge {
  height: calc((3 * var(--doublepad)) + 6rem);
  top: 0;
  z-index: -1;
  left: 0;
  position: fixed;
  width: 10px;
  user-select: none;
  pointer-events: none;
  opacity: 0; }
  @media (max-width : 999px) {
    #heightGauge {
      height: calc((2 * var(--doublepad)) + 5rem); } }
.diettext {
  position: fixed;
  height: 100vh;
  right: var(--doublepad);
  top: calc((3 * var(--doublepad)) + 5rem);
  width: var(--column); }
  .diettext span {
    transform: rotate(90deg) translateY(calc(-1 *var(--column)));
    position: absolute;
    width: 500px;
    height: 1em;
    transform-origin: top left; }
  @media (max-width : 999px) {
    .diettext {
      display: none; } }
section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  grid-column-gap: var(--mainpad); }
  @media (max-width : 999px) {
    section {
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: calc(2 * var(--mainpad)); } }
  section h2 {
    position: sticky;
    top: calc((3 * var(--doublepad)) + 5rem);
    margin-bottom: 3em; }
    @media (max-width : 999px) {
      section h2 {
        top: calc((2 * var(--doublepad)) + 5rem); } }
  section .menu-section {
    grid-column: 2/8; }
    @media (max-width : 999px) {
      section .menu-section {
        grid-column: 2/5; } }
    section .menu-section.block p:last-of-type {
      margin-bottom: 3em; }
    section .menu-section.block[data-progress="active"] .image-container {
      opacity: 1; }
    section .menu-section > p {
      margin-bottom: 1em; }
    section .menu-section > ul {
      margin-bottom: 3em; }
    section .menu-section .image-container {
      opacity: 0;
      transition: opacity var(--maintran);
      position: fixed;
      right: calc(var(--mainpad) + var(--column) + var(--doublepad));
      top: calc((3 * var(--doublepad)) + 5rem);
      width: calc((var(--column) * 4) + (var(--mainpad) * 3));
      pointer-events: none;
      user-select: none;
      transition: width 0.5s; }
      section .menu-section .image-container:hover {
        width: calc((var(--column) * 8) + (var(--mainpad) * 3)); }
      @media (max-width : 999px) {
        section .menu-section .image-container {
          position: relative;
          opacity: 1;
          width: 100%;
          height: auto;
          transform: none;
          right: auto;
          margin-top: 0.5em;
          margin-bottom: 1em;
          top: auto; } }
      section .menu-section .image-container img {
        width: 100%;
        height: auto; }
    section .menu-section li {
      transition: color var(--maintran); }
    @media (min-width : 999px) {
      section .menu-section li[data-progress='active'] {
        color: var(--williams); }
        section .menu-section li[data-progress='active'] .image-container {
          opacity: 1;
          user-select: initial;
          pointer-events: initial; } }