/* (PART A) WHOLE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box; font-size: 18px;
}
body, html { background-color: none; }
#text, #player, #playTimeD, #playButtons { display: flex; }
#text {
width: 350px;
margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px
  }
  
#laius {
  width: 350px;
  text-align: justify;
  margin-bottom: 25px
}

/* (PART B) WRAPPER & LAYOUT */
#player {

  flex-wrap: wrap;
  width: 350px;
  padding: 0px;
background-color: none;  
margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}

/* (PART C) CURRENT SONG IMAGE */
#playImg {
  margin-top: 10px; margin-bottom: 10px; width: 350px; height: 350px; border-radius: 175px; aspect-ratio: 1/1;
  object-fit: cover; opacity: 0.85;
}

/* (PART D) CURRENT SONG NAME & CONTROLS */
/* (D1) WRAPPER & SHARED */
#playControls { width: calc(100%); }
#player input[type="range"] {
  padding: 0; 
  border: none; outline: none; box-shadow: none;
  accent-color: #505050;
}

/* (D2) SONG NAME */
#playName {
  font-size: 18px; color: #000; font-weight: 700; margin-bottom: 10px; margin-top: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* (D3) SONG TIME */
#playTimeN, #playTimeT { width: 100%; font-size: 12px; }
#playTimeR { width: 100%; }
#playTimeT { text-align: right; }

/* (D4) ICOMOON - https://icomoon.io/ */
.icon-play3:before{content:url(songs/pause.png) }.icon-pause2:before{content:url(songs/play.png) }.icon-previous2:before{content:url(songs/preview.png) }.icon-next2:before{content:url(songs/forward.png) }.icon-volume-high:before{content:url(songs/vol.png) }.icon-volume-mute2:before{content:url(songs/mut.png) }

/* (D5) CONTROL BUTTONS */
#playButtons { margin-top: 10px; margin-bottom: 10px; align-items: center; }
#playLast, #playTog, #playNext, #playVolI { cursor: pointer; }
#playLast, #playTog, #playNext { font-size: 32px; flex-grow: 1; }
#playVolI { font-size: 18px; margin-right: 10px; }
#playVolR { flex-shrink: 1; max-width: 100px; }

/* (PART E) PLAY LIST */
#playList { width: 100%; margin-top: 10px; }
#playList div { padding: 5px; cursor: pointer; font-weight: 100; font-size: 16px; }
#playList div.current { font-weight: 700; color: #0000ff; }
#playList div:nth-child(odd) { background: #fff; opacity: 1; }

#link { text-align: center;
width: 350px; }