/* ---------- Base ---------- */
body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#fff;
  color:#333;
}

/* ---------- Nav bar ---------- */
.navbar{
  list-style:none;
  display:flex;
  justify-content:center;
  margin:0;
  padding:1em 0;
  border-bottom:1px solid #ccc;
}
.navbar li{ position:relative; margin:0 0.8em; }
.navbar li:not(:last-child)::after{      /* “ / ” separator */
  content:" / ";
  position:absolute;
  right:-0.8em;
  pointer-events:none;
  color:#555;
}
.navbar a{
  text-decoration:none;
  font-weight:bold;
  font-size:1.1em;
}
/* custom link colors */
.nav-about    { color:#d9534f; }  /* red   */
.nav-pubs     { color:#5bc0de; }  /* blue  */
.nav-teaching { color:#5cb85c; }  /* green */
.nav-notes    { color:#f0ad4e; }  /* orange*/

/* ---------- About section ---------- */
/* STACK children vertically inside <main class="about">  */
.about{
  display:block;          /* or: display:flex; flex-direction:column; */
  max-width:1000px;       /* optional: keeps content from stretching too wide */
  margin:auto;
  padding:2em;
}

/* 1st row (bio + photo) stays side-by-side */
.about-top{
  display:flex;
  flex-wrap:wrap;
  gap:2em;
  justify-content:center;
  align-items:flex-start;
}

.bio{ max-width:600px; }

/* rectangular profile image */
.profile-pic{
  width:230px;           /* tweak as you like */
  height:auto;
  object-fit:cover;
  border-radius:0;       /* keep corners square */
  box-shadow:0 0 8px rgba(0,0,0,.1);
}



/* CV section sits below, centred */
.cv-block{
  margin-top:2em;
  text-align:center;
}


/* comfortable PDF frame */
.cv-embed{
  width:80%;          /* 80 % of the page, adjust as you like */
  max-width:900px;    /* prevents it getting TOO wide on huge monitors */
  height:800px;       /* plenty of vertical space */
  border:1px solid #ccc;
  box-shadow:0 0 8px rgba(0,0,0,.1);
  display:block;
  margin:0 auto;      /* centres it */
}