html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
    margin: 0;
}

:root {
    --keyboard: hsl(300, 100%, 16%);
    --keyboard-shadow: hsla(19, 50%, 66%, 0.2);
    --keyboard-border: hsl(20, 91%, 5%);
    --black-10: hsla(0, 0%, 0%, 0.1);
    --black-20: hsla(0, 0%, 0%, 0.2);
    --black-30: hsla(0, 0%, 0%, 0.3);
    --black-50: hsla(0, 0%, 0%, 0.5);
    --black-60: hsla(0, 0%, 0%, 0.6);
    --white-20: hsla(0, 0%, 100%, 0.2);
    --white-50: hsla(0, 0%, 100%, 0.5);
    --white-80: hsla(0, 0%, 100%, 0.8);
}

.white,
.black {
    position: relative;
    float: left;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0.5rem 0;
    user-select: none;
}

#keyboard li:first-child {
    border-radius: 5px 0 5px 5px;
}

#keyboard li:last-child {
    border-radius: 0 5px 5px 5px;
}

#keyboard {
    justify-content: center;
    display: flex;
    grid-column: 1 / -1;
}

.white {
    height: 4rem;
    width: 1rem;
    z-index: 1;
    border-left: 1px solid hsl(0, 0%, 73%);
    border-bottom: 1px solid hsl(0, 0%, 73%);
    border-radius: 0 0 5px 5px;
    box-shadow: -1px 0 0 var(--white-20) inset, 0 0 5px hsl(0, 0%, 80%) inset, 0 0 3px var(--black-10);
    background: hsla(0, 0%, 100%, 1.0);
    color: var(--black-30);
}

.black {
    height: 2rem;
    width: 0.75rem;
    margin: 0 0 0 -0.5rem;
    z-index: 2;
    border: 1px solid black;
    border-radius: 0 0 3px 3px;
    box-shadow: -1px -1px 2px var(--white-20) inset, 0 -5px 2px 3px var(--black-20) inset, 0 2px 4px var(--black-10);
    background: hsla(0, 0%, 100%, 1.0);
    color: var(--white-50);
}

.odd {
    background: hsla(0, 0%, 80%, 1.0);
}

.odd.highlight {
    background: hsla(0, 100%, 80%, 1.0);
}

.even {
    background: hsla(0, 0%, 100%, 1.0);
}

.even.highlight {
    background: hsla(0, 100%, 90%, 1.0);
}

.offset {
    margin: 0 0 0 -0.3rem;
}