:root {
    --bgc-body: rgba(240, 244, 248, 1.0);
    --bgc-main-container: rgba(255, 255, 255, 1.0);
    --bgc-tags: rgba(226, 232, 240, 1.0);
    --bgc-menu: rgba(241, 245, 249, 1.0);
    --bgc-menu-open: rgba(248, 250, 252, 1.0);
    --bgc-content: rgba(248, 250, 252, 1.0);

    --color-border-content: rgba(226, 232, 240, 1.0);
    --color-text-headline: rgba(74, 85, 104, 1.0);
    --color-text-menu: rgba(100, 116, 139, 1.0);
    --color-text-menu-open: rgba(15, 23, 42, 1.0);
    --color-text-content: rgba(15, 23, 42, 1.0);
    /* --color-text-content: rgba(26, 32, 44, 1.0); */
    --color-text-tag: rgba(51, 65, 85, 1.0);

    /* separator color */
    /* --bg-separator-main: linear-gradient(to right, transparent 5%, black 40%, black 60%, transparent 95%); */
    --bg-separator-main: linear-gradient(to right, rgba(120, 120, 120, 1.0) 60%, transparent 95%)
}


.color-body {
    background-color: var(--bgc-body);
}

.color-bg-transparent {
    background-color: rgba(255, 255, 255, 0);
}

.color-bg-main-container {
    background-color: var(--bgc-main-container);
}

.color-bg-base {
    background-color: rgba(225, 250, 249, 0.7);
}

.color-bg-tags {
    /* background-color: rgba(245, 209, 201, 0.5); */
    background-color: var(--bgc-tags);

    transition-property: background-color;
    transition-duration: 0.35s;
}

.color-bg-tags[data-color-bg-tags-state="hover"] {
    /* background-color: rgba(245, 209, 201, 1); */
    background-color: var(--bgc-menu);
}

.color-bg-menu {
    background-color: var(--bgc-menu);

    transition-property: background-color;
    transition-duration: 0.35s;
}

.color-bg-menu[data-color-bg-menu="hover"] {
    background-color: var(--bgc-menu-open);
}

.color-bg-menu[data-menu-state="active"] {
    background-color: var(--bgc-menu-open);
}

.color-border-menu[data-menu-state="active"] {
    border-top-color: var(--color-border-content);
    border-left-color: var(--color-border-content);
    border-right-color: var(--color-border-content);
}

.color-border-content {
    border-color: var(--color-border-content);
}

.color-bg-content {
    background-color: var(--bgc-content);
}

.color-text-menu {
    color: var(--color-text-menu);

    transition-property: color;
    transition-duration: 0.35s;
}

.color-text-menu[data-color-menu="hover"] {
    color: var(--color-text-menu-open);
}

.color-text-menu[data-menu-state="active"] {
    color: var(--color-text-menu-open);
}

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

.color-text-headline {
    color: var(--color-text-headline);
}

.color-text-content {
    color: var(--color-text-content);
}