* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
} 

body {
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Roboto', sans-serif;
}

body:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .5;
}

body.fade-out:before {
  animation: fade-out 1s linear forwards;
}

@keyframes fade-out {
  0% {

    opacity: .5;
  }
  50% {

    opacity: 1;
  }
  100% {

    opacity: .5;
  }
}

.playlist-hidden,
.playlist .playlist-visible {
  opacity: 1;
  transition: opacity 1s linear;
}

.playlist .playlist-hidden,
.playlist-visible {
  opacity: 0;
}

.playlist-lines {
  stroke-width: 0;
  transition-property: stroke-dashoffset;
  transition-timing-function: linear;
}

.playlist .playlist-lines {
  stroke-width: 1px;
}

.playlist .playlist-top-line {
  cursor: pointer
}

.playlist.hide-controls .playlist-hidden {
  display: none;
}

.player {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-height:80%;
}

.player circle,
.player line {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
}

.player .progress {
  stroke-width: 3px;
  transition-timing-function: linear;
  transform: translate(0%, 100%) rotate(-90deg);
}

.player .progress-bg,
.player .center-circle {
  transition-duration: 1s;
  transition-property: stroke-dashoffset;
  transition-timing-function: linear;
  transform: translate(0%, 100%) rotate(-90deg);
}

.player .center-circle {
  transition-duration: .9s;
}

.icon {
  cursor: pointer;
  pointer-events: all;
  transition: opacity 1s linear;
}

svg text {
  fill: #fff;
  transition: opacity 1s linear;
  font-size: 60px;
}

.playlist-container {
  display: none;
  opacity: 0;
}

.playlist-container .track-container {
  cursor: pointer;
}
.playlist.playlist .playlist-container {
  display: block;
  opacity: 0;
}

.playlist.playlist.hide-controls .playlist-container {
  opacity: 1;
}

.seeker {
  cursor: pointer;
}

.seeker-overlay {
  stroke-opacity: 0;
  cursor: default;
}

.track-author,
.track-title {
  font-size: 20px;
}

.track-title {
  font-weight: bold;
}

.playlist .playlist-lines line,
.playlist .playlist-progress {
  animation: expand-from-centre .5s linear forwards;
  animation-delay: .5s;
  stroke-width: 0;
}
.playlist .playlist-progress {
  animation-delay: 1s;
  transition: none;
}

.playlist.hide-controls .playlist-progress {
  animation: none;
  stroke-width: 3px;
  transition-duration: 1s;
  opacity: 1;
  transition-property: stroke-dashoffset;
  transition-timing-function: linear;
}

@keyframes expand-from-centre
{
  0% {
    stroke-width: 0;
    stroke-dasharray: 0 600;
    stroke-dashoffset: -300;
  }
  
  100% {
    stroke-width: 1px;
    stroke-dasharray: 600 600;
    stroke-dashoffset: 0;
  }
}