/* css styles */

body {
  background-color: #FFF8DE;
}

.lite-youtube-style {
width: 500px;
text-align: left;
}

.hover-box {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.hover-wrapper:hover .hover-box {
  max-height: 500px; /* large enough to fit content */
}

.hidden {
  display: none;
}

.lite-youtube-style {
  max-width: 100%;
  width: 100%;
}

.lite-youtube-style lite-youtube {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Large screens */
@media (min-width: 992px) {
  .lite-youtube-style {
    width: 60%;
  }
}


.album-container {
  display: flex;
  flex-wrap: wrap;      /* allows stacking on small screens */
  gap: 1rem;
  align-items: center;
}

/* left column: image */
.album-image {
  flex: 0 0 120px;      /* default fixed width */
  max-width: 120px;
}
.album-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* right column: info */
.album-info {
  flex: 1 1 auto;
  min-width: 0;         /* prevents overflow */
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* small screens: stack image on top */
@media (max-width: 500px) {
  .album-container {
    flex-direction: column;
    align-items: flex-start;  /* left-align stacked items */
  }
  .album-image {
    width: 100%;
    height: auto;
    display: block;
  }
  .album-info {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .album-info {
    justify-content: flex-start;  /* remove vertical centering */
  }
}

/* tag buttons */
.outline-active {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.subtitle {
  font-size: 1.25rem;
  font-weight: 450;
  margin-top: -0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* 5-star rating system */
.stars {
  display: inline-block;
  margin-top: -0.4rem;
  margin-left: -0.1rem;
  font-size: 2rem;
  line-height: 1;
  position: relative;
  cursor: pointer;
  color: #ddd; /* Empty star color */
}

.stars::before {
  content: '★★★★★';
  margin-top: -0.4rem;
  margin-left: -0.1rem;
  background: linear-gradient(
    to right,
    #ffc107 var(--rating),
    #ddd var(--rating)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}