@media (max-width: 1440px) {
  .play-now span {
    display: none;
  }
  .play-now img {
    height: 1.8rem;
    width: 1.8rem;
  }
  .play-now {
    padding: 1.2rem;
    border-radius: 50%;
  }
  li .song-name {
    width: 8rem;
  }
  .song-list ul li {
    padding: 1.2rem;
    gap: 1.2rem;
  }
  .artist {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 10rem;
  }
  div a span {
    display: none;
  }
  .song-list ul {
    max-height: 50vh;
  }
  .footer {
    padding: 0 !important;
  }
  .card-container {
    width: 23rem;
  }
}

@media (max-width: 1124px) {
  html {
    font-size: 50%;
  }
  .song-list ul li .play-now {
    display: none;
  }
  .song-list ul li {
    justify-content: center;
    gap: 3.2rem;
  }
  .card-container {
    width: 21rem;
  }

  @media (max-width: 850px) {
    html {
      font-size: 40%;
    }
    .nav {
      display: none !important;
    }
    .home-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header {
      padding: 0.7em;
      border-radius: 0.7rem;
      justify-content: flex-end;
    }
    .card-container {
      width: 34rem;
    }
    .card-container h2 {
      font-size: 2rem;
    }
    .card-container p {
      font-size: 1.8rem;
    }
    .playbar {
      border-radius: 0.7rem;
    }
    .home-wrapper ul li span {
      display: none;
    }
    .hambar-wrapper {
      display: flex;
    }
    div a span {
      display: block;
    }
    .song-list ul {
      max-height: 60vh;
    }
    .song-list ul li .play-now {
      display: flex;
    }
    .library-wrapper div p {
      display: flex !important;
    }
    .header {
      justify-content: space-between;
    }
    .right-container {
      display: flex;
      width: 100vw;
      margin-left: 1rem;
    }
    .left-container {
      background-color: #151515;
      position: absolute;
      top: 0;
      transform: translateX(-200%);
      z-index: 99;
      width: 80vw;
      height: 100vh;
      justify-content: center;
      margin: 0;
    }
    .home-wrapper ul {
      flex-direction: row;
    }
    .song-list ul li {
      justify-content: space-between;
    }
    .default-hidden {
      display: flex;
    }
    .card-container img {
      height: 40rem;
    }
    .card-wrapper {
      justify-content: center;
    }
  }
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }
  .card-wrapper::-webkit-scrollbar {
    width: 8px;
  }
  .card-container {
    width: 33rem;
  }
  .song-time span {
    font-size: 1.2rem;
  }
  .song-time {
    width: 10rem;
  }
  .song-info p {
    font-size: 1.6rem;
  }
  .song-info {
    width: 10rem;
  }
  .song-info img {
    width: 2rem;
    height: 3rem;
  }
  .upper-playbar {
    justify-content: space-between;
  }
}