html, body {
    margin: 0;
    padding: 0;
}
canvas {
    display: block;
    margin: auto;
    padding: 20px;
}
/* General body styling */

body {
    font-family: 'Arial', sans-serif;
    background-color: #333;
    color: #fff;
    margin: 0;
    padding: 0;
}
/* Control panel styling */

#controlPanel {
    background-color: #444;
    border-bottom: 1px solid #555;
    padding: 25px 20px 20px;
}

#Score {
    background-color: #444;
    margin-top: 20px;
    padding: 20px;
    border-bottom: 1px solid #555;
}

#controlPanel label, #waveInterface label {
    color: #b5e853;
    margin-right: 10px;
}

#Score label {
    color: #b5e853;
    margin-right: 10px;
}
/* Select and input styling */

select, input[type="text"], input[type="number"] {
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #555;
    background-color: #222;
    color: #ddd;
}
label {
    margin-bottom: 5px;
    color: #b5e853;
}

/*.range-container > label{*/
/*    !*display: block;*!*/
/*}*/

/*#InstrumentControls > div {*/
/*    !*float:left;*!*/
/*    !*display: flex;*!*/
/*    !*width: 100%;*!*/
/*}*/

/* Container for each range input and its label */
#envelopeControls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Individual range container styling */
.range-container {
    display: flex; 
    align-items: flex-end;
    margin-bottom: 10px;
    /*flex-basis: 20%; !* Adjust this value based on desired width *!*/
    max-width: 500px;
    
}

/* Range input styling */
input[type="range"] {
    flex-grow: 1;
    margin-left: 10px;
    max-width: 200px;
}

#waveButtons{
    /*float: left;*/
    /*display: flex;*/
}
/* Range input styling */
input[type="range"] {
    /*flex-grow: 1;*/
    margin-left: 10px;
    width: 200px;
}

input[type="checkbox"] {
    margin-right: 10px;
}

/* Button styling */

button {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #777;
}
/* Wave interface styling */

#waveInterface {
    background-color: #555;
    padding: 20px;
    margin-top: 10px;
}

#Score{
    background-color: #555;
    padding: 20px;
}

.scoreDiv{
    border-top: 1px solid #666;
    padding-top: 10px;
}

.waveDataContainer {
    border-top: 1px solid #666;
    padding-top: 10px;
}

.waveData {
    margin-bottom: 10px;
}

.waveDataName ,p {
    font-weight: bold;
    color: #b5e853;
}
/* Main content and canvas styling */

main {
    /*padding: 20px;*/
}

#content{
    background-color: #222;
    padding-top: 0px;
}

@media (max-width: 1024px) {
    canvas, #sketch-holder, #content {
        /*padding-top: 10px;*/
        padding-left: 0px;
    }
}

/* Responsive design adjustments */
@media (max-width: 600px) {
    .container {
        width: 100%;
        padding: 10px;
    }
    
    /*button {*/
    /*    width: 100%;*/
    /*    margin-top: 10px;*/
    /*}*/
}