.title-bar{
  background:linear-gradient(90deg,purple,orchid,pink);
}


.player{
  width:fit-content;
  border:1px solid black;
  border-width:1px 0 0 1px;
  margin:auto;
}


.controlimg:hover{cursor:help;}


input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;background:transparent}
input[type="range"]:focus{outline:none}


input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  height:21px;width:11px;
  background:svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform:translateY(-8px);
  border:none;box-shadow:none;
}
input[type="range"].has-box-indicator::-webkit-slider-thumb{
  background:svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform:translateY(-10px);
}

/* FIREFOX thumb */
input[type="range"]::-moz-range-thumb{
  height:21px;width:11px;border:0;border-radius:0;
  background:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform:translateY(2px);
}
input[type="range"].has-box-indicator::-moz-range-thumb{
  background:svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform:translateY(0);
}

/* track (both browsers) */
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track{
  width:100%;height:2px;box-sizing:border-box;background:black;
  border-right:1px solid grey;border-bottom:1px solid grey;
  box-shadow:1px 0 0 white,1px 1px 0 white,0 1px 0 white,-1px 0 0 darkgrey,
             -1px -1px 0 darkgrey,0 -1px 0 darkgrey,-1px 1px 0 white,1px -1px darkgrey;
}

/* -------- base 98.css tweaks (fonts, window chrome) -------- */
@font-face{
  font-family:"Pixelated MS Sans Serif";
  src:url("https://files.catbox.moe/1za99g.woff") format("woff"),
      url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
  font-weight:normal;font-style:normal;
}
@font-face{
  font-family:"Pixelated MS Sans Serif";
  src:url("https://files.catbox.moe/z7csle.woff") format("woff"),
      url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
  font-weight:bold;font-style:normal;
}

button,input,label,option,select,table,textarea,ul.tree-view,
.window,.title-bar{
  font-family:"Pixelated MS Sans Serif",Arial;
  -webkit-font-smoothing:none;font-size:11px;
}


button{background:silver;min-width:40px;min-height:23px;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,
             inset -2px -2px grey,inset 2px 2px #dfdfdf;border:none}
button:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,
               inset -2px -2px #dfdfdf,inset 2px 2px grey}

.title-bar-controls button{min-width:16px;min-height:14px;padding:0;}
.title-bar-controls button[aria-label=Minimize]{background:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg") no-repeat 4px 3px / 8px 8px}
.title-bar-controls button[aria-label=Maximize]{background:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/maximize.svg") no-repeat 3px 2px / 9px 9px}
.title-bar-controls button[aria-label=Close]{background:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg") no-repeat 4px 3px / 8px 8px;margin-left:2px}

.window{background:#c0c0c0;padding:3px;width:260px;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,
             inset -2px -2px #808080,inset 2px 2px #ffffff}
.title-bar{padding:3px 2px 3px 3px;display:flex;justify-content:space-between;align-items:center}
.title-bar-text{color:#fff;font-weight:bold;margin-right:24px}


.window-body{margin:0;height:98px}
.flex{display:flex}
#imagestyle{background:silver;border:2px solid silver;width:95px;height:95px;
  box-shadow:inset -1px -1px #fff,inset 1px 1px grey,
             inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}
.ic{width:90px;padding:2px;position:relative;bottom:1px;right:1px}
#musicplayer{width:160px;border-top:2px solid silver}
.songtitlewindow{background:#fff;box-shadow:inset -1px -1px #fff,
                 inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}
.songtitle{padding:5px;font-family:"Pixelated MS Sans Serif"}
.songtitlearrow{width:21px;height:21px;background:url(https://files.catbox.moe/f5e8np.png) no-repeat center/contain;position:relative;top:2px;left:-2px}
.controls{font-size:18px;text-align:center;width:100%;position:relative;bottom:10px}
.controls td{padding:8px 5px 0}
.controlimg{width:15px;height:15px}
.seeking{background:#c0c0c0;display:flex;justify-content:space-evenly;padding:14px}
.current-time,.total-duration{font-family:"Pixelated MS Sans Serif"}