:root {
    --note-height: 30px;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

#piano-roll {
    margin-top: 20px;
}

.piano-roll-container {
    position: relative;
    top: 0px;
    left: 0px;
    height: 0;
}

.OC0cQAYFntJXHi1QnBzU {
    border-color: rgb(59, 59, 59);
    border-radius: 2px;
    border-width: 2px;
    border-style: solid;
    position: absolute;
    height: var(--note-height);
    float: left;
}

.h9nEovRn_5MH0zrxsgsA {
    position: absolute;
    height: calc(var(--note-height) + 2px);
    color: rgb(0, 0, 0);
    border: black solid 1px;
    text-align: left;
}

.htwJYwc1bGPbddYWVDLf {
    top: calc(var(--note-height) / 2 - 0.5em);
    left: 2px;
    position: relative;
}

img {
    border: 10px solid;
}



.tyfRvfC7RmN17GAnLH0Q {
    background-color: red;
}

.sYy_wGbUQPlmXQqfqndT {
    background-color: orange;
}

.bjodbVOtbwzqjxlRyeRw {
    background-color: yellow;
}

.uxkHTYZEy5VMlPnycoNS {
    background-color: green;
}

.O3C_0JNuWC1j4GuPEbFO {
    background-color: blue;
}

.xt29Dlqr65YNIu3NSPU1 {
    background-color: indigo;
}

.Jn2uoQwH09lWstQcvzN4 {
    background-color: violet;
}