body {
  //set font and default line height
  font-family: $font-string;
  @include set-font(0, "multiple");

  //set background and foreground color of body
  @include set-colors("background");

  //keeps the scrollbar dark in touch browsers that set the scrollbar color relative to the background color of the body, i.e. a light color, when the background is dark.
  //ONLY USE WHEN .theme-dark is on body and theme--normal is on main and sidebar
  &.body--scrollbar-dark.theme--dark {
    background-color: map-get($color-neutrals, "background-secondary");
    background-image: linear-gradient(color("background"), color("background"));
  }

  &.body--no-scroll {
    height: 100vh;
    overflow: hidden;
    /* for iphone, from https://benfrain.com/preventing-body-scroll-for-modals-in-ios/ */
    touch-action: none;
    overscroll-behavior: none;
  }
}