body {
  --c-black:   #1a1a1a;
  --c-white:   #e1e1e1;
  --c-grey:    #898989;
  --c-accent:  #1beb9e;
  --c-purple:  #b462ff;
  --c-fuchsia: #ff45b4;
  --c-blue:    #18b6ff;
  --c-orange:  #ff9528;
  --c-yellow:  #dddd25;

  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 400;
  background: var(--c-black);
  color: var(--c-white);

  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: invert(1);
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  color: var(--c-black);
  background: var(--c-accent);
  box-shadow: 0.3ch 0 0 0 var(--c-accent), -0.3ch 0 0 0 var(--c-accent);
}

strong {
  color: var(--c-white);
  font-weight: 500;
}

hr {
  border: none;
  border-top: 1px dashed var(--c-grey);
  margin: 2.5rem 0;
}

/* Bullet labels, one colour each */
ul li:nth-child(1) strong { color: var(--c-blue); }
ul li:nth-child(2) strong { color: var(--c-fuchsia); }
ul li:nth-child(3) strong { color: var(--c-orange); }
ul li:nth-child(4) strong { color: var(--c-yellow); }

/* Footer legal line in grey */
hr + p {
  color: var(--c-grey);
  font-size: 0.9em;
}

h1 {
  font-size: 2.5em;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--c-white);
  margin: 0 0 1em 0;
}

em {
  color: var(--c-grey);
  font-style: normal;
}

/* Utility colour spans for inline use */
.purple  { color: var(--c-purple); }
.fuchsia { color: var(--c-fuchsia); }
.grey    { color: var(--c-grey); }