:root {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: #b5e853;
  --pagefind-ui-text: #eaeaea;
  --pagefind-ui-background: #151515;
  --pagefind-ui-border: #505050;
  --pagefind-ui-tag: #2b2c2f;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-font: inherit;
}

#search {
  margin: 1rem auto 0;
  max-width: 600px;
  width: 100%;
}

#search .pagefind-ui__search-input {
  color: var(--pagefind-ui-text);
  background-color: #2b2c2f;
  height: calc(64px * var(--pagefind-ui-scale) * 2 / 3);
  font-size: calc(16px * var(--pagefind-ui-scale));
  line-height: 1;
  padding: 0 calc(40px * var(--pagefind-ui-scale) * 2 / 3) 0 calc(54px * var(--pagefind-ui-scale) * 2 / 3);
}

#search .pagefind-ui__form::before {
  top: calc(23px * var(--pagefind-ui-scale) * 2 / 3);
  left: calc(20px * var(--pagefind-ui-scale) * 2 / 3);
  width: calc(18px * var(--pagefind-ui-scale) * 2 / 3);
  height: calc(18px * var(--pagefind-ui-scale) * 2 / 3);
}

#search .pagefind-ui__search-clear {
  color: var(--pagefind-ui-text);
  height: calc(58px * var(--pagefind-ui-scale) * 2 / 3);
  font-size: calc(16px * var(--pagefind-ui-scale));
  padding: 0 calc(10px * var(--pagefind-ui-scale));
  top: calc(3px * var(--pagefind-ui-scale) * 2 / 3);
  right: calc(3px * var(--pagefind-ui-scale) * 2 / 3);
}

#search .pagefind-ui__search-input::placeholder {
  color: #999;
  opacity: 1;
}

#search .pagefind-ui__search-input:focus,
#search .pagefind-ui__search-input:focus-visible {
  border-color: #ffbf00;
  outline: none;
}

#search .pagefind-ui__result-link {
  color: #b5e853;
}

#search .pagefind-ui__result-link:hover {
  color: #ffbf00;
}

#search .pagefind-ui__result-excerpt {
  color: #aaa;
}

#search .pagefind-ui__result-excerpt mark {
  background-color: rgba(181, 232, 83, 0.25);
  color: #b5e853;
  padding: 0 2px;
}

#search .pagefind-ui__message,
#search .pagefind-ui__result-tags,
#search .pagefind-ui__filter-name,
#search .pagefind-ui__filter-value,
#search .pagefind-ui__button {
  color: var(--pagefind-ui-text);
}

#search .pagefind-ui__button {
  background-color: #2b2c2f;
  border-color: var(--pagefind-ui-border);
}

#search .pagefind-ui__button:hover {
  background-color: #3a3b3e;
}
