/* Dark portfolio theme */
:root{
  --bg:#0f1115;
  --panel:#171a21;
  --muted:#a8b3cf;
  --text:#e6e9f4;
  --accent:#ffc107;
  --accent2:#0a66c2;
  --border:rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--accent2);text-decoration:none}
.page{display:grid;grid-template-columns:320px 1fr;min-height:100vh;max-width:1200px;margin:0 auto;gap:24px;padding:24px}
.sidebar{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;position:sticky;top:24px;height:fit-content}
.avatar img{width:100%;max-width:140px;border-radius:20px;display:block;margin:0 auto 12px auto;background:#222}
.name{margin:4px 0 4px;font-size:26px}
.role{opacity:.9;margin-bottom:8px}
.chip{display:inline-block;background:#111;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;margin:8px 0}
.divider{height:1px;background:var(--border);margin:16px 0}
.contact .item{margin:6px 0;color:var(--muted)}
.social{display:flex;gap:12px;margin:12px 0 18px}
.btn{display:block;text-align:center;background:var(--accent);color:#111;font-weight:700;border-radius:12px;padding:10px 14px;margin-top:8px}

.content{}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:12px;cursor:pointer}
.tab.active{outline:2px solid var(--accent);}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.card{background:#12151b;border:1px solid var(--border);padding:16px;border-radius:14px}
.card-title{font-weight:700;margin-bottom:6px}

.projects {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}

.project {
  background:#12151b;
  border:1px solid var(--border);
  padding:16px;
  border-radius:14px;
  display:block;
}

/* Add this new hover effect */
.project:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.project-title {
  font-weight:700;
  margin-bottom:6px;
}

.project-meta {
  color:var(--muted);
  font-size:14px;
}

.resume-list{line-height:1.8;color:var(--muted)}

@media (max-width: 900px){
  .page{grid-template-columns:1fr}
  .sidebar{position:relative;top:0}
}

/* Project thumbnail styling */
.project img {
  width: 100%;
  max-height: 200px;   /* all thumbnails limited to same height */
  object-fit: cover;   /* crops extra part but keeps proportions */
  border-radius: 12px; /* rounded corners */
  margin-bottom: 10px; /* space below image */
  display: block;
  transition: transform 0.3s ease; /* <-- added */
}

/* New hover effect */
.project:hover img {
  transform: scale(1.05);

}

:root{
  --bg:#1e1f23;           /* panel background */
  --card:#2a2b30;         /* icon circles & avatar bg */
  --text:#e9edf1;
  --muted:#a5aab3;
  --accent:#ffd34d;       /* your CV button already uses yellow */
  --ring: rgba(255,255,255,0.06);
}

.sidepanel{
  background: var(--bg);
  color: var(--text);
  width: 100%;
  max-width: 360px;              /* adjust if your layout needs */
  border-radius: 24px;
  padding: 28px 24px 24px;
  box-shadow: 0 1px 0 #000, 0 12px 30px rgba(0,0,0,.35);
  border: 1px solid var(--ring);
}

.avatar-wrap{
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.avatar{
  width: 112px;
  height: 112px;
  border-radius: 24px;
  display: block;
}

.name{
  text-align: center;            /* centered name */
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 6px;
  letter-spacing: .2px;
}

.role-pill{
  margin: 0 auto 18px;           /* centered role */
  width: fit-content;
  padding: 8px 14px;
  border-radius: 12px;
  background: #2f3036;
  color: var(--text);
  font-size: 14px;
  border: 1px solid var(--ring);
}

.divider{
  border: none;
  border-top: 1px solid var(--ring);
  margin: 16px 0 12px;
}

.contact{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
}

.icon-wrap{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--card);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--ring);
}
.icon-wrap svg{
  width: 26px; height: 26px;
  fill: #f5d16a;                /* soft gold */
}

.contact-text .label{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.contact-text .value{
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
}

.socials{
  display: flex;
  justify-content: center;       /* centered social icons */
  gap: 14px;
  margin-top: 10px;
}

.social-btn{
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--card);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--ring);
  transition: transform .15s ease, box-shadow .15s ease;
}
.social-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 0 0 1px var(--ring); }
.social-btn svg{ width: 22px; height: 22px; fill: var(--text); }

/* Works for both <img class="avatar"> and SVG avatars */
.sidepanel .avatar{
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: block;
  border-radius: 24px;                      /* keep the rounded look */
}

/* Optional: a touch more breathing room below the avatar */
.sidepanel .avatar-wrap{ margin-bottom: 18px; }

/* Optional: scale up a bit more on large screens */
@media (min-width: 900px){
  :root { --avatar-size: 176px; }
}

/* Force center the CV button inside the sidebar, regardless of other .btn rules */
.sidebar.sidepanel .cv-btn-center{
  display: flex;
  justify-content: center;   /* centers horizontally */
}

.sidebar.sidepanel .cv-btn-center .btn{
  display: inline-flex;      /* keeps size to content */
  align-items: center;
  gap: 8px;
  width: auto !important;    /* beat any width:100% from old styles */
  margin: 16px 0 0 0;        /* top spacing only; flex handles centering */
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration: none;
}