body{
  font-family: sans-serif;
}

.key {
  width: 1em;
  height: 4em;
  border-radius: 0 0 0.2em 0.2em;
  margin: none;
  display: flex;
  font-family: sans-serif;
  text-align: center;
  transition: 0.3s ease;
}
.keyboard{
  display: flex;
}
.white {
  border: solid grey 0.1em;
  background-color: white;
}
.black {
  width: 0.5em;
  height: 2.5em;
  border: solid rgb(44, 44, 44) 0.1em;
  background-color: black;
  margin: 0 -0.4em;
  z-index: 100;
  color: white;
}
.key span {
  align-self: flex-end;
  font-size: 0.5em;
  margin: 0 auto;
}

.key.key-down {
  background-color: green;
  color: white;
  border-color: rgb(0, 74, 0);
}

.key-number-4 {
  margin-left: -0.1em;
}

button {
  font-size: 0.5em;
}



body {
  font-size: 10vw;
}
.keyboard {
  margin: 0 8vw 1em;
}
@media screen and (min-width: 600px) {
  body {
     font-size: 60px;
  }

  .keyboard {
    margin: 0 1em 1em;
  }
}