* {
    --main-gold: #BE9B7B;
    --glow: rgba(190, 155, 123, 0.3);
    --text-grad: linear-gradient(180deg, #f5e6d3, #BE9B7B);
    --btn-grad: linear-gradient(200deg, #2b2118, #BE9B7B, #2b2118);
    --banner-grad: linear-gradient(to bottom, #fbf7f2 0%, #dcd0c4 40%, #BE9B7B 70%, #2b2118 100%);
}

body {
    background: #000;
}

.modal-open {
    overflow: hidden;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* track (background) */
::-webkit-scrollbar-track {
    background: #0a0a0a;
    /* deep black */
    border-radius: 10px;
}

/* thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    /* background: linear-gradient(200deg,
            #442f01 0%,
            #b97c09 20%,
            #d4ab41 50%,
            #b97c09 80%,
            #442f01 100%); */
            background: var(--btn-grad);
    border-radius: 10px;
    border: 2px solid #0a0a0a;
    /* gives spacing illusion */
}

/* hover effect */
::-webkit-scrollbar-thumb:hover {
     background: var(--btn-grad);
}

.text-bg-gold-gradient {
    background: var(--text-grad);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text !important;
}

.text-bg-gold-gradient-hovered {
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.233),
        0 0 10px rgba(255, 255, 255, 0.144),
        0 0 15px rgba(255, 255, 255, 0.075);
}

.clickable {
    cursor: pointer;
}