<div class="container">
  <div class="iphone neu">
    <div class="title">
      <div><i class="fas fa-chevron-left"></i></div>
      <div>NOW PLAYING</div>
      <div><i class="fas fa-ellipsis-v"></i></div>
    </div>
    <div class="album-cover">
      <div class="album-overlay"></div>
      <img src="https://images-na.ssl-images-amazon.com/images/I/810GyyWObmL._SL1400_.jpg" alt="">
      <h2 class="song-title">
        Redbone
      </h2>
      <h3 class="artist-title">
        Childish Gambino
      </h3>
    </div>
    <div class="buttons">
          <button class="btn lg red neu"><i class="fas fa-heart"></i></button>
          <button class="btn lg neu"><i class="fas fa-backward"></i></button>
          <button class="btn lg neu"><i class="fas fa-play"></i></button>
          <button class="btn lg neu"><i class="fas fa-forward"></i></button>
      </div>
    <div class="track neu">
      <div></div>
    </div>
    <div class="lyrics">
      <i class="fas fa-angle-up"></i>
      <span>LYRICS</span>
    </div>
  </div>
</div>

$background-gray: #e0e5ec;
$gray: #7e8a98;
$dark-gray: darken(#7e8a98, 10%);
$red: #e22d49;
$track: #3fbbe9;

@mixin reverse-neu {
  box-shadow: inset -5px -5px 15px 0px #ffffff9e,
    inset 5px 5px 15px 0px #a3b1c6a8;
}

body {
  padding: 0;
  margin: 0;
  background: $background-gray;
  font-family: "Roboto", sans-serif;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iphone {
  width: 312px;
  height: 612px;
  background: $background-gray;
  border-radius: 2em;
  box-sizing: border-box;
  padding: 2em;
  display: flex;
  flex-direction: column;
  .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.75em;
    margin-bottom: 2em;
  }
  .album-cover {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .album-overlay {
      background: #fff;
      width: 248px;
      height: 248px;
      z-index: 2;
      border-radius: 15px;
      position: absolute;
      opacity: 0.35;
      -webkit-clip-path: ellipse(61% 64% at 82% 56%);
clip-path: ellipse(61% 64% at 82% 56%);
    }
    img {
      width: 100%;
      border-radius: 15px;
    }
    .song-title {
      text-align: center;
      padding-bottom: 0;
      margin-bottom: 0;
      color: $dark-gray;
    }
    .artist-title {
      text-align: center;
      padding: 1em 0;
      margin: 0;
      font-size: 0.85em;
      color: $dark-gray;
    }
  }

  .track {
    margin-top: 1em;
    height: 10px;
    div {
      width: 42%;
      height: 100%;
      background: $gray;
      opacity: 0.75;
      border-radius: 15px;
    }
  }

  .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 1em 0;
  }

  .lyrics {
    color: $gray;
    margin-top: 2em;
    text-align: center;
    font-size: 0.75em;
    display: flex;
    flex-direction: column;
  }
}

.neu {
  box-shadow: -5px -5px 15px 0px #ffffff9e, 5px 5px 15px 0px #a3b1c6a8;
  background: $background-gray;
  border-radius: 2em;
  border: 0;
}

.btn {
  padding: 15px;
  border-radius: 30px;
  color: $gray;
  outline: none;
  cursor: pointer;
  &.lg {
    font-size: 1em;
  }
  &:active {
    cursor: pointer;
    @include reverse-neu;
  }
}

.red {
  color: $red;
}