.tag {
  font-size: .7rem;
  padding: 1px 3px;
  border: 1px solid;
  border-radius: 5px;
  margin-right: .25rem
}

.tags {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
}

/* Used as classes in span tags for colored text */
.col-green {
  color: var(--green);
}

/* same, but with glow */
.glow-green {
  transition: 0.6s text-shadow;
}

.glow-green:hover {
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
}

.tag-yellow {
  background-color: rgba(223, 209, 13, 0.300);
  color: var(--yellow);
}

.tag-red {
  background-color: rgba(255, 39, 57, 0.300);
  color: var(--red);
}

.tag-blue {
  background-color: rgba(39, 115, 255, 0.3);
  color: var(--blue);
}

.tag-green {
  background-color: rgba(39, 255, 136, 0.3);
  color: var(--green);
}

.tag-gray {
  background-color: rgba(131, 131, 131, 0.3);
  color: var(--gray);
}

.tag-purple {
  background-color: rgba(158, 58, 197, .3);
  color: var(--purple);
}

.tag-undefined {
  background-color: rgba(73, 73, 73, 0.3);
  color: var(--bg-light);
  text-decoration: line-through;
}