/* ===== CSS from home.html ===== */
body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
    }
    nav {
      background-color: #333;
      padding: 15px;
      text-align: center;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      padding: 5px;
    }
    nav a:hover {
      background-color: #555;
    }
    #profile-container {
      max-width: 960px;
      margin: 20px auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #profile-picture {
      width: 200px;
      height: 200px;
      background: #ccc;
      border-radius: 50%;
      margin-right: 30px;
      overflow: hidden;
    }
	#profile-picture img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;   /* fill the square without distortion */
	  object-position: 50% 10%;   /* move image slightly down to show more top of head */
	}
    #profile-text {
      max-width: 500px;
    }


/* ===== CSS from publications.html ===== */
body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
    }
    nav {
      background-color: #333;
      padding: 15px;
      text-align: center;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      padding: 5px;
    }
    nav a:hover {
      background-color: #555;
    }
    #publications-container {
      max-width: 960px;
      margin: 20px auto;
      padding: 20px;
    }
    .publication {
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
    }
    .publication-title {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .publication-description {
      margin-bottom: 10px;
    }
    #references {
      margin-top: 30px;
    }


/* ===== CSS from teaching.html ===== */
body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
    }
    nav {
      background-color: #333;
      padding: 15px;
      text-align: center;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      padding: 5px;
    }
    nav a:hover {
      background-color: #555;
    }
    #teaching-container {
      max-width: 960px;
      margin: 20px auto;
      padding: 20px;
    }
    .course {
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
    }
    .course-title {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .course-school,
    .course-description {
      margin-bottom: 10px;
    }
	.section-divider {
	  border: 0;
	  border-top: 3px dashed #999;
	  margin: 2.5em 0;
	}


/* ===== CSS from tools.html ===== */
body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
    }
    nav {
      background-color: #333;
      padding: 15px;
      text-align: center;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      padding: 5px;
    }
    nav a:hover {
      background-color: #555;
    }
    #tools-container {
      max-width: 960px;
      margin: 20px auto;
      padding: 20px;
    }
    .section {
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
    }
    .section-title {
      font-weight: bold;
      margin-bottom: 10px;
    }


/* ===== CSS from about.html ===== */
body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
    }
    nav {
      background-color: #333;
      padding: 15px;
      text-align: center;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      padding: 5px;
    }
    nav a:hover {
      background-color: #555;
    }
    #about-me-container {
      max-width: 960px;
      margin: 20px auto;
      padding: 20px;
    }
    .section {
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
    }
    .section-title {
      font-weight: bold;
      margin-bottom: 10px;
    }


/* ===== CSS from consulting.html ===== */
body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
    }
    nav {
      background-color: #333;
      padding: 15px;
      text-align: center;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      padding: 5px;
    }
    nav a:hover {
      background-color: #555;
    }
    #consulting-container {
      max-width: 960px;
      margin: 20px auto;
      padding: 20px;
    }
    .section {
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
    }
    .section-title {
      font-weight: bold;
      margin-bottom: 10px;
    }
	.section-divider {
	  border: 0;
	  border-top: 3px dashed #999;
	  margin: 2.5em 0;
	}


/* ===== CSS from contact.html ===== */
body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
    }
    nav {
      background-color: #333;
      padding: 15px;
      text-align: center;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      padding: 5px;
    }
    nav a:hover {
      background-color: #555;
    }
    #contact-container {
      max-width: 960px;
      margin: 20px auto;
      padding: 20px;
    }
    .section-title {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .contact-item {
      margin-bottom: 10px;
    }
/* Layout foundation */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

/* Let main grow to push footer down */
main {
  flex: 1;
}

/* Footer placement */
.site-footer {
  align-self: flex-end;   /* right-align */
  margin: 0 20px 10px 0;  /* some breathing room */
  font-size: 0.9rem;
  color: #666;
}

@media (max-width: 768px) {
  #profile-container {
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    gap: 14px;
  }
  #profile-picture {
    width: 140px;
    height: 140px;
    margin: 0;
  }
  #profile-text { max-width: 100%; }
  nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
  img { max-width: 100%; height: auto; }
}