/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
  \*************************************************************************************************************************************/
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  overflow: hidden;
}

body {
  margin: none;
  padding: none;
  background-color: rgb(255, 244, 226);
}

body.clicked {
  background-color: rgb(40, 80, 97);
}

header {
  display: inline-block;
  white-space: nowrap;
  padding: 10px;
  margin: 10px;
  min-width: 700px;
}

.splash-container {
  background-size: 100%;
  margin: none;
  padding: none;
  white-space: none;
}

.splash {
  z-index: 12;
  background-size: 100%;
  font-family: monospace;
  margin: none;
  padding: none;
  position: fixed;
  background-color: rgb(40, 80, 97);
  color: rgb(249, 222, 187);
  width: 125%;
  height: 125%;
  left: -10px;
  top: -10px;
  font-size: 25px;
  opacity: 85%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.click-anywhere {
  margin-left: 60px;
  margin-top: -50px;
}

.ref-links {
  margin-left: 60px;
  font-size: 20px;
}

:hover.ref-wavesurfer {
  color: aliceblue;
}

:hover.ref-fontawesome {
  color: aliceblue;
}

.splash.clicked {
  visibility: visible;
  opacity: 0;
  filter: blur(30px);
  transition: visbility 0s 2s, opacity 1s linear;
}

.splash.splashed {
  visibility: hidden;
  display: none;
}

#welcome {
  position: relative;
  font-size: 74px;
  margin-top: 50px;
  font-weight: 200;
  margin-right: 180px;
}

.welcome-text {
  margin-left: 60px;
}

#info {
  position: relative;
  font-weight: 50;
  margin-right: 20%;
}

:hover#welcome {
  color: rgb(255, 202, 175);
}

:hover#info {
  color: rgb(255, 202, 175);
}

.logo .regular img {
  width: 25%;
}

.logo .dark img {
  display: none;
}

.regular.clicked img {
  display: none;
}

.dark.clicked img {
  width: 25%;
  display: inline-block;
}

.night-mode {
  display: inline-block;
}

.info-and-tag {
  white-space: nowrap;
}

.track-info-0 {
  display: inline-block;
  font-family: sans-serif;
  color: aliceblue;
  font-weight: bold;
  font-size: 10px;
  width: 19%;
  height: 24px;
  max-height: 40px;
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  background-color: rgb(151, 210, 235);
  padding: 5px 25px;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  left: 3px;
  cursor: default;
}

.track-info-1 {
  display: inline-block;
  font-family: sans-serif;
  color: aliceblue;
  font-weight: bold;
  font-size: 10px;
  width: 19%;
  height: 24px;
  max-height: 40px;
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  background-color: rgb(151, 210, 235);
  padding: 5px 25px;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  left: 3px;
  cursor: default;
}

.track-info-2 {
  display: inline-block;
  font-family: sans-serif;
  color: aliceblue;
  font-weight: bold;
  font-size: 10px;
  width: 19%;
  height: 24px;
  max-height: 40px;
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  background-color: rgb(151, 210, 235);
  padding: 5px 25px;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  left: 3px;
  cursor: default;
}

.track-info-3 {
  display: inline-block;
  font-family: sans-serif;
  color: aliceblue;
  font-weight: bold;
  font-size: 10px;
  width: 19%;
  height: 24px;
  max-height: 40px;
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  background-color: rgb(151, 210, 235);
  padding: 5px 25px;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  left: 3px;
  cursor: default;
}

.track-info-0.clicked {
  background-color: rgb(146, 87, 109);
}

.track-info-1.clicked {
  background-color: rgb(146, 87, 109);
}

.track-info-2.clicked {
  background-color: rgb(146, 87, 109);
}

.track-info-3.clicked {
  background-color: rgb(146, 87, 109);
}

.a-b {
  display: flex;
  justify-content: space-around;
}

.c-d {
  display: flex;
  justify-content: space-around;
}

.side-slider {
  width: -1px;
}

