.music {
  position: fixed;
  top: 2rem;
  left: 3rem;
}

.hide {
  display: none;
}

.music button {
  border: none;
  background: none;
  cursor: pointer;
}

.music button svg {
  width: 4rem;
  height: auto;
}

.music button:nth-child(1) {
  background-color: none;
  animation: pulse 4s infinite;
}
.music button:nth-child(1) svg path {
  fill: hsl(var(--hue), 91%, 35%);;
}

.music button:nth-child(2) {
  background-color: none;
  animation: rotate 0.3s;
}
.music button:nth-child(2) svg path {
  fill: hsl(var(--hue), 91%, 25%);
}


@keyframes rotate {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0);
  }  
}

@keyframes pulse {
  0% {
    transform: scale(1.1);
  }
  15% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.7);
  }
  50% {
    transform: scale(1);
  }
  70% {
    transform: scale(0.8);
  }
  95% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }  
}


/* DESKTOP */
@media (min-width:1100px) {
  .music {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
  }
  .music button svg {
    width: auto;
    height: auto;
  }
}