footer {
    background-color: white;
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 18px;
}

#keyboard {
    z-index: 0;
    display: flex;
    flex-flow: row wrap;
    background-color: #383838;
}

.key {
    margin: 0 0 0 0;
    height: 21vw;
    width: 7vw;
    background: linear-gradient(to bottom, #fcfcfc,white);
    border: 1px solid black;
    border-bottom-right-radius: 2vw;
    border-bottom-left-radius: 2vw;
    box-shadow: -6px -6px 10px #dddddd inset, 3px 0 10px #dddddd inset;

}

.white {
    margin: 0 0.1vw 0 0;

    z-index: 1;
}
.black {
    margin: 0 -0.4vw 0 -3vw;
    z-index: 2;
    background: linear-gradient(to bottom, #757575,black);
    height: 15vw;
    width: 3vw;
    box-shadow: -5px -5px 10px black inset, 3px 0 10px black inset;
}

.white:active {
    background: #f7f7f7;
    box-shadow: -2px -2px 3px #dddddd inset, 1px 0 10px #dddddd inset;
    border-color: grey;
}

.black:active {
    background: linear-gradient(to bottom, #515151, black);
    box-shadow: -3px -1px 5px black inset, 3px 0 10px black inset;
    border-color: grey;
}