html, body { margin: 0; height: 100%; }
body { background: #000; color: #fff; font-family: system-ui, sans-serif; }

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.bg.active { opacity: 1; }

/* Change these three paths to your images */
.bg-1 { background-image: url('../img/cards/tarot-13-death.jpg'); }
.bg-2 { background-image: url('../img/cards/tarot-lovers.jpg'); }
.bg-3 { background-image: url('../img/cards/tarot-19-sun.jpg'); }

@media (prefers-reduced-motion: reduce) {
  .bg { transition: none; }
}

main { position: relative; padding: 2rem; }
.cards {
	background-image: url('../img/cards/tarot-19-sun.jpg');
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	align-items: start;
	justify-items: stretch;
}
.card.flipped {
	content: url('../img/cards/mtg-back.webp');
}