.player-border{
  border: 1px solid black;
  border-radius: 7px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 1px white inset, 0 0 1px white inset;
  padding: 7px;
  width: 50vw;
  margin: 20px;
  font-family: Fantasy;
}
.player-header{
  margin: 0 auto 7px auto;
  display: flex;
  align-items: center;
  text-shadow: 0 0 5px white, 0 0 5px white;
}
.player-header img{
  height: 30px;
  align-self: center;
  margin-right: 5px;
}
.player-container{
  background-color: #eef3fa;
  border: 1px solid black;
}

#top-bar{
  background: linear-gradient(0deg,rgba(45, 48, 61, 1) 0%, rgba(18, 19, 19, 1) 25%, rgba(18, 19, 19, 1) 49%, rgba(47, 51, 60, 1) 50%, rgba(95, 106, 133, 1) 100%);
  height: 40px;
  align-content: center;  
}
#top-bar button{
  margin-left: 30px;
  margin-top: 2px;
  padding: 8px 15px 12px 15px;
  background: none;
  border: none;
  color: silver;
  border-radius: 5px 5px 0 0;
}
#top-bar button:hover{
  background: linear-gradient(0deg,rgba(69, 166, 195, 1) 0%, rgba(19, 59, 169, 1) 49%, rgba(71, 92, 186, 1) 50%, rgba(113, 149, 220, 1) 100%);
  color: white;
  box-shadow: 0 0 3px black inset, 0 0 1px black inset, 0 0 1px white;
}
#top-bar button:active{
  background: rgba(125,125,125,0.5);
  color: silver;
  box-shadow: 0 0 3px black inset, 0 0 1px black inset, 0 0 1px white;
}

#center{
  height: 25vw;
  background: #eef3fa;
  display: flex;
}
#player-background{
  background: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.9)), url('musicplayer/songBG/CorpseSelling.png');
  background-size: cover;
  background-position: center;
  height: 100%;
  aspect-ratio: 4 / 3;
  width: auto;
}
#player-list{
  height: 100%;
  flex-grow: 1;
  overflow: auto;
}
#player-list a{
  color: black;
  text-decoration: none;
  line-height: 1.5;
}

#bottom-bar{
  background: linear-gradient(0deg,rgba(185, 204, 230, 1) 0%, rgba(154, 184, 223, 1) 49%, rgba(179, 200, 231, 1) 50%, rgba(227, 236, 250, 1) 100%);
  height: 70px;
}
#progress-container{
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#progress-bar{
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 95%;
  height: 25%;
  outline: none;
  background: linear-gradient(0deg,rgba(235, 242, 250, 1) 0%, rgba(190, 195, 203, 1) 50%, rgba(235, 242, 250, 1) 100%);
  border-radius: 5px;
  border: 1px solid darkgray;
}
#progress-bar::-moz-range-thumb{
  height: 5px;
  width: 10px;
  border-radius: 40%;
  background: linear-gradient(0deg,rgba(83, 208, 249, 1) 0%, rgba(18, 86, 163, 1) 49%, rgba(82, 137, 197, 1) 50%, rgba(137, 170, 213, 1) 100%);
  align-content: center;
}
#progress-bar::-moz-range-progress{
  background: linear-gradient(0deg,rgba(83, 208, 249, 1) 0%, rgba(18, 86, 163, 1) 49%, rgba(82, 137, 197, 1) 50%, rgba(137, 170, 213, 1) 100%);
}

#player-controls{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  height: calc(100% - 45%);
}
#controls{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid gray;
  border-radius:10px;
  height: 36px;
  background: rgba(255, 255, 255, 0.25);
  padding: 3px;
  box-shadow: 0 0 3px gray inset, 0 0 1px white, 0 0 1px white;
}
#controls button{
  outline: none;
  border: none;
}

.side{
  width: 150px;
  height: 30px;
  margin: auto 20px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid gray;
  border-radius:10px;
  box-shadow: 0 0 3px gray inset, 0 0 1px white, 0 0 1px white;
}
.left{
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
#songName{
  width: 100px;
}
.right{
  display: flex;
  justify-content: center;
  align-items: center;
}
#volume-slider{
  width: 120px;
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 4px;
  outline: none;
  background: linear-gradient(0deg,rgba(235, 242, 250, 1) 0%, rgba(190, 195, 203, 1) 50%, rgba(235, 242, 250, 1) 100%);
  border-radius: 5px;
  border: 1px solid darkgray;
}
#volume-slider::-moz-range-thumb{
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: linear-gradient(0deg,rgba(83, 208, 249, 1) 0%, rgba(18, 86, 163, 1) 49%, rgba(82, 137, 197, 1) 50%, rgba(137, 170, 213, 1) 100%);
  align-content: center;
}
#volume-slider::-moz-range-progress{
  background: linear-gradient(0deg,rgba(83, 208, 249, 1) 0%, rgba(18, 86, 163, 1) 49%, rgba(82, 137, 197, 1) 50%, rgba(137, 170, 213, 1) 100%);
  height: 4px;
}

.right img{
  height: 30px;
}

#prevSong{
  background: url('musicplayer/back.ico');
  background-size: cover;
  background-repeat: no-repeat;
  height: 36px;
  width: 36px;
  align-self: center;
}
#prevSong:hover{
  background: url('musicplayer/backHOVER.ico');
  background-size: cover;
  background-repeat: no-repeat;
}
#prevSong:active{
  background: url('musicplayer/back.ico');
  background-size: cover;
  background-repeat: no-repeat;
}

/* PAUSED STATE IMAGES*/
#playSong.paused{
  background: url('musicplayer/paused.ico');
  background-size: cover;
  background-repeat: no-repeat;
  height: 44px;
  width: 44px;
  align-self: center;
}
#playSong.paused:hover{
  background: url('musicplayer/pausedHOVER.ico');
  background-size: cover;
  background-repeat: no-repeat;
}
#playSong.paused:active{
  background: url('musicplayer/pausedCLICK.ico');
  background-size: cover;
  background-repeat: no-repeat;
}
/* PLAYING STATE IMAGES*/
#playSong.playing{
  background: url('musicplayer/playing.ico');
  background-size: cover;
  background-repeat: no-repeat;
  height: 44px;
  width: 44px;
  align-self: center;
}
#playSong.playing:hover{
  background: url('musicplayer/playingHOVER.ico');
  background-size: cover;
  background-repeat: no-repeat;
}
#playSong.playing:active{
  background: url('musicplayer/playingCLICK.ico');
  background-size: cover;
  background-repeat: no-repeat;
}

#nextSong{
  background: url('musicplayer/next.ico');
  background-size: cover;
  background-repeat: no-repeat;
  height: 36px;
  width: 36px;
  align-self: center;
}
#nextSong:hover{
  background: url('musicplayer/nextHOVER.ico');
  background-size: cover;
  background-repeat: no-repeat;
}
#nextSong:active{
  background: url('musicplayer/next.ico');
  background-size: cover;
  background-repeat: no-repeat;
}

.active-song{
  background: darkgray;
  margin: 10px;
}
#songVisualizer{
  width: 100%;
  height: 70%;
  position: relative;
  top: 30%;
  opacity: 0.5;
}