* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.keyboard {
 padding: 20px;
 border-radius: 12px;
 border: 4px solid grey;
}

.row {
 display: flex;
 margin-bottom: 8px;
 justify-content: center;
}

.key {
 border: 2px solid black;
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 13px;
 font-weight: 600;
 text-align: center;
 box-shadow: 0 3px 0 grey;
 user-select: none;
 transition: all 0.1s;
}

.key:active {
 transform: translateY(2px);
 box-shadow: 0 1px 0 grey;
}

/* Key sizes */
.key-1u {
 width: 42px;
 height: 42px;
}
.key-1_25u {
 width: 52px;
 height: 42px;
}
.key-1_5u {
 width: 64px;
 height: 42px;
}
.key-1_75u {
 width: 74px;
 height: 42px;
}
.key-2u {
 width: 86px;
 height: 42px;
}
.key-2_25u {
 width: 96px;
 height: 42px;
}
.key-2_75u {
 width: 116px;
 height: 42px;
}
.key-6_25u {
 width: 260px;
 height: 42px;
} /* Space */

/* Special keys */
.enter {
 height: 42px;
} /* spans two rows */
.shift {
 height: 42px;
}

.row:nth-child(1) .key {
 margin-right: 6px;
}
.row:nth-child(2) .key {
 margin-right: 6px;
}
.row:nth-child(3) .key {
 margin-right: 6px;
}
.row:nth-child(4) .key {
 margin-right: 6px;
}
.row:nth-child(5) .key {
 margin-right: 6px;
}