style.css

:root {
  --button-padding: 10px 20px;
  --button-background: #c0c0c0;
  --button-hover-background: #ebebeb;
  --button-color: #1d1d1d;
  --active-background: #ff4013;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  background-color: #202124;
  color: #f1f1f1;
  padding: 20px;
}

h1, #counter {
  color: #ebebeb;
  text-align: center;
  margin-bottom: 20px;
}

#counter {
  font-size: 30px;
}

#sequencerUI {
  max-width: 100%;
  margin: auto;
}

#partLength,
#tempo {
  width: 60px;
  padding: 4px;
  background: #3d3d3d;
  border: 1px solid #555;
  border-radius: 4px;
  color: #f1f1f1;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.button-common {
  padding: var(--button-padding);
  background: var(--button-background);
  border: none;
  border-radius: 2px;
  color: var(--button-color);
  font-size: 14px;
  cursor: pointer;
  margin-right: 10px;
  transition: background 0.1s ease;
}

.button-common:hover {
  background: var(--button-hover-background);
}

#recordButton.recordModeOn,
#deleteButton.deleteModeOn {
  background-color: var(--active-background);
  color: #ebebeb;
}

#playStopButton.playModeOn {
  background: white;
  color: var(--button-color);
}

#eraseAllButton:active {
  background: var(--active-background);
}

@media screen and (max-width: 768px) {
  #recordButton,
  #playStopButton,
  #muteButton,
  #deleteButton,
  #eraseAllButton {
    display: block;
    margin: 10px 0;
  }
}

#recordButton {
  padding: 10px 20px;
  background: #b51a00; /* Dark red when inactive */
  border: none;
  border-radius: 2px;
  color: #1d1d1d;
  font-size: 14px;
  cursor: pointer;
  margin-right: 10px;
  transition: background 0.1s ease;
}

#recordButton:hover {
  background: #ff4013; /* Lighter red on hover */
}

#recordButton.recordModeOn {
  background-color: #ff4013; /* Bright red when active */
  color: #ebebeb; /* Optional, to make the text color white */
}

/* drum pads */
#pads {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.pad {
  width: 40px;
  height: 40px;
  padding: 10px 10px;
  background: var(--button-background);
  border: none;
  border-radius: 2px;
  color: var(--button-color);
  font-size: 20px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: background 0.1s ease;
  display: inline-flex ; /* Changed to flex to align sliders vertically */
  flex-direction: column; /* Stack the pad content and sliders vertically */
  align-items: center; /* Center-align the content and sliders horizontally */
  user-select: none; /* Disables text selection */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
 }

.pad:hover {
  background: var(--button-hover-background);
} 

.pad:active {
  background: #ff8647; /* color while being clicked */
}

.pad .pitch-slider,
.pad .volume-slider {
  transform: rotate(270deg);
  width: 200px;
  margin: 150px 0;
}

.mode-switches label {
  display: block; /* Make each label a block-level element */
  margin: 5px 0;  /* Add some space between the labels */
}

.pad-banks label {
  display: block; /* Align the bank radio buttons vertically */
  margin: 5px 0;  /* Add some space between the labels */
}

.hidden {
  display: none;
}