:root {
  --btn-color-one: #5ad2f4;
  --btn-color-two: #f6ae2d;
  --btn-color-three: #F26419;
}

body {
  height: 600px;
  text-align: center;
  background-color: #52b788;
  color: #fff;
  font-family: 'Roboto Mono', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

a {
  color: #fff;
}

#display {
  width: 400px;
  height: 400px;
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(3, 1fr); 
  grid-template-areas: "head head head" "Q W E" "A S D" "Z X C";
  grid-gap: 10px 10px;
  background-color: #424242;
  padding: 10px;
}

#print-area {
  grid-area: head;
}

#key-string {
  font-size: 1.5rem;
}

.drum-pad {
  color: #000;
  border-radius: 10px;
}

.drum-pad:hover {
  cursor: pointer;
}

#W-btn:active, #Q-btn:active, #E-btn:active {
  background-color: var(--btn-color-one);
}

#A-btn:active, #S-btn:active, #D-btn:active {
  background-color: var(--btn-color-two);
}

#Z-btn:active, #X-btn:active, #C-btn:active {
  background-color: var(--btn-color-three);
}

.add-blue-bkr {
  background-color: var(--btn-color-one);
}

.add-yellow-bkr {
  background-color: var(--btn-color-two);
}

.add-orange-bkr {
  background-color: var(--btn-color-three);
}

.remove-bkr {
  background-color: #ddd;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body {
    height: 850px;
    font-size: x-large;
  }
  #display {
    width: 600px;
    height: 600px;
  }
  #key-string {
    font-size: 2.5rem;
  }
  button {
    font-size: 2rem;
  }
}