/* Global */

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

html {
  font-family: sans-serif;
}

body {
  margin: 0;
  font-family: 'Linux Biolinum', 'Helvetica Neue', helvetica, arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  background-color: #000;
  color: #0c0;
  overflow: hidden;
}
a {
  color: #ccf;
  text-decoration: underline;
  cursor: pointer;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a:hover {
  color: #99f;
}

/* sPanel */
.panel {
  position: fixed;
  top: 10px;
  right: 10px;
  opacity: 0.6;
  transition: opacity 0.4s;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.panel:hover {
  opacity: 1.0;
}
.panel table {
  font-family: monospace;
  text-align: right;
  line-height: 1;
}
.panel input[type=number] {
  width: 80px;
}
.panel input[type=range] {
  width: 420px;
}
.panel .buttons {
  position: fixed;
  top: 10px;
  left: 10px;
  margin: 0;
}
.panel .buttons > a {
  display: block;
}