/*
* Reusable file.ax starfield background.
*
* Use:
*
*
*
*
* Override the CSS variables below when needed.
*/
.ax-bg {
--ax-bg-color: #000000;
--ax-bg-stars: url('/stardust.png');
--ax-bg-star-opacity: 0.6;
--ax-bg-glow-pink: rgba(255, 0, 128, 0.12);
--ax-bg-glow-cyan: rgba(0, 255, 255, 0.1);
--ax-bg-pattern-line: rgba(255, 255, 255, 0.02);
min-height: 100vh;
background-color: var(--ax-bg-color);
position: relative;
z-index: 0;
isolation: isolate;
overflow-x: hidden;
}
.ax-bg::before,
.ax-bg::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
}
.ax-bg::before {
background:
radial-gradient(1200px 620px at 2% -12%, var(--ax-bg-glow-pink) 0%, transparent 62%),
radial-gradient(980px 520px at 102% 2%, var(--ax-bg-glow-cyan) 0%, transparent 62%);
backdrop-filter: blur(900px);
z-index: -3;
}
.ax-bg::after {
background: var(--ax-bg-stars);
opacity: var(--ax-bg-star-opacity);
z-index: -2;
}
.ax-bg-grid {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(
0deg,
transparent 24%,
var(--ax-bg-pattern-line) 25%,
var(--ax-bg-pattern-line) 26%,
transparent 27%,
transparent 74%,
var(--ax-bg-pattern-line) 75%,
transparent 76%,
transparent
),
linear-gradient(
90deg,
transparent 24%,
var(--ax-bg-pattern-line) 25%,
var(--ax-bg-pattern-line) 26%,
transparent 27%,
transparent 74%,
var(--ax-bg-pattern-line) 75%,
transparent 76%,
transparent
);
background-size: 50px 50px;
}