body {
  font-family: 'Avenir', 'Helvetica Neue', 'Open Sans', sans-serif;
  font-size: 11pt;
  color: var(--body-color);
  background: var(--body-bg);
}

header {
  margin-left: 2em;
}

header h2 {
  margin: 0.5em 0;
  font-size: 200%;
  line-height: 100%;
}

footer {
  margin-left: 2em;
}

span.icon {
  display: inline-block;
  width: 100%;
  height: 100%;
}

section.search {
  padding: 1em;
}

section.search span.icon {
  width: 20pt;
  height: 20pt;
  margin: 0 1em;
  mask: url(/assets/search.svg) no-repeat center;
  background-color: var(--query-icon-color);
}

input:focus {
  outline: none;
}

input#query {
  width: calc(100vw - 5em);
  font-size: 180%;
  color: var(--query-color);
  background: none;
  border: none;
  border-bottom: var(--query-border);
}

.error {
  color: var(--error-color);
  background: var(--error-bg);
  border-left: var(--error-hl-border);
  padding-left: 0.25em;
}

article.favorites {
  background: var(--fav-bg);
}

article.favorites section.entry {
  border-bottom: var(--fav-sep-border);
}

article.results {
  background: var(--results-bg);
}

article.results section.message {
  padding: 0.5em 1em;
}

span.listing {
  container: listing / inline-size;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

/* 5 column layout */
section.entry {
  /* flex column behavior */
  flex-basis: calc(20% - 1em);

  display: flex;
  flex-direction: row;
  padding: 0.5em;
  border-bottom: var(--results-sep-border);
}

.fav-action {
  margin-top: 1.5em;
  margin-right: 0.5em;
}

.fav-action button {
  width: 20pt;
  height: 20pt;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  background: none;
}

button span.icon.fav {
  mask: url(/assets/star-solid.svg) no-repeat center;
  background-color: var(--fav-icon-color);
}

button span.icon.not-fav {
  mask: url(/assets/star-outline.svg) no-repeat center;
  background-color: var(--not-fav-icon-color);
}

section.entry .vocab {
  display: flex;
  flex-direction: column;
}

.vocab {
  color: var(--vocab-color);
}

.vocab > .kanji {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 225%;
}

.vocab > .kana {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 160%;
  font-weight: normal;
}

.vocab .hint {
  font-family: "Noto Sans", "Noto Sans JP", "Noto Sans SC", sans-serif;
  font-size: 110%;
  font-weight: normal;
  line-height: 100%;
  color: var(--hint-color);
}

section.entry .usage  {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: 0.25em;
}

.usage .definition {
  line-height: 120%;
  color: var(--en-color);
}

.usage .particles {
  line-height: 120%;
}

section.entry .grammar  {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: 0.2em;
  font-size: 90%;
  margin-top: 0.3em;
}

.pill {
  padding: 0 0.5em;
  border-radius: 9999px;
}

.grammar .parts {
  color: var(--part-pill-color);
  background: var(--part-pill-bg);
  border: var(--part-pill-border);
}

.grammar .lessons {
  color: var(--lesson-pill-color);
  background: var(--lesson-pill-bg);
  border: var(--lesson-pill-border);
}