* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

code[data-language]::before,
code[data-language]::after {
  content: "";
}

pre[data-language],
code[data-language] {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: break-all;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

:not(pre) > code[data-language] {
  padding: 0.3em 0.4em;
  border-radius: 0.3em;
  white-space: normal;
}

pre[data-language] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}

html.dark .light-only {
  display: none;
}

html:not(.dark) .dark-only {
  display: none;
}

@layer base {
  body {
    @apply dark:bg-primary-high dark:text-white bg-white text-black;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply dark:text-white;
  }
  th {
    @apply dark:text-white;
  }
  td {
    @apply dark:text-primary-low;
  }
  code {
    @apply dark:text-primary-low;
  }
}

@tailwind base;
@tailwind components;
@tailwind utilities;
