.terms-main {
  margin-top: 6px;
  & > div {
    width: 100%;
  }
  ul {
    padding: 0 16px;
  }
}

h3,h4 {
  margin: 0;
}

.key {
  padding: 0;
  display: flex;
  * {
    border-right: 1px solid #141a24;
    border-left: 1px solid #141a24;
    flex-grow: 1;
    flex-basis: 0px;
    text-align: center;
  }
}

.flex {
  flex-wrap: wrap;
  gap: 6px;
  > * {
    flex-grow: 1;
    border: 1px solid #141a23;
    border-radius: 6px;
    padding: 8px 0 0 8px;
  }
}

.terms-main ul, ul.key {
  list-style-type: none;
}

ul.footnotes {
  list-style-type: decimal;
  font-size: .875em;
  color: grey;
}

li {
  vertical-align: middle;

  &.good {
    color: #ff63cb;
    font-weight: bold;
    font-style: italic;
  }
  &.okay {
    color: #a98eda;
  }
  &.meh {
    color: #9ec5fe;
    font-size: .875em;
  }
  &.bad {
    color: #adb5bd;
    font-size: .875em;
  }

  & > img {
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    width: auto;
    border-radius: .25em;
  }
}

.note-cue {
  font-size: .625em;
}