* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(blue, #3535EC);
    background-attachment: fixed;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.piano {

}

.piano-panel {
    height: 94px;
    background-color: red;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 24px;
    background-image: url('../imgs/panel-reflex.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.piano-panel img{
    width: 160px;
}

.piano-keys {
    height: 190px;
    display: flex;
}

.key {

}

.key-white{
    height: 100%;
    width: 64px;
    background-color: white;
    border-right: 2px solid black;
    border-left: 2px solid black;
    border-bottom: 6px solid grey;
    border-radius: 0 0 8px 8px;
}

.key-black{
    height: 60%;
    width: 44px;
    background: linear-gradient(grey 10%, black);
    margin-left: -22px;
    margin-right: -22px;
    z-index: 2;

    border-right: 2px solid black;
    border-left: 2px solid black;
    border-bottom: 6px solid grey;
    border-radius: 0 0 8px 8px;
}