.ph-bg {
  background-image: linear-gradient(#d8d7d7 25%, #b4b3b7 80%);
  font-size: 12px;
  padding: 4px 3px;
  padding-top: 1px;
  width: 100%;
  border-top: 2px solid black;
}

.player-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 1.3em;
}

.tb3-title {
  font-family: press2p, Tahoma, sans-serif;
  width: 6.2em;
  height: fit-content;
  background-image: linear-gradient(#d8d7d7 25%, #b4b3b7 80%);
  z-index: 4;
  position: absolute;
  margin-top: 0.15em;
  padding-left: 3px;
  line-height: 1.04em;
  font-size: 1.2em;
}

.header-line {
  width: 100%;
  height: 2px;
  background-color: #706f70;
  box-shadow: 0px -1px 0.5px #dad9da;
  margin-top: 3px;
  margin-left: 1em;
}

.tb3-dots {
  height: 3px;
  width: 3px;
  background-color: #817e80;
  box-shadow: 0.7px 0.7px 0px #464647;
  border-radius: 10px;
  position: absolute;
  margin-top: 1.2em;
  margin-right: 98.4%;
}

#dot1 {
  margin-top: -0.8em;
}

#dot2 {
  margin-top: 0.2em;
}

#mediaplayer {
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#player-box {
  margin-top: 0.1em;
  padding: 4px;
  height: 8em;
  width: 99%;
  background-color: #b9b6b8;
  border: 2px solid black;

}


#info-box {
  width: 100%;
  height: 5em;
  margin-top: 0em;
  background-color: rgba(131, 131, 131, 0);
  display: flex;
  padding: 3px;
  overflow: hidden;
  gap: 0.5em;
  align-items: center;
}

#album-cover {
  height: 4.3em;
  width: clamp(4em, 20%, 6em);
  min-width: 1.5em;
  border: 1px solid black;
  background-size: cover;
  background-image: url(assets/tabs/am.jpg);
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(100%);
  position: relative;
  margin-left: 1em;
}

.song-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 4.8%;
  flex: 0.97;

}

#static-song-info {
  height: 1.7em;
  width: 100%;
  margin-top: 1px;
  display: flex;
  white-space: nowrap;

}

.ssi {
  flex-grow: 1;
  height: fit-content;
  margin-top: 4px;
  box-shadow:
    -1px -1px 0px #757376,
    1px 1px 0px #ffffff;
  margin-bottom: 1px;
  text-align: center;
  font-family: mine, win98, -apple-system, 'Segoe UI', sans-serif;
}

#ssi-2 {
  margin: 4px 5px;
}

#ssi-3 {
  color: #716f74;
}



.music-control-btn:hover {
  background-color: #ffffff83;
}

.music-control-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

.music-control-btn img:hover {
  transform: scale(110%);
}

#mbc-1 {
  transform: scaleX(-1);
}

#music-list-box {
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#music-list {
  overflow-y: scroll;
  margin-top: 0.1em;
  padding: 4px;
  padding-top: 0px;
  height: 4.7em;
  width: 99%;
  background-color: #b6b5bb;
  border: 2px solid black;
}


.music-item {
  display: flex;
  align-items: center;
  padding: 5px;
  height: 4em;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 3px;
  margin-top: 0.5em;
}

.list-album-cover {
  filter: grayscale(100%);
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-top: 4px;
  border: 1px solid #000000;
  border-radius: 3px;
}

.music-info {
  flex-grow: 1;
  font-family: mine, Arial, Helvetica, sans-serif;
  font-weight: 700;
}



.album-cover-container {
  position: relative;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  background: none;
  border: none;
  cursor: url('assets/pointer.svg'), pointer;
}

.album-cover-container:hover .play-btn {
  display: block;
}


#progress {
  height: 100%;
  background-color: #333;
  width: 0;

}

#song-title {
  height: 2em;
  width: 100%;
  box-shadow: -1px -1px 0px #757376, 1px 1px 0px #ecebec;
  margin-bottom: 1px;
  font-family: mine;
  line-height: 0.9em;
  padding: 1px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}


#music-controls {
  width: 100%;
  height: 2em;
  display: flex;
  flex-direction: row;
  padding: 0 0.5em;
  align-items: center;
  gap: 0.25em;
}

.music-control-btn {
  flex: 0 0 auto;
  border: 2px solid black;
  padding: 5px;
  height: 90%;
  cursor: url('assets/pointer.svg'), pointer;

}

#music-timer {
  height: 2em;
  flex: 0.99;
  background-image: linear-gradient(#d8d7d7 25%, #b4b3b7 80%);
  box-shadow: -1px -1px 0px #757376, 1px 1px 0px #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-family: mine, 'Segoe UI', sans-serif;
  font-size: 0.8em;
  color: #333;
  margin-left: 0.25em;
}

#progress-bar {
  flex: 1;
  height: 5px;
  background-color: #817e80;
  margin-left: 0.3em;
  position: relative;
  cursor: url('assets/pointer.svg'), pointer;

}

@media only screen and (max-width:390px) {
  #ssi-3 p {
    font-size: 0.6em;
    height: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #album-cover {
    height: 4em;
  }
}

@media only screen and (max-width:340px) {
  #ssi-3 {
    display: none;
  }

  .music-control-btn {
    height: 70%;
  }

  #ssi-2 {
    margin-right: 0px;
  }
}