/* */
body {
    background-color: darkgrey;   /* wijziglater */
    margin: 0%;
    padding: 0%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.piano {
    position: relative;
    display: flex;
    margin: 4px;   /* wijzig later */
}

/* knoppies */
.witKnoppie {
    height: 240px;
    width: 60px;
    background-color: rgb(0, 0, 0);
    border: 1px solid white;
    color: azure;
    text-align: center;
}
.witKnoppie:hover{
    background-color: rgb(22, 22, 22);
    color: whitesmoke;
}

.zwartKnoppie {
    position: absolute;
    width: 40px;
    height: 120px;
    border-radius: solid black 1px;
}

/* knoppies individueel */
.zwart1{
    left: 40px;
}
.zwart2{
    left: 100px;
}
.zwart3{
    left: 220px;  
}
.zwart4{
    left: 280px;
}
.zwart5{
    left: 340px;
}
.zwart6{
    left: 460px;  /* Party */
}
.zwart7{
    left: 520px;  
}
.zwart8{
    left: 640px;  /* Party */
}
.zwart9{
    left: 700px;
}
.zwart10{
    left: 760px;
}
.zwart11{
    left: 880px; /* Party */
}
.zwart12{
    left: 940px;
}
.zwart13{
    left: 1060px;  /* Party */
}
.zwart14{
    left: 1120px;
}
.zwart15{
    left: 1180px;
}

/* Party */