#drumApp {
  display: flex;
  justify-content: center;
  align-items: center;
}

#drum-machine {
  border: 1px solid black;
  border-radius: 11px;
  margin-top: 20px;
  display: flex;
  padding: 25px;
  background-image: radial-gradient(#d9d9d9, #b3b3b3, #262626);
}

#keys-pad {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#display {
  background-color: #b8b894;
  border: 1px solid black;
  width: 220px;
  height: 35px;
  padding: 2px 10px;
  font-size: 20px;
}

#drum-pads {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  font-size: 30px;
  font-weight: bold;
}

.drum-pad {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  border: 1px solid black;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 4px 4px 10px #404040;
}

.blueBtns {
  background-image: radial-gradient(circle, #ccffff 30%, #adffff 40%, #3dffff);
}

.pinkBtns {
  background-image: radial-gradient(circle, #fff5ff 30%, #ffdbff 40%, #ffa3ff);
}

.orangeBtns {
  background-image: radial-gradient(circle, #ffebcc 30%, #ffd699 40%, #ff9e0d);
}

.disabled {
  pointer-events: none;
}

#controls {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-row-gap: 90px;
}

#powerBtnSection {
  display: flex;
  align-items: center;
  justify-content: center;
}

#powerBtn {
  display: flex;
  border: 1px solid black;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #303030;
}

.fa {
  font-size: 20px;
}

.volume-slider {
  width: 100%;
  /* Width of the outside container */
}

#volume {
  transform: rotate(270deg);
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}

#volume:focus {
  outline: none;
}

#volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 2px 2px #262626, 1px 0px 1px #404040;
  background: #404040;
  border-radius: 1.3px;
  border: 0.4px solid #010101;
}

#volume::-webkit-slider-thumb {
  box-shadow: 0px 2px 2px #262626, 1px 0px 1px #404040;
  border: 1px solid #000000;
  height: 25px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

#volume::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 2px 2px #262626, 1px 0px 1px #404040;
  background: #404040;
  border-radius: 1.3px;
  border: 0.4px solid #010101;
}

#volume::-moz-range-thumb {
  box-shadow: 0px 2px 2px #262626, 1px 0px 1px #404040;
  border: 1px solid #000000;
  height: 25px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

#volume::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

#volume::-ms-fill-lower {
  background: #2a6495;
  border: 0.4px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0px 2px 2px #262626, 1px 0px 1px #404040;
}

#volume::-ms-fill-upper {
  background: #3071a9;
  border: 0.4px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0px 2px 2px #262626, 1px 0px 1px #404040;
}

#volume::-ms-thumb {
  box-shadow: 0px 2px 2px #262626, 1px 0px 1px #404040;
  border: 1px solid #010101;
  height: 5px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

#label {
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #404040;
}

#footer {
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 0.95em;
}
#footer p {
  margin: 0;
}