/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }

  .hero-title {
    font-size: 4rem;
  }

  .full-music-player-background {
    width: 115rem !important;
    /* height: 30rem; */
  }

  .full-music-player-box {
    width: 100rem !important;
    column-gap: 2rem !important;
    /* height: 40rem !important; */
  }

  .full-img-now img {
    width: 30rem !important;
    height: 26rem !important;
  }
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
  html {
    /* 9px / 16px  */
    font-size: 56.25%;
  }

  .full-music-player-background {
    width: 100rem !important;
  }

  .full-music-player-box {
    width: 90rem !important;
  }

  #volume2 {
    display: none !important;
  }

  .full-img-now img {
    width: 25rem !important;
    height: 24rem !important;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }

  .hero-title {
    font-size: 3.6rem !important;
  }

  /* MOBILE MUSIC PLAYER */

  .img-now {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    width: 100rem !important;
    margin-top: 15rem !important;
    /* margin-bottom: 2rem; */
  }

  .track-description {
    margin-bottom: 11rem;
  }

  .progress {
    width: 70rem !important;
  }

  .volume {
    display: none;
  }

  .time {
    display: none !important;
  }

  .time-mobile {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 64rem;
  }

  .player-cover {
    width: 100% !important;
    height: 30rem !important;
  }

  .controls {
    flex-direction: column;
    gap: 2rem !important;
  }

  .control-button {
    display: none !important;
  }

  .control-button-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6rem !important;
    margin-top: 0.3rem;
  }

  .control-button-mobile button {
    border-radius: 9999rem;
  }

  .next-prev-svg {
    fill: #f5fafa;
  }

  .playBtn-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 10rem; */
    height: 12rem !important;
    width: 12rem !important;
  }

  .music-player-background {
    height: 72rem !important;
  }

  .prev svg,
  .next svg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    stroke: transparent;
    fill: rgb(228, 235, 252);
  }

  .tracklist-box {
    margin-top: 2rem;
  }

  .section-player {
    margin-bottom: 5rem;
  }

  /* FULL SCREEN MOBILE PLAYER */

  .full-music-player-box {
    display: none !important;
  }

  .full-music-player-box-mobile {
    display: flex !important;
  }

  .full-mobile-music-player-background {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50rem;
    border-radius: 0.8rem;
    background-color: rgba(37, 37, 37, 0.9);
  }

  .close-btn {
    z-index: 999999999999999999;
  }

  .mobile-full-screen-btn-close button {
    position: absolute;
    top: 2.4rem !important;
    right: 2.4rem !important;
  }

  .close-svg {
    stroke: #f5fafa !important;
    z-index: 999;
  }

  .music-player-background.full-mobile {
    background-color: rgba(6, 6, 6, 0.9) !important;
  }
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
  .hero-title {
    font-size: 3rem !important;
  }

  .progress {
    width: 55rem !important;
  }

  .time-mobile {
    gap: 50rem;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
  .hero-title {
    text-align: center !important;
  }

  .progress {
    width: 35rem !important;
  }

  .time-mobile {
    gap: 30rem;
  }

  .music-player-background {
    background-color: transparent !important;
    height: 70rem !important;
  }

  .img-now {
    margin-top: 10rem !important;
  }

  .section-player {
    background-color: var(--music-player-color);
    height: 66rem !important;
  }

  .control-button-mobile {
    gap: 4.4rem !important;
  }

  .playBtn-mobile {
    width: 9rem !important;
    height: 9rem !important;
  }

  .list {
    font-size: 1.8rem !important;
  }

  .music-input {
    height: 0.2rem !important;
  }

  .tracklist-box {
    margin-top: 0.1rem !important;
    width: 37rem !important;
  }

  .full-screen-btn-container {
    position: absolute;
    /* top: 0.6rem; */
    right: -1rem !important;
  }
}