.now-playing-card {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    gap: 20px;
    font-family: 'Work Sans', sans-serif;
    box-shadow: 0 5px 16px #00000051;
    background-color: #121212;
    background-image: linear-gradient(#565656E6, #121212E6);
    display: flex;
  }
  
  .currenTrackImage {
    height: 300px;
    width: 300px;
    border: 1px solid #A7A7A780;
    align-self: center;
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
  }
  
  .trackInfo {
    color: #fff;
    height: 100%;
    text-align: left;
    flex: 1;
  }
  
  .trackInfo strong {
    font-size: 26px;
  }
  
  .trackInfo span {
    font-size: 14px;
    color: #ffffff99;
  }
  
  @media screen and (min-width: 200px) and (max-width: 960px) {
    .now-playing-card {
        padding: 12px;
        gap: 12px;
    }

    .currenTrackImage {
      height: 100px;
      width: 100px;
    }

    .trackInfo strong {
        font-size: 18px;
    }
  }

  .playing {
    align-self: end;
    padding-right: 2px;
  }
  
  .now.playing .bar {
    display: inline-block;
    position: relative;
    margin-right: 1px;
    width: 3px;
    height: 1px;
    overflow: hidden;
    background: linear-gradient(to bottom, #fff, #fff);
    color: transparent;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  .paused.playing .bar {
    animation-iteration-count: 1;
  }
  .n1 {
    animation-delay: 0.5s;
  }
  .n2 {
    animation-delay: 0.2s;
  }
  .n3 {
    animation-delay: 1.2s;
  }
  .n4 {
    animation-delay: 0.9s;
  }
  
  @keyframes pulse {
    0% {
      height: 1px;
      margin-top: 0;
    }
    10% {
      height: 20px;
      margin-top: -20px;
    }
    50% {
      height: 10px;
      margin-top: -10px;
    }
    60% {
      height: 15px;
      margin-top: -15px;
    }
    80% {
      height: 30px;
      margin-top: -30px;
    }
    100% {
      height: 1px;
      margin-top: 0;
    }
  }