.waveform-0 {
  margin-top: 10px;
  z-index: 1;
  background: rgb(249, 222, 187);
  width: 90%;
  height: 130px;
  box-shadow: 0 5px 5px -4px rgba(12, 248, 252, 0.3);
  padding: 5px 3%;
  margin-right: 2.8%;
  border-radius: 25px;
  margin-left: 1%;
  display: flex;
  justify-content: center;
}

.waveform-1 {
  margin-top: 10px;
  z-index: 1;
  background: rgb(249, 222, 187);
  width: 90%;
  height: 130px;
  box-shadow: 0 5px 5px -4px rgba(12, 248, 252, 0.3);
  padding: 5px 3%;
  margin-right: 2.8%;
  border-radius: 25px;
  margin-left: 1%;
  display: flex;
  justify-content: center;
}

.waveform-2 {
  margin-top: 10px;
  z-index: 1;
  background: rgb(249, 222, 187);
  width: 90%;
  height: 130px;
  box-shadow: 0 5px 5px -4px rgba(12, 248, 252, 0.3);
  padding: 5px 3%;
  margin-right: 2.8%;
  border-radius: 25px;
  margin-left: 1%;
  display: flex;
  justify-content: center;
}

.waveform-3 {
  margin-top: 10px;
  z-index: 1;
  background: rgb(249, 222, 187);
  width: 90%;
  height: 130px;
  box-shadow: 0 5px 5px -4px rgba(12, 248, 252, 0.3);
  padding: 5px 3%;
  margin-right: 2.8%;
  border-radius: 25px;
  margin-left: 1%;
  display: flex;
  justify-content: center;
}

.waveform-0.clicked {
  background-color: rgb(57, 118, 123);
}

.waveform-1.clicked {
  background-color: rgb(57, 118, 123);
}

.waveform-2.clicked {
  background-color: rgb(57, 118, 123);
}

.waveform-3.clicked {
  background-color: rgb(57, 118, 123);
}

.bpm-container-0 {
  position: relative;
  left: 120px;
  top: -47px;
  padding-left: 10px;
  height: 22px;
  width: 40%;
  background-color: rgb(151, 210, 235);
  border-radius: 10px;
  margin-right: 90%;
}

.bpm-container-1 {
  position: relative;
  left: 120px;
  top: -47px;
  padding-left: 10px;
  height: 22px;
  width: 40%;
  background-color: rgb(151, 210, 235);
  border-radius: 10px;
  margin-right: 90%;
}

.bpm-container-2 {
  position: relative;
  left: 120px;
  top: -47px;
  padding-left: 10px;
  height: 22px;
  width: 40%;
  background-color: rgb(151, 210, 235);
  border-radius: 10px;
  margin-right: 90%;
}

.bpm-container-3 {
  position: relative;
  left: 120px;
  top: -47px;
  padding-left: 10px;
  height: 22px;
  width: 40%;
  background-color: rgb(151, 210, 235);
  border-radius: 10px;
  margin-right: 90%;
}

.bpm-container-0.clicked {
  background-color: rgb(146, 87, 109);
}

.bpm-container-1.clicked {
  background-color: rgb(146, 87, 109);
}

.bpm-container-2.clicked {
  background-color: rgb(146, 87, 109);
}

.bpm-container-3.clicked {
  background-color: rgb(146, 87, 109);
}

.bpm {
  font-size: 11px;
  color: aliceblue;
  position: relative;
  left: -6px;
  top: -6.5px;
  display: flex;
  justify-content: center;
  cursor: default;
}

.wave-text {
  margin: 0;
  padding: 0;
  display: inline-block;
  z-index: 6;
  position: relative;
  color: aliceblue;
  top: -5.5px;
  left: 12px;
  font-size: 11px;
  font-weight: bold;
  cursor: default;
}

.upload-0 {
  position: relative;
  display: inline-block;
  top: -20px;
  left: 9px;
  border: 0px;
  font-family: sans-serif;
  font-weight: bold;
  color: aliceblue;
  font-size: 10px;
  min-width: 55px;
  max-width: 50px;
  min-height: 34px;
  border-radius: 35px;
  background-color: rgb(151, 210, 235);
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  cursor: pointer;
}

