body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #181818;
  color: #bfb;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 50px auto 1fr auto;
      grid-template-rows: 50px auto 1fr auto;
  -ms-grid-columns: 20px 1fr 20px;
      grid-template-columns: 20px 1fr 20px;
  margin: 0;
  min-height: 100vh;
}

nav {
  grid-column: 1 / -1;
}

nav ul {
  list-style-type: none;
  margin: 0;
  display: -ms-grid;
  display: grid;
  padding: 5px 25px;
  grid-gap: 5px;
  -ms-grid-columns: (minmax(175px, auto))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(175px, auto));
}

nav li {
  padding: 8px;
}

nav a {
  font-size: 24px;
  color: #000;
  text-decoration: none;
  display: block;
  text-align: center;
}

header {
  grid-column: 1 / -1;
  background-color: #181818;
  padding: 0;
}

header h1 {
  font-size: 40px;
  margin: 0;
}

footer {
  grid-column: 1 / -1;
  margin: 25px;
}

main {
  padding: 0 20px;
  grid-column: 2 / -2;
  background-color: #282828;
}

.visual {
  margin: 20px;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  background-color: #000;
}

.controlbar {
  background-color: #181818;
  padding: 2px 5px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.controlbar button, .controlbar input {
  padding: 4px 6px;
  height: 25px;
  border: 1px solid #000;
  border: 0;
  cursor: pointer;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: 2px;
}

.controlbar .slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border-radius: 0;
  height: 25px;
  padding: 0;
  margin: 2px;
  cursor: pointer;
}

.controlbar .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 1px;
  width: 25px;
  height: 25px;
  background-color: #46c;
  margin: 0;
  border-radius: 0;
  border: 1px solid #000;
}

.controlbar .slider::-moz-range-thumb {
  /*TODO make this look the same as on chrome*/
  -moz-appearance: none;
  width: 25px;
  height: 100%;
  background-color: #46c;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: 1px solid #000;
}

.controlbar label {
  background-color: #181818;
  color: #fb8;
  margin: 2px;
  font-family: 'Consolas', 'Courier New', Courier, monospace;
}

.controlbar .play-button {
  -ms-flex-preferred-size: 35%;
      flex-basis: 35%;
}

.clickable, nav li, .controlbar button, .controlbar input, .scroll-reset {
  background-color: #4a4;
}

.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover, .scroll-reset:hover {
  background-color: #4af;
}

.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active, .scroll-reset:active {
  background-color: #46c;
}

.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled, .scroll-reset:disabled {
  background-color: #8b8;
  text-decoration: line-through;
  color: #000;
  cursor: default;
}

.scroll-reset {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  border-radius: 25%;
  background-image: url("uparrow.png");
  cursor: pointer;
}

.img-right {
  float: right;
}
/*# sourceMappingURL=style.css.map */