.inventory, .documentation {
  padding: 0 1em 1em 1em;
}

.inventory h2, .documentation h2, .documentation h1 {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: .2em;
}

.documentation h1 {
  font-weight: 900;
}

.documentation.hidden {
  display: none;
  transition: display 2s;
}

.inventory-list {
  display: flex;
  gap: .5em;
  flex-wrap : wrap;
}

.inventory .item {
  background: #fff;
  border: solid 1px #777;
  padding: .1em .5em;
}

.inventory .item.locked {
  border: solid 1px #ccc;
  color: #ccc;
}

.inventory .item.disabled {
  color: #d92c2c;
}

.inventory .item.new {
  background-color: rgb(255, 242, 190);
}

.inventory .item:not(.locked), .inventory .item.enabled {
  cursor: pointer;
}

.tab-bar {
  border-bottom: 0.1em solid var(--clr-dark-gray);
  margin-bottom: 0.5em;
}

.tab {
  color: var(--clr-darker-gray);
  line-height: inherit;
  text-decoration: none;
  padding: 0.2rem .6em;
  font-size: 1rem;
  margin: 0 .1em;
  border: 0;
  cursor: pointer;
  display: inline-block;
}

.tab.active {
  color: black;
  border-bottom: 0.3em solid var(--clr-primary);
}