.multi {
  width: fit-content;
  align-items: normal;
  max-width: 100%;
  column-count: 3;
  column-width: 25dvw;
  column-gap: 1dvw;
  margin: 0.8em auto 0;
}

.multi .item {
  display: inline-block;
  break-inside: avoid;
  margin-bottom: 1.5em;
}

.item {
  border-color: var(--border-colour);
  border-style: solid;
  min-width: 25dvw;
  max-width: 25dvw;
  min-height: auto;
  position: relative;
  top: 1em;
  padding: 0.5em 0.4em;
  margin-bottom: 2em;
  border-radius: 0.7em;
  box-shadow: var(--section-shadow);
  text-align: justify;
  z-index: 20;
  overflow-x: scroll;
}

.item :is(h4, h5, h6) {
  margin-top: -0.2em;
  margin-bottom: 0.2em;
  line-height: normal;
}

.stats {
  min-width: 25dvw;
  max-width: 25dvw;
}

.item h3 {
  text-align: center;
  line-height: normal;
  width: 100%;
  margin: 0;
  margin-bottom: 0.2em;
  border-bottom: solid 0.15em;
}

.item .item-text {
  margin-left: 0.6em;
  margin-right: 0.6em;
  font-size: 0.9em;
}

.item .show {
  margin-left: 0.6em;
  margin-right: 0.6em;
  margin-bottom: 0.4em;
}

.item-cont {
  max-height: 500px;
  overflow-y: scroll;
}

.genBorder {
  padding-top: 0.5em;
  margin-left: 0.6em;
  margin-right: 0.6em;
}

.prop-list ul :not(:first-child) {
  margin-top: 0.5em;
}

/* Item Header */
.item .itemHead {
  margin-left: 0.2em;
  margin-right: 0.2em;
}

.item .infoHead {
  gap: 1em;
  font-size: 0.8em;
  padding-top: 0.5em;
  margin-bottom: 0.5em;
  align-items: center;
  display: flex;
  border-top: solid 0.2em var(--item-colour);
}

/* Stats Header */
.stats .statsHead {
  display: flex;
  gap: 0.5em;
}

.stats .creature {
  text-align: left;
  flex: 2;
}

.stats .cr {
  text-align: right;
  flex: 1;
  margin-right: 0.6em;
}

/* Items Header */
.items .cost-weight {
  text-align: left;
  break-inside: avoid;
  white-space: nowrap;
  flex: 1;
}

.items .properties {
  text-align: right;
  break-inside: avoid;
  margin-left: 0em;
  flex: 4;
}

/* Statblock */
.stats .topStats {
  display: flex;
}

.stats .init {
  flex: 1;
  text-align: right;
}

.statInf {
  margin-bottom: -0.3em;
}

.stats .item-cont {
  max-height: 700px;
}

.stats .trait-action :is(ul, ol) {
  margin-bottom: 0em;
}

