:root {
  --vt-c-brand: #c00;
  --vt-c-brand-light: #d53f3f;
  --vt-c-brand-dark: var(--vt-c-brand);
  --vt-c-brand-highlight: var(--vt-c-brand-light);
  --vt-c-contrast-light: #0ea5e9;
  --bg-colored-light: #f3f7f7;
  --kbd-border: #d1d5da;
  --vt-c-tip: #0ea5e9;
}

html.dark {
  --kbd-border: var(--vt-c-text-dark-3);

  p {
    --code-inline-bg-color: #ffcaca0d;
  }

  .vt-doc a {
    color: var(--vt-c-text-dark-1);
    text-decoration: underline;
    text-decoration-color: var(--vt-c-text-dark-2);
  }

  .vt-doc a > code {
    --vt-c-brand-dark: var(--vt-c-text-dark-1);
  }

  .content a:hover,
  .content a:hover code {
    color: white;
    text-decoration-color: currentColor;
  }

  .DocSearch.DocSearch {
    --docsearch-container-background: rgba(12, 12, 12, 0.8);
  }

  .page .content {
    --vt-c-brand: var(--vt-c-text);
  }

  .nav-link.action:not(.alt) .item,
  .nav-link.action .item.item:hover,
  .custom-block.custom-block.tip a:hover {
    color: white;
  }

  kbd {
    background-color: #333;
    box-shadow: none;
  }

  kbd a {
    color: var(--vt-c-text);
    font-weight: 500;
  }
}

.VPNavBarTitle .text {
  display: none;
}

.VPNavBarSearch {
  justify-content: flex-end;
}

.vt-doc .custom-block.tip {
  --vt-c-brand: var(--vt-c-text-1);
  --vt-c-brand-dark: var(--vt-c-text-1);
  --vt-c-brand-highlight: var(--vt-c-text-1);
}

@media (min-width: 720px) {
  .home-hero.home-hero.home-hero {
    margin-top: 2rem;
  }
}

.nav-bar .logo {
  height: 30px;
  margin-right: 2px;
}

h2 .logo {
  display: inline-block;
  height: 32px;
  margin-left: 4px;
  margin-bottom: 4px;
  vertical-align: middle;
}

kbd {
  background-color: #fafbfc;
  border: 1px solid var(--kbd-border);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--kbd-border);
  box-sizing: border-box;
  display: inline-block;
  font-size: 0.9rem;
  line-height: 10px;
  padding: 5px;
  vertical-align: middle;
}

code kbd {
  font-size: 0.7rem;
  padding: 2px 5px;
}

html:not(.dark) .vt-doc [class*='language-'] code {
  color: white;
}

.DocSearch-Search-Icon.DocSearch-Search-Icon {
  top: 0px;
}

.search-key {
  vertical-align: 3px;
}
