/* =========================================================
   WALLPAPER
   ========================================================= */

.wallpaper {
    position: fixed;
    inset: -30px;

    z-index: -3;

    background-image: var(--wallpaper);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* filter: blur(4px); */

    transform: scale(1.05);
}


/*
    Dark overlay.

    This keeps bright wallpapers from making the
    interface difficult to read.
*/

.wallpaper-overlay {
    position: fixed;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            135deg,
            rgba(5, 7, 12, 0.48),
            rgba(10, 12, 18, 0.30)
        );
}


/*
    A very subtle overall tint.

    We can eventually make this dynamically generated
    from the user's wallpaper.
*/

.colour-layer {
    position: fixed;
    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(120, 100, 255, 0.12),
            transparent 55%
        );
}