div#search {
    font-family: var(--body-family);
    text-align: center;
    align-self: center;
    max-width: 35em;
    width: 100%;
    padding: 0 1em 1em 1em;
}

div#search button {
    font-family: var(--heading-family);
    padding: 0.47em;
}

div#search button:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

div#search input, div#search button {
    color: var(--text-color);
    border: 1px solid var(--text-color);
    background: inherit;
    font-size: inherit;
    border-radius: 4px;
}

div#search input[type=text] {
    padding: 0.2em 0.4em 0.4em 0.4em;
    font-family: var(--body-family);
    width: 25em;
    max-width: 70%;
}

.entry {
  --background-color: white;
  --box-bg: #e0e0e0;
  --box-border-color: #aaaaaa;
  --lemma-color: #990000;
  --muted-lemma-color: #8f6666;
  --link-color: #385cc7;

  --body-family: "Literata", serif;
  --heading-family: "Bebas Neue SemiRounded", sans-serif;
  --label-family: "Bebas Neue Pro Expanded", sans-serif;
  --ipa-font-family: 'Charis', 'Charis SIL', 'Cambria', 'Times New Roman', sans-serif;

  max-width: none;
  font: clamp(17px, calc(15px + 0.2vw), 25px)/min(calc(1.1em + 0.2vw),30px) var(--body-family);
  font-variant-numeric: oldstyle-nums;
  scroll-behavior: smooth;
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
  background-color: var(--background-color);

  & .note p {
    text-align: justify;
    hyphens: auto;
  }

  & h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 8px;
    font-family: var(--body-family)
  }

  & h2 {
    font-size: 1.25em;
    margin-bottom: 8px;
    font-family: var(--heading-family)
  }

  & h3 {
    font-size: 1.15em;
    margin: 8px 0;
    font-family: var(--heading-family)
  }

  & h4 {
    font-size: 1.1em;
    margin: 8px 0;
    font-family: var(--heading-family)
  }

  & a {
    color: var(--link-color);
    text-decoration: none;
    outline: none;
  }

  & a:hover {
    text-decoration: underline;
  }

  & sup {
    font-size: 0.75em;
    line-height: 0;
    vertical-align: super;
  }

  & .definition {
    font-weight: bold;
  }

  & .lemma {
    font-style: italic;
  }

  & .lemma[lang="lij"],
  & .lemma:not([lang]) {
    color: var(--lemma-color);

    > i {
      color: var(--muted-lemma-color);
      font-style: normal;
    }
  }

  & .lemma[lang=la] {
    font-variant: small-caps;
    font-style: normal;
  }

  & .ipa {
    font-family: var(--ipa-font-family);
  }

  & ipa-player {
    display: inline;
    padding: 0.15em 0;
  }

  & .ipa-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    margin: 0 0.15em 0 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--background-color);
    color: var(--lemma-color);
    cursor: pointer;
    vertical-align: baseline;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
    bottom: 0.1em;
  }

  & .ipa-player:not(:first-child) .ipa-play-btn {
    margin-left: 0.2em;
  }

  & .ipa-play-btn:hover {
    background-color: var(--lemma-color);
    color: var(--background-color);
  }

  & .ipa-play-btn svg {
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.1em;
  }

  & .strike {
    text-decoration: line-through;
  }

  & .label {
    font-family: var(--label-family);
    background-color: white;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 4px 1px 4px;
    border: 1px solid black;
    font-size: 0.8em;
    font-weight: normal;
  }

  & details {
    background-color: var(--box-bg);
    padding: 8px 16px;
    width: fit-content;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  & details[open]>summary {
    margin-bottom: 8px;
  }

  > .pronunciations,
  > .pos {
    margin-bottom: 8px;
    margin-top: -2px;
  }

  > .etymology {
    margin-bottom: 10px;
    margin-top: -8px;
  }

  > .pos {
    position: relative;
    top: 2px;
  }

  & .pos .label {
    font-size: 0.9em;
  }

  & .pos .label:not(:first-of-type) {
    margin-left: 6px;
  }

  & .pos-set:only-of-type .senses ol[start="1"]:has(> li:only-child) {
        list-style-type: none;
  }

  & .pos-set {
    margin: 16px 0;

    border-left: 0.75rem solid var(--box-border-color);
    background: linear-gradient(to right, var(--box-bg), var(--background-color));
    padding: 8px 16px;
    width: fit-content;

    > .note {
      margin-top: 10px;
      > h3 {
        margin: 20px 0 -10px 0;
      }
    }

    & .senses {
      & ol {
        margin-top: 10px;
        padding-left: 1.15em;
      }
      & ol:last-of-type {
        margin-bottom: 0;
      }
      & ol:first-of-type {
        margin-bottom: 0;
      }
    }
  }

  & .sense {
    margin-bottom: 12px;
  }

  & .translatants {
    margin: 10px 0;

    >p {
      margin: 0;
    }
  }

  & .example {
    margin: 5px 0;

    >p {
      margin: 0;
      padding-left: 1.5em;
      text-indent: -1.5em;
    }

    >p.hl {
      font-style: italic;
    }
  }

  & .example:not(:last-of-type) {
    margin-bottom: 10px;
  }

  & .definition {
    margin-bottom: 8px;
  }

  & .variants,
  & .phrasemes,
  & .conjugations {
    & ul,
    & ol {
      margin: 8px 0;
      list-style: none;
      padding-left: 0;

      & li {
        margin-left: 0;
      }

      & li::marker {
        content: '';
      }
    }
  }

  & .declensions {
    & table {
      background-color: var(--box-bg);
      padding: 8px 16px;
      width: fit-content;
      border-radius: 10px;
      border: none;
      margin: 0;

      & th,
      & td {
        text-align: center;
        padding-right: 1em;
        border: none !important;
        background-color: inherit !important;

        &:last-child:not(:first-child) {
          padding-right: 0;
        }
      }
    }
  }

  & .conjugations {

    & .conjugation {
      >summary {
        font-weight: bold;
      }

      & .mood {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }

      & .tense {
        flex: 0 0 auto;
        margin-bottom: 0;

        & .label {
          font-size: 0.65em;
          margin-bottom: 2px;
          min-width: 2.5em;
          text-align: text-bottom;
          vertical-align: middle;
        }
      }

      & .tense h4 {
        margin-bottom: 0.5em;
        margin-top: 0;
      }

      & small {
        font-size: 1em;
        opacity: 0.4;
      }
    }
  }
}