@import url("fonts.css");

.word {
  display: inline-block;
  margin: -1.5rem 0rem; /* top and bottom can overlap; works pretty well when some words are much bigger than others */
  cursor: pointer;
  transition: transform 0.2s;
}
.word.selected {
  background-color: rgb( 250, 140, 10, 0.75 ); /* main theme colour #fa8c0a but transparent */
  color: #ffffff !important;
  margin: 0.5rem 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}
/* Outline not used at present, just add as a class in wordlist.php if needed; could also add a button to switch on/off */
.outline {
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.5), /* Very subtle shadow */
    0 0 2px rgba(0, 0, 0, 0.3); /* Slightly larger spread */
  opacity: 0.95;
}
@media (prefers-color-scheme: dark) {
  .outline {
    text-shadow:
      0 0 1px rgba(255, 255, 255, 0.5),
      0 0 2px rgba(255, 255, 255, 0.3);
    opacity: 0.95;
  }
}

table.wordcloud { 
  width: 100%;
  border-collapse: collapse; }
/* draw a line above every category row except the first */
table.wordcloud tr:not(:first-child) td {
  border-top: 1px dashed #777777;
  padding-top: .5rem;
  margin-top: .5rem; /* helpful if the cell has block content */
}

td {
  padding: 0px;
  vertical-align: top;
}

/* Font Styling */
.word {
  font-family: "Fira Sans", sans-serif;
  font-weight: normal;
}
.word.programming {
  font-family: "Fira Code", monospace;
  font-weight: normal;
}
.word.long {
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-weight: normal;
}
.word.light {
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
}
.word.regular {
  font-family: "Fira Sans", sans-serif;
  font-weight: normal;
}
.word.medium {
  font-family: "Fira Sans", sans-serif;
  font-weight: 500;
}