#muski-synth-genie-wrapper {
  position: relative;
  width: 600px;
  height: 400px;
  border: 8px solid black;
  box-sizing: content-box;
  overflow: hidden;
  margin: auto;
}

#muski-synth-genie-wrapper .spinner-border {
  margin-top: 200px;
}

#muski-synth-genie {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.muski-synth-genie-controls {
  max-width: 600px;
  margin: auto;
  margin-top: 1rem;
}

.muski-synth-genie-controls .play-pause-button,
.muski-synth-genie-controls .clear-button {
  width: 60px;
  height: 60px;
  border: none;
  padding: 0;
  border-radius: 50%;
  background-color: #97ff94;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
  font-size: 0;
}

.muski-synth-genie-controls .clear-button {
  background-image: url('icons/trash-can-solid.svg');
}

.muski-synth-genie-controls .play-pause-button[data-state='paused'] {
  background-image: url('icons/play-solid.svg');
  background-position: 17px 10px;
}

.muski-synth-genie-controls .play-pause-button[data-state='playing'] {
  background-image: url('icons/pause-solid.svg');
}