[data-bs-theme="light"] {
    --site-background: linear-gradient(to bottom right, rgb(220, 230, 255), rgb(210, 240, 255));
    --nav-background: rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] {
    --site-background: linear-gradient(to bottom right, rgb(70, 81, 110), rgb(16, 20, 60));
    --nav-background: rgba(28, 29, 54, 0.4);
}

@mixin site-backgrounds(){
    background: var(--site-background);
    background-repeat: no-repeat;
    background-attachment: fixed;

    &>header {
        background: var(--nav-background);
    }

    &>footer {
        background: var(--nav-background);
    }
}