.upload-1 {
  position: relative;
  display: inline-block;
  top: -20px;
  left: 9px;
  border: 0px;
  font-family: sans-serif;
  font-weight: bold;
  color: aliceblue;
  font-size: 10px;
  min-width: 55px;
  max-width: 50px;
  min-height: 34px;
  border-radius: 35px;
  background-color: rgb(151, 210, 235);
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  cursor: pointer;
}

.upload-2 {
  position: relative;
  display: inline-block;
  top: -20px;
  left: 9px;
  border: 0px;
  font-family: sans-serif;
  font-weight: bold;
  color: aliceblue;
  font-size: 10px;
  min-width: 55px;
  max-width: 50px;
  min-height: 34px;
  border-radius: 35px;
  background-color: rgb(151, 210, 235);
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  cursor: pointer;
}

.upload-3 {
  position: relative;
  display: inline-block;
  top: -20px;
  left: 9px;
  border: 0px;
  font-family: sans-serif;
  font-weight: bold;
  color: aliceblue;
  font-size: 10px;
  min-width: 55px;
  max-width: 50px;
  min-height: 34px;
  border-radius: 35px;
  background-color: rgb(151, 210, 235);
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  cursor: pointer;
}

.upload-0.clicked {
  background-color: rgb(146, 87, 109);
}

.upload-1.clicked {
  background-color: rgb(146, 87, 109);
}

.upload-2.clicked {
  background-color: rgb(146, 87, 109);
}

.upload-3.clicked {
  background-color: rgb(146, 87, 109);
}

.upload-0 label {
  position: relative;
  left: 15px;
  top: 6px;
  cursor: pointer;
}

.upload-1 label {
  position: relative;
  left: 15px;
  top: 6px;
  cursor: pointer;
}

.upload-2 label {
  position: relative;
  left: 15px;
  top: 6px;
  cursor: pointer;
}

.upload-3 label {
  position: relative;
  left: 15px;
  top: 6px;
  cursor: pointer;
}

.clear-track-0 {
  display: inline-block;
  position: relative;
  left: 10px;
  top: -22px;
  width: 55px;
  height: 34px;
  background-color: rgb(151, 210, 235);
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  border-radius: 30px;
}

.clear-track-1 {
  display: inline-block;
  position: relative;
  left: 10px;
  top: -22px;
  width: 55px;
  height: 34px;
  background-color: rgb(151, 210, 235);
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  border-radius: 30px;
}

.clear-track-2 {
  display: inline-block;
  position: relative;
  left: 10px;
  top: -22px;
  width: 55px;
  height: 34px;
  background-color: rgb(151, 210, 235);
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  border-radius: 30px;
}

.clear-track-3 {
  display: inline-block;
  position: relative;
  left: 10px;
  top: -22px;
  width: 55px;
  height: 34px;
  background-color: rgb(151, 210, 235);
  box-shadow: 0 7px 5px -4px rgba(12, 248, 252, 0.3);
  border-radius: 30px;
}

.clear-track-0.clicked {
  background-color: rgb(146, 87, 109);
}

.clear-track-1.clicked {
  background-color: rgb(146, 87, 109);
}

.clear-track-2.clicked {
  background-color: rgb(146, 87, 109);
}

.clear-track-3.clicked {
  background-color: rgb(146, 87, 109);
}

.clear-track-0 .clear-0 {
  position: relative;
  font-family: sans-serif;
  color: aliceblue;
  font-weight: bold;
  font-size: 10px;
  left: 15px;
  top: 8px;
}

.clear-track-1 .clear-1 {
  position: relative;
  font-family: sans-serif;
  color: aliceblue;
  font-weight: bold;
  font-size: 10px;
  left: 15px;
  top: 8px;
}

.clear-track-2 .clear-2 {
  position: relative;
  font-family: sans-serif;
  color: aliceblue;
  font-weight: bold;
  font-size: 10px;
  left: 15px;
  top: 8px;
}

