:root {
    --color0: #e8e8e8;
    --color1: #dadada;
    --colorgrey: #b2b2b2;

    --color2: #0D0D0D;
    --color3: #262626;
    --color4: #a03a11;
    --color5: #a04315;
    --color6: #fac28e;
    --color7: #545454;
}
.bc_0 {background-color: var(--color0)}
.bc_2 {background-color: var(--color2)}
.bc_3 {background-color: var(--color3)}
.bc_4 {background-color: var(--color4)}
.bc_5 {background-color: var(--color5)}
.bc_6 {background-color: var(--color6)}
.bc_7 {background-color: var(--color7)}

.bc_gradient {
    /* background-image: linear-gradient(-90deg, var(--color5) -10%, var(--color4) 70%); */
    background-color: var(--color5);
    /* background-image: linear-gradient(-90deg, #96ba66, #365324); */
}

.c_primary {color: var(--color2)}
.c_secondary {color: var(--color3)}
.c_tertiary {color: var(--color7)}
.c_light_0 {
    color: var(--color0);
}
.c_light_1 {
    color: var(--color1);
}
.c_light_grey {
    color: var(--colorgrey);
}
.c_light_brown {
    color: var(--color6);
}
.c_4 {color: var(--color4)}
.c_5 {color: var(--color5)}
.c_6 {color: var(--color6)}

.header_item_active {
    color: #999;
}
/* .button_color {
    border-bottom: solid transparent 2px;
    border-top: solid transparent 2px;
    transition-duration: 0.15s;
}
.button_color:hover {
    border-bottom: solid var(--color1) 2px;
    border-top: solid var(--color1) 2px;
} */
.header_item {
    border:none;
    position: relative;
}
.header_item:hover{
    border: none;
}
.header_item::after {
    content: '';
    position: absolute;
    width: 0px;
    height: 2px;
    left: 50%;
    bottom:0;
    background-color: var(--color0);
    transition: all ease-in-out .18s;
}
.header_item:hover::after {
    width: 100%;
    left: 0;
}

.icon_white {
    filter: invert(90%);
}
.bg_cello {
    color: var(--color0);
}