:root {
    --vp-c-brand-1: #76946a;
    --vp-c-brand-2: #181616;
    --vp-c-brand-3: #2a2a2a;
    --vp-c-brand-4: #647d59;

    --vp-c-bg: #181616;
    --vp-c-gutter: #2a2a2a;

    --vp-c-default-2: #3b3b3b;
    --vp-c-default-3: #2a2a2a;

    --vp-c-border: #2a2a2a;
    --vp-c-divider: #76946a;

    --vp-c-bg-alt: #2a2a2a;
    --vp-c-bg-elv: #2a2a2a;
    --vp-c-bg-soft: #2a2a2a;

    --vp-code-block-divider-color: var(--vp-c-bg);

    --vp-button-brand-hover-bg: var(--vp-c-brand-1);
    --vp-button-brand-bg: var(--vp-c-brand-4);

    --vp-sidebar-bg-color: var(--vp-c-brand-2);

    scrollbar-color: var(--vp-c-brand-1) var(--vp-c-gutter);
}

.vp-doc > div > h1,
.vp-doc > div > h2,
.vp-doc > div > h3 {
    color: var(--vp-c-brand-1);
}

.vp-doc a:hover {
    color: var(--vp-c-brand-1) !important;

    text-decoration-thickness: 2px !important;
}

.vp-doc a:hover > code {
    color: var(--vp-c-brand-1) !important;
}

div.action > .link {
    color: var(--vp-c-brand-1) !important;
    border: 1px solid var(--vp-c-brand-1) !important;
}

li > section.VPSidebarItem > ul.items {
    border-left: 1px solid var(--vp-c-brand-3) !important;
}

li > section.VPSidebarItem > div.item > h3.text {
    color: var(--vp-c-text-1) !important;
    font-weight: bold !important;
}

.VPDocAsideOutline > div {
    border-left: 1px solid var(--vp-c-brand-3) !important;
}

.VPNavBarSearchButton {
    border: 1px var(--vp-c-bg) solid;

    transition: border-color 0.25s;
}

.VPNavBarSearchButton:hover {
    border: 1px var(--vp-c-brand-1) solid;
}

.VPSidebar {
    border-right: 1px solid var(--vp-c-brand-3);
}

img.VPImage.image-src {
    user-select: none;
}

summary {
    cursor: pointer;
    user-select: none;
}

.vp-contributors-heading {
    color: var(--vp-c-brand-1);
    font-weight: bold;
    margin-top: 48px;
}

.group:has([role="button"]) .VPSidebarItem.level-0 .items {
    padding-left: 16px !important;
    border-left: 1px solid var(--vp-c-gutter);
    border-radius: 2px;
    transition: background-color 0.25s;
}

.menu + .translations::after {
    margin-right: 8px;
    margin-left: 5px;
    width: 1px;
    height: 24px;
    background-color: var(--vp-c-divider);
    content: "";
}

@media (min-width: 960px) {
    img.VPImage.image-src {
        max-width: 400px;
        max-height: 400px;

        left: 60%;
    }
}
