#player-bar {
  background: hsla(0, 0%, 0%, 0.1);
  bottom: 0;
  height: 100px;
  position: fixed;
  width: 100%;
}

#buttons {
  width: 300px;
  margin: auto;
  text-align: center;
}

#buttons button {
  border: none;
  background: none;
  color: white;
  font-size: 1.2rem;
  color: hsla(0, 0%, 100%, 0.5);
  transition: all 0.2s ease;
  cursor: pointer; 
}

#buttons button:hover, #buttons button:focus {
  outline: none;
  color: hsla(0, 0%, 100%, 1);
  text-shadow: 2px 4px 3px hsla(0,0%,0%,0.25);
}

#buttons #play-pause {
  color: hsla(0, 0%, 100%, 0.8);
  font-size: 2rem;
  margin: 0.5rem 1rem 0;
  transform: translateY(0.3rem);
}

#buttons #play-pause:hover {
  color: hsla(0, 0%, 100%, 1);
}

#play-pause .ion-pause {
  display: none;
}

#play-pause[playState="playing"] .ion-pause {
  display: block;
}

#play-pause[playState="playing"] .ion-play {
  display: none;
}

#time-control input {
  float: left;
  width: calc(100% - 80px);
}

#time-control {
  margin: 0.5rem auto;
  /* max-width: 640px; */
  width: 50%;
} 

#time-control div,
#volume-control div {
  font-size: 0.8rem;
  color: hsla(0, 0%, 100%, 0.4);
  width: 35px;
  display: block;
  float: left;
  text-align: center;
}

#volume-control div {
  font-size: 0.9rem;
  width: 20px;
}

#volume-control {
  transform: translateY(-50%);
  top: 66%;
  position: absolute;
  right: 2rem;
  width: 15%;
}

#volume-control input {
  float: left;
  width: calc(100% - 40px);
}

input[type=range] {
  -webkit-appearance: none;
  background: none;
  margin-top: 7px;
}
input[type=range]:focus {
  outline: none;
  box-shadow: 2px 4px 3px hsla(0,0%,0%,0.25);
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(57, 0, 0, 0), 0px 0px 0px rgba(83, 0, 0, 0);
  background: hsl(282, 35%, 25%);
  border-radius: 3.4px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-webkit-slider-thumb {
  border: none;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background: hsla(289, 48%, 85%, 0.5);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: hsl(282, 35%, 25%);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 0.8px;
  cursor: pointer;
  background: hsl(282, 35%, 25%);
  border-radius: 3.4px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-moz-range-thumb {
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: hsla(289, 48%, 85%, 0.5);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 0.8px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgba(0, 0, 0, 0.4);
  border: 0.2px solid rgba(1, 1, 1, 0);
  border-radius: 6.8px;
  box-shadow: 0px 0px 0px rgba(57, 0, 0, 0), 0px 0px 0px rgba(83, 0, 0, 0);
}
input[type=range]::-ms-fill-upper {
  background: rgba(0, 0, 0, 0.4);
  border: 0.2px solid rgba(1, 1, 1, 0);
  border-radius: 6.8px;
  box-shadow: 0px 0px 0px rgba(57, 0, 0, 0), 0px 0px 0px rgba(83, 0, 0, 0);
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: rgba(102, 103, 101, 0.79);
  cursor: pointer;
  height: 0.8px;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(0, 0, 0, 0.4);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(13, 13, 13, 0.4);
}