@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Orbitron:700|Play|Squada+One|Kanit:900");
html, body {
  font-family: arial, verdana, sans-serif;
}

#notice {
  font-size: 10px;
}

input,
.sound,
.keysound {
  display: none;
  position: absolute;
  width: 0;
  top: -10000px;
  top: -100vmax;
}

#keyboard {
  width: 1000px;
  height: 287px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  overflow: hidden;
}
#keyboard::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 2px;
  left: 6px;
  bottom: 0px;
  right: 6px;
  background: #363534;
  box-shadow: inset 0 0 8px 2px black, inset 0 0 11px white, inset 0 0 3px black;
}
#keyboard .speaker {
  position: absolute;
  width: 182px;
  height: 100%;
  z-index: 3;
}
#keyboard .speaker::before, #keyboard .speaker::after {
  content: "";
  position: absolute;
  z-index: -1;
  position: absolute;
  top: 5px;
  left: 2px;
  right: 2px;
  height: 70px;
  background: #363534;
}
#keyboard .speaker::after {
  top: auto;
  bottom: 5px;
  height: 170px;
}
#keyboard .speaker .circle {
  position: absolute;
  width: 130px;
  height: 130px;
  background: rgba(0, 0, 0, 0.4);
  left: 26px;
  bottom: 26px;
  border-radius: 130px;
}
#keyboard .speaker .circle::before, #keyboard .speaker .circle::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 0;
  width: 8px;
  height: 100%;
  background: #323232;
}
#keyboard .speaker .circle::after {
  left: auto;
  right: 35px;
}
#keyboard .speaker .bar {
  position: relative;
  width: 182px;
  height: 11px;
  background: #434241;
  border-radius: 2px;
  margin-top: 2px;
  box-shadow: inset 0 1px 1px #6a6866, inset 0 -1px 1px #0f0f0e, inset 3px 3px 1px #5d5b5a, inset 0 -3px 3px #292827, 2px 1px 2px rgba(0, 0, 0, 0.5);
}
#keyboard .speaker .bar:nth-child(n+7) {
  box-shadow: inset 0 1px 1px #6a6866, inset 0 -1px 1px #0f0f0e, inset 3px 3px 1px #5d5b5a, inset 0 -3px 3px #292827, 2px 0px 2px rgba(0, 0, 0, 0.5);
}
#keyboard .speaker .bar.bar-top {
  height: 13px;
  margin-top: 0;
  border-radius: 20px 4px 4px 4px;
}
#keyboard .speaker .bar.bar-mid {
  height: 12px;
  margin-top: 27px;
}
#keyboard .speaker .bar.bar-bottom {
  height: 13px;
  border-radius: 4px 4px 4px 20px;
}
#keyboard .speaker#speaker-right {
  right: 0;
}
#keyboard .speaker#speaker-right .bar {
  box-shadow: inset 0 1px 1px #6a6866, inset 0 -1px 1px #0f0f0e, inset 3px 3px 1px #5d5b5a, inset 0 -3px 3px #292827, -2px 1px 2px rgba(0, 0, 0, 0.5);
}
#keyboard .speaker#speaker-right .bar:nth-child(n+7) {
  box-shadow: inset 0 1px 1px #6a6866, inset 0 -1px 1px #0f0f0e, inset 3px 3px 1px #5d5b5a, inset 0 -3px 3px #292827, -2px 0px 2px rgba(0, 0, 0, 0.5);
}
#keyboard .speaker#speaker-right .bar.bar-top {
  height: 13px;
  border-radius: 4px 20px 4px 4px;
}
#keyboard .speaker#speaker-right .bar.bar-bottom {
  height: 13px;
  border-radius: 4px 4px 20px 4px;
}
#keyboard .nav {
  position: relative;
  left: 184px;
  background: #323232;
  width: 632px;
  border-radius: 2px;
  box-shadow: inset 1px 1px 1px #727272, inset 0 -2px 1px #181818, 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
