html {
  font-size: 16px;
}

body {
  font-size: var(--txt-0);
  font-family: var(--serif-stack);
  line-height: 1.65;
  font-weight: 300;
  background-color: var(--bg-color);
  color: var(--txt-color);
  letter-spacing: 0.025em;
}
b {
  font-weight: 500;
}
h1, h2, h3, h4, h5 {
  font-family: var(--title-stack);
  margin-block: var(--lead-1);
  font-weight: 400;
  letter-spacing: 0px;
}
p {
  margin-block-start: 0;
  margin-block-end: var(--lead-1);
}
h1 { font-size: var(--txt-3); }
h2 { font-size: var(--txt-1); }
h3 { font-size: var(--txt-0); }
h4 { font-size: var(--txt-0); }
h5 { font-size: var(--txt-0); }

.container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: var(--grid-gutter);
}

.txt--2 { font-size: var(--txt--2) }
.txt--1 { font-size: var(--txt--1) }
.txt-0 { font-size: var(--txt-0) }
.txt-1 { font-size: var(--txt-1) }
.txt-2 { font-size: var(--txt-2) }
.txt-3 { font-size: var(--txt-3) }
.txt-4 { font-size: var(--txt-4); line-height: 1;}

pre {
  overflow: scroll;
}

a:visited {
  color: var(--black);
}

.shadow {
  box-shadow: 1px 2px 2px hsl(var(--shadow-color) / 0.2),
              2px 4px 4px hsl(var(--shadow-color) / 0.2),
              4px 8px 8px hsl(var(--shadow-color) / 0.2),
              8px 16px 16px hsl(var(--shadow-color) / 0.2),
              16px 32px 32px hsl(var(--shadow-color) / 0.2)
}