:root {
    /*--color-bg: #e0e0e0;*/
    --color-bg: linear-gradient(256deg, rgb(235, 235, 251) 0%, rgb(250, 241, 250) 100%); 
    --color-text: #1d1d1d;
    --color-transparent: #bda6ce00;
    --color-text-inverse: #ffffff;
    --color-retro01: #528892;
    --color-retro01-weak: #528a9214; 
    --color-retro02: #BDA6CE;
    --color-retro02-weak: #bda6ce35;
    --color-retro03: #9B8EC7;

    
}

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

.from-background {
    background-image: none;
}

header {
    background: var(--color-bg);
    box-shadow: 6px 6px 24px #fffdfe;
}

h1 {
    color: var(--color-retro01);
    overflow-wrap: normal;
}

article .typography h2 {
    margin-top: calc(var(--spacing) * 6);
}


article p {
    color: var(--color-text);
}

article a:hover {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--color-retro01);
    color: var(--color-text-inverse);
}

article a {
    padding: calc(var(--spacing) * 0.8);
    padding-left: calc(var(--spacing) * 1.4);
    padding-right: calc(var(--spacing) * 1.4);
    border-radius: var(--radius-md);
    color: var(--color-retro01);
    text-decoration: wavy;
    background-color: var(--color-retro01-weak);
    color: var(--color-retro01);
}

article pre {
    width: fit-content;
    height: fit-content;
    padding: 18px;
    border-radius: 13px;
    background: var(--color-bg);
    box-shadow:  6px 6px 12px #c4c2d8,
             -6px -6px 12px #fffdfe;
}

.hover\:bg-sidebar-accent {
    color: var(--color-muted-foreground);
}

.hover\:bg-sidebar-accent:hover  {
    color: var(--color-foreground);
    background-color: var(--color-transparent);
}

.data-\[active\=true\]\:bg-accent[data-active=true] {
    background-color: var(--color-retro02-weak);
}

.card {
    width: fit-content;
    height: fit-content;
    padding: 18px;
    border-radius: 13px;
    background: var(--color-bg);
    box-shadow:  6px 6px 12px #c4c2d8,
             -6px -6px 12px #fffdfe;
}

#toc {
    padding-top: 4px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 13px;
    background: var(--color-bg);
    box-shadow:  6px 6px 12px #c4c2d8,
             -6px -6px 12px #fffdfe;
}

.overflow-hidden {
    overflow: visible;
}