:root{
  --fg:#C0C0C0; --bg:#101010;
  --c6:#50CACD; --c7:#808080; --c12:#CCACED; --c15:#C0C0C0;
  --radius-lg:20px; --radius-md:14px;
  --shadow:0 8px 40px rgba(0,0,0,.35);
  --e-bounce:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Fira Code",monospace; line-height:1.7;
  scroll-behavior:smooth;
}

.section{min-height:80vh;padding:6rem 1.5rem}
.container{max-width:1080px;margin:0 auto}
.title{font-size:2.2rem;margin-bottom:1.5rem;color:var(--c12)}
.lead{font-size:1.05rem;max-width:75ch;margin-bottom:1.8rem;color:var(--c15)}

.grid{display:grid;gap:2rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards-centered{justify-items:center}

/* Titles */
#about .title{
  font-size:2.8rem;
  color: #C0C0C0;
}

.projects-title {
  color: #A3B8EF; /* amber/yellow */
}

/* Contact title override */
#contact .title {
  color: #CCACED; /* blue/violet */
}


/* Cards */
.card{
  background:rgba(23,23,23,.6);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:1.5rem;
  backdrop-filter:blur(4px);
  transition:transform .4s var(--e-bounce), box-shadow .4s ease;
  width:100%;
}
.card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.card-title{margin:0 0 .5rem;font-size:1.1rem;color:var(--c6)}
.card-title.subtle{color:var(--c7)}
.subtle,.muted{color:var(--c7)}

.languages{list-style:none;padding:0;margin:.3rem 0 1.6rem;font-size:.95rem;color:var(--c7)}
.languages li{margin:.25rem 0}

.email,.phone{color:var(--c6);text-decoration:none;border-bottom:1px dashed rgba(80,202,205,.35)}
.email:hover,.phone:hover{border-color:rgba(80,202,205,.8)}
.contact-info{font-size:1rem;color:var(--c15);line-height:1.8}

.pill {
  display: inline-block;
  font-family: "Fira Code", monospace; /* keeps the code-like feel */
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.05); /* subtle background */
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--c7); /* muted gray from your palette */
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  line-height: 1.4;
}


/* Navbar */
.navbar{
  position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:.65rem 2rem;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
            rgba(24,24,24,.45);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(5px) saturate(130%);
}
.nav-links{list-style:none;display:flex;gap:2rem;margin:0;padding:0}
.nav-link{color:var(--c15);text-decoration:none;font-weight:700;position:relative;padding:.2rem .5rem;transition:color .3s ease}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--c6);transition:width .3s var(--e-bounce)}
.nav-link:hover{color:var(--c6)}
.nav-link:hover::after{width:100%}

/* About pic */
.about-pic img{
  width:100%;max-width:220px;
  border-radius:var(--radius-md);
  object-fit:cover;
  opacity:0;transform:translateY(20px);
  animation:floatIn 1s var(--e-bounce) forwards;
  animation-delay:.3s;
  margin:0 auto 1.5rem 0;
  display:block;
}

/* Projects */
.projects-title{margin-bottom:1rem;text-align:left}
.project{width:100%;min-height:300px;text-align:center}
.project-img{width:100%;height:170px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:1rem}
.project-year{font-size:.9rem;color:var(--c7);margin-top:-.5rem;margin-bottom:1rem}

/* Animations */
.fade-in{opacity:0;animation:fadeIn .9s ease forwards}
.fade-in-up{opacity:0;transform:translateY(20px);animation:fadeInUp 1s var(--e-bounce) forwards}
.float-pic img{animation-delay:.5s}

@keyframes fadeIn{to{opacity:1}}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
@keyframes floatIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.experience-link {
  color: var(--c15);   /* same muted gray as other text */
  text-decoration: none;
  font-weight: normal; /* not bold */
  transition: color 0.3s ease;
}

.experience-link:hover {
  color: #fff; /* white on hover */
}

/* Ensure all project titles use teal */
.card-title {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  color: var(--c6);    /* teal */
  font-weight: normal; /* not bold */
}

/* Paint.cpp link looks teal like the rest */
.project .card-title a {
  text-decoration: none;
  color: var(--c6);    /* teal */
  font-weight: normal; /* not bold initially */
  transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Paint.cpp turns bold only on hover */
.project .card-title a:hover {
  font-weight: bold;
}