*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-image: url(https://cdn.pixabay.com/photo/2016/10/22/01/54/wood-1759566_960_720.jpg);
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

kbd{
    border-radius: 5px;
    background-color: rgb(208, 211, 204);
    text-align: center;
    border: 5px outset rgba(151, 149, 149, 0.849);
    width: 50px;
    font-weight: bolder;
    padding: 4% 13% 4% 13%;
}

.white kbd{
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.black kbd{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.piano {
    display: flex;
    text-align: center;
}

.key {
    height: calc(var(--width) *4);
    width: var(--width);
}
/* width: 100px, height: 400px; (width es la 1/4 parte de height por ello se usa calc, creando la variable)*/
.white {
    --width: 100px;
    background-color: rgba(224, 228, 231, 0.904);
    border: 2px solid rgb(37, 34, 34);

}

.white.active {
    background-color: rgba(173, 169, 169, 0.904);
}

.black {
    --width: 60px;
    background-color: black;
    margin-left: calc(var(--width) / -2 );
    margin-right: calc(var(--width) / -2);
    z-index: 2;
}

.black.active {
    background-color: rgb(63, 63, 63);
}

footer{
    background-color: black;
    color:rgba(255, 248, 220, 0.719);
    display: flex;
    justify-content: flex-end;

}