* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Circular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}

.hidden {
  display: none !important;
}

.main-body {
  background: linear-gradient(to bottom, #222, #000);
  display: grid;
  grid-template-columns: 1fr 350px;
}

.player-box {
  background: #121212;
  background: linear-gradient(to bottom, #222, #121212 60%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  padding: 2.5rem;
}

.img-display-container {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}

.img-display {
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 3;
}

#img {
  aspect-ratio: 1/1;
  border-radius: 12px;
  border: 1px solid #fff;
  box-shadow: 0 8px 1rem rgba(0, 0, 0, 0.5);
  max-width: 80%;
  width: 300px;
}

.bg-blur-display {
  position: absolute;
  inset: 0;
  width: 100%;
  filter: blur(40px);
  z-index: 1;
}

@keyframes l9 {
  0%,to {clip-path: shape(from 88.17% 44.57%,curve to 83.91% 54.42% with 80.53% 50.00%,curve to 87.09% 63.68% with 87.29% 58.84%,curve to 82.15% 70.76% with 86.89% 68.52%,curve to 78.45% 81.30% with 77.42% 73.00%,curve to 73.45% 89.98% with 79.48% 89.60%,curve to 62.06% 89.23% with 67.41% 90.37%,curve to 52.45% 84.62% with 56.72% 88.09%,curve to 43.33% 84.81% with 48.19% 81.14%,curve to 35.31% 84.71% with 38.48% 88.49%,curve to 27.93% 79.39% with 32.14% 80.93%,curve to 23.86% 72.48% with 23.73% 77.85%,curve to 21.30% 64.27% with 23.99% 67.11%,curve to 20.07% 57.38% with 18.60% 61.43%,curve to 13.68% 49.08% with 21.53% 53.33%,curve to 11.55% 41.46% with 5.84% 44.84%,curve to 13.34% 30.70% with 17.26% 38.08%,curve to 13.91% 19.90% with 9.42% 23.31%,curve to 25.30% 17.85% with 18.39% 16.50%,curve to 34.95% 14.04% with 32.22% 19.20%,curve to 42.89% 13.03% with 37.69% 8.89%,curve to 52.68% 12.97% with 48.09% 17.17%,curve to 59.46% 15.87% with 57.27% 8.77%,curve to 66.23% 22.52% with 61.66% 22.97%,curve to 78.26% 21.04% with 70.80% 22.07%,curve to 85.25% 26.28% with 85.73% 20.02%,curve to 90.29% 35.84% with 84.77% 32.54%,curve to 88.17% 44.57% with 95.81% 39.14%)};
  34% {clip-path: shape(from 85.64% 45.40%,curve to 80.17% 53.30% with 82.48% 50.00%,curve to 83.85% 63.31% with 77.85% 56.60%,curve to 84.76% 72.45% with 89.85% 70.01%,curve to 76.40% 77.98% with 79.67% 74.90%,curve to 67.03% 78.20% with 73.13% 81.07%,curve to 57.66% 75.10% with 60.93% 75.33%,curve to 51.01% 82.71% with 54.39% 74.88%,curve to 43.15% 89.22% with 47.64% 90.54%,curve to 36.03% 83.32% with 38.66% 87.89%,curve to 32.48% 74.15% with 33.40% 78.75%,curve to 25.78% 69.64% with 31.55% 69.55%,curve to 15.32% 67.02% with 20.02% 69.72%,curve to 9.98% 59.54% with 10.63% 64.33%,curve to 6.34% 49.65% with 9.34% 54.75%,curve to 6.78% 40.03% with 3.35% 44.55%,curve to 12.58% 31.23% with 10.20% 35.52%,curve to 20.32% 25.59% with 14.95% 26.95%,curve to 28.84% 21.52% with 25.69% 24.23%,curve to 36.55% 19.54% with 31.99% 18.80%,curve to 44.10% 10.28% with 41.10% 20.28%,curve to 52.59% 2.25% with 47.10% 0.29%,curve to 62.64% 7.16% with 58.07% 4.21%,curve to 69.87% 14.93% with 67.20% 10.12%,curve to 72.61% 25.35% with 72.53% 19.74%,curve to 82.58% 29.82% with 72.68% 30.97%,curve to 90.63% 34.74% with 92.47% 28.67%,curve to 85.64% 45.40% with 88.80% 40.81%)};
  66% {clip-path: shape(from 80.52% 46.38%,curve to 85.67% 54.84% with 80.51% 50.00%,curve to 91.15% 65.25% with 90.83% 59.68%,curve to 85.18% 72.53% with 91.47% 70.83%,curve to 73.79% 74.67% with 78.89% 74.24%,curve to 66.02% 78.04% with 68.68% 75.10%,curve to 60.09% 84.80% with 63.36% 80.98%,curve to 52.27% 88.84% with 56.81% 88.61%,curve to 42.62% 90.39% with 47.72% 89.08%,curve to 31.93% 91.34% with 37.51% 91.71%,curve to 26.73% 82.61% with 26.34% 90.97%,curve to 25.77% 70.54% with 27.12% 74.25%,curve to 25.58% 62.64% with 24.43% 66.82%,curve to 15.08% 56.96% with 26.74% 58.47%,curve to 3.72% 50.03% with 3.42% 55.44%,curve to 8.59% 40.61% with 4.01% 44.62%,curve to 19.65% 35.45% with 13.17% 36.60%,curve to 28.19% 31.69% with 26.13% 34.30%,curve to 31.99% 25.44% with 30.26% 29.08%,curve to 35.50% 14.65% with 33.71% 21.79%,curve to 42.72% 12.88% with 37.28% 7.51%,curve to 53.41% 9.55% with 48.15% 18.24%,curve to 62.85% 5.68% with 58.66% 0.86%,curve to 69.97% 14.87% with 67.04% 10.50%,curve to 76.95% 21.61% with 72.90% 19.24%,curve to 79.46% 29.98% with 81.00% 23.98%,curve to 79.23% 39.37% with 77.93% 35.98%,curve to 80.52% 46.38% with 80.53% 42.76%)};
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg-blur-display div {
  background: #000;
  position: absolute;
  background-size: cover;
  background-position: center;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  scale: 1.5;
  border-radius: 3rem;
  width: 70%;
  max-width: 180px;
  height: 100%;
  mix-blend-mode: screen;
  z-index: -3;
}

.bg-blur-display div:nth-child(1) {
  animation: rotation 11s linear infinite , l9 2s infinite linear;
}

.bg-blur-display div:nth-child(2) {
  animation: rotation 11s linear reverse infinite , l9 2s infinite linear;
}

.bg-blur-display div:nth-child(3) {
  animation: rotation 9s ease 1.8s infinite , l9 2s infinite linear;
}

.artist-box,
#artist {
  color: rgba(255, 255, 255, 0.5);
}

.pB {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.volume-icons {
  display: flex;
  justify-content: space-between;
  padding: 0 3rem;
}

#progressBarContainer,
#volumnBarContainer {
  display: flex;
  background: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  height: 6px;
  border-radius: 99px;
  margin: 10px 0;
  overflow: hidden;
}

#volumnBarContainer {
  margin: 10px 40px;
}

