@charset "utf-8";

body {
    margin: 0%;
    background-color: #EEEEEE;
}

#Keyboard {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    z-index: 1;
    position: relative;
}

.whiteKey {
    background-color: white;
    box-shadow: 0 0 2px 2px #00000099;
    flex-grow: 2;
    flex-basis: auto;
    height: 180px;
    margin: 2px;
    z-index: 1;
    position: relative;
    text-align: center
}

.blackShell {
    flex-grow: 0;
    flex-basis: 0;
    width: 0px;
    z-index: 2;
    position: relative;

}

.blackKey {
    width: 0.75vw;
    height: 120px;
    background-color: black;
    position: relative;

    transform: translate(-50%, 0%);
}

.blackKey:hover {
    background-color: rgb(66, 66, 66);
}
.whiteKey:hover {
    background-color: rgb(192, 192, 192);
}


#sheet {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    z-index: 1;
    position: relative;
}

#noteRow {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    z-index: 1;
    position: relative;
}

.note {
    background-color: white;
    box-shadow: 0 0 2px 2px #00000099;
    flex-grow: 2;
    flex-basis: auto;
    height: 45px;
    margin: 2px;
    z-index: 1;
    position: relative;
    text-align: center
}

.note:hover {
    background-color: rgb(192, 192, 192);
}