#keyboard-wrapper
{
   background-color: #c1cc26;
   box-sizing: border-box;
   padding-top: .5em;
   position: absolute;
   -webkit-transition: -webkit-transform 750ms ease-out 500ms;
   -webkit-transform: translateY(0);
   transition: transform 750ms ease-out 250ms;
   transform: translateY(0);
   left: 0;
   bottom: 0em;
   width: 100%;
   height: 13rem;
}

@media screen and (min-height: 541px)
{
   #keyboard-wrapper
   {
      height: 20rem;
   }
}

#keyboard-wrapper.hidden
{
   -webkit-transform: translateY(12rem);
   transform: translateY(12rem);
}

#keyboard-wrapper > :last-child
{
   background-color: #c1cc26;
   color: #fff;
   margin: 0;
   padding: .25em  .5em;
   text-align: center;
   position: absolute;
   left: 0;
   bottom: .5em;
   width: 100%;
}

#keyboard
{
   box-sizing: border-box;
}

.row
{
   text-align: center;
}

.key
{
   background-color: #000;
   box-sizing: border-box;
   color: #fff;
   cursor: default;
   display: inline-block;
   font-size: 1rem;
   font-weight: bold;
   margin: .25em 0;
   padding: .5em 0;
   text-align: center;
   min-width: 1.75em
}

@media screen and (orientation: landscape)
{
   .key
   {
      padding: .5em .75em;
   }
}

.key:active
{
   background-color: #fff;
   color: #000;
}

.key + key
{
   margin-left: .25em;
}

   /* spacebar */
#row4 .key:nth-child(3)
{
   width: 10em;
}

   /* print */
#row4 .key:last-child
{
   background-image: url("../pix/print-neg.svg");
   background-position: center;
   background-size: 60% 60%;
   background-repeat: no-repeat;
   width: 2.5em;
}

#row4 .key:last-child:active
{
   background-image: url("../pix/print.svg");
}

@media screen and (max-width: 424px)
{
   .key + key
   {
      margin-left: .125em;
   }

   #row4 .key
   {
      width: 2em;
   }
}