@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");

#playList {
  background: rgb(0, 0, 0);
  border-radius: 10px;
  text-align: left;
  opacity: 0.8;
  color: #ffffff;
}
li {
  padding: 10px;
}
li:hover,
svg:hover {
  cursor: pointer;
  color: #e47d10;
}
li.active {
  color: #ee8d0d;
}
#controls {
  border: 1px #eee solid;
  border-radius: 10px;
  padding: 10px;
  background: white;
  opacity: 0.8;
}

svg {
  color: #000000;
}

progress {
  width: 80%;
  margin: 10px;
  opacity: 0.5;
}

.centrar {
  text-align: center;
}

.timer {
  width: 50%;
  position: relative;
  top: 10px;
  left: 0px;
  text-align: left;
  float: left;
  color: #000000;
}
.volumen {
  width: 50%;
  position: relative;
  top: 10px;
  right: 0px;
  text-align: right;
  float: left;
  color: #000000;
  margin-bottom: 20px;
}
#currentPlay {
  color: #000000;
}
h3 {
  color: #000000;
  margin: 0px;
}