:root {
  --text-color: hsl(0 0 80);
  --highlight-hue: 10deg;
  --highlight: hsl(var(--highlight-hue) 70 50);
  --layer-0: hsl(0 0 10);
  --layer-1: hsl(0 0 15);
}

/* roboto-mono-latin-wght-normal */
@font-face {
  font-family: 'Roboto Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

body {
  font-family: 'Roboto Mono Variable';
  background-color: var(--layer-0);
  color: var(--text-color);
  padding: 1% 20% 1% 20%;
}

#content {
  background-color: var(--layer-1);
  padding: 1% 5% 1% 5%;
}

a {
  color: var(--highlight);
  text-decoration: None;
}

a:hover {
  color: hsl(var(--highlight-hue) 70 60);
  text-decoration: underline;
}