:root {
  --global-font-size: 16px;
  --global-line-height: 1.4em;
  --global-space: 12px;
  --font-stack: 'IBM Plex Mono', Menlo, Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
    serif;
  --mono-font-stack: 'Menlo', Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
    serif;
  --background-color: #111;
  --page-width: 60em;
  --font-color: #e8e9ed;
  --invert-font-color: #222;
  --secondary-color: #a3abba;
  --tertiary-color: #a3abba;
  --primary-color: #5ce6cd;
  --error-color: #ff3c74;
  --progress-bar-background: #3f3f44;
  --progress-bar-fill: #62c4ff;
  --code-color: lightgreen;
  --code-bg-color: transparent;
  --code-border-color: #3e4a3e;
  --input-style: solid;
  --display-h1-decoration: none;
}

body {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 var(--global-space);
}

article {
  padding: 24px 0;
}

.center {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

figure {
  margin: auto;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}

.subtitle {
  margin: 0;
  font-size: 14px;
}

h1 {
  padding-top: 0;
}

.terminal-menu li {
  margin-left: 10px;
  margin-right: 10px;
}

.terminal-menu li a.menu-item {
  margin-left: 10px;
  text-decoration: underline;
}

.icon {
  display: inline-block;
  width: 16px;
}

pre {
  color: var(--code-color);
  border-color: var(--code-border-color);
}

pre code {
  line-height: 24px;
  background-size: 10px 24px;
  background-image: repeating-linear-gradient(0deg, var(--code-border-color), var(--code-border-color) 1px, transparent 1px, transparent);
}