.pyramid {
    width: 32em;
}

.pyramid-row {
    display: table;
    margin: 0 auto;
}

input {
    border: gray solid 2px;
}
input:invalid {
    border: red solid 2px;
}

.number {
    width: 2.5em;
}

.number-percent {
    width: 3.0em;
}

.number-ms {
    width: 3.6em;
}

.key {
    height: 50px;
    width: 50px;
    margin: 2px;
    border-radius: 3px;
    border: none;
    background: #aaaaaa;
    font-size: 1.05rem;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    padding: 0;
    position: relative;
    user-select: none;
}

.left-shift {
    cursor: auto;
    width: 63px;
}

.right-shift {
    cursor: auto;
    width: 120px;
}

.off {
    cursor: auto;
}

.qwerty-offset {
    height: 50px;
    width: 75px;
    padding: 0;
    display: inline-flex;
    position: relative;
}

.asdf-offset {
    height: 50px;
    width: 88px;
    padding: 0;
    display: inline-flex;
    position: relative;
}

.active {
    background: #ffee11;
}

.mouse-active {
    background: #22ff11;
}