body {
    font-family: sans-serif;
    background-color: black;
    color: white;
    margin: 20px;
}

h1 {
    text-align: center;
}

.main-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

.mediapipe-container {
    display: flex;
    flex-direction: column;
}

.controls-info {
    border: 1px solid grey;
    padding: 10px 20px;
    background-color: #222;
}

.controls-info h2 {
    margin-top: 0;
}

.midi-output-select {
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
    background-color: black;
    color: white;
    border: 1px solid grey;
}

.controls-info dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 15px;
}

.controls-info dt {
    font-weight: bold;
}

.midi-map-table {
    width: 100%;
    border-collapse: collapse;
}

.midi-map-table td {
    padding: 6px 4px;
}

.midi-map-table .value-cell {
    text-align: right;
    width: 4em; /* 3桁の数字と少しの余白を確保 */
    font-weight: bold;
    font-family: monospace;
}

/* Color Mappings */
.color-cc80 { color: #00BFFF; } /* DeepSkyBlue */
.color-cc81 { color: #87CEFA; } /* LightSkyBlue */
.color-cc82 { color: #32CD32; } /* LimeGreen */
.color-cc83 { color: #98FB98; } /* PaleGreen */
.color-cc87 { color: #FFA500; } /* Orange */
.color-cc88 { color: #FFFF00; } /* Yellow */
.color-cc89 { color: #FF69B4; } /* HotPink */
.color-cc90 { color: #00FFFF; } /* Cyan */
.color-cc86 { color: #9400D3; } /* DarkViolet */

.code-editor-container {
    margin-top: 10px;
}

#code-editor {
    width: 100%;
    box-sizing: border-box; /* padding and border in the element's total width and height */
    font-family: monospace;
    font-size: 13px;
    background-color: #111;
    color: #ddd;
    border: 1px solid grey;
    padding: 10px;
    resize: vertical; /* Allow vertical resizing */
}