.keyboard-wrap {
  .key {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;

    border: 2px solid #CCC;
    border-radius: 10px;
    margin: 5px;
    padding: 5px;

    position: relative;

    .top {
      position: absolute;
      top: 2px;
      left: 5px;
      font-size: 0.75rem;
      color: #999;
    }
    .mid {
      font-size: 1.25rem;
      font-weight: bold;
    }

    &.on {
      color: #000;
      background: #fff;
    }
  }

  .line1 {
    width: 100%;
    padding: 0 0;
    display: flex;
  }

  .line2 {
    width: 100%;
    padding: 0 20px;
    display: flex;
  }

  .line3 {
    width: 100%;
    padding: 0 50px;
    display: flex;
  }
  .line4 {
    width: 100%;
    padding: 0 240px;
    display: flex;

    .key-space {
      width: 100%;
      letter-spacing: 0.25rem;
    }
  }
}

@media (max-width: 840px) {
  .keyboard-wrap {
    display: none;
  }
}