/* Theme: edit these colors to customize */ :root{ --bg:#1a1320; --card:#231728; --accent:#ff6fa8; --accent-2:#ffa8c7; --text:#f6e7ef; --muted:#c9b6c3; --shadow:0 8px 24px rgba(0,0,0,0.35); --radius:14px; --space:16px; } /* Base styles */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:radial-gradient(60% 80% at 20% 10%, #201527 0%, var(--bg) 60%) fixed; color:var(--text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; letter-spacing:0.2px; } /* Layout wrapper */ .wrap{ max-width:900px; margin:0 auto; padding:24px; } /* Header + nav */ header{ position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(26,19,32,0.85), rgba(26,19,32,0.6)); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid rgba(255,255,255,0.06); } .brand{ display:flex; align-items:center; gap:10px; padding:14px 24px; } .dot{ width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); } nav{display:flex; gap:10px; padding:0 24px 16px} nav a{ color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); transition:all .2s ease; } nav a:hover{background:rgba(255,255,255,0.08); color:var(--accent)} /* Cards */ section{ background:var(--card); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin:24px 0; } h1,h2{margin:0 0 8px} h1{font-size:28px} h2{font-size:22px; color:var(--accent)} p{margin:10px 0} .muted{color:var(--muted)} /* Blog list */ .post{ padding:16px; border-radius:12px; border:1px dashed rgba(255,255,255,0.12); margin:12px 0; background:rgba(255,255,255,0.03); } .post time{color:var(--muted); font-size:0.9em} /* Footer */ footer{padding:24px; text-align:center; color:var(--muted)} a.inline{color:var(--accent-2)}