#musicplayer{
    font-family: 'sonic', arial; /* default font */
    color: #f4cd72;
    font-size: 13px;
    width: 185px;/* width of the player - make it 100% if you want it to fill your container */
    padding-left: 6px;
    height: 175px;
    text-align:center; 
    margin-top: 3px; /* adds spacing between the top of the player and whatever is above it */
    display:flex;
    flex-direction:column;
    gap:0px;
}

#musicplayer:hover {

 }

.track-info, .songtitle{
    padding:2px;
    color: #5f4351;
}

.track-name{
    color: #355278;
}

.now-playing {
padding:5px;
letter-spacing: 1.7px;  
    
}
.controls{
    display:flex; 
    flex-direction:column; 
}

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

.buttons div{
    width:33.3%;
}

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

.track-info{
    background-color:#5aa8b2;;
    border-bottom: #355278 1px solid; /* no top */
    border-left: #355278 1px solid;
    border-right: #355278 1px solid;
    margin-bottom: 5px;
}

.now-playing{
    background-color:#5aa8b2;;
    border-top: #355278 2px solid; /* no bottom */
    border-left: #355278 2px solid;
    border-right: #355278 2px solid;
    font-weight:bold;
}

.material-icons{
    color:#f4cd72;;
    font-size: 15px;
}

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

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

input[type=range]::-webkit-slider-runnable-track{
    width:70%;
    height:4px; /* thickness of seeking track */
    background:#c58843; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    background:#c58843; /* 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:#c58843; /* color of seeking track */
}

input[type=range]::-moz-range-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    background:#c58843; /* color of seeker square */
    border:none; /* removes weird border around seeker square in firefox */
}

/* font stuff */

@font-face {
  font-family: pixtnr;
  src: url('PixelTimesNewRoman.woff');
}

@font-face {
  font-family: last;
  src: url('LastPriestess.woff');
}
@font-face {
  font-family: finders;
  src: url('FindersKeepers.woff');
}
@font-face {
  font-family: jinx;
  src: url('JinxedWizards.woff2');
}
@font-face {
  font-family: sonic;
  src: url('Sonic2HUD.woff');
}