body {
  color: #aaa;
  margin: 0;
  background: #1a1a1a;
  font-family: 'Consolas', monospace;
}

* {
  scrollbar-width: auto;
  scrollbar-color: #aaaaaa1f #5553;
}

*::-webkit-scrollbar {
  width: 10pt;
  height: 10pt;
}

*::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: #5553;
}

*::-webkit-scrollbar-thumb {
  background-color: #aaaaaa1f;
  border: 2pt solid #5553;
}

#app_container {
  margin: 50pt auto;
  max-width: 80%;
  width: 1000pt;
  min-width: 500pt;
}

ul {
  cursor: pointer;
  list-style-type: none;
}

li:hover, li:active {
  color: #fff;
  text-decoration: underline;
}

div.box {
  margin: 20pt 0;
  display: block;
  background: #333;
  padding: 16pt;
  color: #fff;
}

button {
  background-color: #666;
  border-radius: 5pt;
  padding: 4pt 8pt;
  color: #ddd;
  border: none;
  font-family: 'Consolas', monospace;
  font-size: 100%;
  margin-top: 6pt;
  --x: 0;
  --y: 0;
}

button:hover, button:active {
  background-color: #888;
  color: #fff;
  translate: var(--x) var(--y);
}

#vol {
  display: none;
  translate: 600pt -70pt;
  rotate: 5deg;
}

h3 {
  margin-top: 0;
}