/* Main music card component styles */

.music-card {
  width: 20%;
  padding: 1.5rem;
  border-radius: 20px;
  background-color: var(--component-background);
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.music-card-content {
  gap: 0.5rem;
}

.cover-image {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.music-card h1 {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: var(--white);
}

.author {
  font-size: 0.75rem;
  color: var(--grey);
}

/* Progress bar styles */

.progress-container-parent {
  gap: 0.5rem;
  width: 99%;
}

progress {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 20px;
  height: 0.4rem;
  cursor: pointer;
}

progress::-moz-progress-bar {
  background: var(--main-pink);
}

progress::-webkit-progress-bar {
  background-color: var(--white);
  border-radius: 20px;
  height: 0.4rem;
  cursor: pointer;
}

progress::-webkit-progress-value {
  background-color: var(--main-pink);
}

/* song duration styles */

.time {
  font-size: 0.8rem;
  color: var(--grey);
}

.time-container {
  justify-content: space-between;
}

/* control button styles */

.control-buttons-container {
  width: 60%;
  gap: 2rem;
}

.control-buttons-container img {
  width: 40%;
  height: auto;
  cursor: pointer;
}

.play-button {
  background-color: var(--main-pink);
  border-radius: 30px;
}

/* Responsive Media Queries */

/* Laptop */

@media screen and (max-width: 1440px) {
  .music-card {
    width: 30%;
  }
}

/* Tablet */

@media screen and (max-width: 1024px) {
  .music-card {
    width: 40%;
  }
}

/* Mobile */

@media screen and (max-width: 428px) {
  .music-card {
    width: 80%;
  }
}