/* -------------- colors -------------- */
:root {
  /* ----- purples ----- */
  --dark: #2301a9;
  --mediumdark: #3810d1;
  --medium: #9985e8;
  --mediumlight: #b6a8ef;
  --light: #d6cef6;
  /* ----- grayscale ----- */
  --black: #171717;
  --pure: #ffffff;
}

#musicplayer {
  background: var(--medium); /* background color of player */
  /*border: 2px solid #e74492;  border around player */
  width: 200px; /* width of the player */
}

.songtitle {
  padding: 5px; /* padding around song title */
  /* border-bottom: 2px solid #e74492;  border under song title */
  display: block;
  color: var(--black);
}

.controls {
  font-size: 18px !important; /* size of controls */
  background-color: var(--black); /* background color of controls */
  text-align: center;
  width: 100%;
}

.controls td {
  padding: 8px 5px 5px 5px; /* padding around controls */
}

.seeking {
  background-color: var(--black); /* background color of seeking bar */
  display: flex;
  justify-content: space-evenly;
  padding: 5px; /* padding around seeking bar */
}

.current-time {
  padding-right: 5px;
}

.total-duration {
  padding-left: 5px;
}

i.fas:hover {
  cursor: help;
}

i.fas.fa-pause,
i.fas.fa-play,
i.fas.fa-forward,
i.fas.fa-backward {
  color: var(--medium); /* color of controls */
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background-color: var(--black); /* background color of seeking bar - make the color same as .seeking background color */
}

input[type="range"]:focus {
  outline: none;
}

/* settings for chrome browsers */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px; /* thickness of seeking track */
  cursor: help;
  background: var(--light); /* color of seeking track */
}

input[type="range"]::-webkit-slider-thumb {
  height: 10px; /* height of seeking square */
  width: 10px; /* width of seeking square */
  border-radius: 0px; /* change to 5px if you want a circle seeker */
  background: var(--medium); /* color of seeker square */
  cursor: help;
  -webkit-appearance: none;
  margin-top: -4.5px;
}

/* settings for firefox browsers */
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px; /* thickness of seeking track */
  cursor: help;
  background: var(--light); /* color of seeking track */
}

input[type="range"]::-moz-range-thumb {
  height: 10px; /* height of seeking square */
  width: 10px; /* width of seeking square */
  border-radius: 0px; /* change to 5px if you want a circle seeker */
  background: var(--light); /* color of seeker square */
  cursor: help;
  border: none;
}