html {
  box-sizing: border-box;
}

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

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

html {
  height: 100%;
  /* 0.625 of 16px is 10px: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px */
  font-size: 62.5%;
  font-family: var(--system-ui);
}

body {
  min-height: 100%;
  font-size: 1.6rem;
}

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

/* https://stackoverflow.com/questions/11243337/a-taller-than-its-img-child */
a > img {
  display: block;
}

img {
  max-width: 100%;
}

svg {
  fill: currentColor;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block-start: 0;
  margin-block-end: 0;
}

textarea {
  resize: vertical;
}