html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
   background: url(bgs.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.ctrl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 125px;
  height: 225px;
  text-align: center;
}
.ctrl label {
  display: block;
}
.ctrl input {
  box-sizing: border-box;
  width: 50px;
  text-align: center;
  color: #000;
  border: 1px solid #000;
}
svg {
  height: 100%;
  width: 100%;
  vertical-align: top;
}
svg .keyboard path {
  stroke: #ccc;
  fill: #000;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}
svg .keyboard path.sharp {
  fill: #000;

}
svg .keyboard path.ut {
  fill: #000;
}
svg .keyboard path.first-ut {
  fill: #000;
}
svg .keyboard path:hover {
  fill: #888;
}
svg .keyboard:active path:hover {
  fill: #cdf;
  filter: drop-shadow(0 0 20px #acf);
}