/* Cosmic Strings theme — Angeliki & Alexandros. Two stars, 25 years apart, drawn together along invisible strings. To disable: comment out the that loads this file in . */ :root { color-scheme: dark; } body { background: radial-gradient(ellipse 120% 60% at 50% -10%, #1b2570 0%, #0b1130 45%, #050814 100%); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; color: #eef1ff; position: relative; overflow-x: hidden; } body::before, body::after { content: ""; position: fixed; inset: -5%; z-index: -1; pointer-events: none; } /* starfield: plain CSS, no image */ body::before { background-image: radial-gradient(1.6px 1.6px at 12% 22%, #e8ecff, transparent), radial-gradient(1.2px 1.2px at 68% 64%, #e8ecff, transparent), radial-gradient(1.6px 1.6px at 38% 78%, #e8ecff, transparent), radial-gradient(1.2px 1.2px at 83% 18%, #e8ecff, transparent), radial-gradient(1.2px 1.2px at 8% 58%, #e8ecff, transparent), radial-gradient(1.6px 1.6px at 54% 8%, #e8ecff, transparent), radial-gradient(1.2px 1.2px at 91% 84%, #e8ecff, transparent), radial-gradient(1.2px 1.2px at 28% 48%, #e8ecff, transparent), radial-gradient(1.6px 1.6px at 63% 38%, #e8ecff, transparent), radial-gradient(1.2px 1.2px at 4% 88%, #e8ecff, transparent); background-repeat: repeat; background-size: 360px 360px; animation: cs-twinkle 7s ease-in-out infinite alternate; } /* the strings themselves */ body::after { background-image: url("/cosmic-strings.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0.6; animation: cs-drift 50s ease-in-out infinite alternate; } @keyframes cs-twinkle { from { opacity: 0.5; } to { opacity: 0.9; } } @keyframes cs-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-1.5%, -1%, 0) scale(1.03); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } /* legibility on the dark sky */ header .subtitle, header .tagline, p { color: #c3caf0; } header h1, h1, h2 { color: #f3f5ff; } #error { color: #ff7a90; } .status-pending { color: #a9b3e0; } .status-done { color: #7be3ab; } .status-error { color: #ff7a90; } #files li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } a { color: #b9c6ff; } /* the upload button — warm light against the cold sky */ .picker-btn { background: linear-gradient(135deg, #ffd08a, #ff7fa8); color: #2a1030; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 22px rgba(255, 140, 170, 0.45), 0 0 6px rgba(255, 216, 155, 0.55); animation: cs-glow-pulse 3.5s ease-in-out infinite; } .picker-btn:active { box-shadow: 0 0 10px rgba(255, 140, 170, 0.35); } .picker-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @keyframes cs-glow-pulse { 0%, 100% { box-shadow: 0 0 22px rgba(255, 140, 170, 0.45), 0 0 6px rgba(255, 216, 155, 0.55); } 50% { box-shadow: 0 0 30px rgba(255, 140, 170, 0.65), 0 0 10px rgba(255, 216, 155, 0.75); } } @media (prefers-reduced-motion: reduce) { .picker-btn { animation: none; } }