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

    form#_dic_search {
      position: relative;
      display: inline-block;
      width: 100%;
      max-width: 35em;
  }

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

  button {
    font-family: var(--heading-family);
    padding: 0.47em;
    &:hover {
        background-color: var(--text-color);
        color: var(--background-color);
    }
  }
  input[type=text] {
      padding: 0.2em 0.4em 0.4em 0.4em;
      font-family: var(--body-family);
      width: 25em;
      max-width: 70%;
  }

  [data-autoconseggio-list] {
    position: absolute;
    top: calc(100% + 0.4em);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--text-color);
    border-radius: 4px;
    max-height: 16em;
    overflow-y: auto;
    background: var(--background-color);
    max-width: 25em;
    width: min(100%, 25em);

    li {
      margin-left: 0;
      + li {
        border-top: 1px solid #d9d9d9;
      }
    }

    li

    button {
      width: 100%;
      display: block;
      text-align: left;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0.35em 0.6em 0.4em 0.6em;
      font-family: var(--body-family);
      cursor: pointer;

      &[aria-selected="true"], &:hover {
        background-color: #f2f2f2;
        color: var(--text-color);
      }
    }
  }
}

#deize-entry > .entry:first-child > h1:first-child {
  margin-top: 0;
}

.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;
  -webkit-text-size-adjust: 100%;
  background-color: var(--background-color);

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

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

  & 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;
    &:hover {
      text-decoration: underline;
    }
  }

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

  & .definition {
    font-weight: bold;
  }

  & .lemma {
    font-style: italic;
    &[lang="lij"], &:not([lang]) {
      color: var(--lemma-color);
      > i {
        color: var(--muted-lemma-color);
        font-style: normal;
      }
    }
    &[lang=la] {
      font-variant: small-caps;
      font-style: normal;
    }
  }

  & .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;
  }

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

  & .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; }
    }

    &:only-of-type .senses ol[start="1"]:has(> li:only-child) { list-style-type: none; }
    & .senses {
      & ol {
        margin-top: 10px;
        padding-left: 1.15em;
        &:last-of-type { margin-bottom: 0; }
        &:first-of-type { margin-bottom: 0; }
      }
    }
  }

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

  & .translatants {
    margin: 10px 0;
    > p { margin: 0; }
    & sup { font-size: small; margin-left: 0.33ch; }
  }

  & .example {
    margin: 5px 0;
    &:not(:last-of-type) { margin-bottom: 10px; }
    > p {
      margin: 0;
      padding-left: 1.5em;
      text-indent: -1.5em;
      &.hl { font-style: italic; }
    }
  }

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

  & .declensions, & .conjugation { overflow-x: auto; }

  & .variants, & .phrasemes, & .conjugations {
    + p { margin: 8px 0; }
    & ul, & ol {
      margin: 8px 0;
      list-style: none;
      padding-left: 0;
      & li {
        margin-left: 0;
        &::marker { content: ''; }
      }
    }
  }

  & .declensions {
    & table {
      background-color: var(--box-bg);
      padding: 8px 16px;
      width: fit-content;
      border-radius: 10px;
      border: none;
      margin: 0;
      & thead tr th, & tbody tr 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;
        }
        & h4 { margin-bottom: 0.5em; margin-top: 0; }
      }
      & small { font-size: 1em; opacity: 0.4; }
    }
  }
}