/* BASIC PAGE SETUP */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* so the rainbow covers the entire viewport if active */
  font-family: "parabolica", sans-serif;
}

/* The default rainbow background (we can toggle off in script) */
body {
  background: linear-gradient(270deg, red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 1800% 1800%;
  animation: rainbowFlow 30s linear infinite;
}

/* The rainbowFlow keyframe for the body background */
@keyframes rainbowFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* HEADER BAR (with your logo) */
#headerBar {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
#headerBar img {
  padding-top: 100px;
  height: 100px;              /* scale the logo’s height */
  object-fit: contain;       /* keep aspect ratio */
}


/* SPACER */
.breaker {
  padding-top: 150px;
}

/* PEDAL CONTAINER */
#pedalContainer {
  position: relative;
  width: 873px; 
  height: 768px;
  margin: 20px auto;
  background: url("chroma-controller-bg.png") no-repeat center center;
  background-size: contain;
}

/* KNOB POSITIONS */
.knob-wrapper {
  position: absolute;
  width: 60px; 
  height: 60px;
}
#knob-tilt   { top:  60px;  left: 166px; }
#knob-sense  { top: 169px;  left: 166px; }
#knob-amt1   { top: 291px;  left: 166px; }
#knob-efx1   { top: 400px;  left: 166px; }

#knob-rate   { top:  60px;  left: 321px; }
#knob-drift1 { top: 169px;  left: 321px; }
#knob-amt2   { top: 291px;  left: 321px; }
#knob-efx2   { top: 400px;  left: 321px; }

#knob-time   { top:  60px;  left: 502px; }
#knob-drift2 { top: 169px;  left: 502px; }
#knob-amt3   { top: 291px;  left: 502px; }
#knob-efx3   { top: 400px;  left: 502px; }

#knob-mix    { top:  60px;  left: 657px; }
#knob-out    { top: 169px;  left: 657px; }
#knob-amt4   { top: 291px;  left: 657px; }
#knob-efx4   { top: 400px;  left: 657px; }

/* ROUND BUTTONS (tap, bypass) */
.round-btn {
  position: absolute;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 2px solid #999;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

#tapTempoBtn {
  top: 653px; 
  left: 197px;
}
#bypassToggle {
  top: 653px; 
  left: 615px;
}

.toggle-on  { background: #6c6 !important; }
.toggle-off { background: #e66 !important; }

/* KNOB CONTAINER & STYLING */
.knob-container {
  position: relative;
  width: 60px; 
  height: 60px;
}

.knob-dial {
  position: relative;
  width: 60px; 
  height: 60px;
  background: #000; 
  border: 1px solid #000; 
  border-radius: 50%;
  overflow: hidden;
}
.knob-dial::before {
  content: "";
  position: absolute;
  top: 4px; 
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  z-index: 0;
}
.knob-pointer {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 2px; 
  height: 30%;
  background: #fff;
  transform-origin: bottom center;
  transform: rotate(-135deg);
  border-radius: 1px;
  z-index: 2;
}
.knob-dial.knob-red::before    { background: #cc2a2a; }
.knob-dial.knob-yellow::before { background: #e6b800; }
.knob-dial.knob-green::before  { background: #3da63d; }
.knob-dial.knob-grey::before   { background: #bfbfbf; }
.knob-dial.knob-blue::before   { background: #67b7e1; }

/* The range input covers entire knob for clicking. If you want vertical drag, keep rotate(270deg). */
.knob-input {
  position: absolute;
  top: 0; 
  left: 0;
  width: 80px; 
  height: 80px;
  opacity: 0;
  cursor: pointer;
  transform: rotate(270deg);
  transform-origin: center center;
}

/* MODULE SELECTS */
.module-position {
  position: absolute;
  width: 200px !important;
  padding: 4px;
  border-radius: 4px;
  /* background: rgba(255,255,255,0.85); if you want a translucent box */
}
.module-position select {
  display: inline-block;
  box-sizing: border-box;
  width: 120px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px;
}

/* MIDI & OTHER SECTIONS */
.midi-section {
  width: 800px;
  margin: 20px auto;
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 10px;
}
.end-section {
  width: 800px;
  margin: 20px auto;
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 10px;
}
.midi-section h2 {
  margin-top: 0;
}
select, button {
  margin: 6px 0;
}

/* Basic “momentary-btn” style */
.momentary-btn {
  padding: 6px 12px;
  margin: 6px;
  cursor: pointer;
  background: #ddd;
  border: 1px solid #999;
  border-radius: 4px;
}

.bmc-button-container {
  /* This container will hold the button generated by the script.
     The display: flex and align-items: center on .end-section
     will center this container. The button itself, if it's an
     inline-block or block element, should then appear centered. */
text-align: center;
  margin-top: 10px; /* Optional: add some top margin if needed */
  margin-bottom: 20px;
}