:root {
    --color-primary: 16 185 129;
    --color-header-light: 247 248 251; /* #f7f8fb; */
    --color-header-dark: 35 39 47; /* #23272f; */
}

body {
    --opacity: 0.25;

    --color-top-left-rgb: 99, 114, 236;
    --color-top-right-rgb: 255, 55, 156;
    --color-bottom-right-rgb: 0, 194, 96;
    --color-bottom-left-rgb: 255, 173, 10;

    background-image: radial-gradient(at 0 0, rgba(var(--color-top-left-rgb), var(--opacity)) 0, rgba(0, 0, 0, 0) 50%),
    radial-gradient(at 100% 0, rgba(var(--color-top-right-rgb), var(--opacity)) 0, rgba(0, 0, 0, 0) 50%),
    radial-gradient(at 100% 100%, rgba(var(--color-bottom-right-rgb), var(--opacity)) 0, rgba(0, 0, 0, 0) 50%),
    radial-gradient(at 0 100%, rgba(var(--color-bottom-left-rgb), var(--opacity)) 0, rgba(0, 0, 0, 0) 50%);

    background-attachment: fixed, fixed, fixed, fixed;
    background-color: rgb(var(--color-header));
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

@media (prefers-color-scheme: dark) {
    body {
        --opacity: 0.25;
    }
}