h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

p {
  max-width: 70ch;
}

a {
  text-decoration: none;
}

img {
  object-fit: contain;
}

blockquote {
  border-left: 4px solid gray;
  padding: 0.7rem;
  margin: 1.5rem 1rem;
  border-radius: 0 4px 4px 0;
  background-color: rgba(0, 0, 0, 0.075);
  font-style: italic;

  strong {
    font-weight: 550;
  }
}

.fa-star,
.fa-star-half-stroke {
  color: #ffcb3b;
}

.content .bg-light {
  background-color: #fafffb !important;
}

@media screen and (min-width: 768px) {
  .poster {
    max-height: 300px;
  }
}

@media screen and (min-width: 768px) {
  #sort-by {
    max-width: 18ch;
  }
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.htmx-swapping .comment,
.htmx-swapping.comment {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.alert:empty {
  display: none;
}