:root { --bg:#faf7ef; --primary:#583d2c; --primary2:#6b4f3d; --secondary:#353535; --secondary2:#4a4a4a; --card:#ffffff; --card2:#f5f3ea; --text:#1c1c1c; --shadow:0 6px 20px rgba(0,0,0,0.15); --radius:18px; }
body.dark-mode {--bg: #090f2a; --primary: #5b7cff; --primary2: #3b5bfd; --secondary: #f0f2ff; --secondary2: #a7b7ff; --card: #ffffff0d; --card2: #ffffff14; --text: #f5f7ff; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --radius: 18px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--text); font-family: "Source Sans Pro", sans-serif; background: var(--bg); }
h2 { font-size: 1em; margin: 0; }
.social a i, .conticon i { font-size: 23px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* toggle dark mode */
.top-actions { position:fixed; top:16px; right:16px; z-index:999; }
.action-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid #ffffff22; background:var(--card); color:var(--text); box-shadow:var(--shadow); cursor:pointer; transition:.2s; }
.action-btn i { font-size:18px; }
.action-btn:hover { transform:translateY(-2px); background:var(--card2); }
/* Particles background holder */
#particles-js { position: fixed; inset: 0; z-index: 0; }
/* Layout wrapper */
.wrap { max-width: 1150px; margin: clamp(16px, 4vw, 40px) auto; padding: 20px 20px 50px; display: flex; gap: 28px; align-items: flex-start; flex-direction: column; }
.wrap, .card, .content, .profile { position: relative; z-index: 1; pointer-events: none; } 
.wrap * { pointer-events: auto; }
/* Left profile stack */
.profile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 25px; }
.avatar { width: 150px; height: 150px; border-radius: 50%; border: 5px solid #ffffff22; box-shadow: var(--shadow); object-fit: cover; background: #111; }
.social { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
.social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid #ffffff14; background: var(--card); backdrop-filter: blur(6px); color: var(--secondary); text-decoration: none; font-size: 20px; transition: 0.25s transform, 0.25s background, 0.25s color; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.social a:hover { transform: translateY(-3px); background: var(--card2); color: var(--secondary2); }
/* Right content area */
.content { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.card { background: var(--card); border: 1px solid #ffffff14; backdrop-filter: blur(6px); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 26px); box-shadow: var(--shadow); }
.prg { font-size: clamp(18px, 1.9vw, 20px); line-height: 1.6; color: var(--secondary); }
.prg2 { font-size: 16px; color: var(--secondary); }
.section-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px 0; font-size: clamp(22px, 2.2vw, 26px); }
.rail { height: 3px; flex: 1; background:  var(--text); border-radius: 999px; position: relative; }
.rail::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 10px; border-radius: 50%; background: var(--text); }
.rail::after { right: -6px; }
.blog { display: grid; grid-template-columns: 180px 1fr; gap: 15px; align-items: center; }
.blog img { max-width: 180px; width: 100%; height: auto; background: #fff; border-radius: 14px; box-shadow: var(--shadow);}
.blog h3 { margin: 0.2rem 0; font-size: clamp(18px, 1.9vw, 20px); }
.blog p { margin: 0.2rem 0 0 0; color: var(--secondary); line-height: 1.6; }
.btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--primary); color: #fff; text-decoration: none; font-weight: 600; transition: 0.25s background, 0.25s transform; }
.btn:hover { background: var(--primary2); transform: translateY(-2px); }
.btn i { font-size: 14px; }
/* Contact section */
.contact { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
.item { display: flex; align-items: center; gap: 14px; }
.conticon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--card2); color: var(--secondary); flex: 0 0 auto; }
.info { display: flex; flex-direction: column; line-height: 1.4; }
.label { font-weight: 600; font-size: 15px; color: var(--secondary); }
.value { font-size: 15px; color: var(--secondary); text-decoration: none; transition: color 0.2s; }
.value:hover { color: var(--primary); }
/* Footer section */
.site-footer { text-align: center; letter-spacing: 1.5px; padding: 20px 10px; color: var(--secondary); font-size: 14px; font-weight: 800;}
/* Responsive split at desktop width */
@media (min-width: 920px) { .wrap { flex-direction: row; } .profile { width: 33%; position: sticky; top: 20px; align-self: flex-start; } .content { width: 67%; } .contact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .avatar { width: 120px; height: 120px; } .prg1 { text-align: center; } .blog { grid-template-columns: 1fr; text-align: center; } .blog img { margin: 0 auto 12px auto; max-width: 220px; } .blog h3 { font-size: 16px; } .blog p { font-size: 14px; } }
/* Scrollbar browser */
* { scrollbar-width: auto; scrollbar-color: var(--secondary2) var(--card); }