* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: light;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-body);
  line-height: 1.6;
}

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

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

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

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

.bg-subtle-stripes {
  background-color: var(--color-bg);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 calc(var(--pattern-stripe-size) - var(--pattern-stripe-width)),
    var(--pattern-stripe) calc(var(--pattern-stripe-size) - var(--pattern-stripe-width)) var(--pattern-stripe-size)
  );
}

.bg-squares {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 calc(var(--pattern-grid-cell) - 1px),
      var(--pattern-grid-line) calc(var(--pattern-grid-cell) - 1px) var(--pattern-grid-cell)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--pattern-grid-cell) - 1px),
      var(--pattern-grid-line) calc(var(--pattern-grid-cell) - 1px) var(--pattern-grid-cell)
    );
  background-size: var(--pattern-grid-cell) var(--pattern-grid-cell);
  background-position: 0 0;
  background-repeat: repeat;
}