* {
  margin: 0rem;
  padding: 0rem;
  box-sizing: 0rem;
}

body {
  font-family: sans-serif;
}
body::-webkit-scrollbar {
  -webkit-appearance: none;
          appearance: none;
  width: 0.5rem;
}
body::-webkit-scrollbar-track {
  margin: 0.5rem;
  border: 0.2rem solid transparent;
}
body::-webkit-scrollbar-thumb {
  background: rgb(88, 88, 88);
  border-radius: 1rem;
}
body::-webkit-scrollbar-thumb:hover {
  background: rgb(126, 126, 126);
}

.sequencer {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

button, select, input {
  cursor: pointer;
}

h1 {
  font-size: 2rem;
}

i, svg {
  pointer-events: none;
}

.kick-track, .snare-track, .hihat-track, .tom-track, .perc-track, .others-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 85%;
  margin-top: 5rem;
}

.kick, .snare, .hihat, .tom, .perc, .others {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.controls {
  margin-right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex: 1;
  margin: 0rem 2rem;
}
.controls button {
  padding: 1rem;
  font-size: 1rem;
  background: rgb(88, 88, 88);
  border: none;
  color: white;
  transition: 500ms ease;
}
.controls select {
  font-size: 1rem;
  padding: 1rem;
}

.mute.active {
  background: rgb(126, 126, 126);
}

.kick-pad, .snare-pad, .hihat-pad, .tom-pad, .perc-pad, .others-pad {
  width: 5rem;
  height: 5rem;
  margin: 1rem 0.5rem;
  cursor: pointer;
  transition: 500ms ease;
}

.kick-pad {
  background: rgb(178, 227, 255);
}

.snare-pad {
  background: rgb(220, 179, 255);
}

.hihat-pad {
  background: rgb(172, 255, 197);
}

.tom-pad {
  background: rgb(160, 211, 224);
}

.perc-pad {
  background: rgb(224, 160, 208);
}

.others-pad {
  background: rgb(224, 194, 160);
}

.kick-pad.active {
  background: rgb(105, 200, 255);
}

.snare-pad.active {
  background: rgb(186, 107, 255);
}

.hihat-pad.active {
  background: rgb(69, 255, 125);
}

.tom-pad.active {
  background: rgb(59, 197, 231);
}

.perc-pad.active {
  background: rgb(218, 58, 178);
}

.others-pad.active {
  background: rgb(241, 158, 64);
}

.tempo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 3rem;
  margin-bottom: 0rem;
  width: 30%;
  position: sticky;
  bottom: 1%;
  background: rgba(255, 255, 255, 0.25);
  padding: 1rem 2rem;
  border-radius: 0.2rem;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.play {
  padding: 1rem 2rem;
  font-size: 1.5rem;
  border: none;
  background: rgb(88, 88, 88);
  color: white;
  margin: 1rem 0rem;
}

.tempo-slider {
  -webkit-appearance: none;
  background: rgb(88, 88, 88);
  padding: 0.2rem;
  width: 100%;
  border-radius: 1rem;
  margin: 1rem 0rem;
}

p {
  font-size: 1.5rem;
}

.reset-tempo {
  padding: 0.5rem 1rem;
  border: none;
  font-size: 1rem;
  color: white;
  background: rgb(88, 88, 88);
}

.about-tempo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 50%;
}

@keyframes pad-active {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}/*# sourceMappingURL=style.css.map */