/* Night stars for the home page, night only. Colourful dots and four point sparkles, a few more scattered down the page,
   and a shooting star under the boba icon. */
html.neon body{position:relative;}
/* stars: two twinkling layers of 1px dots and a few soft sparkles, behind everything */
html.neon body::after{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;
  background:transparent;box-shadow:91.6vw 470px 0px 0px rgba(200,245,255,0.45),80.3vw 653px 0px 0px rgba(255,255,255,0.68),76.1vw 417px 0px 0px rgba(214,200,255,0.56),94.9vw 777px 0px 0px rgba(255,255,255,0.47),10.9vw 143px 0px 0px rgba(255,230,180,0.45),76.4vw 432px 0px 0px rgba(255,230,180,0.41),95.4vw 112px 0px 0px rgba(255,255,255,0.62),61.2vw 836px 0px 0px rgba(214,200,255,0.84),88.5vw 1377px 0px 0px rgba(214,200,255,0.56),52.9vw 1610px 0px 0px rgba(200,245,255,0.48),2.9vw 4092px 0px 0px rgba(255,230,180,0.53),18.5vw 2574px 0px 0px rgba(200,245,255,0.64),28.5vw 3904px 0px 0px rgba(255,255,255,0.53),82.2vw 2148px 0px 0px rgba(200,245,255,0.81),6.5vw 3037px 0px 0px rgba(255,255,255,0.43),4.6vw 2279px 0px 0px rgba(200,245,255,0.73),52.8vw 1807px 0px 0px rgba(200,245,255,0.48),44.6vw 2670px 0px 0px rgba(255,230,180,0.76),88.7vw 4392px 0px 0px rgba(255,230,180,0.38),42.7vw 2451px 0px 0px rgba(255,255,255,0.76),11.6vw 4110px 0px 0px rgba(214,200,255,0.83),72.4vw 3108px 0px 0px rgba(200,245,255,0.83),9.5vw 5334px 0px 0px rgba(255,230,180,0.54),55.3vw 2235px 0px 0px rgba(214,200,255,0.70),46.3vw 1563px 0px 0px rgba(255,230,180,0.35),97.3vw 4125px 0px 0px rgba(255,255,255,0.55),8.8vw 1960px 0px 0px rgba(200,245,255,0.66),77.4vw 1860px 0px 0px rgba(255,230,180,0.66),29.9vw 4927px 0px 0px rgba(255,255,255,0.76),1.8vw 526px 0px 0px rgba(200,245,255,0.86),49.7vw 272px 0px 0px rgba(255,255,255,0.65),49.5vw 327px 0px 0px rgba(255,230,180,0.80),4.4vw 900px 0px 0px rgba(200,245,255,0.61),53.4vw 959px 0px 0px rgba(255,230,180,0.74),3.1vw 1126px 0px 0px rgba(214,200,255,0.43),72.4vw 965px 0px 0px rgba(255,230,180,0.78),64.9vw 1011px 0px 0px rgba(200,245,255,0.35),70.2vw 1166px 0px 0px rgba(255,255,255,0.44),54.8vw 1117px 0px 0px rgba(214,200,255,0.34),9.9vw 1268px 0px 0px rgba(200,245,255,0.34),93.3vw 137px 0px 0px rgba(190,240,255,0.87),2.2vw 150px 0px 0px rgba(200,245,255,0.7),4.6vw 262px 0px 0px rgba(255,255,255,0.6),1.4vw 345px 0px 0px rgba(214,200,255,0.7),3.7vw 438px 0px 0px rgba(255,230,180,0.65),20vw 150px 0px 0px rgba(200,245,255,0.7),30vw 108px 0px 0px rgba(255,255,255,0.65),44vw 100px 0px 0px rgba(214,200,255,0.7),52vw 146px 0px 0px rgba(255,230,180,0.65),60vw 112px 0px 0px rgba(200,245,255,0.6);animation:bgTwA 5.5s ease-in-out infinite;}
html.neon .hero::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;
  box-shadow:62.7vw 622px 0px 0px rgba(214,200,255,0.88),69.3vw 514px 0px 0px rgba(200,245,255,0.57),78.6vw 825px 0px 0px rgba(255,255,255,0.58),89.2vw 884px 0px 0px rgba(214,200,255,0.65),54.9vw 713px 0px 0px rgba(255,230,180,0.86),82.5vw 547px 0px 0px rgba(200,245,255,0.64),89.3vw 479px 0px 0px rgba(214,200,255,0.41),49.9vw 497px 0px 0px rgba(255,255,255,0.82),85.7vw 525px 0px 0px rgba(200,245,255,0.64);animation:bgTwB 3.8s ease-in-out infinite;}
