.oscilloscope > canvas {
border: 2px solid;
border-color: #32535B;
width: 100%;
object-fit: contain;

display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

#controller {
background-image: url('kaoss-grid.png');
background-repeat: no-repeat;
background-width: 100%;
background-size: cover;

border: 2px solid;
border-color: #8A6FE2;
width: 100%;
object-fit: contain;

display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

.synth-main {
border: 16px solid transparent;
border-image-source: url("img/wood-border.png");
border-image-slice: 16;
border-image-repeat: round;
}

.control-panel {
display: grid;
grid-template-columns: repeat(3, [col-start] 1fr);
}

.control-panel > div {
background-color: #9FA6B7;
border: 16px solid transparent;
border-image-source: url("img/synth-border.png");
border-image-slice: 16;
border-image-repeat: round;

color: #000000;
margin: 0px;
padding: 6px;
}

.controlpad {
background-color: #9FA6B7;
border: 16px solid transparent;
border-image-source: url("img/synth-border.png");
border-image-slice: 16;
border-image-repeat: round;
}

.panel-name {
font-family: "unifont";
font-size: 120%;

text-align: center;
}

label {
font-family: "unifont";
font-size: 100%;
}

.oscilloscope {
}