@keyframes spinAlbum {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* Main Stylization */
#music-player-wrapper
{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 60px;
  width: 350px;
  overflow: hidden;
}
#music-player
{
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 60px;
  width: 350px;
  background: #0cc;
  clip-path: polygon( 0 0, calc( 100% - 15px ) 0, 100% 15px, 100% 100%, 0 100% );
  padding: 2px;
  font-size: 12px;
  transition: all 0.15s;
  z-index: 2;
}
#music-player > .cyber-border-wrapper
{
  width: 100%;
  height: 100%;
  background: #000;
  clip-path: polygon( 0 0, calc( 100% - 15px ) 0, 100% 15px, 100% 100%, 0 100% );
}
#music-player .grid
{
  grid-template-columns: 24px 57px 14px 14px 1fr 20px;
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
  "volume album song-title song-title song-title song-title"
  "volume album musician-info musician-info musician-info musician-info"
  "volume album music-mute sound-mute playback-controls next-song";
  padding-right: 20px;
}


#album-art
{
  position: relative;
  grid-area: album;
  aspect-ratio: 1 / 1;
  border: 2px solid #666;
  margin: 3px 5px 2px 2px;
  animation: spinAlbum 6s linear infinite;
  transform-origin: 50% 50%;
  background-size: cover;
}
#playback-controls
{
  grid-area: playback-controls;
}
#music-volume
{
	grid-area: volume;
	padding: 5px 3px 5px 5px;
}


#song-volume
{
  writing-mode: vertical-lr;
  height: 100%;
  transform: scaleY( -100% );
  -webkit-appearance: none;
  height: 100%;
  width: 100%;
  background: transparent;
  border: 1px solid #14FFFF;
  overflow: hidden;
}
#song-volume:focus {
  outline: none;
}
#song-volume::-moz-range-track,
#song-volume::-webkit-slider-runnable-track,
#song-volume:focus::-webkit-slider-runnable-track
{
  background: #1D1E24;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #000;
  border-radius: 0px;
}
#song-volume::-moz-range-thumb,
#song-volume::-webkit-slider-thumb
{
  border: 1px solid #45FF8F;
  height: 12px;
  width: 12px;
  border-radius: 0px;
  background: #073;
  cursor: pointer;
  box-shadow: 0 -20px 0 20px #046; /* 2 */
}

#music-mute
{
	grid-area: music-mute;
	padding: 1px 0;
}
#music-player button
{
	border: 1px solid #0cc;
	background: rgba( 0, 0, 0, 0.01);
	cursor: pointer;
}
#music-player button svg
{
    position: relative;
	background: transparent;
	fill: #fff;
	z-index: -1;
}
#sound-mute
{
	grid-area: sound-mute;
	padding: 1px 0;
}
#song-title
{
  grid-area: song-title;
  height: 16px;
  white-space: nowrap;
  overflow: hidden;
}
#song-title > span
{
	position: relative;
	left: 0;
}
@keyframes marqueeLoop
{
	0%{ left: 100%; }
	100%{ left: -100%; }
}
#song-title:hover > span
{
	position: relative;
	animation: marqueeLoop linear 8s infinite;
}
#musician-info
{
  grid-area: musician-info;
}
#musician-label,
#musician-label:active
{
	color: #ccc;
}
#musician-label:hover
{
	color: #fff;
}
#musician-label:visited
{
	color: #aaa
}
#playback-controls
{
	position: relative;
	margin: 3px 1px 3px 0;
	grid-area: playback-controls;
	border: 1px solid #aaa;
	background: #111;
}
#playback-fill
{
	position: absolute;
	top: 0; bottom: 0;
	left: 0;
	background: #444;
}
#player-next-btn
{
  width: 19px;
}

#music-player-wrapper:hover
{
  height: 160px;
  clip-path: polygon( 0 100px, 20px 100px, 20px 0, 120px 0, 120px 100px, 100% 100px,
  100% 100%, 0 100%)
}
#album-art-image
{
  position: fixed;
  bottom: -50px;
  left: 20px;
  width: 100px;
  height: 100px;
  transition: bottom 0.15s, width 0s, height 0s;
  background: red;
}
#music-player:hover + #album-art-image
{
  bottom: 60px;
  left: 20px;
  width: 100px;
  height: 100px;
  z-index: 1;
}