body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #4b5260;
    color: white;
}


.tempo-input {
    padding: 8px; /* Ajustez la taille de la police selon vos besoins */
    font-size: 16px; /* Taille de la police */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
     width: 50px;
}

/* Style pour l'étiquette associée à l'input */
label[for="tempo"] {
    margin-right: 8px; /* Marge à droite pour l'espacement */
    font-size: 16px; /* Taille de la police */
}



#timeSignature {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

 #timeSignature option:hover {
            background-color: #e0e0e0; /* Couleur de fond au survol */
            color: #333; /* Couleur du texte au survol */
        }

#preset {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 8px; /* Ajustement de la marge pour l'espacement */
}

#preset option:hover {
    background-color: #e0e0e0;
    color: #333;
}


#clearButton {
    padding: 10px 15px;
    font-size: 16px;
    background-color: #d85662; /* Couleur de fond rouge */
    color: #fff; /* Couleur du texte blanc */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


#play {
    background-color: #4CAF50; /* Vert pour l'état Play */
    color: #ffffff; /* Texte blanc */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#play:hover {
    background-color: #45a049; /* Couleur de fond au survol pour Play */
}

#play.stop {
    background-color: #ff4444; /* Rouge pour l'état Stop */
}

#play-icon::before {
    content: '\25B6'; /* Code Unicode pour la flèche de lecture (triangle) */
    display: inline-block;
    font-size: 20px; /* Taille de la police de l'icône */
}

#play.stop #play-icon::before {
    content: '\25A0'; /* Code Unicode pour le carré */
}



#sequencer {
    margin-top: 20px;
}

.instrument-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.label-container {
    margin-right: 10px;
    width: 60px; /* Ajout de la largeur fixe */
}

.button-container {
    display: flex;
    flex-wrap: wrap;
}

.button-number-label {/* chiffres dans les boutons */
    font-size: 12px;
    color: white;
    top: 5px;
    left: 5px;
}


.drum-pad {
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    margin-right: 5px;
    cursor: pointer;
}

.drum-pad.active {
    background-color: #42b883;
}

.drum-pad.played {
      background-color: #42b883;
    filter: brightness(120%); /* Effet de surbrillance pour l'état joué */
}

label {
    margin-right: 10px;
}