html {
    --color-white-1: #FFFFFF;
    --color-orange-1: #F9744B;
    --color-blue-1: #0D34FF;
    --color-blue-1-12: rgba(var(--color-blue-1), .12);
    --color-blue-1-25: rgba(var(--color-blue-1), .25);
    --color-black-1: #000;
    --color-black-2: #01040D;
    --color-black-3: #030814;
    --color-black-3-70: rgba(var(--color-black-3), .7);
    --color-gray-1: #424651;
    --color-gray-2: #6F7A97;
    --color-gray-2-50: rgba(var(--color-gray-2), .5);
    --color-gray-3: #404C68;

    color: var(--color-white-1) !important;

    @supports (scrollbar-gutter: stable) {
        scrollbar-gutter: stable;
    }
}

body {
    background-color: var(--color-black-2) !important;
}

body::-webkit-scrollbar {
    width: 6px;
    transition: all 0.1s ease-in-out;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--color-blue-1-25);
}

.nav-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    transition: all .2s ease-in-out !important;
    color: var(--color-gray-2) !important;
}

.title {
    color: var(--color-white-1) !important;
}

.card, .select-server-card {
    background-color: var(--color-black-3) !important;
    color: var(--color-white-1) !important;
    border: none !important;
}

.section {
    background-color: var(--color-black-2) !important;
}

.nav-link svg {
    width: 24px !important;
    height: 24px !important;
    margin-right: 0px !important;
}

.navbar {
    background: none !important;
    backdrop-filter: none !important;
}

.bg-elegant-dark {
    background-color: var(--color-black-2) !important;
}

.bg-elegant-night {
    background-color: var(--color-black-2) !important;
}

.pattern.bottom {
    display: none;
}

#shop {
    background-color: var(--color-black-2) !important;
}

.overlay-dark:before {
    background: none;
}

.modal-content {
    background-color: var(--color-black-3) !important;
}

a[data-dismiss] svg path {
    stroke: var(--color-gray-2) !important;
}

.bg-soft {
    background-color: var(--color-black-2) !important;
}

input {
    background-color: var(--color-black-3) !important;
    border: none !important;
    outline: none !important;
    color: var(--color-gray-2) !important;
}

.text-muted {
    color: var(--color-gray-2) !important;
}

.cart-item-actions {
    border: none !important;
}

label, .cart-cost, .modal-title, .item-title, .item-price, .text-black:hover, .text-black a:not(.btn), .text-black h1, .text-black h2, .text-black h3, .text-black h4, .text-black h5, .text-black h6, .text-black .h1, .text-black .h2, .text-black .h3, .text-black .h4, .text-black .h5, .text-black .h6, .text-black .display-1, .text-black .display-2, .text-black .display-3, .text-black .display-4 {
    color: var(--color-white-1) !important;
}