kbd {
    background: hsl(0, 0%, 96%);
    padding: 10px;
    display: block;
    border-radius: 5px;
    margin: 5px;
    width: 1.6em;
    height: 1.3em;
    text-align: center;
    box-shadow: 0 1px rgba(0, 0, 0, .21);
    user-select: none;
    color: black;
}

kbd.up {
    margin-left: calc(1.6em + 35px);
}

kbd.space {
    margin-top: calc(1.3em + 35px);
    width: 14em;
}

kbd:active {
    position: relative;
    top: 2px;
    background: hsl(0, 0%, 94%);
    box-shadow: 0 1px rgba(0, 0, 0, .13) inset;
}

.controls {
    display: flex;
    color: lightgray;
}

.control {
    margin: 0 1em;
}

.control h3 {
    text-align: center;
}

.row {
    display: flex;
}

.splash {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(transparent, red);
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms;
}

.was-killed .splash {
    opacity: 1;
    transition: opacity 120ms;
}