:root{ --bg-overlay: rgba(10, 22, 50, .55); --panel: rgba(255,255,255,.14); --panel-border: rgba(255,255,255,.18); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.82); --shadow: 0 12px 30px rgba(0,0,0,.25); /* Accents */ --accent: #2ecc71; --accent-2: rgba(46, 204, 113, .20); /* Radius */ --r-lg: 16px; --r-md: 12px; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); min-height:100vh; padding: 22px 18px 34px; /* fallback behind pseudo-elements */ background: #0b4aa2; position: relative; } /* Background image (set per page): */ body::before{ content:""; position: fixed; inset: 0; /* Always keep a base gradient layer so if the image URL fails the page doesn't end up with a flat grey overlay. */ background: linear-gradient(var(--bg-overlay), var(--bg-overlay)), var(--bg-image, none), linear-gradient(135deg,#0b4aa2,#073a84); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -2; } body::after{ content:""; position: fixed; inset: 0; background: radial-gradient(ellipse at top, rgba(255,255,255,.08), transparent 55%); z-index: -1; } a{ color: inherit; } a:hover{ opacity:.95; } .container{ max-width: 980px; margin: 0 auto; } .card{ background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } h1,h2,h3{ margin:0; } p{ margin:0; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius: 12px; padding: 10px 14px; font-size: 16px; cursor:pointer; user-select:none; text-decoration:none; } .btnPrimary{ background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 10px 18px rgba(0,0,0,.18); } .btnPrimary:hover{ filter: brightness(1.05); } .btnPrimary:active{ transform: translateY(1px); } .btnGhost{ background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); } .small{ opacity:.9; font-size: 14px; line-height: 1.35; } .muted{ color: var(--muted); }