/* ======= FIXED PLAYER ========= */

.main__audio-player {
  display: flex;
  justify-content: end;
  align-items: center;
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  /* border: 2px solid white; */
  width: 100%;
  padding: 10px 30px 10px 10px;
  gap: 20px;
  z-index: 10000;
  /* border: 2px solid white; */
}

.main__audio-player img {
  border-radius: 15px;
  border: 1px solid rgb(133, 133, 133);
  width: 50px;
  height: 50px;
}

.main__audio-player a button {
  border-radius: 50px;
  width: 150px;
  height: 50px;
  background-color: transparent;
  border: 2px solid rgb(255, 255, 255);
  color: white;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.main__audio-player .audio-player__content {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(132, 132, 132);
  border-radius: 50px;
  padding: 10px 10px 10px 15px;
  background-color: #141414;
  gap: 10px;
  white-space: nowrap;
}

#play-pause {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--bg-player);
  width: 50px;
  height: 50px;
  cursor: pointer;
  font-size: 20px;
  border: 1px solid white;
}

#now-playing {
  border-radius: 50px;
  padding: 10px 20px 10px 20px;
  background-color: var(--bg-text-player);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ============================== */

/* === PAGE PLAYER === */

.player {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2a2a2ade;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
  height: 370px;
  padding: 10px;
}

.player .video {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 5px;
  gap: 20px;
  /* border: 2px solid white; */
  width: 100%;
  /*   border: 2px solid white; */
}

.player .video span {
  display: flex;
  /*   border: 2px solid white; */
  width: 100%;
  padding: 10px 0 0 0;
  gap: 10px;
}

.video iframe {
  border-radius: 5px;
  height: 300px;
}

/* ====================== */

/* ========================= */

@media only screen and (max-width: 590px) {
  .main__audio-player {
    justify-content: center;
    padding: 0;
    margin: 0;
  }
}