html {
  width: 100%;
  height: 100%;  
  overflow: hidden;
  padding: 0;
  margin: 0;
  outline: 0;
}

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", "Futura", "Trebuchet MS", Arial;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  background:center center fixed no-repeat #ededed;
  background-size:cover;
}

/* Top Info */
#title {
  position: absolute;
  width: 100%;
  top: 3%;
  line-height: 34px;
  height: 34px;
  text-align: center;
  font-size: 34px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#artist{
  color: #fff;
  font-size: 18px;
  text-align:center;
  margin:8px,auto;
}
#timer {
  position: absolute;
  top: 0;
  left: 3%;
  text-align: left;
  font-size: 26px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#duration {
  position: absolute;
  top: 0;
  right: 3%;
  text-align: right;
  font-size: 26px;
  opacity: 0.5;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#post {
  text-align:left;
  padding:20px;
  font-size: 18px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
/* Controls */
.controlsOuter {
  position: absolute;
  width: 100%;
  height: 70px;
  bottom: 3%;
}
.controlsInner {
  position: absolute;
  width: 340px;
  height: 70px;
  left: 50%;
  margin: 0 -170px;
}
.btn {
  position: absolute;
  cursor: pointer;
  opacity: 0.9;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover {
  opacity: 1;
}
#playBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z'/%3E%3C/svg%3E");
  width: 70px;
  height: 70px;
  left: 50%;
  margin: auto -34.5px;
}
#pauseBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM224 192V320c0 17.7-14.3 32-32 32s-32-14.3-32-32V192c0-17.7 14.3-32 32-32s32 14.3 32 32zm128 0V320c0 17.7-14.3 32-32 32s-32-14.3-32-32V192c0-17.7 14.3-32 32-32s32 14.3 32 32z'/%3E%3C/svg%3E");
  width: 70px;
  height: 70px;
  left: 50%;
  margin: auto -34.5px;
  display: none;
}
#prevBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M267.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160L64 241V96c0-17.7-14.3-32-32-32S0 78.3 0 96V416c0 17.7 14.3 32 32 32s32-14.3 32-32V271l11.5 9.6 192 160z'/%3E%3C/svg%3E");
  width: 22px;
  height: 35px;
  left: 24%;
  top: 50%;
  margin: -17.5px auto;
}
#nextBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241V96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V271l-11.5 9.6-192 160z'/%3E%3C/svg%3E");
  width: 22px;
  height: 35px;
  right: 24%;
  top: 50%;
  margin: -17.5px auto;
}
#playlistBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 660 660'%3E%3Cpath fill='%23fff' d='M544.8 32.5c-70.5 23.5-73.4 24.8-80.2 34.2C456.3 78.1 457 60 457 272c0 103.4-.38 188-.8 188-.5 0-3.4-.9-6.4-1.9-28.4-9.8-73.4-9.8-107.2-.1-52 15-85 50.6-85 92 0 67 86.7 113.7 178 95.5 51.6-10.3 86.3-37.6 98.4-77.5 1.5-5 1.7-21.2 2.2-187.5l.5-182 47.5-16c57.4-19.4 58.7-20 65.8-31 6.2-9.7 6.3-11 6-64L655.5 39.5l-3-6.5c-6.5-13.7-17.9-21-33.4-21.7l-9.5-.4-64.7 21.6M51 90.6c-22.6 3.6-35 20-33.7 43.4 1.3 18.6 14.1 32.2 33 35 8.2 1.2 284.3 1.2 292.5 0 20.3-3 33.2-18.1 33.2-39 0-18.1-9.5-31.6-27-38.2-3.3-1.25-290.5-2.4-298-1.2m0 160C30 254 17 269 17 290c0 21 13 36.1 33.2 39 8.2 1.2 284.3 1.2 292.5 0 20.3-3 33.2-18 33.2-39 0-18.1-9.5-31.6-27-38.2-3.3-1.25-290.5-2.4-298-1.2m0 160C29.8 414.1 17 428.9 17 450c0 21 13 36 33.2 39 8.1 1.2 124.4 1.2 132.5 0 41.2-6 45.8-62.6 6.258-77.2-3.4-1.238-131-2.4-138-1.2'/%3E%3C/svg%3E");
  width: 35px;
  height: 35px;
  top: 50%;
  left: 5%;
  margin: -17.5px auto;
}
#postBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");  width: 35px;
  height: 35px;
  top: 50%;
  left: calc(5% + 80px);
  margin: -17.5px auto;
}
#waveBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23fff' d='M128 64c0-17.7 14.3-32 32-32H320c17.7 0 32 14.3 32 32V416h96V256c0-17.7 14.3-32 32-32H608c17.7 0 32 14.3 32 32s-14.3 32-32 32H512V448c0 17.7-14.3 32-32 32H320c-17.7 0-32-14.3-32-32V96H192V256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h96V64z'/%3E%3C/svg%3E");
  width: 44px;
  height: 35px;
  top: 50%;
  right: calc(5% + 80px);
  margin: -17.5px auto;
}
#volumeBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM412.6 181.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5z'/%3E%3C/svg%3E");
  width: 35px;
  height: 35px;
  top: 50%;
  right: 5%;
  margin: -17.5px auto;
}

/* Progress */
#progressBar {
  width: 100%;
  height: 30%;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -15% auto;
  display: none;
  cursor: pointer;
  opacity: 0.8;
  -webkit-user-select: none;
  user-select: none;
}
#progressBar:hover {
  opacity: 1;
}
#progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: -1;
}
#waveCanvas{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Loading */
#loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  display: none;
}
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Plylist */
#playlist {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
#list {
  width: 100%;
  height: 80%;
  position: absolute;
  overflow: auto;
  top: 20%;
  left: 0;
}
.list-song {
  width: 100%;
  height: 60px;
  font-size: 30px;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  white-space:nowrap;
}
.list-song:hover {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

/* Volume */
#volume {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  touch-action: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: none;
}
.bar {
  position: absolute;
  top: 50%;
  left: 5%;
  margin: -5px auto;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#barEmpty {
  width: 90%;
  opacity: 0.5;
  box-shadow: none;
  cursor: pointer;
}
#barFull {
  width: 90%;
}
#sliderBtn {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 93.25%;
  margin: -25px auto;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
  border-radius: 25px;
  cursor: pointer;
}

/* Fade-In */
.fadeout {
  webkit-animation: fadeout 0.5s;
  -ms-animation: fadeout 0.5s;
  animation: fadeout 0.5s;
}
.fadein {
  webkit-animation: fadein 0.5s;
  -ms-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-ms-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media screen and (max-width: 600px) {
#track{display: none;}
#artist{display: none;}
#postBtn{left:5%;margin: -80px auto;}
#waveBtn{right:5%;margin: -80px auto;}
}