.clear-track-3 .clear-3 {
  position: relative;
  font-family: sans-serif;
  color: aliceblue;
  font-weight: bold;
  font-size: 10px;
  left: 15px;
  top: 8px;
}

.track-info-0 {
  position: relative;
  left: 8px;
  min-width: 35%;
}

.track-info-1 {
  position: relative;
  left: 8px;
  min-width: 35%;
}

.track-info-2 {
  position: relative;
  left: 8px;
  min-width: 35%;
}

.track-info-3 {
  position: relative;
  left: 8px;
  min-width: 35%;
}

.track-info-0 .track-name {
  position: relative;
  top: -3.5px;
  left: -7px;
}

.track-info-1 .track-name {
  position: relative;
  top: -3.5px;
  left: -7px;
}

.track-info-2 .track-name {
  position: relative;
  top: -3.5px;
  left: -7px;
}

.track-info-3 .track-name {
  position: relative;
  top: -3.5px;
  left: -7px;
}

.wave-text-background-0 {
  background-color: rgb(151, 210, 235);
  border-radius: 10px;
  max-height: 22px;
  max-width: 110px;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: -9px;
}

.wave-text-background-1 {
  background-color: rgb(151, 210, 235);
  border-radius: 10px;
  max-height: 22px;
  max-width: 110px;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: -9px;
}

.wave-text-background-2 {
  background-color: rgb(151, 210, 235);
  border-radius: 10px;
  max-height: 22px;
  max-width: 110px;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: -9px;
}

.wave-text-background-3 {
  background-color: rgb(151, 210, 235);
  border-radius: 10px;
  max-height: 22px;
  max-width: 110px;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: -9px;
}

.wave-text-background-0.clicked {
  background-color: rgb(146, 87, 109);
}

.wave-text-background-1.clicked {
  background-color: rgb(146, 87, 109);
}

.wave-text-background-2.clicked {
  background-color: rgb(146, 87, 109);
}

.wave-text-background-3.clicked {
  background-color: rgb(146, 87, 109);
}

.waveform-slider {
  white-space: nowrap;
  position: relative;
  top: -25px;
}

.waveform-slider .waveform-0 {
  display: inline-block;
}

.waveform-slider .waveform-1 {
  display: inline-block;
}

.waveform-slider .waveform-2 {
  display: inline-block;
}

.waveform-slider .waveform-3 {
  display: inline-block;
}

.waveform-slider .side-slider {
  display: inline-block;
}

.player {
  z-index: 3;
  position: relative;
  top: 0px;
  left: 0px;
  min-width: 100px;
}

.side-slider {
  transform-origin: top left;
  position: relative;
  left: -65px;
  top: -43px;
}

.vol-slider-1 {
  position: relative;
  left: -572px;
}

.vol-slider-3 {
  position: relative;
  left: -572px;
}

.rateplsmove {
  position: relative;
  left: -571px;
}

.side-slider #track-range {
  width: 140px;
  appearance: none;
  background: rgb(249, 222, 187);
  box-shadow: 0 -5px 5px -4px rgba(12, 248, 252, 0.3);
  padding: 1px;
  border-radius: 10px;
}

.side-slider #track-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: rgb(151, 210, 235);
  padding: 5px;
  border-radius: 20px;
  cursor: pointer;
}

input[id=track-range] {
  transform: rotate(270deg);
}

.side-slider #track-speed {
  width: 140px;
  appearance: none;
  background: rgb(249, 222, 187);
  box-shadow: 0 -5px 5px -4px rgba(12, 248, 252, 0.3);
  padding: 1px;
  border-radius: 10px;
  position: relative;
  left: -125px;
}

.side-slider #track-speed::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: rgb(151, 210, 235);
  padding: 5px;
  border-radius: 20px;
  cursor: pointer;
}

input[id=track-speed] {
  transform: rotate(270deg);
}

.separator-1 {
  margin-left: 80px;
  margin-right: 80px;
}

.separator-2 {
  margin-left: 80px;
  margin-right: 80px;
}

