/*
|--------------------------------------------------------------------------
| Fuzzy background skin (custom colors)
|--------------------------------------------------------------------------
|
| This uses a blurred SVG background with colors mixed from the COLORSCHEME.
*/

body {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='%238a2c47'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='%23aa7880'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='%23da6b6c'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    min-height: 100%;
}

@media (max-width: 991px) {
    body {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 400 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-50%25' y='-50%25' width='240%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='262.9146816404486' cy='334.6882471935419' fill='%238a2c47'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='79.02369011526488' cy='167.0291623615862' fill='%23aa7880'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='%23da6b6c'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
        background-position: top left;
    }
}

html[data-bs-theme=light] {
    background: var(--tblr-gray-100);
}

[data-bs-theme=light] .page {
    background: rgb(255 255 255 / 0.00);
}

[data-bs-theme=dark] .page {
    background: rgba(0, 0, 0, 0.75);
}