.ids--light *,
.ids--light *::before,
.ids--light *::after,
.ids--dark *,
.ids--dark *::before,
.ids--dark *::after {
  box-sizing: border-box;
}
.ids--light body,
.ids--light h1,
.ids--light h2,
.ids--light h3,
.ids--light h4,
.ids--light h5,
.ids--light h6,
.ids--light p,
.ids--light dl,
.ids--light dd,
.ids--light figure,
.ids--light picture,
.ids--dark body,
.ids--dark h1,
.ids--dark h2,
.ids--dark h3,
.ids--dark h4,
.ids--dark h5,
.ids--dark h6,
.ids--dark p,
.ids--dark dl,
.ids--dark dd,
.ids--dark figure,
.ids--dark picture {
  margin: 0;
}
.ids--light body,
.ids--dark body {
  color: var(--ids-color-surface-text-on-default);
  font-family: var(--IDS-FONT-FAMILY-BASE);
  font-size: 1rem;
  min-height: 100%;
}
.ids--light,
.ids--dark {
  /* make images easier to work with */
}
.ids--light img,
.ids--light picture,
.ids--dark img,
.ids--dark picture {
  max-width: 100%;
  display: block;
}
.ids--light,
.ids--dark {
  /* make form elements easier to work with */
}
.ids--light input,
.ids--light button,
.ids--light textarea,
.ids--light select,
.ids--dark input,
.ids--dark button,
.ids--dark textarea,
.ids--dark select {
  font: inherit;
}
.ids--light ul[class],
.ids--light ol[class],
.ids--dark ul[class],
.ids--dark ol[class] {
  list-style: none;
  padding: 0;
}
.ids--light,
.ids--dark {
  /* remove animations for people who've turned them off */
}
@media (prefers-reduced-motion: reduce) {
  .ids--light *,
  .ids--light *::before,
  .ids--light *::after,
  .ids--dark *,
  .ids--dark *::before,
  .ids--dark *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}