html.neon .hero::after{content:"";position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;z-index:0;pointer-events:none;
  box-shadow:81.2vw 404px 3px 0px rgba(200,245,255,0.46),62.0vw 675px 3px 0px rgba(255,255,255,0.46),50.5vw 646px 3px 0px rgba(200,245,255,0.79),48.3vw 117px 3px 0px rgba(255,230,180,0.43),59.9vw 168px 3px 0px rgba(255,255,255,0.53),85.3vw 754px 3px 0px rgba(255,230,180,0.66);animation:bgTwC 7s ease-in-out infinite;}
@keyframes bgTwA{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes bgTwB{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes bgTwC{0%,100%{opacity:.5}50%{opacity:1}}
/* a shooting star near the boba icon, head at the lower left, tail to the upper right */
html.neon .hero + .section,html.neon .hero + .section .wrap{position:relative;}
/* a few small stars beside the View Work button. The box is tied to the button, so they follow it at any width */
html.neon .hero .wrap::after{content:"";position:absolute;z-index:0;pointer-events:none;left:190px;top:508px;width:380px;height:120px;
  background:radial-gradient(circle at 22px 52px,rgba(255,255,255,0.85) 0,rgba(255,255,255,0.85) 1.10px,rgba(255,255,255,0) 2.30px),radial-gradient(circle at 142px 34px,rgba(255,232,180,0.8) 0,rgba(255,232,180,0.8) 1.10px,rgba(255,232,180,0) 2.30px),radial-gradient(circle at 252px 64px,rgba(255,255,255,0.6) 0,rgba(255,255,255,0.6) 0.83px,rgba(255,255,255,0) 1.72px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(190,240,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(190,240,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(190,240,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(190,240,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") 191px 43px/22px 22px no-repeat;background-repeat:no-repeat;animation:bgTwA 5.5s ease-in-out infinite;}
@media (max-width:900px){
  html.neon body::after{box-shadow:20.3vw 302px 0px 0px rgba(214,200,255,0.79),26.8vw 426px 0px 0px rgba(200,245,255,0.80),40.9vw 421px 0px 0px rgba(214,200,255,0.77),75.5vw 234px 0px 0px rgba(200,245,255,0.39),34.8vw 258px 0px 0px rgba(255,255,255,0.84),97.1vw 423px 0px 0px rgba(255,255,255,0.48),92.7vw 333px 0px 0px rgba(214,200,255,0.47),41.0vw 149px 0px 0px rgba(255,255,255,0.56),98.0vw 324px 0px 0px rgba(255,255,255,0.77),96.1vw 89px 0px 0px rgba(255,255,255,0.76),26.6vw 233px 0px 0px rgba(255,255,255,0.77),64.2vw 84px 0px 0px rgba(214,200,255,0.49),88.9vw 289px 0px 0px rgba(255,230,180,0.88),56.5vw 458px 0px 0px rgba(255,230,180,0.80),9.3vw 307px 0px 0px rgba(255,255,255,0.56),92.1vw 227px 0px 0px rgba(200,245,255,0.82),54.0vw 307px 0px 0px rgba(255,230,180,0.87),42.4vw 280px 0px 0px rgba(214,200,255,0.55),29.4vw 329px 0px 0px rgba(214,200,255,0.71),73.8vw 90px 0px 0px rgba(200,245,255,0.67);}
  html.neon .hero::before{box-shadow:62.8vw 235px 0px 0px rgba(255,230,180,0.38),32.3vw 231px 0px 0px rgba(214,200,255,0.39),88.9vw 243px 0px 0px rgba(255,230,180,0.49),74.5vw 97px 0px 0px rgba(255,255,255,0.87),71.4vw 258px 0px 0px rgba(200,245,255,0.68),13.0vw 317px 0px 0px rgba(255,230,180,0.41),84.7vw 216px 0px 0px rgba(200,245,255,0.42),44.5vw 334px 0px 0px rgba(255,230,180,0.68),63.4vw 339px 0px 0px rgba(214,200,255,0.78),53.0vw 459px 0px 0px rgba(214,200,255,0.75),24.9vw 123px 0px 0px rgba(214,200,255,0.78),62.0vw 216px 0px 0px rgba(214,200,255,0.69),71.6vw 346px 0px 0px rgba(200,245,255,0.70),74.3vw 152px 0px 0px rgba(200,245,255,0.63),64.7vw 154px 0px 0px rgba(255,255,255,0.70),2.9vw 179px 0px 0px rgba(255,255,255,0.69),11.8vw 286px 0px 0px rgba(255,255,255,0.77),89.6vw 141px 0px 0px rgba(200,245,255,0.70);}
  html.neon .hero::after{box-shadow:38.3vw 257px 3px 0px rgba(200,245,255,0.54),49.5vw 137px 3px 0px rgba(255,255,255,0.79),45.2vw 378px 3px 0px rgba(200,245,255,0.59),72.8vw 227px 3px 0px rgba(200,245,255,0.55),64.1vw 436px 3px 0px rgba(214,200,255,0.51),73.8vw 379px 3px 0px rgba(200,245,255,0.59);}
}
@media (prefers-reduced-motion:reduce){html.neon body::after,html.neon .hero::before,html.neon .hero::after{animation:none;}}

/* big sparkles: a few four point stars in different sizes, they breathe slowly */
html.neon body::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,255,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,255,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,255,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(50vw + 640px) 150px/28px 28px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(170,245,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(170,245,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(170,245,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(170,245,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(86vw - 12px) 1028px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,226,160)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,226,160)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,226,160)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,226,160)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(96.4vw - 14px) 436px/28px 28px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,170,225)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,170,225)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,170,225)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,170,225)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(94vw - 14px) 700px/28px 28px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(170,245,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(170,245,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(170,245,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(170,245,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(35.0vw - 12px) 2049px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(200,185,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(200,185,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(200,185,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(200,185,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(97.9vw - 12px) 2524px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,226,160)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,226,160)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,226,160)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,226,160)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(5.9vw - 12px) 4616px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,226,160)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,226,160)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,226,160)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,226,160)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(30.3vw - 12px) 3191px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,255,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,255,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,255,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(3.2vw - 11px) 291px/22px 22px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,255,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,255,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,255,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(38vw - 11px) 121px/22px 22px no-repeat;animation:bgTwD 6.5s ease-in-out infinite;}
@keyframes bgTwD{0%,100%{opacity:.55}50%{opacity:1}}
@media (max-width:900px){html.neon body::before,html.neon .hero .wrap::before,html.neon .hero .wrap::after,html.neon .hero + .section::before,html.neon .hero + .section::after,html.neon .hero + .section .wrap::before{display:none;}}
@media (prefers-reduced-motion:reduce){html.neon body::before{animation:none;}html.neon .hero .wrap::before,html.neon .hero + .section::before,html.neon .hero + .section::after,html.neon .hero + .section .wrap::before{display:none;}}

/* About me: a light scatter of stars in the side margins and above and below the content, plus four soft glow stars */
html.neon #about{position:relative;}
html.neon #about::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;background:transparent;box-shadow:3vw 90px 0px 0px rgba(255,255,255,0.7),2.2vw 430px 0px 0px rgba(200,245,255,0.6),2.8vw 790px 0px 0px rgba(255,255,255,0.55),95.5vw 70px 0px 0px rgba(255,232,180,0.6),94.5vw 420px 0px 0px rgba(214,200,255,0.5),95vw 780px 0px 0px rgba(255,255,255,0.55),22vw 40px 0px 0px rgba(214,200,255,0.5),70vw 52px 0px 0px rgba(200,245,255,0.5),20vw 930px 0px 0px rgba(200,245,255,0.5),62vw 932px 0px 0px rgba(214,200,255,0.5);animation:bgTwA 5.5s ease-in-out infinite;}
html.neon #about::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,255,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,255,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,255,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(7vw - 12px) 138px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(170,245,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(170,245,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(170,245,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(170,245,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(91vw - 12px) 862px/24px 24px no-repeat;animation:bgTwD 6.5s ease-in-out infinite;}
@media (max-width:900px){html.neon #about::before,html.neon #about::after{display:none;}}
@media (prefers-reduced-motion:reduce){html.neon #about::before,html.neon #about::after{animation:none;}}

/* Process step titles: solid, readable lettering with only a soft glow, instead of the hollow tube look */
html.neon .process-step h3{font-weight:700;color:color-mix(in srgb,var(--c) 35%,#fff);-webkit-text-stroke:0;text-shadow:0 0 8px color-mix(in srgb,var(--c) 32%,transparent);filter:none;}
html.neon .process-step:hover h3{color:#fff;-webkit-text-stroke:0;text-shadow:0 0 10px color-mix(in srgb,var(--c) 55%,transparent);filter:none;}

/* the other sections: just a few stars in the side margins, and two soft glow stars */
html.neon #work{position:relative;}
html.neon #work::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;background:transparent;box-shadow:2.5vw 120px 0px 0px rgba(255,255,255,0.65),96.5vw 420px 0px 0px rgba(214,200,255,0.55),3.5vw 760px 0px 0px rgba(255,232,180,0.6),97vw 1100px 0px 0px rgba(200,245,255,0.6),2.2vw 1450px 0px 0px rgba(214,200,255,0.55),96vw 1720px 0px 0px rgba(255,255,255,0.6);animation:bgTwA 5.5s ease-in-out infinite;}
html.neon #work::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,226,160)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,226,160)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,226,160)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,226,160)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(96vw - 12px) 860px/24px 24px no-repeat;animation:bgTwD 6.5s ease-in-out infinite;}
html.neon #graphic{position:relative;}
html.neon #graphic::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;background:transparent;box-shadow:3vw 80px 0px 0px rgba(214,200,255,0.55),96.5vw 300px 0px 0px rgba(255,232,180,0.6),2.5vw 470px 0px 0px rgba(255,255,255,0.55);animation:bgTwA 5.5s ease-in-out infinite;}
html.neon #process{position:relative;}
html.neon #process::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;background:transparent;box-shadow:96.5vw 90px 0px 0px rgba(255,255,255,0.55),2.5vw 330px 0px 0px rgba(200,245,255,0.55);animation:bgTwA 5.5s ease-in-out infinite;}
html.neon #side{position:relative;}
html.neon #side::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;background:transparent;box-shadow:3vw 120px 0px 0px rgba(200,245,255,0.6),96.5vw 300px 0px 0px rgba(255,255,255,0.6),2.8vw 520px 0px 0px rgba(255,232,180,0.55);animation:bgTwA 5.5s ease-in-out infinite;}
html.neon #contact{position:relative;}
html.neon #contact::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;background:transparent;box-shadow:3vw 100px 0px 0px rgba(255,255,255,0.6),96vw 330px 0px 0px rgba(255,232,180,0.6),2.5vw 500px 0px 0px rgba(214,200,255,0.55),70vw 590px 0px 0px rgba(255,255,255,0.5);animation:bgTwA 5.5s ease-in-out infinite;}
html.neon #contact::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,170,225)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,170,225)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,170,225)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,170,225)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(4vw - 12px) 250px/24px 24px no-repeat;animation:bgTwD 6.5s ease-in-out infinite;}
@media (max-width:900px){html.neon #work::before,html.neon #work::after,html.neon #graphic::before,html.neon #process::before,html.neon #side::before,html.neon #contact::before,html.neon #contact::after{display:none;}}
@media (prefers-reduced-motion:reduce){html.neon #work::before,html.neon #work::after,html.neon #graphic::before,html.neon #process::before,html.neon #side::before,html.neon #contact::before,html.neon #contact::after{animation:none;}}

/* How I work and Side works: a few bigger glow stars */
html.neon #process::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,255,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,255,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,255,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(36vw - 16px) 24px/32px 32px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(170,245,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(170,245,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(170,245,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(170,245,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(96.5vw - 16px) 210px/32px 32px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,226,160)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,226,160)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,226,160)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,226,160)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(18vw - 16px) 350px/32px 32px no-repeat;animation:bgTwD 6.5s ease-in-out infinite;}
html.neon #side::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,170,225)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,170,225)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,170,225)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,170,225)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(3.2vw - 16px) 330px/32px 32px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(255,255,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(255,255,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(255,255,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(97vw - 16px) 130px/32px 32px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(170,245,255)' stop-opacity='.62'/%3E%3Cstop offset='.3' stop-color='rgb(170,245,255)' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='rgb(170,245,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='rgb(170,245,255)'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E") calc(30vw - 16px) 585px/32px 32px no-repeat;animation:bgTwD 6.5s ease-in-out infinite;}
@media (max-width:900px){html.neon #process::after,html.neon #side::after{display:none;}}
@media (prefers-reduced-motion:reduce){html.neon #process::after,html.neon #side::after{animation:none;}}

/* About me signature: hollow gold neon tube lettering, same treatment as the nav logo */
html.neon .about-signature{font-weight:700;color:rgba(255,201,77,.14);-webkit-text-stroke:1.1px #ffe9a8;opacity:1;text-shadow:none;filter:drop-shadow(0 0 1.5px rgba(255,201,77,.95)) drop-shadow(0 0 7px rgba(255,190,60,.6)) drop-shadow(0 0 16px rgba(255,160,40,.3));}