.music-player
  .player-body
    a.player-btn
    svg(xmlns='http://www.w3.org/2000/svg', version='1.1')
      defs
        filter#goo
          fegaussianblur(in='SourceGraphic', stddeviation='15', result='blur')
          fecolormatrix(in='blur', mode='matrix', values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7', result='goo')
          feblend(in='SourceGraphic', in2='goo')

$background-color: #273355;

$color1: #FF217B;
$color2: #FF7878;
$color3: #FFA283;
$color4: #962A4E;
$color5: #13C2D3;

$size: 10rem;
$radius1: 2rem;
$radius2: 3rem;
$radius3: 4rem;
$radius4: 5rem;

$animtime: 2s;
$easing: cubic-bezier(0.795, 0.03, 0.685, 0.22);
$iteration: infinite;

.music-player {
  width: 100vw;
  height: 100vh;
	overflow: hidden;
  background: $background-color;
}

.player-btn {
  width: 4rem;
  height: 4rem;
  position: fixed;
  z-index: 100;
  top: calc(50% - 4rem / 2 - 2px);
  left: calc(50% - 4rem / 2 - 2px);
  border-radius: 50%;
  border: 4px solid #fff;
  opacity: 0.6;
  &::before {
		content: '';
		display: block;
		width: 0.5rem;
		height: 2rem;
		background:$color1;
		position: absolute;
    background: #fff;
		top: calc(50% - 2rem / 2);
	  left: calc(50% - 1.5rem / 2);
  }
  &::after {
		content: '';
		display: block;
		width: 0.5rem;
		height: 2rem;
		background: $color1;
		position: absolute;
    background: #fff;
		top: calc(50% - 2rem / 2);
	  left: calc(50% + 0.5rem / 2);
  }
  &:hover {
    opacity: 0.8;
    transition: 0.3s;
    cursor: pointer;
  }
}

.player-body {
  filter:url('#goo');
	width: 100%;
	height: 100%;
  position: absolute;
  top: 0;
	left: 0;
	&::after {
		content:'';
		display:block;
		width:$size;
		height:$size;
		border-radius:50%;
		background:$color1;
		position: absolute;
		top: calc(50% - 10rem / 2);
	  left: calc(50% - 10rem / 2);
  }
}
.player-drop {
    filter: url('#goo');
		position: absolute;
		border-radius: 50%;
    background: $color2;
		top: calc(50% - 2rem / 2);
	  left: calc(50% - 2rem / 2);
		animation: move $animtime $easing $iteration;
	}

@keyframes move {
	0% {
    transform: translateY(0rem);
  }
  50% {
    transform: translateY(12rem);
  }
  100% {
    transform: translateY(0rem);
  }
}

const playerBody = document.querySelector('.player-body');

let dropNum = Math.round(Math.random() * 100)
for (var i = 0; i < dropNum; i++) {
  const playerDrop = document.createElement('div');
  let sizeRand = Math.round(Math.random() * 5);
  playerDrop.classList.add('player-drop');
  playerDrop.style.width = `${sizeRand}rem`;
  playerDrop.style.height = `${sizeRand}rem`;
  playerBody.appendChild(playerDrop);
};