body {
  height: 100vh;
  display: flex;
  justify-content: center; 
  align-items: center;     
  margin: 0;
  background:#716AA9;
  color:#fff
}

img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

a {
  color: #fff!important;
  text-shadow:0 0 5px #fff!important
}

.music-player {
  --player-bg: #f4eaff;
  --player-color: #7e52a0;
  --player-dark: #54316f;
  --player-track: #dac5eb;

  width: 320px;
  padding: 12px 15px;

  display: flex;
  align-items: center;
  gap: 12px;

  background: var(--player-bg);
  border: 1px solid var(--player-color);
  border-radius: 12px;

  color: var(--player-dark);
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.music-play {
  width: 35px;
  height: 35px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background: var(--player-color);
  color: white;

  cursor: pointer;

  font-size: 12px;

  transition: 0.2s ease;
}

.music-play:hover {
  background: var(--player-dark);
}

.music-info {
  flex: 1;
  min-width: 0;
}

.music-title {
  display: block;

  margin-bottom: 7px;

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

.music-progress {
  width: 100%;
  height: 4px;

  background: var(--player-track);
  border-radius: 50px;

  cursor: pointer;
  overflow: hidden;
}

.music-progress-fill {
  width: 0%;
  height: 100%;

  background: var(--player-color);
  border-radius: inherit;
}

.music-time {
  flex-shrink: 0;

  font-size: 10px;
  opacity: 0.8;
}