@font-face {
  font-family: "VT323";
  src: url(./VT323-Regular.ttf);
}

@font-face {
  font-family: "LCD2U";
  src: url(./LCD2U.TTF);
}

html, body {
  padding: 0px;
  margin: 0px;
  font-family: 'VT323', monospace;
  color: #30f090;
}

main {
  /* Background by backgroundlabs.com, attribution required */
  background-color: #14682e;
  background-image: url(./background.png);
  width: 100vw;
  height: 50vh;
  margin: 0px;
  padding: 5vh 0px;
}

h1 {
  text-align: center;
  background-color: #14682e;
  margin: auto auto;
  width: 90vmin;
  font-size: calc(90vmin / 12);
  font-weight: normal;
  border-radius: 5vmin;
}

main table {
  background-color: #14682e;
  width: 95vmin;
  margin: auto auto;
  position: absolute;
  top: 20vh;
  left: calc( ( 100vw - 95vmin ) / 2 );
  height: 10vmin;
  border: 2px solid #30f090;
  border-radius: 1vmin;
}

main td {
  text-align: center;
  width: calc(95vmin / 12);
  font-size: calc(95vmin / 30);
  vertical-align: bottom;
}

main td.led {
  vertical-align: top;
}

button.led {
  background-color:#500;
  width: calc(95vmin / 24);
  height: calc(95vmin / 24);
  display: inline-block;
  border-radius: calc(95vmin / 48);
  cursor: pointer;
}

button.led.active {
  background-color:#f00;
}

#display {
  position: absolute;
  left: calc( ( 100vw - 40vmin ) / 2 );
  width: 30vmin;
  height: 10vmin;
  top: 40vh;
  font-size: 9vmin;
  font-family: 'LCD2U', monospace;
  text-align: center;
  padding: 0px 1vw;
  background-color: #222;
  color: #ccc;
  border: 1vmin solid black;
  box-sizing: border-box;
}

#display ~ button {
  position: absolute;
  left: calc( ( 100vw - 40vmin ) / 2 + 30vmin );
  width: 5vmin;
  top: 40vh;
  height: 5vmin;
  box-sizing: border-box;
  font-size: 4vmin;
  border-radius: 2.5vw;
  background-color: black;
  color: white;
  cursor: pointer;
  padding: 0px;
}

#display ~ button ~ button {
  top: calc(40vh + 5vmin);
}

*:focus {
  outline: none;
}

aside {
  color: black;
  font-family: sans;
  width: 100vw;
  height: 40vh;
  overflow-x: auto;
}

aside table {
  width: 100%;
  height: 40vh;
  border-collapse: collapse;
  display: block;
  font-family: monospace;
}

aside table thead tr {
  height: 1em;
  vertical-align: bottom;
}

aside table tbody {
  height: calc(40vh - 1em);
  overflow-y: auto;
}

aside table th {
  width: calc( ( 100vw - 20em ) / 12 );
}

aside table td, aside table th {
  text-align: center;
  white-space: nowrap;
  padding: 1px 0px;
}

aside table th:nth-of-type(1) {
  width: 2em;
}

aside table th:nth-of-type(2) {
  width: 3em;
}

aside table th:nth-of-type(3) {
  width: 13em;
}

aside table th:nth-of-type(4) {
  width: 2em;
}

aside table td:nth-of-type(1) {
  text-align: right;
}

aside table td:nth-of-type(2) {
  width: 1em;
}

aside table td:nth-of-type(3) {
  text-align: right;
}

aside table tbody tr {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

aside table thead tr, aside table tbody tr:nth-of-type(2n) {
  background-color:#ddd;
}