:root
{
    --bs-body-bg: #1E1E1E;
    --bs-body-color: #E2E2E2;
    --accent: #8c1a1a;
    --dark-accent: #600f0f;
    --card: #2E2E2E;
    --card-hover: #444444FF;
    --tags: #7B7878;
    --citation: #111111;
}

.btn.btn-primary
{
    --bs-btn-bg: var(--card);
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--dark-accent);
    --bs-btn-active-border-color: var(--dark-accent);
}

.form-control.searchbar
{
    background-color: var(--card);
    color: var(--tags);
    border-color: transparent;
}

.form-control.searchbar::placeholder
{
    color: #B6BCC6;
    opacity: .9;
}

.form-control.searchbar:focus
{
    background-color: #353535;
    color: var(--bs-body-color);
    border-color: transparent;
    box-shadow: none;
}

.font-cinzel
{
    font-family: "Cinzel";
}

.font-cardo
{
    font-family: "Cardo";
}

::selection
{
    background-color: var(--bs-body-color);
    color: var(--dark-accent);
}

.item-box
{
    background-color: var(--card);
}

.item-box:hover
{
    background-color: var(--card-hover);
    border-color: var(--accent);
    cursor: pointer;
}

.tags
{
    color: var(--tags);
}

.header-line-brand-color
{
    height: 2px;
    background-color: var(--dark-accent);
    margin-left: 10rem;
    margin-right: 10rem;
}

.citation-box
{
    background-color: var(--citation);
    border-radius: 15px;
}