.audio-buttons {
  display: inline-block;
  position: relative;
  top: -5px;
  left: 20px;
  cursor: pointer;
}

.audio-buttons .play-button-0 {
  position: relative;
  left: 381px;
}

.audio-buttons .play-button-2 {
  position: relative;
  left: 381px;
}

.audio-buttons .stop-button-0 {
  position: relative;
  left: 381px;
}

.audio-buttons .stop-button-2 {
  position: relative;
  left: 381px;
}

.audio-buttons .play-button-0 .fa-circle-pause {
  display: none;
}

.audio-buttons .play-button-1 .fa-circle-pause {
  display: none;
}

.audio-buttons .play-button-2 .fa-circle-pause {
  display: none;
}

.audio-buttons .play-button-3 .fa-circle-pause {
  display: none;
}

.audio-buttons .play-button-0.playing .fa-circle-pause {
  display: inline-block;
  color: rgb(151, 210, 235);
}

.audio-buttons .play-button-1.playing .fa-circle-pause {
  display: inline-block;
  color: rgb(151, 210, 235);
}

.audio-buttons .play-button-2.playing .fa-circle-pause {
  display: inline-block;
  color: rgb(151, 210, 235);
}

.audio-buttons .play-button-3.playing .fa-circle-pause {
  display: inline-block;
  color: rgb(151, 210, 235);
}

.audio-buttons .play-button-0.playing .fa-circle-play {
  display: none;
}

.audio-buttons .play-button-1.playing .fa-circle-play {
  display: none;
}

.audio-buttons .play-button-2.playing .fa-circle-play {
  display: none;
}

.audio-buttons .play-button-3.playing .fa-circle-play {
  display: none;
}

.fa-regular {
  color: rgb(249, 222, 187);
}

.hot-cues {
  display: inline-block;
  position: relative;
  left: 35px;
  top: -16px;
  cursor: pointer;
}

.hot-cues .hot-cue-1-0 {
  position: relative;
  left: 206px;
}

.hot-cues .hot-cue-1-2 {
  position: relative;
  left: 206px;
}

.hot-cues .hot-cue-2-0 {
  position: relative;
  left: 217px;
}

.hot-cues .hot-cue-2-1 {
  position: relative;
  left: 9px;
}

.hot-cues .hot-cue-2-2 {
  position: relative;
  left: 216px;
}

.hot-cues .hot-cue-2-3 {
  position: relative;
  left: 9px;
}

.reset-cue-1-0 {
  position: relative;
  left: 207px;
}

.reset-cue-1-2 {
  position: relative;
  left: 207px;
}

.reset20 {
  position: relative;
  left: 208px;
}

.reset22 {
  position: relative;
  left: 208px;
}

.hot-cues .hot-cue-1-0.clicked .fa-solid {
  color: rgb(151, 210, 235);
}

.hot-cues .hot-cue-1-1.clicked .fa-solid {
  color: rgb(151, 210, 235);
}

.hot-cues .hot-cue-1-2.clicked .fa-solid {
  color: rgb(151, 210, 235);
}

.hot-cues .hot-cue-1-3.clicked .fa-solid {
  color: rgb(151, 210, 235);
}

.hot-cues .hot-cue-2-0.clicked .fa-solid {
  color: rgb(151, 210, 235);
}

.hot-cues .hot-cue-2-1.clicked .fa-solid {
  color: rgb(151, 210, 235);
}

.hot-cues .hot-cue-2-2.clicked .fa-solid {
  color: rgb(151, 210, 235);
}

.hot-cues .hot-cue-2-3.clicked .fa-solid {
  color: rgb(151, 210, 235);
}

.fa-solid {
  color: rgb(249, 222, 187);
}

.fa-solid.clicked {
  color: rgb(146, 87, 109);
}

.reset-cues {
  display: inline-block;
  position: relative;
  left: -41px;
  top: 22px;
}

.reset-cues .reset-cue-2-0 {
  position: relative;
  left: 11.5px;
}

.reset-cues .reset-cue-2-1 {
  position: relative;
  left: 11.5px;
}

