/* Scaled background and logo placed in lower-right quadrant */
html, body { height: 100%; margin: 0; }
body {
  background-image: url('assets/worlds.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial;
}
/* H1: use a more fluid/rounded display font */
h1 {
  font-family: 'Dancing Script', cursive, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 0.5rem;
}
.site { min-height: 100vh; position: relative; }
.faint-black {
  position: relative;
  background: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.65) 30%,
    rgba(0,0,0,0.65) 70%,
    rgba(0,0,0,0) 100%
  );
  padding: 1.5rem 0.75rem;
}
.card-deck.album {
    margin: 0 auto;
}
.card-deck.album {
    max-width: 500px;
}
.card-body {
    background: rgba(0, 0, 0, 0.5);
}
.card-deck.album .card-title,
.card-deck.album .card-text {
    color: #fff;
}
.logo {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 12vmin;
  max-width: 160px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}
@media (max-width: 480px) {
  .logo { width: 20vmin; }
}