html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
  background-color: theme("colors.primary");
  &.dark {
    background-color: theme("colors.darkmode.800");
    body {
      color: theme("colors.slate.300");
      *,
      ::before,
      ::after {
        border-color: theme("colors.white" / 5%);
      }
    }
  }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
    padding: theme("spacing.3");
    font-family: theme("fontFamily.public-sans");
    font-size: theme("fontSize.sm");
    line-height: theme("lineHeight.5");
    color: theme("colors.slate.700");
    @media screen(sm) {
      padding-left: theme("spacing.8");
      padding-right: theme("spacing.8");
    }
  }
}