#keyboard .nav#nav-top {
  border-radius: 2px 2px 1px 1px;
  height: 78px;
}
#keyboard .nav#nav-top .text {
  position: absolute;
  font-weight: bold;
  opacity: 0.8;
  font-size: 5.5px;
}
#keyboard .nav#nav-top #casio {
  position: absolute;
  left: 20px;
  top: 8px;
  font-family: Orbitron;
  font-weight: bold;
  color: #abb8c9;
  opacity: 0.8;
  font-size: 14px;
}
#keyboard .nav#nav-top #casio span {
  font-weight: lighter;
  margin-left: 6px;
  font-family: play;
}
#keyboard .nav#nav-top .bluetext {
  position: absolute;
  font-family: kanit, play, arial, sans-serif;
  color: #6688cc;
  opacity: 0.66;
  text-transform: uppercase;
  font-style: italic;
  font-weight: bold;
  left: 20px;
  font-size: 18px;
}
#keyboard .nav#nav-top .bluetext#onehundred {
  top: 19px;
}
#keyboard .nav#nav-top .bluetext#onehundred span {
  font-size: 0.7em;
  margin-left: 5px;
}
#keyboard .nav#nav-top .bluetext#tonebank {
  top: 30px;
}
#keyboard .nav#nav-top .bluetext#tonebank span.together {
  letter-spacing: -5px;
  margin-right: 6px;
}
#keyboard .nav#nav-top .bluetext#tonebank span.larger {
  font-size: 1.2em;
}
#keyboard .nav#nav-top ol {
  top: 8px;
  right: 8px;
  position: absolute;
  list-style: none;
  padding-left: 0;
  margin: 0;
  padding: 0;
  color: #abb8c9;
  counter-reset: modes 0;
  font-size: 3.25px;
  font-weight: bold;
  column-count: 10;
  opacity: 0.8;
  text-transform: uppercase;
}
#keyboard .nav#nav-top ol li::before {
  content: counter(modes,decimal-leading-zero);
  color: #6688cc;
  margin-right: 2px;
}
#keyboard .nav#nav-top ol li::after {
  counter-increment: modes;
  content: "";
}
#keyboard .nav#nav-top #powertext {
  color: #eebb66;
  bottom: 12px;
  left: 8px;
}
#keyboard .nav#nav-top #offontext {
  color: #c0c0c0;
  font-size: 5px;
  bottom: 4px;
  left: 6px;
}
#keyboard .nav#nav-top #pulse {
  color: #c0c0c0;
  bottom: 12px;
  left: 111px;
}
#keyboard .nav#nav-top #pulse span {
  color: #eebb66;
  font-size: 6px;
  font-weight: bold;
  margin-left: 2px;
}
#keyboard .nav#nav-top #volume, #keyboard .nav#nav-top #rythm, #keyboard .nav#nav-top #tone {
  color: #eebb66;
  bottom: 12px;
  left: 195px;
  text-transform: uppercase;
}
#keyboard .nav#nav-top #rythm {
  left: 275px;
  font-size: 5.5px;
}
#keyboard .nav#nav-top #tone {
  left: 499px;
}
#keyboard .nav#nav-top #volume-symbols {
  position: absolute;
  bottom: 4px;
  left: 192px;
  color: #c0c0c0;
  opacity: 0.8;
  font-size: 5px;
}
#keyboard .nav#nav-top #volume-symbols::before {
  content: "▼";
}
#keyboard .nav#nav-top #volume-symbols::after {
  content: "▲";
  padding-left: 20px;
}
#keyboard .nav#nav-top #demo {
  position: absolute;
  bottom: 10px;
  left: 238px;
  display: inline-block;
  font-size: 5.5px;
  background: #eebb66;
  font-weight: bold;
  padding: 2px 1.5px;
  border-radius: 1px;
  opacity: 0.8;
}
#keyboard .nav#nav-top #tones {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 250px;
  display: flex;
}
#keyboard .nav#nav-top #tones .tone {
  text-align: center;
  -webkit-flex: 1;
  flex: 1;
  color: #c0c0c0;
  font-size: 5px;
  opacity: 0.8;
}
#keyboard .nav#nav-top #tempo {
  color: #c0c0c0;
  font-size: 5px;
  bottom: 4px;
  left: 274px;
}
#keyboard .nav#nav-top #tempo::before {
  margin-right: 2px;
  display: inline-block;
  content: "▼";
}
#keyboard .nav#nav-top #tempo::after {
  content: "▲";
  display: inline-block;
  margin-left: 2px;
}
#keyboard .nav#nav-top #select, #keyboard .nav#nav-top #stop {
  bottom: 4px;
  left: 317px;
  color: #c0c0c0;
}
#keyboard .nav#nav-top #stop {
  left: 346px;
}
#keyboard .nav#nav-mid {
  margin-top: 27px;
  height: 30px;
}
#keyboard .nav#nav-mid #super, #keyboard .nav#nav-mid #sa-rythm {
  position: absolute;
  color: #44ccaa;
  font-family: "Squada One", Play, arial, sans-serif;
  font-size: 10px;
  opacity: 0.8;
  top: 6px;
  left: 12px;
}
#keyboard .nav#nav-mid #sa-rythm {
  color: #c0c0c0;
  left: auto;
  right: 12px;
  font-family: Arial;
  font-size: 7px;
  top: auto;
  bottom: 8px;
}
#keyboard .nav#nav-mid #green-lines, #keyboard .nav#nav-mid #white-lines {
  position: absolute;
  top: 12px;
  left: 5px;
  width: 0;
  height: 7px;
  border-left: 1px solid #44ccaa;
  opacity: 0.6;
}
#keyboard .nav#nav-mid #green-lines::before, #keyboard .nav#nav-mid #green-lines::after, #keyboard .nav#nav-mid #white-lines::before, #keyboard .nav#nav-mid #white-lines::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 0;
  border-top: 1px solid #44ccaa;
}
#keyboard .nav#nav-mid #green-lines::after, #keyboard .nav#nav-mid #white-lines::after {
  top: auto;
  bottom: 0;
  width: 560px;
}
#keyboard .nav#nav-mid #white-lines {
  left: auto;
  right: 5px;
  height: 7px;
  top: 18px;
  border-left: 1px solid #c0c0c0;
}
#keyboard .nav#nav-mid #white-lines::before, #keyboard .nav#nav-mid #white-lines::after {
  border-top: 1px solid #c0c0c0;
  left: auto;
  right: 0px;
}
#keyboard .nav#nav-mid #white-lines::after {
  width: 620px;
}
#keyboard .nav#nav-mid #line1, #keyboard .nav#nav-mid #line2 {
  font-size: 4px;
  color: #44ccaa;
  position: absolute;
  bottom: 9px;
  color: #44ccaa;
  opacity: 0.8;
  width: 600px;
  height: 0;
}
#keyboard .nav#nav-mid #line1 div, #keyboard .nav#nav-mid #line2 div {
  position: absolute;
  top: -4px;
  line-height: 4px;
  display: inline-block;
  background: #323232;
  text-transform: uppercase;
  transform: translate(-50%, 0);
  padding: 0px 2px;
  white-space: nowrap;
}
#keyboard .nav#nav-mid #line2 {
  bottom: 4px;
  color: #c0c0c0;
}
#keyboard .nav#nav-mid #line2 div {
  top: -3px;
}
#keyboard .nav#nav-mid #sa-rock {
  left: 4.9%;
}
#keyboard .nav#nav-mid #sa-pops {
  left: 11%;
}
#keyboard .nav#nav-mid #sa-funk {
  left: 16.8%;
}
#keyboard .nav#nav-mid #sa-slow-rock {
  left: 27%;
}
#keyboard .nav#nav-mid #sa-latin {
  left: 33.4%;
}
#keyboard .nav#nav-mid #sa-jungle {
  left: 43.4%;
}
#keyboard .nav#nav-mid #sa-orient {
  left: 49.6%;
}
#keyboard .nav#nav-mid #sa-bagpiper {
  left: 56.1%;
}
#keyboard .nav#nav-mid #sa-fanfare {
  left: 66%;
}
#keyboard .nav#nav-mid #sa-childs-play {
  left: 72.3%;
}
#keyboard .nav#nav-mid #sa-classical {
  left: 82.5%;
}
#keyboard .nav#nav-mid #sa-computer {
  left: 88.4%;
}
#keyboard .nav#nav-mid #sa-new-age-music {
  left: 94.7%;
}
#keyboard .nav#nav-mid #sa-rock1 {
  left: 12px;
}
#keyboard .nav#nav-mid #sa-rock2 {
  left: 8%;
}
#keyboard .nav#nav-mid #sa-16-beat-1 {
  left: 13.8%;
}
#keyboard .nav#nav-mid #sa-16-beat-2 {
  left: 19.6%;
}
#keyboard .nav#nav-mid #sa-disco-1 {
  left: 24%;
}
#keyboard .nav#nav-mid #sa-disco-2 {
  left: 30.2%;
}
#keyboard .nav#nav-mid #sa-disco-3 {
  left: 36.6%;
}
#keyboard .nav#nav-mid #sa-pops-1 {
  left: 40.4%;
}
#keyboard .nav#nav-mid #sa-pops-2 {
  left: 46.6%;
}
#keyboard .nav#nav-mid #sa-pops-3 {
  left: 52.6%;
}
#keyboard .nav#nav-mid #sa-slow-rocK {
  left: 58.6%;
}
#keyboard .nav#nav-mid #sa-swing {
  left: 62.9%;
}
#keyboard .nav#nav-mid #sa-march {
  left: 69%;
}
#keyboard .nav#nav-mid #sa-reggae {
  left: 75.4%;
}
#keyboard .nav#nav-mid #sa-tango {
  left: 79.3%;
}
#keyboard .nav#nav-mid #sa-samba {
  left: 85.5%;
}
#keyboard .nav#nav-mid #sa-bossa-nova {
  left: 91.8%;
}
#keyboard .nav#nav-mid #sa-beguine {
  left: 98%;
}
#keyboard .nav#nav-mid #sa-waltz {
  left: 102.2%;
}
#keyboard #keys {
  position: relative;
  left: 184px;
  background: #323232;
  width: 632px;
  border-radius: 2px;
  box-shadow: inset 1px 1px 1px #727272, inset 0 -2px 1px #181818, 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
  height: 145px;
  border-radius: 0;
  display: flex;
  z-index: 1;
}
#keyboard #keys .key {
  display: block;
  -webkit-flex: 1;
  flex: 1;
  margin-right: 1px;
  border-radius: 0px 0px 3px 3px;
  background: #fbfaf5;
  box-shadow: inset 0px -2px 2px 0px #c1b163, inset 0px -13px 0px -7px white, inset 2px 5px 3px rgba(255, 255, 255, 0.25), inset 0px 3px 0 #ded6ac, 0 0 1px 0 #ded6ac;
  transition: all 0.25s;
}
#keyboard #keys .key:hover {
  cursor: pointer;
}
#keyboard #keys .key:active {
  box-shadow: inset 0px -1px 3px 0px #c1b163, inset 0px -9px 0px -3px white, inset 2px 5px 3px rgba(255, 255, 255, 0.25), inset 0px 3px 0 #ded6ac, 0 0 1px 0 #ded6ac;
}
#keyboard #keys .key:last-child {
  margin-right: 0;
}
#keyboard #keys .key:nth-child(n+20) {
  position: absolute;
  top: 0;
  height: 85px;
  width: 18px;
  background: #1e1e1e;
  border-radius: 0 0 3px 3px;
  box-shadow: none;
  transform: translate(-50%, 0);
  box-shadow: inset 0 -5px 1px black, inset 2px 5px 3px rgba(255, 255, 255, 0.25), inset 0px 3px 0 black, 0 0 1px 0px black;
}
#keyboard #keys .key:nth-child(n+20):active {
  box-shadow: inset 0 -1px 1px 0 black, inset 2px 5px 3px rgba(255, 255, 255, 0.25), inset 0px 3px 0 black, 0 0 1px 0px black;
}
#keyboard #keys .key:nth-child(20) {
  left: 4.7%;
}
#keyboard #keys .key:nth-child(21) {
  left: 10.4%;
}
#keyboard #keys .key:nth-child(22) {
  left: 16%;
}
#keyboard #keys .key:nth-child(23) {
  left: 25.8%;
}
#keyboard #keys .key:nth-child(24) {
  left: 31.8%;
}
#keyboard #keys .key:nth-child(25) {
  left: 41.3%;
}
#keyboard #keys .key:nth-child(26) {
  left: 47.2%;
}
#keyboard #keys .key:nth-child(27) {
  left: 53.3%;
}
#keyboard #keys .key:nth-child(28) {
  left: 62.6%;
}
#keyboard #keys .key:nth-child(29) {
  left: 68.6%;
}
#keyboard #keys .key:nth-child(30) {
  left: 78.4%;
}
#keyboard #keys .key:nth-child(31) {
  left: 84%;
}
#keyboard #keys .key:nth-child(32) {
  left: 90%;
}
#keyboard #button-section {
  position: absolute;
  top: 78px;
  left: 184px;
  width: 632px;
  height: 25px;
  z-index: 1;
}
#keyboard #button-section .onoff {
  position: absolute;
  top: 4px;
  bottom: 1px;
  left: 5px;
  background: #c0c0c0;
  width: 30px;
  overflow: hidden;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}
