/* The site-wide space background: one continuous star field behind every page. Loaded by main/layout.html after layout.css, whose plain slate body background it replaces. The index's animated banner (banner.css) sits on top of this same field, which is what makes that page read as continuous. */ /* The space background, on with a fixed attachment so the index's banner and everything scrolling under it share one continuous field instead of meeting at a visible seam. */ body { background: /* two distant bright cores, so the field has a sense of light sources */ radial-gradient(38% 30% at 66% 22%, rgba(126, 148, 255, 0.20) 0%, rgba(9, 12, 32, 0) 70%), radial-gradient(30% 26% at 22% 72%, rgba(196, 118, 255, 0.16) 0%, rgba(9, 12, 32, 0) 70%), /* broad coloured haze */ radial-gradient(120% 90% at 78% 40%, rgba(52, 74, 168, 0.42) 0%, rgba(9, 12, 32, 0) 62%), radial-gradient(85% 75% at 12% 12%, rgba(96, 58, 158, 0.34) 0%, rgba(9, 12, 32, 0) 58%), radial-gradient(70% 60% at 50% 105%, rgba(22, 96, 132, 0.30) 0%, rgba(6, 10, 26, 0) 60%), linear-gradient(165deg, #05070f 0%, #0a0f28 42%, #070a1c 72%, #04060e 100%); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* The star field. The index's banner paints its own live sky on a canvas, but that ends where the banner does; this is a fixed, tiled layer of dots behind all content, so the rest of that page - and every other page - stays in space. Three tile sizes at different densities and brightnesses, so no repeat is obvious. z-index -1 keeps it above the body's gradient and behind every element on the page. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 141px 185px, rgba(255,255,255,0.37) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 45px 180px, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 229px 242px, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 232px 159px, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 101px 240px, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 87px 54px, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 100px 192px, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 193px 243px, rgba(255,255,255,0.33) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 115px 161px, rgba(255,255,255,0.27) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 159px 123px, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 215px 51px, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 16px 252px, rgba(255,255,255,0.21) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 83px 105px, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 1px 108px, rgba(255,255,255,0.21) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 19px 206px, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 83px 104px, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 241px 129px, rgba(255,255,255,0.39) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 256px 86px, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 147px 230px, rgba(255,255,255,0.19) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 66px 221px, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 113px 153px, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 35px 138px, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 187px 258px, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 160px 239px, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 6px 111px, rgba(255,255,255,0.31) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 0px 248px, rgba(255,255,255,0.41) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 210px 119px, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 120px 168px, rgba(255,255,255,0.29) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 63px 181px, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 62px 253px, rgba(255,255,255,0.21) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 42px 63px, rgba(255,255,255,0.41) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 128px 7px, rgba(255,255,255,0.31) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 259px 168px, rgba(255,255,255,0.37) 0%, rgba(255,255,255,0) 100%), radial-gradient(1px 1px at 99px 167px, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 333px 295px, rgba(255,255,255,0.49) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 409px 244px, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 302px 292px, rgba(255,255,255,0.39) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 344px 230px, rgba(255,255,255,0.49) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 240px 362px, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 65px 188px, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 416px 141px, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 148px 182px, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 89px 276px, rgba(255,255,255,0.54) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 372px 355px, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 164px 44px, rgba(255,255,255,0.51) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 370px 25px, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 162px 313px, rgba(255,255,255,0.47) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 41px 398px, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 117px 392px, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 195px 310px, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 252px 175px, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 187px 218px, rgba(255,255,255,0.53) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 380px 2px, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), radial-gradient(1.4px 1.4px at 208px 242px, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 156px 47px, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 246px 161px, rgba(255,255,255,0.79) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 477px 219px, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 69px 406px, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 399px 205px, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 121px 527px, rgba(255,255,255,0.89) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 432px 61px, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 13px 530px, rgba(255,255,255,0.83) 0%, rgba(255,255,255,0) 100%), radial-gradient(2px 2px at 509px 491px, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0) 100%); background-size: 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 720px 720px, 720px 720px, 720px 720px, 720px 720px, 720px 720px, 720px 720px, 720px 720px, 720px 720px, 720px 720px; background-repeat: repeat; } /* Browsers without :has() still get a dark page rather than the old slate. */ @supports not selector(body) { body { background: #070a1c; } }