body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(210 210 210 / 40%);
}
body #player {
  min-width: 400px;
  height: 50px;
  border-radius: 40px;
  border: 1px solid black;
  box-shadow: 10px 10px 10px #b9b9b9;
  display: flex;
  justify-content: center;
  background-color: #dfffe2;
  align-items: center;
}
body #player div {
  margin: 5px;
  cursor: pointer;
}
body #player #playButton.play {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 30px solid green;
  border-bottom: 15px solid transparent;
}
body #player #playButton.pause {
  width: 10px;
  height: 30px;
  border-left: 10px solid green;
  border-right: 10px solid green;
}
body #player #stopButton {
  width: 30px;
  height: 30px;
  background: green;
}
body #player #duration {
  display: block;
  width: 152px;
  height: 10px;
  border: 1px solid #0d7f19;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #ffffff;
  margin-right: 10px;
  border-radius: 19px;
}
body #player #duration span {
  display: block;
  width: 0;
  height: 9px;
  background: green;
}