#keyboard #button-section .onoff .line {
  position: relative;
  float: left;
  width: 2px;
  height: 100%;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
#keyboard #button-section .onoff .line:nth-child(n+7) {
  float: right;
}
#keyboard #button-section .button {
  display: block;
  width: 8px;
  height: 21px;
  background: #6688cc;
  margin: auto auto;
  margin-top: 4px;
  box-shadow: inset 0 -1px 1px black, inset 1px 1px 2px rgba(255, 255, 255, 0.25), inset 0px 0px 0 black, 0 0 1px 0px black, 1px 1px 1px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
#keyboard #button-section .button:active {
  box-shadow: inset 0 -1px 1px black, inset 1px 1px 2px rgba(255, 255, 255, 0.25), inset 0px 0px 0 black, 0 0 1px 0px black, 0px 0px 1px rgba(0, 0, 0, 0.1);
}
#keyboard #button-section #blue-buttons {
  position: absolute;
  right: 0;
  width: 250px;
  height: 100%;
  display: flex;
}
#keyboard #button-section #blue-buttons .holder {
  -webkit-flex: 1;
  flex: 1;
}
#keyboard #button-section #other-buttons {
  position: absolute;
  right: 267px;
  width: 183px;
  height: 100%;
  display: flex;
}
#keyboard #button-section #other-buttons .holder {
  -webkit-flex: 1;
  flex: 1;
}
#keyboard #button-section #other-buttons .holder .button {
  background: #eebb66;
}
#keyboard #button-section #other-buttons .holder:nth-child(n+4) .button {
  background: #44ccaa;
}
#keyboard #button-section #other-buttons .holder:nth-child(3), #keyboard #button-section #other-buttons .holder:nth-child(2) {
  margin-right: 4px;
}

