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

body {
  background: #0E0E14;
  background: -webkit-linear-gradient(right, #0E0E14, #28283D);
  background: linear-gradient(to left, #0E0E14, #28283D);
}


@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@keyframes wave {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.music-card {
  margin: auto;
  background: #fff;
  box-shadow: 9px 7px 37px -6px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  position: relative;
  width: 400px;
  height: 700px;
}

.image {
  background: url("../assets/tree.png") no-repeat 75%;
  background-size: cover;
  position: absolute;
  z-index: 1;
  opacity: 0.8;
  height: 400px;
  width: 400px;
}

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

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

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

.playing .wave {
  border-radius: 40%;
  -webkit-animation: wave 3000ms infinite linear;
  animation: wave 3000ms infinite linear;
}

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

.playing .wave:nth-child(2) {
  -webkit-animation-duration: 4000ms;
  animation-duration: 4000ms;
}

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

.playing .wave:nth-child(3) {
  -webkit-animation-duration: 5000ms;
  animation-duration: 5000ms;
}

/* when stop */
.wave:nth-child(3) {
  -webkit-animation-duration: 45s;
  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;
}

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

.fa-play {
  display: none;
}