style.css

body{
    background:white;
    display:grid;
    align-items:center;
  }
.container{
  font-size: 16px;/*em is relative to font-size of direct parent*/
  width: 100%;
  height: 75%;
  margin:10em auto;
  background: linear-gradient(
    -45deg,
    #A9A9A9 0%,
    #A9A9A9 50%,
    #818589 50%,
    #818589 100%
  );
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.container > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
  .row {
    padding-top: 2em;
    margin: auto;
    display: table;
    width: 20em;
    height: 8em;
    border-radius: 10px;
    table-layout: fixed; 
    border-spacing: 5px; 
    background: #191919;
  }
  .wkeys{
    border-radius: 5px;
    display: table-cell;
    background: #FFFFFF;
  }
.wkeys:active{
  background: rgb(230,230,230)
}
  .blackKeys1{
    position: absolute;
    display: table;
    border-spacing: 0.8em;
    height: 5.5em;
    width: 6em;
    transform: translateX(-102%) translateY(-0.8em);
    background: transparent;
  }
  .bkeys{
    display: table-cell;
    background: #191919;
  }
.bkeys:active{
  background-color: rgb(50,50,50);
}
  .blackKeys2{
    position: absolute;
    display: table;
    margin-top: 0;
    border-spacing: 0.8em;
    height: 5.5em;
    width: 8.5em;
    background: transparent;
    transform: translateX(29%) translateY(-0.8em);
  }