/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

body {
  font-family: sans-serif;
  background-color: #222222;
  color: white;
  margin: 0;
  padding: 0;
}

h1 {
  display: none;
}

#keyboard {
  margin: auto;
  margin-top: 10em;
  padding: 0;
  border: none;
  width: 48em;
  height: 20em;
  border-collapse: collapse;
  border-spacing: 0 0;
}

.key {
  transition: background-color 100ms;
}

.key.upper,
.key.black {
  border: 1px solid black;
  border-bottom: none;
  height: 50%;
  width: 8.33%;
}

.key.upper.small,
.key.black.small {
  width: 4.17%;
}

.key.lower {
  border: 1px solid black;
  border-top: none;
  vertical-align: bottom;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  height: 50%;
}

.key.white {
  background-color: white;
  color: gray;
}

.key.black {
  background-color: black;
  color: gray;
}

.key.active {
  background-color: yellow;
}

#helptoggle {
  position: absolute;
  right: 1em;
  bottom: 1em;
  font-size: 1.5em;
}

#helpdesc {
  position: absolute;
  left: 0;
  right: 0;
  top: 10em;
  background-color: rgba(204, 204, 204, .95);
  color: #222222;
  width: 24em;
  margin: auto;
  padding: 1em;
  border: 1px solid black;
  border-radius: 1em;
  z-index: 10;
}

#helpdesc.hidden {
  display: none;
}

#helpdesc > p {
  margin-top: 0;
  margin-bottom: 1em;
}

#helptable,
#helphide {
  margin: auto;
  padding: 0;
  width: 8em;
}

#helptable {
  border: 0;
  border-collapse: collapse;
  border-spacing: 0 0;
}

#helptable td {
  text-align: center;
}

#helphide {
  margin-top: 1em;
}

#helphide > button {
  width: 8em;
}