/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent any overflowing component (tables, wide cards) from creating a
   page-level horizontal scrollbar on mobile. overflow-x:clip (unlike hidden)
   does NOT create a new scroll container, so position:fixed elements
   (topbar, sidebar, modals) are completely unaffected. */
html {
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

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

img {
  max-width: 100%;
  display: block;
}

button, input, select, textarea {
  font: inherit;
}

svg {
  display: block;
}