@import 'https://fonts.googleapis.com/css?family=Reem+Kufi';

body {
  background: #fff;
}


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

.music-card {
  margin: 100px auto;
  background: #fff;
  box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 500px;
  border-radius: 6px;
}

.image {
  background: url('http://static1.squarespace.com/static/530b728de4b04fc9b23a5988/t/569880381a5203aa7d44c1a8/1452834873397/00.jpg?format=1000w') no-repeat 75%;
  background-size: cover;  
  position: absolute;
  z-index: 1;
  opacity: 0.3;
  height: 300px;
  width: 300px;
}

.image:after {
  height: 100px;
  content: '';
  top: 200px;
  position: absolute;
  width: 100%;
  z-index: 1;
  background: linear-gradient(rgba(9, 2, 4, 0), #444);
}

.wave {
  position: absolute;
  height: 750px;
  width: 750px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -70%;
  margin-top: -130%;
  background: radial-gradient(#353535, #383737);
}

.wave:nth-child(2),
.wave:nth-child(3) {
  top: 10px;
}

.playing .wave {
  border-radius: 40%;
  animation: wave 3000ms infinite linear;
}
/* when stop */
.wave {
  border-radius: 40%;
  animation: wave 55s infinite linear;
}

.playing .wave:nth-child(2) {
  animation-duration: 4000ms;
}
/* when stop */
.wave:nth-child(2) {
  animation-duration: 50s;
}

.playing .wave:nth-child(3) {
  animation-duration: 5000ms;
}
/* when stop */
.wave:nth-child(3) {
  animation-duration: 45s;
}

.info {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
}

.title {
  font-size: 1.4em;
  font-weight: 400;
  color: #333;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-family: 'Reem Kufi', sans-serif;
}

.artist {
  color: #cfcfcf;
  font-size: 1.2em;
  letter-spacing: 0.08em;
  font-family: 'Reem Kufi', sans-serif;
  margin-top: -10px;
}

.fa {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 18px;
  cursor: pointer;
  color: #555;
}

.fa-play {
  display: none;
}

var audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/Lecrae_-_Anomaly_(Lyric_Video).mp3');
audio.volume = 0.1;
audio.autoplay = true;

$('.trigger').click(function() {
  if (audio.paused == false) {
      audio.pause();
      $('.fa-play').show();
      $('.fa-pause').hide();
      $('.music-card').removeClass('playing');
  } else {
      audio.play();
      $('.fa-pause').show();
      $('.fa-play').hide();
      $('.music-card').addClass('playing');
  }
});