:root {
  --color-p0: #111;
  --color-p1: #333;
  --color-p2: #666;
  --color-p3: #999;
  --color-p4: #FFF;
  --color-p5: #F06;
  --color-p6: #FF6;
  --color-p7: #0F6;
  --color-p8: #0FF;
  --color-p9: #06F;

  --bg-color: var(--color-p0);
  --fg-color: var(--color-p4);
  --ac-color: var(--color-p5);
}

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

html {
  font: 11px monospace;
}
body {
  background: var(--bg-color);
  color: var(--fg-color);
}

a       { color: var(--ac-color); }
a:hover { color: var(--fg-color); }

.button,
 button {
  display: inline-block;

  background: var(--ac-color);
  color: var(--fg-color);

  padding: 0.25em 0.5em;
}
.button:hover,  button:hover  { background-image: linear-gradient(0deg, #00000033, #00000033) }
.button:active, button:active { background-image: linear-gradient(0deg, #FFFFFF33, #FFFFFF33) }

hr { border: 0.5px solid; }