:root {
  --header-bg-color: #a8a088;
  --header-fg-color: #eeeeee;
  --header-title-color: #382820;
  --nav-bg-color: #c8c0a0;
  --nav-fg-color: #483830;
  --content-bg-color: #ffffff;
  --footer-bg-color: var(--header-bg-color);
  --footer-fg-color: #eeeeee;
  --button-bg-color: var(--nav-bg-color);
  --button-fg-color: var(--nav-fg-color);
  --button-hover-bg-color: var(--nav-fg-color);
  --button-hover-fg-color: var(--nav-bg-color);
  --key-black-color: #333333;
  --key-white-color: #ffffff;
  --key-yellow-color: #f0c033;
  --key-blue-color: #3388ee;
  --key-green-color: #bbbb22;
  --color-link-unvisited: #382820;
  --color-link-visited: #e8e8e8;
  --color-link-hover: #ffee99;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: Tahoma, sans-serif;
}

a:link {
  color: var(--color-link-unvisited);
}

a:visited {
  color: var(--color-link-visited);
}

a:hover {
  color: var(--color-link-hover);
}

.wrapper {
  display: grid;
  height: 100%;
}

.header {
  grid-column-start: 1;
  grid-column-end: 3;
  display: block;
  text-align: center;
  padding: 0.75em;
  background-color: var(--header-bg-color);
}

.nav {
  grid-row-start: 2;
  grid-row-end: 3;
  background: var(--nav-bg-color);
}

.program {
  background: blue;
  margin: 0.5em 1em;
  background-color: var(--content-bg-color);
}

.footer {
  background: violet;
  grid-column-start: 1;
  grid-column-end: 3;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.75em;
  font-size: 80%;
  color: var(--footer-fg-color);
  background-color: var(--footer-bg-color);
}

.header h1 {
  font-size: 180%;
  margin: 0;
  padding-bottom: 0.25em;
  color: var(--header-title-color);
}

.header p {
  font-size: 90%;
  margin: 0;
  padding: 0;
  color: var(--header-fg-color);
}

.button {
  display: list-item;
  list-style-type: none;
  color: var(--button-fg-color);
  background-color: var(--button-bg-color);
  border: none;
  padding: 0.75em 0.75em;
  margin: 0.5em;
}

.button:hover {
  color: var(--button-hover-fg-color);
  background-color: var(--button-hover-bg-color);
}

kbd {
  border-style: solid;
  border-width: 2px;
  border-radius: 3px;
  padding: 0.15em 0.3em 0.175em 0.325em;
}

kbd.black {
  border-color: var(--key-black-color);
  background-color: var(--key-black-color);
}

kbd.white {
  border-color: var(--key-black-color);
  background-color: var(--key-white-color);
}

kbd.yellow {
  border-color: var(--key-black-color);
  background-color: var(--key-yellow-color);
}

kbd.blue {
  border-color: var(--key-black-color);
  background-color: var(--key-blue-color);
}

kbd.green {
  border-color: var(--key-green-color);
  background-color: var(--key-green-color);
}

.var {
  font-family: "Times New Roman", Times, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 150%;
  line-height: 50%;
}

.sub {
  vertical-align: sub;
  font-size: 75%;
}

.sup {
  vertical-align: super;
  font-size: 75%;
}

.sub.var {
  font-size: 120%;
}

.sup.var {
  font-size: 120%;
}

.statement {
  font-family: monospace;
  font-style: italic;
}

.black {
  color: var(--key-black-color);
}

.yellow {
  color: var(--key-yellow-color);
}

.blue {
  color: var(--key-blue-color);
}

.white {
  color: var(--key-white-color);
}

.indirect {
  font-family: Tahoma, sans-serif;
}

.thin {
  display: inline-block;
  width: 0.2em;
}

.convert {
  position: relative;
  display: inline-block;
  top: 0.08em;
}

.convert::after {
  content: "\2192";
  position: absolute;
  left: 0;
  top: -0.35em;
}

.convert.black-blue {
  color: var(--key-blue-color);
}

.convert.black-blue::after {
  color: var(--key-black-color);
}

.convert.black-yellow {
  color: var(--key-yellow-color);
}

.convert.black-yellow::after {
  color: var(--key-black-color);
}

.convert.blue-black {
  color: var(--key-black-color);
}

.convert.blue-black::after {
  color: var(--key-blue-color);
}

.convert.yellow-yellow {
  color: var(--key-yellow-color);
}

.convert.yellow-yellow::after {
  color: var(--key-yellow-color);
}

.exchange {
  position: relative;
  display: inline-block;
  top: 0.35em;
}

.exchange::after {
  content: "\02C3";
  position: absolute;
  left: 0;
  top: -0.3em;
  text-align: center;
}