@media all and (max-width: 1000px) {
  #keyboard {
    transform: translate(-50%, -50%) scale(0.6);
  }
}
#onoff:checked ~ #keyboard .onoff {
  left: 9px;
}
#onoff:checked ~ #keyboard #button-section label:active ~ .sound {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(1):active ~ #keysounds .keysound:nth-child(1) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(2):active ~ #keysounds .keysound:nth-child(2) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(3):active ~ #keysounds .keysound:nth-child(3) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(4):active ~ #keysounds .keysound:nth-child(4) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(5):active ~ #keysounds .keysound:nth-child(5) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(6):active ~ #keysounds .keysound:nth-child(6) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(7):active ~ #keysounds .keysound:nth-child(7) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(8):active ~ #keysounds .keysound:nth-child(8) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(9):active ~ #keysounds .keysound:nth-child(9) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(10):active ~ #keysounds .keysound:nth-child(10) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(11):active ~ #keysounds .keysound:nth-child(11) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(12):active ~ #keysounds .keysound:nth-child(12) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(13):active ~ #keysounds .keysound:nth-child(13) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(14):active ~ #keysounds .keysound:nth-child(14) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(15):active ~ #keysounds .keysound:nth-child(15) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(16):active ~ #keysounds .keysound:nth-child(16) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(17):active ~ #keysounds .keysound:nth-child(17) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(18):active ~ #keysounds .keysound:nth-child(18) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(19):active ~ #keysounds .keysound:nth-child(19) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(20):active ~ #keysounds .keysound:nth-child(20) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(21):active ~ #keysounds .keysound:nth-child(21) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(22):active ~ #keysounds .keysound:nth-child(22) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(23):active ~ #keysounds .keysound:nth-child(23) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(24):active ~ #keysounds .keysound:nth-child(24) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(25):active ~ #keysounds .keysound:nth-child(25) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(26):active ~ #keysounds .keysound:nth-child(26) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(27):active ~ #keysounds .keysound:nth-child(27) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(28):active ~ #keysounds .keysound:nth-child(28) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(29):active ~ #keysounds .keysound:nth-child(29) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(30):active ~ #keysounds .keysound:nth-child(30) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(31):active ~ #keysounds .keysound:nth-child(31) {
  display: block;
}
#onoff:checked ~ #keyboard #keys label:nth-child(32):active ~ #keysounds .keysound:nth-child(32) {
  display: block;
}
#onoff:not(:checked) ~ #keyboard label:active ~ .sound {
  display: block;
}

@media all and (max-width: 600px) {
  #keyboard {
    transform: translate(-50%, -50%) scale(0.4);
  }
}
@media all and (max-width: 414px) {
  #keyboard {
    transform: translate(-50%, -50%) scale(0.35);
  }
}
