:root {
  --font-family: "Monaspace Argon", monospace;
  --measure: 100ch;
  --line-height: 1.20rem;

  --background-color: #fbf1c7;
  --foreground-color: #282828;

  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  /*font-variant-numeric: tabular-nums lining-nums;*/
  font-size: 16px;
}

@media screen and (max-width: 480px) {
  body {
    padding: var(--line-height) 1ch;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #282828;
    --foreground-color: #fbf1c7;
  }
}

body {
  line-height: var(--line-height);
  background: var(--background-color);
  color: var(--foreground-color);
  margin: calc(var(--line-height) * 3) auto;
  padding: 0 2ch;
}



/* Specify max chars on a line */
* {
  max-inline-size: var(--measure);
}

*+* {
  margin-top: var(--line-height);
}

ul {
  margin-top: 0;
  padding-left: 1ch;
}

html {
  display: flex;
  width: 100%;
  flex-direction: column;
}

li {
  margin-top: 0;
}

html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: var(--line-height);
  margin-bottom: var(--line-height);
}

#debug-grid {
  --color: color-mix(in srgb, var(--foreground-color) 10%, var(--background-color) 90%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  background-image:
    repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);

  background-size: 1ch var(--line-height);
}

@font-face {
  font-family: 'Monaspace Neon';
  src: url('fonts/MonaspaceNeonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique -10deg 0deg;
}

@font-face {
  font-family: 'Monaspace Argon';
  src: url('fonts/MonaspaceArgonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique -10deg 0deg;
}

@font-face {
  font-family: 'Monaspace Krypton';
  src: url('fonts/MonaspaceKryptonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique -10deg 0deg;
}

@font-face {
  font-family: 'Monaspace Radon';
  src: url('fonts/MonaspaceRadonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique -10deg 0deg;
}

@font-face {
  font-family: 'Monaspace Xenon';
  src: url('fonts/MonaspaceXenonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique -10deg 0deg;
}