@font-face {
    font-family: winamp;
    src: url(/fonts/winamp.otf);
}
.flex{display:flex;}
.inset{
  border-right:2px solid rgb(106, 106, 122);
  border-bottom:2px solid rgb(106, 106, 122);
  border-left:2px solid rgb(31, 31, 49);
  border-top:2px solid rgb(31, 31, 49);
}
.outset{
  border-top:2px solid rgb(106, 106, 122);
  border-left:2px solid rgb(106, 106, 122);
  border-bottom:2px solid rgb(31, 31, 49);
  border-right:2px solid rgb(31, 31, 49);
}
.column{
  display:flex;
  flex-direction:column;
}
.center{
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}
.shadow {
  filter:drop-shadow(5px 5px rgba(83, 1, 41, 0.4));
}
.maxw{width:100%;}
.maxh{height:100%;}
body{  image-rendering: pixelated;
  font-family:comic;
  display:flex;
  height: 98vh; }
.controlls{width:23px; height:18px; }
#songimg{
  width:80px;
  height:80px;
}
#musicplayer{ font-family:winamp; color:green; font-size:8px;  background-image: linear-gradient(to right, rgba(31, 31, 49), rgba(57, 57, 90), rgba(31, 31, 49));}
#topmusic{display:flex; flex-direction:column; padding:4px; }
.toptop{display:flex; flex-direction:row;}

#topb{width:340px; height:16px; }
.musicinput{
display: flex;
  justify-content:center;
}

#songtitle {word-wrap: break-word; color:rgba(0, 248, 0); width:90%;   overflow: hidden;
  white-space: nowrap;
    border-right:2px solid rgb(106, 106, 122);
  border-bottom:2px solid rgb(106, 106, 122);
  border-left:2px solid rgb(31, 31, 49);
  border-top:2px solid rgb(31, 31, 49);
}
#songtitle span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-text 2s linear infinite;
}
#musicplayer { width:350px; height:150px; padding:4px; }
#sidebar { flex-grow:1;}
#main {flex-grow:5;  display:flex; }
#pointer {height:30px; width:30px;}
#contents{display:flex; flex-direction:column;}

#eq1{
  width:60%;
  height:10px;
  margin-left:3px; 
  background-color:rgb(24, 146, 11);
  border-radius: 5px;
}
#eq1::-moz-range-thumb {
    width: 15px;
  height: 10px;
  background-image:url('images/buttons/scroll.png');
  background-size:cover;
  cursor: pointer;
  border-radius:0;
  border:none;
}
#eq1::-webkit-slider-thumb {
    width: 15px;
  height: 10px;
  background-image:url('images/buttons/scroll.png');
  background-size:cover;
  cursor: pointer;
  border-radius:0;
  border:none;
}
#eq2{
  width: 90%;
  height: 9px;
  background: rgba(0,0,0,0);
  overflow:visible;
}
#eq2::-moz-range-thumb {
  z-index: 20;
  width: 28px;
  height: 10px;
  background-image:url('images/buttons/time.png');
  background-size:cover;
  cursor: pointer;
  border-radius:0;
  border:none;
}
#eq2::-webkit-range-thumb {
  z-index: 20;
  width: 28px;
  height: 10px;
  background-image:url('images/buttons/time.png');
  background-size:cover;
  cursor: pointer;
  border-radius:0;
  border:none;
}