.stats .trait-action li {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
.stats .trait-action li li {
  margin-top: 0em;
  margin-bottom: 0em;
}

/* Stat Table */
.statTable-div {
  margin-top: -0.8em;
}

.statTable {
  position: relative;
  min-width: 100%;
  font-variant: small-caps;
  text-align: center;
  border-collapse: collapse;
  gap: 0.1em;
  margin-bottom: 0.5em;
}

.statTable .one-space {
  min-width: 1%;
  max-width: 1%;
}

.statTable .abi-text {
  min-width: 8%;
  text-align: right;
  padding-right: 0.2em;
}

.statTable td {
  min-width: 5%;
}

/* Img & Lore */
.item-wrap {
  position: relative;
}
.item-wrap .thumb-img {
  display: none;
  z-index: 30;
}
.item-wrap .blackground {
  display: none;
}

.item-wrap .item-btns {
  position: absolute;
  top: -0.4em;
  right: 0.5em;
  display: flex;
}

.item-wrap :is(.img-btn, .lore-btn) > button {
  background: 
    linear-gradient(to left, transparent, 33%, var(--item-half-colour), 99%, var(--item-colour)),
    linear-gradient(to right, transparent, 33%, var(--item-half-colour), 99%, var(--item-colour)),
    linear-gradient(to bottom, var(--sm-section-bg-colour), 33%, var(--item-half-colour), 99%, var(--item-colour)),
    linear-gradient(to top, transparent, 33%, var(--item-half-colour), 99%, var(--item-colour)),
    var(--sm-section-bg-colour);
  background-size: 3px 100%, 3px 100%, 100% 3px, 100% 3px, 100% 100%;
  background-position: left, right, bottom, top;
  background-repeat: no-repeat;
  padding-bottom: 1em;
  border: solid var(--border-colour) 2px;
  border-radius: 0.3em;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1em;
  color: var(--item-colour);
  margin-left: -0.1em;
  margin-right: 0em;
  z-index: 19;
}

.item-wrap :is(.img-btn, .lore-btn) > button:hover {
  color: var(--item-half-colour);
}

.item-wrap .blackground.active {
  display: flex;
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  left: 0em;
  top: 0em;
  background-color: var(--popup-bg-colour);
  align-items: center;
  justify-content: center;
}

.item-wrap .blackground-main {
  position: relative;
  max-width: 88dvw;
  max-height: 90dvh;
  overflow-y: scroll;
}

.item-wrap .closeBG-btn {
  position: absolute;
  display: flex;
  right: 1.5dvw;
  top: 0.5dvw;
  font-size: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-radius: 0.2em;
  align-items: center;
  justify-content: center;
}

.item-wrap .closeBG-btn p {
  position: relative;
  margin: 0;
  margin-bottom: 0.2em;
  color: var(--item-colour);
}

.item-wrap .item-img {
  position: relative;
  max-width: 80dvw;
  max-height: 80dvh;
  border: var(--item-colour) 0.3em solid;
  border-radius: 0.5em;
}


/* Item pop-up */
.item-popup {
  display: none;
  margin: 0;
  border: 0.2em solid var(--border-colour);
  background-color: var(--sm-popup-bg-colour);
  border-radius: 0.7em;
  padding: 0.3em 1.2em;
  z-index: 29;
  cursor: move;
}

.item-wrap > * {
  cursor: default;
}

.item-popup :is(p, ul, ol) {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.item-popup h3 {
  font-size: 1.5em;
  line-height: normal;
}

.item-popup h4 {
  font-size: 1.3em;
  line-height: normal;
}

.item-popup h5 {
  font-size: 1.1em;
  line-height: normal;
}

.item-popup h6 {
  font-size: 1em;
  line-height: normal;
}
.item-popup .popup-btn {
  display: none;
}

.item-popup.stationary .popup-btn {
  display: block;
  position: absolute;
  right: 0.15em;
  top: -0.1em;
  font-size: 1.2em;
  font-weight: 600;
  background: transparent;
  color: var(--item-colour);
  cursor: pointer;
}
.item-popup.stationary .popup-btn:hover {
  color: var(--item-half-colour);
}

.item-popup .scroll-cont {
  max-height: 300px;
}

.item-popup .popup-panel {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.item-popup:is(.active, .stationary) {
  display: block;
  position: fixed;
}

/* Item Colours */
.missingI {
  --item-colour: var(--missing-colour);
  --item-half-colour: var(--missing-half-colour);
  --item-symbol-colour: var(--missing-symbol-colour);
}

/* Item Rarity Colours */
[data-rarity="common"] {
  --item-colour: var(--common-colour);
  --item-half-colour: var(--common-half-colour);
  --item-symbol-colour: var(--common-symbol-colour);
}

[data-rarity="uncommon"] {
  --item-colour: var(--uncommon-colour);
  --item-half-colour: var(--uncommon-half-colour);
  --item-symbol-colour: var(--uncommon-symbol-colour);
}

[data-rarity="rare"] {
  --item-colour: var(--rare-colour);
  --item-half-colour: var(--rare-half-colour);
  --item-symbol-colour: var(--rare-symbol-colour);
}

[data-rarity="very-rare"] {
  --item-colour: var(--vrare-colour);
  --item-half-colour: var(--vrare-half-colour);
  --item-symbol-colour: var(--vrare-symbol-colour);
}

[data-rarity="legendary"] {
  --item-colour: var(--legend-colour);
  --item-half-colour: var(--legend-half-colour);
  --item-symbol-colour: var(--legend-symbol-colour);
}

[data-rarity="artifact"] {
  --item-colour: var(--artifact-colour);
  --item-half-colour: var(--artifact-half-colour);
  --item-symbol-colour: var(--artifact-symbol-colour);
}

[data-rarity="precious"] {
  --item-colour: var(--precious-colour);
  --item-half-colour: var(--precious-half-colour);
  --item-symbol-colour: var(--precious-symbol-colour);
}

[data-rarity="mythical"] {
  --item-colour: var(--mythic-colour);
  --item-half-colour: var(--mythic-half-colour);
  --item-symbol-colour: var(--mythic-symbol-colour);
}

/* Spell Colours */
[data-school="abjuration"] {
  --item-colour: var(--abj-colour);
  --item-half-colour: var(--abj-half-colour);
  --item-symbol-colour: var(--abj-symbol-colour);
}

[data-school="conjuration"] {
  --item-colour: var(--con-colour);
  --item-half-colour: var(--con-half-colour);
  --item-symbol-colour: var(--con-symbol-colour);
}

[data-school="divination"] {
  --item-colour: var(--div-colour);
  --item-half-colour: var(--div-half-colour);
  --item-symbol-colour: var(--div-symbol-colour);
}

[data-school="enchantment"] {
  --item-colour: var(--enc-colour);
  --item-half-colour: var(--enc-half-colour);
  --item-symbol-colour: var(--enc-symbol-colour);
}

[data-school="evocation"] {
  --item-colour: var(--evo-colour);
  --item-half-colour: var(--evo-half-colour);
  --item-symbol-colour: var(--evo-symbol-colour);
}

[data-school="illusion"] {
  --item-colour: var(--ill-colour);
  --item-half-colour: var(--ill-half-colour);
  --item-symbol-colour: var(--ill-symbol-colour);
}

[data-school="necromancy"] {
  --item-colour: var(--nec-colour);
  --item-half-colour: var(--nec-half-colour);
  --item-symbol-colour: var(--nec-symbol-colour);
}

[data-school="transmutation"] {
  --item-colour: var(--tra-colour);
  --item-half-colour: var(--tra-half-colour);
  --item-symbol-colour: var(--tra-symbol-colour);
}

/* Stats Colours */
[data-creature="aberration"] {
  --item-colour: var(--abe-colour);
  --item-half-colour: var(--abe-half-colour);
  --item-quart-colour: var(--abe-quart-colour);
  --item-symbol-colour: var(--abe-symbol-colour);
}

[data-creature="beast"] {
  --item-colour: var(--bea-colour);
  --item-half-colour: var(--bea-half-colour);
  --item-quart-colour: var(--bea-quart-colour);
  --item-symbol-colour: var(--bea-symbol-colour);
}

[data-creature="celestial"] {
  --item-colour: var(--cel-colour);
  --item-half-colour: var(--cel-half-colour);
  --item-quart-colour: var(--cel-quart-colour);
  --item-symbol-colour: var(--cel-symbol-colour);
}

[data-creature="construct"] {
  --item-colour: var(--cons-colour);
  --item-half-colour: var(--cons-half-colour);
  --item-quart-colour: var(--cons-quart-colour);
  --item-symbol-colour: var(--cons-symbol-colour);
}

[data-creature="dragon"] {
  --item-colour: var(--dra-colour);
  --item-half-colour: var(--dra-half-colour);
  --item-quart-colour: var(--dra-quart-colour);
  --item-symbol-colour: var(--dra-symbol-colour);
}

[data-creature="elemental"] {
  --item-colour: var(--ele-colour);
  --item-half-colour: var(--ele-half-colour);
  --item-quart-colour: var(--ele-quart-colour);
  --item-symbol-colour: var(--ele-symbol-colour);
}

[data-creature="fey"] {
  --item-colour: var(--fey-colour);
  --item-half-colour: var(--fey-half-colour);
  --item-quart-colour: var(--fey-quart-colour);
  --item-symbol-colour: var(--fey-symbol-colour);
}

[data-creature="fiend"] {
  --item-colour: var(--fie-colour);
  --item-half-colour: var(--fie-half-colour);
  --item-quart-colour: var(--fie-quart-colour);
  --item-symbol-colour: var(--fie-symbol-colour);
}

[data-creature="giant"] {
  --item-colour: var(--gia-colour);
  --item-half-colour: var(--gia-half-colour);
  --item-quart-colour: var(--gia-quart-colour);
  --item-symbol-colour: var(--gia-symbol-colour);
}

[data-creature="monstrosity"] {
  --item-colour: var(--mon-colour);
  --item-half-colour: var(--mon-half-colour);
  --item-quart-colour: var(--mon-quart-colour);
  --item-symbol-colour: var(--mon-symbol-colour);
}

[data-creature="ooze"] {
  --item-colour: var(--ooz-colour);
  --item-half-colour: var(--ooz-half-colour);
  --item-quart-colour: var(--ooz-quart-colour);
  --item-symbol-colour: var(--ooz-symbol-colour);
}

[data-creature="plant"] {
  --item-colour: var(--pla-colour);
  --item-half-colour: var(--pla-half-colour);
  --item-quart-colour: var(--pla-quart-colour);
  --item-symbol-colour: var(--pla-symbol-colour);
}

[data-creature="undead"] {
  --item-colour: var(--und-colour);
  --item-half-colour: var(--und-half-colour);
  --item-quart-colour: var(--und-quart-colour);
  --item-symbol-colour: var(--und-symbol-colour);
}

/* Item Block Colours*/
.item {
  background: 
    linear-gradient(to left, transparent, 33%, var(--item-half-colour), 99%, var(--item-colour)),
    linear-gradient(to right, transparent, 33%, var(--item-half-colour), 99%, var(--item-colour)),
    linear-gradient(to bottom, var(--sm-section-bg-colour), 33%, var(--item-half-colour), 99%, var(--item-colour)),
    linear-gradient(to top, transparent, 33%, var(--item-half-colour), 99%, var(--item-colour)),
    var(--sm-section-bg-colour);
  background-size: 8px 100%, 8px 100%, 100% 8px, 100% 8px, 100% 100%;
  background-position: left, right, bottom, top;
  background-repeat: no-repeat;
}

.item .iarrow {
  position: relative;
  top: 0.05em;
  left: -0.4em;
  filter: var(--item-symbol-colour);
}

.item h3 {
  color: var(--item-colour);
}

.item :is(h4, h5, h6) {
  color: var(--item-colour);
  border-bottom: solid 0.15em var(--item-colour);
}

.genBorder {
  border-top: solid 0.15em var(--item-colour);
}

.genInf {
  border-bottom: solid 0.15em var(--item-colour);
}

/* Stat Table Colours */

.statTable .first-row {
  color: var(--item-colour);
}

.statTable .second-row  td {
  background-color: var(--item-quart-colour);
}

.statTable .third-row td {
  background-color: var(--item-half-colour);
}

.statTable .second-row .one-space {
  background-color: transparent;
}

.statTable .third-row .one-space {
  background-color: transparent;
}

/* Lore and Image Colours */
.blackground-main :is(h1, h2, h3, h4, h5, h6) {
  color: var(--item-colour);
}

.blackground-main h2 {
  border-bottom: var(--item-colour) solid 0.1em;
}

.blackground-main .harrow {
  filter: var(--item-symbol-colour);
}