.reset-cues .reset-cue-2-2 {
  position: relative;
  left: 11.5px;
}

.reset-cues .reset-cue-2-3 {
  position: relative;
  left: 11.5px;
}

:hover.fa-regular {
  color: rgb(255, 202, 175);
}

:hover.fa-solid {
  color: rgb(255, 202, 175);
}

button {
  border-radius: 5px;
  color: rgb(249, 222, 187);
  font-family: monospace;
  font-weight: bold;
  cursor: pointer;
  background: none;
  font-size: 10px;
  padding: 0;
  border: none;
}

.looper {
  display: inline-block;
  position: relative;
  padding: 0;
  border: none;
  top: -48px;
  left: -129px;
}

.looper-0 {
  display: inline-block;
  position: relative;
  padding: 0;
  border: none;
  top: -48px;
  left: 230px;
}

.looper-2 {
  display: inline-block;
  position: relative;
  padding: 0;
  border: none;
  top: -48px;
  left: 230px;
}

.loop-in-0 {
  position: relative;
  left: -20px;
}

.loop-out-0 {
  position: relative;
  left: -7px;
}

:hover.loop-in-0 {
  color: rgb(255, 202, 175);
}

:hover.loop-out-0 {
  color: rgb(255, 202, 175);
}

.clear-loop-0 {
  position: relative;
  left: 7px;
}

:hover.clear-loop-0 {
  color: rgb(255, 202, 175);
}

.loop-in-1 {
  position: relative;
  left: -20px;
}

.loop-out-1 {
  position: relative;
  left: -7px;
}

:hover.loop-in-1 {
  color: rgb(255, 202, 175);
}

:hover.loop-out-1 {
  color: rgb(255, 202, 175);
}

.clear-loop-1 {
  position: relative;
  left: 7px;
}

:hover.clear-loop-1 {
  color: rgb(255, 202, 175);
}

.loop-in-2 {
  position: relative;
  left: -20px;
}

.loop-out-2 {
  position: relative;
  left: -7px;
}

:hover.loop-in-2 {
  color: rgb(255, 202, 175);
}

:hover.loop-out-2 {
  color: rgb(255, 202, 175);
}

.clear-loop-2 {
  position: relative;
  left: 7px;
}

:hover.clear-loop-2 {
  color: rgb(255, 202, 175);
}

.loop-in-3 {
  position: relative;
  left: -20px;
}

.loop-out-3 {
  position: relative;
  left: -7px;
}

:hover.loop-in-3 {
  color: rgb(255, 202, 175);
}

:hover.loop-out-3 {
  color: rgb(255, 202, 175);
}

.clear-loop-3 {
  position: relative;
  left: 7px;
}

:hover.clear-loop-3 {
  color: rgb(255, 202, 175);
}

.toggle-0 {
  color: rgb(254, 240, 225);
  position: relative;
  top: 3px;
  left: 2px;
}

:hover.toggle-0 {
  color: rgb(255, 202, 175);
}

.toggle-1 {
  color: rgb(254, 240, 225);
  position: relative;
  top: 3px;
  left: 2px;
}

:hover.toggle-1 {
  color: rgb(255, 202, 175);
}

.toggle-2 {
  color: rgb(254, 240, 225);
  position: relative;
  top: 3px;
  left: 2px;
}

:hover.toggle-2 {
  color: rgb(255, 202, 175);
}

.toggle-3 {
  color: rgb(254, 240, 225);
  position: relative;
  top: 3px;
  left: 2px;
}

:hover.toggle-3 {
  color: rgb(255, 202, 175);
}

.loop-in-0.clicked {
  color: rgb(151, 210, 235);
}

.loop-out-0.clicked {
  color: rgb(151, 210, 235);
}

.loop-in-1.clicked {
  color: rgb(151, 210, 235);
}

.loop-out-1.clicked {
  color: rgb(151, 210, 235);
}

.loop-in-2.clicked {
  color: rgb(151, 210, 235);
}

