body {
  margin: 0;
  padding: 0;
  background: #f2f2f2;
  font-family: sans-serif;
  padding-bottom: 100px;
}
#feed {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}
#global-player {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #eee;
  border-top: 1px solid #ccc;
  padding: 15px;
}
.player-content {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
}
#player-art {
  width: 40px;
  height: 40px;
  display: none;
}
#player-title {
  font-weight: bold;
  font-size: 14px;
}
#player-artist {
  font-size: 12px;
  color: #666;
}
audio {
  width: 100%;
  height: 35px;
  filter: sepia(20%) saturate(70%) grayscale(1) contrast(90%); /* Softens the default look */
}

/* general purpose dialog */
#generalDialog::part(overlay) {
  background-color: rgba(0, 0, 0, 0.5);
}
#generalDialog::part(panel) {
  max-width: 90vw;

  width: 90vw;
  height: 700px;
}
#generalIframe {
  width: 100%;
  height: 99%;
  border: none;
}

#generalDialog sl-button {
  --sl-color-primary-500: #ff8800;
  --sl-color-primary-600: #ff5500;
}

#generalDialog sl-button:hover {
  background-color: #ff5500;
}

#generalDialog::part(footer) {
  padding: 8px 27px;
  gap: 8px;
}

#generalDialog::part(footer) {
  display: none;
}
/* End general purpose dialog */

#next-btn, #prev-btn {
  padding: 8px 16px;
  font-size: 14px;
  background-color: #ff5500;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#next-btn:disabled, #prev-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Alert toasts */
.alert-main {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: auto;
    max-width: 90vw;
}

.alert-main sl-alert {
    margin: 0;
}