@font-face { 
	font-family: "Alagard"; 
	src: url("/fonts/alagard.ttf") format("truetype");
}

#musicplayer{
  font-family: "Alagard"; /* default font */
  width:300px; /* width of the player - make it 100% if you want it to fill your container */
  text-align:center; 
  display:flex;
  flex-direction:column;
}

#album{
  border: 5px ridge #13091D;
  margin: 5px;
}

.musiccontainer {
  display: flex;
  width: 100%;
  gap: 5px;
}
.musicleft {
  display: inline-flex;
  width: 95px;
  flex-direction: column;
}
.musicright {
  display: inline-flex;
  flex-direction: column;
  margin-right: 10px;
}

.track-info{
  padding:5px;
  color: #a24df7;
}

marquee{
  scrolldelay:60;
}

.now-playing{
  padding:5px;
  background:linear-gradient(90deg, black, black, #813DC5);
  text-align: left;
}

.controls{
  display:flex; 
  flex-direction:column; 
  gap:10px;
}

.buttons{
  display:flex;
  justify-content:center;
  width:100%;
}

.buttons div{
  width:33.3%;
}

.playpause-track, .prev-track, .next-track{
  color:white; /* color of buttons */
  border: 5px ridge #13091D;
  padding-top: 4px;
}
.playpause-track:hover, .prev-track:hover, .next-track:hover{
  background: rgba(255, 255, 255, 0.1);
}
.playpause-track, .prev-track{
  margin-right: 5px;
}

.seeking{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
}

input[type=range]{
  -webkit-appearance:none; /* removes default appearance of the tracks */
  width:100%;
}

input[type=range]:focus{
  outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
  width:100%;
  height:4px; /* thickness of seeking track */
  background:rgba(0, 0, 0, 0.5); /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
  height:10px; /* height of seeking square */
  width:10px; /* width of seeking square */
  border-radius:5px; /* change to 5px if you want a circle seeker */
  background:white; /* color of seeker square */
  -webkit-appearance:none;
  margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track{
  width:100%;
  height:4px; /* thickness of seeking track */
  background:rgba(255, 255, 255, 0.5); /* 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:#e74492; /* color of seeker square */
  border:none; /* removes weird border around seeker square in firefox */
}