@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.7; color: #222; background:#fafafa; margin:0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

h1 { font-family: 'Playfair Display', serif; font-size: 2.6rem; text-align:center; margin:2.5rem 0 1rem; color:#1a1a1a; }
h2.topic { font-size:1.15rem; text-transform:uppercase; letter-spacing:0.25em; text-align:center; color:var(--accent,#e67e22); margin:4rem 0 2rem; font-weight:600; }

.profile-header { display:flex; align-items:flex-start; gap:40px; background:#fff; padding:40px; border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,.08); margin:30px 0; }
.avatar { width:180px; height:180px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.profile-info p { margin:0.6rem 0; }
.profile-info a { color:var(--accent,#e67e22); }

.tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:3rem 0; }
.tabs a { padding:14px 28px; background:#fff; border:2px solid #e2e2e2; border-radius:50px; font-weight:600; color:#555; text-decoration:none; transition:.3s; }
.tabs a:hover, .tabs a.active { background:var(--accent,#e67e22); border-color:var(--accent,#e67e22); color:#fff; }

.article1 { margin:0 0 1.6rem; text-align:justify; text-indent:2em; }
.article1.zero_indent { text-indent:0; }

table#resume { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.1); margin:3rem 0; }
table#resume td { padding:14px 20px; border-bottom:1px solid #eee; vertical-align:top; }
table#resume tr:last-child td { border-bottom:none; }
table#resume td:first-child { width:280px; font-weight:600; background:#f8f8f8; }

.backtolib { display:block; width:fit-content; margin:5rem auto 2rem; padding:16px 40px; background:#222; color:#fff; border-radius:50px; font-size:1.1rem; font-weight:600; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.15); transition:.3s; }
.backtolib:hover { transform:translateY(-3px); box-shadow:0 15px 40px rgba(0,0,0,.22); }

@media (max-width:900px) { .profile-header { flex-direction:column; text-align:center; } .avatar { margin:0 auto 20px; } }