/*! Source: https://github.com/ebullient/ttrpg-convert-cli/blob/main/src/scss/dnd5e-float-images.scss */
.json5e-background div.image-embed,
.json5e-background span.image-embed,
.json5e-class div.image-embed,
.json5e-class span.image-embed,
.json5e-deck div.image-embed,
.json5e-deck span.image-embed,
.json5e-deity div.image-embed,
.json5e-deity span.image-embed,
.json5e-feat div.image-embed,
.json5e-feat span.image-embed,
.json5e-hazard div.image-embed,
.json5e-hazard span.image-embed,
.json5e-item div.image-embed,
.json5e-item span.image-embed,
.json5e-monster div.image-embed,
.json5e-monster span.image-embed,
.json5e-note div.image-embed,
.json5e-note span.image-embed,
.json5e-object div.image-embed,
.json5e-object span.image-embed,
.json5e-psionic div.image-embed,
.json5e-psionic span.image-embed,
.json5e-race div.image-embed,
.json5e-race span.image-embed,
.json5e-reward div.image-embed,
.json5e-reward span.image-embed,
.json5e-spell div.image-embed,
.json5e-spell span.image-embed,
.json5e-vehicle div.image-embed,
.json5e-vehicle span.image-embed {
  position: relative;
  /* Display the alt text after the image */
  /*
  &::after {
    content: attr(alt);
    display: block;
    margin-top: 0.5em;
    top: 100%; // Positions it below the parent element
    left: 0;
  }
  */
}
.json5e-background div[src$="#center"],
.json5e-background span[src$="#center"],
.json5e-class div[src$="#center"],
.json5e-class span[src$="#center"],
.json5e-deck div[src$="#center"],
.json5e-deck span[src$="#center"],
.json5e-deity div[src$="#center"],
.json5e-deity span[src$="#center"],
.json5e-feat div[src$="#center"],
.json5e-feat span[src$="#center"],
.json5e-hazard div[src$="#center"],
.json5e-hazard span[src$="#center"],
.json5e-item div[src$="#center"],
.json5e-item span[src$="#center"],
.json5e-monster div[src$="#center"],
.json5e-monster span[src$="#center"],
.json5e-note div[src$="#center"],
.json5e-note span[src$="#center"],
.json5e-object div[src$="#center"],
.json5e-object span[src$="#center"],
.json5e-psionic div[src$="#center"],
.json5e-psionic span[src$="#center"],
.json5e-race div[src$="#center"],
.json5e-race span[src$="#center"],
.json5e-reward div[src$="#center"],
.json5e-reward span[src$="#center"],
.json5e-spell div[src$="#center"],
.json5e-spell span[src$="#center"],
.json5e-vehicle div[src$="#center"],
.json5e-vehicle span[src$="#center"] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.json5e-background div[src$="#card"], .json5e-background div[src$="#symbol"], .json5e-background div[src$="#portrait"], .json5e-background div[src$="#token"], .json5e-background div[src$="#right"],
.json5e-background span[src$="#card"],
.json5e-background span[src$="#symbol"],
.json5e-background span[src$="#portrait"],
.json5e-background span[src$="#token"],
.json5e-background span[src$="#right"],
.json5e-class div[src$="#card"],
.json5e-class div[src$="#symbol"],
.json5e-class div[src$="#portrait"],
.json5e-class div[src$="#token"],
.json5e-class div[src$="#right"],
.json5e-class span[src$="#card"],
.json5e-class span[src$="#symbol"],
.json5e-class span[src$="#portrait"],
.json5e-class span[src$="#token"],
.json5e-class span[src$="#right"],
.json5e-deck div[src$="#card"],
.json5e-deck div[src$="#symbol"],
.json5e-deck div[src$="#portrait"],
.json5e-deck div[src$="#token"],
.json5e-deck div[src$="#right"],
.json5e-deck span[src$="#card"],
.json5e-deck span[src$="#symbol"],
.json5e-deck span[src$="#portrait"],
.json5e-deck span[src$="#token"],
.json5e-deck span[src$="#right"],
.json5e-deity div[src$="#card"],
.json5e-deity div[src$="#symbol"],
.json5e-deity div[src$="#portrait"],
.json5e-deity div[src$="#token"],
.json5e-deity div[src$="#right"],
.json5e-deity span[src$="#card"],
.json5e-deity span[src$="#symbol"],
.json5e-deity span[src$="#portrait"],
.json5e-deity span[src$="#token"],
.json5e-deity span[src$="#right"],
.json5e-feat div[src$="#card"],
.json5e-feat div[src$="#symbol"],
.json5e-feat div[src$="#portrait"],
.json5e-feat div[src$="#token"],
.json5e-feat div[src$="#right"],
.json5e-feat span[src$="#card"],
.json5e-feat span[src$="#symbol"],
.json5e-feat span[src$="#portrait"],
.json5e-feat span[src$="#token"],
.json5e-feat span[src$="#right"],
.json5e-hazard div[src$="#card"],
.json5e-hazard div[src$="#symbol"],
.json5e-hazard div[src$="#portrait"],
.json5e-hazard div[src$="#token"],
.json5e-hazard div[src$="#right"],
.json5e-hazard span[src$="#card"],
.json5e-hazard span[src$="#symbol"],
.json5e-hazard span[src$="#portrait"],
.json5e-hazard span[src$="#token"],
.json5e-hazard span[src$="#right"],
.json5e-item div[src$="#card"],
.json5e-item div[src$="#symbol"],
.json5e-item div[src$="#portrait"],
.json5e-item div[src$="#token"],
.json5e-item div[src$="#right"],
.json5e-item span[src$="#card"],
.json5e-item span[src$="#symbol"],
.json5e-item span[src$="#portrait"],
.json5e-item span[src$="#token"],
.json5e-item span[src$="#right"],
.json5e-monster div[src$="#card"],
.json5e-monster div[src$="#symbol"],
.json5e-monster div[src$="#portrait"],
.json5e-monster div[src$="#token"],
.json5e-monster div[src$="#right"],
.json5e-monster span[src$="#card"],
.json5e-monster span[src$="#symbol"],
.json5e-monster span[src$="#portrait"],
.json5e-monster span[src$="#token"],
.json5e-monster span[src$="#right"],
.json5e-note div[src$="#card"],
.json5e-note div[src$="#symbol"],
.json5e-note div[src$="#portrait"],
.json5e-note div[src$="#token"],
.json5e-note div[src$="#right"],
.json5e-note span[src$="#card"],
.json5e-note span[src$="#symbol"],
.json5e-note span[src$="#portrait"],
.json5e-note span[src$="#token"],
.json5e-note span[src$="#right"],
.json5e-object div[src$="#card"],
.json5e-object div[src$="#symbol"],
.json5e-object div[src$="#portrait"],
.json5e-object div[src$="#token"],
.json5e-object div[src$="#right"],
.json5e-object span[src$="#card"],
.json5e-object span[src$="#symbol"],
.json5e-object span[src$="#portrait"],
.json5e-object span[src$="#token"],
.json5e-object span[src$="#right"],
.json5e-psionic div[src$="#card"],
.json5e-psionic div[src$="#symbol"],
.json5e-psionic div[src$="#portrait"],
.json5e-psionic div[src$="#token"],
.json5e-psionic div[src$="#right"],
.json5e-psionic span[src$="#card"],
.json5e-psionic span[src$="#symbol"],
.json5e-psionic span[src$="#portrait"],
.json5e-psionic span[src$="#token"],
.json5e-psionic span[src$="#right"],
.json5e-race div[src$="#card"],
.json5e-race div[src$="#symbol"],
.json5e-race div[src$="#portrait"],
.json5e-race div[src$="#token"],
.json5e-race div[src$="#right"],
.json5e-race span[src$="#card"],
.json5e-race span[src$="#symbol"],
.json5e-race span[src$="#portrait"],
.json5e-race span[src$="#token"],
.json5e-race span[src$="#right"],
.json5e-reward div[src$="#card"],
.json5e-reward div[src$="#symbol"],
.json5e-reward div[src$="#portrait"],
.json5e-reward div[src$="#token"],
.json5e-reward div[src$="#right"],
.json5e-reward span[src$="#card"],
.json5e-reward span[src$="#symbol"],
.json5e-reward span[src$="#portrait"],
.json5e-reward span[src$="#token"],
.json5e-reward span[src$="#right"],
.json5e-spell div[src$="#card"],
.json5e-spell div[src$="#symbol"],
.json5e-spell div[src$="#portrait"],
.json5e-spell div[src$="#token"],
.json5e-spell div[src$="#right"],
.json5e-spell span[src$="#card"],
.json5e-spell span[src$="#symbol"],
.json5e-spell span[src$="#portrait"],
.json5e-spell span[src$="#token"],
.json5e-spell span[src$="#right"],
.json5e-vehicle div[src$="#card"],
.json5e-vehicle div[src$="#symbol"],
.json5e-vehicle div[src$="#portrait"],
.json5e-vehicle div[src$="#token"],
.json5e-vehicle div[src$="#right"],
.json5e-vehicle span[src$="#card"],
.json5e-vehicle span[src$="#symbol"],
.json5e-vehicle span[src$="#portrait"],
.json5e-vehicle span[src$="#token"],
.json5e-vehicle span[src$="#right"] {
  float: right;
  padding-left: 5px;
}
.json5e-background div[src$="#center"] img, .json5e-background div[src$="#right"] img,
.json5e-background span[src$="#center"] img,
.json5e-background span[src$="#right"] img,
.json5e-class div[src$="#center"] img,
.json5e-class div[src$="#right"] img,
.json5e-class span[src$="#center"] img,
.json5e-class span[src$="#right"] img,
.json5e-deck div[src$="#center"] img,
.json5e-deck div[src$="#right"] img,
.json5e-deck span[src$="#center"] img,
.json5e-deck span[src$="#right"] img,
.json5e-deity div[src$="#center"] img,
.json5e-deity div[src$="#right"] img,
.json5e-deity span[src$="#center"] img,
.json5e-deity span[src$="#right"] img,
.json5e-feat div[src$="#center"] img,
.json5e-feat div[src$="#right"] img,
.json5e-feat span[src$="#center"] img,
.json5e-feat span[src$="#right"] img,
.json5e-hazard div[src$="#center"] img,
.json5e-hazard div[src$="#right"] img,
.json5e-hazard span[src$="#center"] img,
.json5e-hazard span[src$="#right"] img,
.json5e-item div[src$="#center"] img,
.json5e-item div[src$="#right"] img,
.json5e-item span[src$="#center"] img,
.json5e-item span[src$="#right"] img,
.json5e-monster div[src$="#center"] img,
.json5e-monster div[src$="#right"] img,
.json5e-monster span[src$="#center"] img,
.json5e-monster span[src$="#right"] img,
.json5e-note div[src$="#center"] img,
.json5e-note div[src$="#right"] img,
.json5e-note span[src$="#center"] img,
.json5e-note span[src$="#right"] img,
.json5e-object div[src$="#center"] img,
.json5e-object div[src$="#right"] img,
.json5e-object span[src$="#center"] img,
.json5e-object span[src$="#right"] img,
.json5e-psionic div[src$="#center"] img,
.json5e-psionic div[src$="#right"] img,
.json5e-psionic span[src$="#center"] img,
.json5e-psionic span[src$="#right"] img,
.json5e-race div[src$="#center"] img,
.json5e-race div[src$="#right"] img,
.json5e-race span[src$="#center"] img,
.json5e-race span[src$="#right"] img,
.json5e-reward div[src$="#center"] img,
.json5e-reward div[src$="#right"] img,
.json5e-reward span[src$="#center"] img,
.json5e-reward span[src$="#right"] img,
.json5e-spell div[src$="#center"] img,
.json5e-spell div[src$="#right"] img,
.json5e-spell span[src$="#center"] img,
.json5e-spell span[src$="#right"] img,
.json5e-vehicle div[src$="#center"] img,
.json5e-vehicle div[src$="#right"] img,
.json5e-vehicle span[src$="#center"] img,
.json5e-vehicle span[src$="#right"] img {
  max-height: 60vh;
}
.json5e-background div[src$="#right"],
.json5e-background span[src$="#right"],
.json5e-class div[src$="#right"],
.json5e-class span[src$="#right"],
.json5e-deck div[src$="#right"],
.json5e-deck span[src$="#right"],
.json5e-deity div[src$="#right"],
.json5e-deity span[src$="#right"],
.json5e-feat div[src$="#right"],
.json5e-feat span[src$="#right"],
.json5e-hazard div[src$="#right"],
.json5e-hazard span[src$="#right"],
.json5e-item div[src$="#right"],
.json5e-item span[src$="#right"],
.json5e-monster div[src$="#right"],
.json5e-monster span[src$="#right"],
.json5e-note div[src$="#right"],
.json5e-note span[src$="#right"],
.json5e-object div[src$="#right"],
.json5e-object span[src$="#right"],
.json5e-psionic div[src$="#right"],
.json5e-psionic span[src$="#right"],
.json5e-race div[src$="#right"],
.json5e-race span[src$="#right"],
.json5e-reward div[src$="#right"],
.json5e-reward span[src$="#right"],
.json5e-spell div[src$="#right"],
.json5e-spell span[src$="#right"],
.json5e-vehicle div[src$="#right"],
.json5e-vehicle span[src$="#right"] {
  max-width: 50%;
}
.json5e-background div[src$="#card"], .json5e-background div[src$="#token"],
.json5e-background span[src$="#card"],
.json5e-background span[src$="#token"],
.json5e-class div[src$="#card"],
.json5e-class div[src$="#token"],
.json5e-class span[src$="#card"],
.json5e-class span[src$="#token"],
.json5e-deck div[src$="#card"],
.json5e-deck div[src$="#token"],
.json5e-deck span[src$="#card"],
.json5e-deck span[src$="#token"],
.json5e-deity div[src$="#card"],
.json5e-deity div[src$="#token"],
.json5e-deity span[src$="#card"],
.json5e-deity span[src$="#token"],
.json5e-feat div[src$="#card"],
.json5e-feat div[src$="#token"],
.json5e-feat span[src$="#card"],
.json5e-feat span[src$="#token"],
.json5e-hazard div[src$="#card"],
.json5e-hazard div[src$="#token"],
.json5e-hazard span[src$="#card"],
.json5e-hazard span[src$="#token"],
.json5e-item div[src$="#card"],
.json5e-item div[src$="#token"],
.json5e-item span[src$="#card"],
.json5e-item span[src$="#token"],
.json5e-monster div[src$="#card"],
.json5e-monster div[src$="#token"],
.json5e-monster span[src$="#card"],
.json5e-monster span[src$="#token"],
.json5e-note div[src$="#card"],
.json5e-note div[src$="#token"],
.json5e-note span[src$="#card"],
.json5e-note span[src$="#token"],
.json5e-object div[src$="#card"],
.json5e-object div[src$="#token"],
.json5e-object span[src$="#card"],
.json5e-object span[src$="#token"],
.json5e-psionic div[src$="#card"],
.json5e-psionic div[src$="#token"],
.json5e-psionic span[src$="#card"],
.json5e-psionic span[src$="#token"],
.json5e-race div[src$="#card"],
.json5e-race div[src$="#token"],
.json5e-race span[src$="#card"],
.json5e-race span[src$="#token"],
.json5e-reward div[src$="#card"],
.json5e-reward div[src$="#token"],
.json5e-reward span[src$="#card"],
.json5e-reward span[src$="#token"],
.json5e-spell div[src$="#card"],
.json5e-spell div[src$="#token"],
.json5e-spell span[src$="#card"],
.json5e-spell span[src$="#token"],
.json5e-vehicle div[src$="#card"],
.json5e-vehicle div[src$="#token"],
.json5e-vehicle span[src$="#card"],
.json5e-vehicle span[src$="#token"] {
  width: 150px;
}
.json5e-background div[src$="#symbol"], .json5e-background div[src$="#portrait"],
.json5e-background span[src$="#symbol"],
.json5e-background span[src$="#portrait"],
.json5e-class div[src$="#symbol"],
.json5e-class div[src$="#portrait"],
.json5e-class span[src$="#symbol"],
.json5e-class span[src$="#portrait"],
.json5e-deck div[src$="#symbol"],
.json5e-deck div[src$="#portrait"],
.json5e-deck span[src$="#symbol"],
.json5e-deck span[src$="#portrait"],
.json5e-deity div[src$="#symbol"],
.json5e-deity div[src$="#portrait"],
.json5e-deity span[src$="#symbol"],
.json5e-deity span[src$="#portrait"],
.json5e-feat div[src$="#symbol"],
.json5e-feat div[src$="#portrait"],
.json5e-feat span[src$="#symbol"],
.json5e-feat span[src$="#portrait"],
.json5e-hazard div[src$="#symbol"],
.json5e-hazard div[src$="#portrait"],
.json5e-hazard span[src$="#symbol"],
.json5e-hazard span[src$="#portrait"],
.json5e-item div[src$="#symbol"],
.json5e-item div[src$="#portrait"],
.json5e-item span[src$="#symbol"],
.json5e-item span[src$="#portrait"],
.json5e-monster div[src$="#symbol"],
.json5e-monster div[src$="#portrait"],
.json5e-monster span[src$="#symbol"],
.json5e-monster span[src$="#portrait"],
.json5e-note div[src$="#symbol"],
.json5e-note div[src$="#portrait"],
.json5e-note span[src$="#symbol"],
.json5e-note span[src$="#portrait"],
.json5e-object div[src$="#symbol"],
.json5e-object div[src$="#portrait"],
.json5e-object span[src$="#symbol"],
.json5e-object span[src$="#portrait"],
.json5e-psionic div[src$="#symbol"],
.json5e-psionic div[src$="#portrait"],
.json5e-psionic span[src$="#symbol"],
.json5e-psionic span[src$="#portrait"],
.json5e-race div[src$="#symbol"],
.json5e-race div[src$="#portrait"],
.json5e-race span[src$="#symbol"],
.json5e-race span[src$="#portrait"],
.json5e-reward div[src$="#symbol"],
.json5e-reward div[src$="#portrait"],
.json5e-reward span[src$="#symbol"],
.json5e-reward span[src$="#portrait"],
.json5e-spell div[src$="#symbol"],
.json5e-spell div[src$="#portrait"],
.json5e-spell span[src$="#symbol"],
.json5e-spell span[src$="#portrait"],
.json5e-vehicle div[src$="#symbol"],
.json5e-vehicle div[src$="#portrait"],
.json5e-vehicle span[src$="#symbol"],
.json5e-vehicle span[src$="#portrait"] {
  width: 200px;
}
.json5e-background div.image-embed:hover::after,
.json5e-background span.image-embed:hover::after,
.json5e-background img:hover::after,
.json5e-class div.image-embed:hover::after,
.json5e-class span.image-embed:hover::after,
.json5e-class img:hover::after,
.json5e-deck div.image-embed:hover::after,
.json5e-deck span.image-embed:hover::after,
.json5e-deck img:hover::after,
.json5e-deity div.image-embed:hover::after,
.json5e-deity span.image-embed:hover::after,
.json5e-deity img:hover::after,
.json5e-feat div.image-embed:hover::after,
.json5e-feat span.image-embed:hover::after,
.json5e-feat img:hover::after,
.json5e-hazard div.image-embed:hover::after,
.json5e-hazard span.image-embed:hover::after,
.json5e-hazard img:hover::after,
.json5e-item div.image-embed:hover::after,
.json5e-item span.image-embed:hover::after,
.json5e-item img:hover::after,
.json5e-monster div.image-embed:hover::after,
.json5e-monster span.image-embed:hover::after,
.json5e-monster img:hover::after,
.json5e-note div.image-embed:hover::after,
.json5e-note span.image-embed:hover::after,
.json5e-note img:hover::after,
.json5e-object div.image-embed:hover::after,
.json5e-object span.image-embed:hover::after,
.json5e-object img:hover::after,
.json5e-psionic div.image-embed:hover::after,
.json5e-psionic span.image-embed:hover::after,
.json5e-psionic img:hover::after,
.json5e-race div.image-embed:hover::after,
.json5e-race span.image-embed:hover::after,
.json5e-race img:hover::after,
.json5e-reward div.image-embed:hover::after,
.json5e-reward span.image-embed:hover::after,
.json5e-reward img:hover::after,
.json5e-spell div.image-embed:hover::after,
.json5e-spell span.image-embed:hover::after,
.json5e-spell img:hover::after,
.json5e-vehicle div.image-embed:hover::after,
.json5e-vehicle span.image-embed:hover::after,
.json5e-vehicle img:hover::after {
  content: attr(alt);
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  width: 200px;
  max-width: 200px;
  z-index: 10;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
}

/* For decks of cards, ensure images don't overlap */
.json5e-deck h3 {
  clear: both;
}
