@layer base {
  html {
    @apply text-gray-900 scroll-pt-[58px] md:scroll-pt-[var(--page-header-height)];

    /* Cypress has a hard time finding elements when smooth scrolling is enabled. */
    &:not(.e2e):not(.pb-html-preview) {
      @apply scroll-smooth;
    }

    @apply motion-reduce:scroll-auto;

    --base-sticky-top: var(--page-header-bottom-height);
  }

  .page {
    /* Makes sure that the main page content fills out the remaining space of */
    /* the viewport height. */
    min-height: calc(100vh - var(--page-header-height) - 250px);
  }
}

html.has-header-visible {
  --base-sticky-top: var(--page-header-height);
}