#progressBar,
#volumnBar {
  width: 0%;
  height: 6px;
  background-color: #1db954;
  transition: width 0.1s linear;
}

#progressBarContainer:hover,
#volumnBarContainer:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

#progressBarContainer:hover #progressBar,
#volumnBarContainer:hover #volumnBar {
  background-color: #22ea68;
}

#volumnBar {
  width: 100%;
}

.duration-box {
  align-self: flex-end;
}

.btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

button {
  background: transparent;
  border: none;
  color: #b3b3b3;
  font-weight: bold;
  transition: all 0.2s;
}

button:hover:not(:disabled) {
  color: #fff;
  transform: scale(1.05);
}

#playStopBtn {
  background-color: #fff;
  color: #000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#playStopBtn:hover {
  background-color: #1ed760;
}

.btns button i {
  font-size: 1.2rem;
}

#playStopBtn i {
  font-size: 1.5rem;
  margin-left: 3px;
}

.fa-pause {
  margin-left: 0 !important;
}

#shuffleBtn i {
  font-size: 1.2rem;
}

.clickable {
  cursor: pointer !important;
  opacity: 1 !important;
}

#reload {
  color: #fff;
  background: #000;
  width: 100%;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

#reload button {
  opacity: 1;
  font-size: x-large;
  cursor: pointer;
  padding: 1rem;
  border-radius: 10px;
  background-color: rgba(250, 250, 250, 0.2);
  color: #fff;
}

.highlight {
  background-color: rgb(43, 167, 64) !important;
}

.highlight h4 {
  color: #fff !important;
}

.highlight span {
  color: rgba(250, 255, 255, 1) !important;
}

#playListContainer {
  background-color: aqua;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#playListBox {
  overflow-y: scroll;
}

#playListContainer {
  background-color: #121212;
  border-radius: 8px;
}

.shuffle-box {
  background-color: rgba(250, 255, 255, 0.1);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

#shuffleBtn {
  background: #1db954;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
}

@keyframes downMovement {
  0%,
  100% {
    transform: translateY(-18px);
    opacity: 0;
  }
  50% {
    transform: translateY(10px);
    opacity: 1;
  }
}

.down-movement-for-user {
  display: none;
  scale: 1.1;
  animation: downMovement 1.2s ease-out infinite;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1rem;
}

li {
  display: flex;
  align-items: center;
  padding: 8px 8px 4px 14px;
  cursor: pointer;
  gap: 14px;
  border-radius: 10px;
  overflow: hidden;
}

li:nth-child(2n) {
  background-color: rgba(255, 255, 255, 0.05);
}

li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

li div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

li h4 {
  font-size: medium;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.8);
}

li span {
  font-size: small;
  color: rgba(255, 255, 255, 0.5);
  max-width: 200px;
  display: inline-block;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

li img {
  width: 50px;
  border-radius: 4px;
}

@media (max-width: 786px) {
  .main-body {
    grid-template-columns: 1fr;
  }
  #playListContainer {
    height: 90dvh;
  }

  .player-box {
    max-height: 90dvh;
  }

  .volume-icons {
    padding: 0 1rem;
  }

  #volumnBarContainer {
    margin: 10px;
  }

  .down-movement-for-user {
    display: flex;
  }
}