.loop-out-2.clicked {
  color: rgb(151, 210, 235);
}

.loop-in-3.clicked {
  color: rgb(151, 210, 235);
}

.loop-out-3.clicked {
  color: rgb(151, 210, 235);
}

.empty-space {
  display: inline-block;
  position: relative;
}

.bpm-container-0 {
  z-index: 8;
  display: flex;
  justify-content: center;
  top: -35px;
}

.bpm-container-1 {
  z-index: 8;
  display: flex;
  justify-content: center;
  top: -35px;
}

.bpm-container-2 {
  z-index: 8;
  display: flex;
  justify-content: center;
  top: -35px;
}

.bpm-container-3 {
  z-index: 8;
  display: flex;
  justify-content: center;
  top: -35px;
}

.parent-playhead-0 {
  z-index: 1;
  width: 90%;
  height: 2px;
  margin-right: 1%;
  margin-left: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent-playhead-1 {
  z-index: 1;
  width: 90%;
  height: 2px;
  margin-right: 1%;
  margin-left: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent-playhead-2 {
  z-index: 1;
  width: 90%;
  height: 2px;
  margin-right: 1%;
  margin-left: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent-playhead-3 {
  z-index: 1;
  width: 90%;
  height: 2px;
  margin-right: 1%;
  margin-left: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.playheads-0.clicked {
  display: none;
}

.playheads-1.clicked {
  display: none;
}

.playheads-2.clicked {
  display: none;
}

.playheads-3.clicked {
  display: none;
}

.playheads-0 .fa-solid.fa-sort-down {
  z-index: 5;
  color: rgb(151, 210, 235);
  position: fixed;
  top: 166px;
  margin-left: 12px;
}

.playheads-0 .fa-solid.fa-sort-up {
  z-index: 5;
  color: rgb(151, 210, 235);
  position: fixed;
  top: 277px;
  margin-left: 12px;
}

.playheads-1 .fa-solid.fa-sort-down {
  z-index: 5;
  color: rgb(151, 210, 235);
  position: fixed;
  top: 166px;
  margin-left: 12px;
}

.playheads-1 .fa-solid.fa-sort-up {
  z-index: 5;
  color: rgb(151, 210, 235);
  position: fixed;
  top: 277px;
  margin-left: 12px;
}

.playheads-2 .fa-solid.fa-sort-down {
  z-index: 5;
  color: rgb(151, 210, 235);
  position: fixed;
  top: 450px;
  margin-left: 12px;
}

.playheads-2 .fa-solid.fa-sort-up {
  z-index: 5;
  color: rgb(151, 210, 235);
  position: fixed;
  top: 561px;
  margin-left: 12px;
}

.playheads-3 .fa-solid.fa-sort-down {
  z-index: 5;
  color: rgb(151, 210, 235);
  position: fixed;
  top: 450px;
  margin-left: 12px;
}

.playheads-3 .fa-solid.fa-sort-up {
  z-index: 5;
  color: rgb(151, 210, 235);
  position: fixed;
  top: 561px;
  margin-left: 12px;
}

.playheads-0 .fa-solid.fa-sort-up.night {
  color: rgb(146, 87, 109);
}

.playheads-0 .fa-solid.fa-sort-down.night {
  color: rgb(146, 87, 109);
}

.playheads-1 .fa-solid.fa-sort-up.night {
  color: rgb(146, 87, 109);
}

.playheads-1 .fa-solid.fa-sort-down.night {
  color: rgb(146, 87, 109);
}

.playheads-2 .fa-solid.fa-sort-up.night {
  color: rgb(146, 87, 109);
}

.playheads-2 .fa-solid.fa-sort-down.night {
  color: rgb(146, 87, 109);
}

.playheads-3 .fa-solid.fa-sort-up.night {
  color: rgb(146, 87, 109);
}

.playheads-3 .fa-solid.fa-sort-down.night {
  color: rgb(146, 87, 109);
}

.vol-0 {
  display: inline-block;
  position: relative;
  left: -301px;
  top: 40px;
  cursor: pointer;
}

.vol-1 {
  display: inline-block;
  position: relative;
  left: -872px;
  top: 40px;
  cursor: pointer;
}

.vol-2 {
  display: inline-block;
  position: relative;
  left: -301px;
  top: 40px;
  cursor: pointer;
}

.vol-3 {
  display: inline-block;
  position: relative;
  left: -872px;
  top: 40px;
  cursor: pointer;
}

.mute-0.clicked {
  display: none;
}

.muted-0 {
  display: none;
}

.muted-0.clicked {
  display: inline-block;
}

.mute-1.clicked {
  display: none;
}

.muted-1 {
  display: none;
}

.muted-1.clicked {
  display: inline-block;
}

.mute-2.clicked {
  display: none;
}

.muted-2 {
  display: none;
}

.muted-2.clicked {
  display: inline-block;
}

.mute-3.clicked {
  display: none;
}

.muted-3 {
  display: none;
}

.muted-3.clicked {
  display: inline-block;
}

.speed-button-0 {
  display: inline-block;
  position: relative;
  left: -296px;
  top: 40px;
  cursor: pointer;
}

.speed-button-1 {
  display: inline-block;
  position: relative;
  left: -867px;
  top: 40px;
  cursor: pointer;
}

.speed-button-2 {
  display: inline-block;
  position: relative;
  left: -296px;
  top: 40px;
  cursor: pointer;
}

.speed-button-3 {
  display: inline-block;
  position: relative;
  left: -867px;
  top: 40px;
  cursor: pointer;
}

.track-a-id {
  display: inline-block;
  position: relative;
  color: aliceblue;
  width: 65px;
  height: 30px;
  border-radius: 30px;
  left: -414.5px;
  top: 12px;
}

.track-a-id h4 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -10px;
  font-size: 13px;
  font-size: 17px;
  font-weight: bold;
  cursor: default;
}

footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 250px;
}

.bar {
  z-index: 11;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: rgb(151, 210, 235);
  width: 700px;
  max-width: 1000px;
  height: 12.5%;
  border-radius: 30px;
  color: aliceblue;
  font-weight: bold;
  font-family: monospace;
  margin-bottom: 1%;
  min-width: 400px;
  position: absolute;
  top: 685px;
  max-height: 30px;
}

.bar.clicked {
  background-color: rgb(146, 87, 109);
}

.controls {
  color: aliceblue;
}

.night-mode {
  color: aliceblue;
}

.about {
  color: aliceblue;
}

.github {
  color: aliceblue;
}

.portfolio {
  color: aliceblue;
}

.linkedin {
  color: aliceblue;
}

a {
  color: inherit;
  text-decoration: none;
}

.info-boxes {
  display: flex;
  visibility: hidden;
  opacity: 0%;
  justify-content: center;
  align-items: center;
  margin-bottom: -16.5px;
}

.about-text {
  position: absolute;
  margin-top: 250px;
  background-color: rgb(151, 210, 235);
  width: 700px;
  height: 190px;
  border-radius: 60px;
  top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: aliceblue;
  list-style: none;
  font-family: monospace;
}

.about-text > p {
  display: relative;
  flex-wrap: wrap;
  color: aliceblue;
  opacity: 100%;
  cursor: default;
}

.info-boxes.clicked {
  visibility: visible;
  opacity: 85%;
  transition: visbility 0s 0.25s, opacity 0.25s linear;
}

.about-text.night {
  background-color: rgb(146, 87, 109);
}

ul {
  display: block;
  list-style-type: disc;
  margin-top: -20px;
  cursor: default;
}

li {
  display: block;
  margin-top: -0.5px;
  cursor: default;
}

.about-text > p {
  margin-bottom: -30px;
}

.help {
  display: none;
  opacity: 0%;
}

.help > img {
  z-index: 10;
  position: absolute;
  max-height: 600px;
  top: 80px;
}

.help.clicked {
  display: flex;
  opacity: 100%;
  justify-content: center;
  align-items: flex-start;
}

.plshelp {
  color: aliceblue;
}