body {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#0B4C5F));
  background: -moz-linear-gradient(0 0 270deg, #000, #0B4C5F);
  background: linear-gradient(#000, #0B4C5F);
  background: -o-linear-gradient(#000, #0B4C5F)
  color:#FFFFFF;
  padding:3px;
  font-family:Arial;
  font-face:Arial;
  border:4px outset #2ECCFA;
  border-radius:75px;
z-index:2;
}
.cover {
width:250px;
height:250px;
border:4px outset #2ECCFA;
}
.topleft {
position:fixed;
top:45%;
right:7%;
z-index:1000;
}
html {
  color:#FFFFFF;
  padding:3px;
  font-family:Arial;
  font-face:Arial;
  border-radius:10px;
  border:4px outset #2ECCFA;
  background-color:#0A1B2A;
}
.header {
  position:fixed; 
  top:0;
  left:0;
  right:0;
  text-align:center;
  color:#01A9DB;
  font-size:35px;
  padding:10px;
  padding-top:6%;
  font-family:Arial;
  font-face:Arial;
z-index:10;
}
.page {
  position:fixed;
  top:5%;
  left:0;
  right:0;
  font-family:Arial;
  font-face:Arial;
}
.player {
  position:fixed;
  bottom:35;
  left:0;
  right:0;
  font-size:25px;
  color:#01A9DB;
  font-family:Arial;
  font-face:Arial;

z-index:10;

}
.img {
  width:40px;
  height:40px;
z-index:10;
}
.but {
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  font-size:30px;
  color:#F2F2F2;
  text-decoration:none;
  position:fixed;
  left:2%;
  top:32%;
  right:2%;
  text-align:center;
  font-family:Arial;
  font-face:Arial;
  font-weight:bold;
  overflow-y:hidden;
  overflow-x:hidden;
  border-radius:75px;
  font-family:Arial;
  font-face:Arial;
z-index:10;
}
.playing {
  position:fixed;
  top:48%;
  left:0;
  right:0;
  text-align:center;
  font-family:Arial;
  font-face:Arial;
  color:#FFFFFF;
  font-size:27px;
  z-index:100;
  text-align:center;
  font-family:Arial;
  font-face:Arial;
z-index:10;
}
.offline {
  color:#DF0101;
}
.off {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#8A0808), to(#DF0101));
  background: -moz-linear-gradient(0 0 270deg, #8A0808, #DF0101);
  background: linear-gradient(#8A0808, #DF0101);
  background: -o-linear-gradient(#8A0808, #DF0101)
  border:2px solid #FF0000;
}

.on {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#0B610B), to(#088A08));
  background: -moz-linear-gradient(0 0 270deg, #0B610B, #088A08);
  background: linear-gradient(#0B610B, #088A08);
  background: -o-linear-gradient(#0B610B, #088A08)
  border:2px solid #00FF00;
}

.ar {
  text-decoration:none;
  color:transparent;
}
.volume1 {
position:fixed;
top:58%;
right:10%;
height:10px;
color:#FFFFFF;
}
.footer {
position:fixed;
bottom:0;
left:0;
right:0;
padding:13px;
text-align:center;
}
.durl {
font-size:18px;
color:#FFFFFF;
text-decoration:none;
font-family:Arial;
font-face:Arial;
}
.durl:hover {
color:#FF0000;
}
.none {
color:#0B0B3B;
border-left-top-radius:125px;
border-left-bottom-radius:125px;
z-index:1;

}
.pulse {
color:#04B486;
border-right-top-radius:125px;
border-right-bottom-radius:125px;
z-index:1;

}
.bar {
padding-left:1px;
padding-right:1px;
font-size:40px;
font-weight:bold;
z-index:2;

}
.bars {
background-color:#0489B1;
z-index:1;
position:fixed;
left:20%;
width:728px;
min-width:728px;
top:60%;
border-radius:125px;
border:4px outset #2ECCFA;
position: fixed;
left: calc(50% - 364px);
text-align: center;
}
.sspace {
    content: "";
    margin: 0.28em;
    margin-bottom: -1px; 
display: flex;
text-overflow: clip;
white-space: nowrap;
}