:root {
  font-size: 16px;

  --font-size-base: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.5rem;
  --font-size-xxlarge: 1.875rem;

  --color-accent: 0, 0, 255;
}

html {
  box-sizing: border-box;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-font-smoothing: antialiased;

}

body {
  font-size: 1rem;
  line-height: 1.625;
  background-color: #FCFCFC;
  /* font-family: Helvetica, Arial, sans-serif; */
  font-family: fira-sans, monospace;
  color: #030303;
}

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

/* main #page-content {
  background-image: linear-gradient(#f00 1px, transparent 1px);
  background-size: auto calc(1.625rem - 0px);
} */


h1,h2,h3,h4,h5,h6 {
  font-family: "Fira Code";
  font-weight: normal;
  letter-spacing: -2px;
  /* font-variant-ligatures: common-ligatures;
  font-kerning: none; */
}

h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dd,
p, figure,
pre, table, fieldset, hr {
  overflow-wrap: break-word;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

#page-content {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    1rem
    [content-start] min(70ch, calc(100% - 2rem)) [content-end]
    1rem
    minmax(0, 1fr);
  width: 100%;
}

#page-content > * {
  grid-column: content;
  margin-bottom: 0.8125rem;
}

#page-content h1 {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}

#page-content h2 {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 1rem;

  border-left: 4px solid white;
  border-image:
    linear-gradient(
      rgba(var(--color-accent), 1.0) 0%, 20%,
      rgba(var(--color-accent), 0.8) 20%, 40%,
      rgba(var(--color-accent), 0.6) 40%, 60%,
      rgba(var(--color-accent), 0.4) 60%, 80%,
      rgba(var(--color-accent), 0.2) 80%)
    1
    100%;
  padding-left: 8px;
  margin-left: -14px;
}

#page-content * + h2 {
  margin-top: 2rem;
}

#page-content h3 {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: 1rem;
  margin-left: -3px;
}

#page-content * + h3 {
  margin-top: 1.5rem;
}