:root {
  --card-background-color: #eeefea;
  --tint-color: rgb(158, 30, 119);
  --tint-color-highlighted: #2040FB;
  --fg-on-tint-color: white;
}

@media (prefers-color-scheme: dark) {
    :root {
        --card-background-color: var(--background-color-2);
    }
}

.shelf {
  background-color: var(--background-color); // --background-color-3
  /* padding-top: 15px; */
  padding-bottom: 15px;
}

.shelfItem {
  width: 300px;
  /* border: 1px solid var(--light-gray); */
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  padding-bottom: 10px;
  background-color: var(--card-background-color);
  border-width: 2px;
  border-color: var(--tint-color);
  border-style: solid;
  overflow: hidden;
}

.shelfItemImage {
  /* border-radius: 10px 10px 0px 0px; */
}

.shelfItemTitle {
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1;
  /*padding-left: 5px;
  padding-right: 5px;*/
}

.shelfItemSubtitle {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  /*padding-left: 5px;
  padding-right: 5px;*/
}

.shelfItemSeparator {
  height: 2px;
  background-color: var(--tint-color);
}

.shelfItemSpace {
  height: var(--medium-space);
}

.shelfItemCountBadge {
  border-radius: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--tint-color);
  color: var(--fg-on-tint-color);
  font-weight: bold;
}

.shelfItemCountBadge div.label {
  font-weight: bold;
}

.description {
  font-weight: 500;
  max-width: 500px;
}

.boldText {
  font-weight: bold;
}