/* music player */
#musicPlayer {
  position: relative;
  width: 45vw;
  padding: 1em;
  background-color: var(--bg-gradientlight);
  font-family: "rainyhearts", "DOSGothic";
  font-size: 1.125rem;
  text-align: center;
  margin: 3px;
  border-radius: 0.3125rem;
}

.player-player {
  flex: 1 1 17rem;
  height:auto;
  width:100%;
  background: #fffbec;
  position: relative;
  box-shadow: inset 5px 0px 15px 10px #ebdfb173;
  border-radius: 10px;
  border: 1px solid var(--color-blue);
  font-family: "rainyhearts", "DOSGothic", monospace;
  font-size: 1.125rem;
  color: var(--color-white);
  padding:1rem;
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
}


.player-screen {
  background: #f7ecff;
  box-shadow: inset 5px 0px 15px 10px #d4b1eb73;
  border-radius: 5px;
  border: 1px solid var(--color-purple);
  color: var(--color-darkblue);
  font-size: 1rem;
  padding: 0.5em;
  margin-bottom: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
}

.player-controls {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1em;
}

.player-controls button {
  background: #f7ecff;
  box-shadow: inset 5px 0px 15px 10px #d4b1eb73;
  border-radius: 5px;
  border: 1px solid var(--color-purple);
  color: var(--color-darkblue);
  padding: 0.3em .5em;
  font-size: 1.125rem;
  transition: all 0.2s ease-in-out;
}

.player-controls button:hover {
  background: #ecf5ff;
    box-shadow: inset 5px 0px 15px 10px #b1c3eb73;
  border: 1px solid var(--color-blue);

  color: var(--color-blue);
}


.player-playlist {
  background: #f7ecff;
  box-shadow: inset 5px 0px 15px 10px #d4b1eb73;
  border-radius: 5px;
  border: 1px solid var(--color-purple);
  padding: 0.3125rem;
  border-radius:0.3125rem;
  height: 10em;
  overflow-y: auto;

}

.player-playlist li {
  list-style: none;
  padding: 2px;
  font-size: 1rem;
  color: var(--color-darkblue);
  text-align: left;
}
.player-playlist li::marker {
  font-family: "emojifont";
  content:"";
}
.player-playlist li:hover {
  background: #a3c5ec81;
  color: var(--color-defaulttext);
}


/* RESPONSIVE BREAKPOINTS */

@media (max-width: 1024px) {
  #musicPlayer {
    width: 60vw;
  }
  
  .player-player {
    width: 50vw;
  }
}

@media (max-width: 768px) {
  #musicPlayer {
    width: 90vw;
  }
  
  .player-player {
    width: 100%;
    flex: 1 1 100%;
  }
}