/* =========================== MONA — GIF BACKGROUND + Neon Airbrush Skin (HEAVY) Apply to every page with: Panels stay SOLID. =========================== */ :root{ --neon: #39ff14; --neon-glow-1: rgba(57,255,20,.62); --neon-glow-2: rgba(57,255,20,.38); --neon-glow-3: rgba(57,255,20,.22); } /* FORCE ALL TEXT COLORS */ body.airbrush-wall, body.airbrush-wall *{ color: var(--neon) !important; } /* Inputs/placeholder neon too */ body.airbrush-wall input, body.airbrush-wall textarea, body.airbrush-wall select, body.airbrush-wall button{ color: var(--neon) !important; caret-color: var(--neon) !important; } body.airbrush-wall ::placeholder{ color: rgba(57,255,20,.65) !important; } /* ===== BACKGROUND GIF (YOUR PINIMG GIF) ===== */ body.airbrush-wall{ background-image: linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.58)), url("https://i.pinimg.com/originals/7c/31/8c/7c318c8725321f75b8959c7cfd2373b1.gif"); background-size: cover; background-position: center center; background-repeat: no-repeat; /* Keeps the vibe consistent while scrolling */ background-attachment: fixed; /* Slight boost */ filter: saturate(1.06) contrast(1.08); } /* Heavy airbrush fog + scanline mist */ body.airbrush-wall::before{ content:""; position: fixed; inset: -12%; pointer-events:none; z-index: 9998; background: radial-gradient(circle at 50% 30%, rgba(57,255,20,.18), rgba(0,0,0,0) 58%), radial-gradient(circle at 18% 72%, rgba(57,255,20,.12), rgba(0,0,0,0) 55%), radial-gradient(circle at 88% 58%, rgba(57,255,20,.10), rgba(0,0,0,0) 58%), repeating-linear-gradient( to bottom, rgba(0,0,0,0.00) 0px, rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.14) 3px ); opacity: .95; mix-blend-mode: screen; filter: blur(.2px); } /* paint speckle / overspray dots */ body.airbrush-wall::after{ content:""; position: fixed; inset: -20%; pointer-events:none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); background-size: 280px 280px; opacity: .24; mix-blend-mode: overlay; animation: sprayDrift 1.7s steps(2) infinite; filter: contrast(1.22) brightness(1.18); } @keyframes sprayDrift{ 0% { transform: translate(0,0); } 25% { transform: translate(-1.2%, .8%); } 50% { transform: translate(.8%, -1.0%); } 75% { transform: translate(1.2%, 1.0%); } 100% { transform: translate(0,0); } } /* Neon glow on text */ body.airbrush-wall, body.airbrush-wall *{ text-shadow: 0 0 6px var(--neon-glow-1), 0 0 14px var(--neon-glow-2), 0 0 28px var(--neon-glow-3), 0 0 44px rgba(57,255,20,.14); } /* Borders glow (panels stay solid) */ body.airbrush-wall .panel, body.airbrush-wall .card, body.airbrush-wall .clock, body.airbrush-wall .tab{ border-color: rgba(57,255,20,.50) !important; box-shadow: 0 0 0 1px rgba(0,0,0,.65) inset, 0 0 14px rgba(57,255,20,.20), 0 0 28px rgba(57,255,20,.12) !important; } /* tabs: extra sprayed */ body.airbrush-wall .tab{ filter: saturate(1.28) brightness(1.16); position: relative; overflow: hidden; } body.airbrush-wall .tab::before{ content:""; position:absolute; inset:-30%; pointer-events:none; background: radial-gradient(circle at 30% 40%, rgba(57,255,20,.22), rgba(0,0,0,0) 55%), radial-gradient(circle at 70% 60%, rgba(57,255,20,.14), rgba(0,0,0,0) 60%); opacity:.95; mix-blend-mode: screen; } /* cursor stronger */ body.airbrush-wall .cursor{ background: var(--neon) !important; box-shadow: 0 0 10px var(--neon-glow-1), 0 0 22px var(--neon-glow-2) !important; }