@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");

/* Base styles for the layout */
#main-wrapper {
  display: flex;
  flex-wrap: wrap;
}

body {
  color: #a7adb1; /* default color for the entire page */
  font-family: 'Open Sans', sans-serif; /* Set a consistent font */
  margin: 0px;
}

p {
  line-height: 1.1;
}

h1 {
  font-family: "Bradford";
}

h2 {
  font-family: "Bradford", "Times", serif; /* Font family for headings and paragraphs */
  font-weight: 300; /* Matches the bold text weight */
  overflow-wrap: break-word; /* Handles long words gracefully */
  text-wrap: wrap; /* Ensures text wraps to fit */
  -webkit-font-smoothing: antialiased; /* Smoothens font appearance */
  color: #66cc99;
  line-height: 1em;
  margin-bottom: 0px;
}

h3 {
  font-weight: 300; /* Matches the bold text weight */
  font-size: 1em;
  color: rgb(206, 212, 211);
}

.main-column {
  padding: 10px;
  box-sizing: border-box; /* Ensures padding does not affect width */
}

.left {
  flex: 25%; /* Take up equal space by default */
  min-width: 300px; /* Set a minimum width to prevent columns from becoming too narrow */
  height: 100vh; /* Take up the full height of the viewport */
  position: sticky;
}

.right {
  flex: 75%;
  min-width: 300px;
  background: #3d3e42;
  padding-left: 60px;
}

img {
  max-width: 100%; /* Ensure the image is responsive */
  height: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

header {
  display: flex;       /* Use flexbox for centering */
  flex-direction: column;   /* Stack items vertically */
  align-items: center;      /* Horizontally center items */
  justify-content: center;  /* Vertically center items */
  height: 100%;            /* Ensure it takes the full height available */
  text-align: left;         /* Center align text */
  color: #3d3e42;
}

/* Sidebar (left column) */
header.main-column.left {
  position: sticky;          /* Sticky for large screens */
  top: 0;
  height: 100vh;             /* Full viewport height */
  overflow-y: auto;          /* Scroll sidebar content if needed */
  background-color: #2f2f2f; /* Dark background */
  border-right: 1px solid #3a3a3a; /* Subtle border */
  box-shadow: none;                /* Remove lighter box shadow */
  color: #cccccc;                  /* Light gray text for contrast */
  flex: 1;                         /* Sidebar takes up space proportionally */
  min-width: 250px;                /* Minimum width */
}

#content-wrapper {
  flex: 2; /* Right content takes up more space */
  padding: 60px;
  overflow-y: auto;
}

#profile-picture {
  margin-bottom: 20px; /* Add some space below the profile picture */
}

#profile-content {
  display: grid;
  grid-template-columns: auto 1fr; /* Two columns: heading and content */
  gap: 1rem; /* Tighten spacing */
  align-items: center; /* Ensure content aligns vertically */
  max-width: 600px; /* Optional: limit width */
  margin: 0 auto;
}

h1 {
  text-align: left;
  font-size: 2.5em;
}

/* Headings and paragraph spacing in the profile-content */
#profile-content h3,
#profile-content p {
  padding: 0 !important;
  margin-bottom: 0.2em !important;
  margin-top: 0.2em;
}

#profile-content h3 {
  text-align: left;
  font-weight: 600;
  color: #75b997;
}

#profile-content p {
  text-align: left;
  font-weight: 500;
}

/* Time-table styles */
.time-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 1.5em;
  table-layout: fixed; /* Forces columns to respect assigned widths */
}

.time-table td {
  vertical-align: top;
  padding: 0.5em; /* Optional: some padding for readability */
}

.time-table h3 {
  margin: 0 0 0.2em 0; /* Some spacing below the heading */
}

/* First column (description) */
.time-table td:nth-child(1) {
  width: 50%;
}

/* Second column (location) */
.time-table td:nth-child(2) {
  width: 25%;
  text-align: left;
  color: #a7adb1;
}

/* Third column (year) */
.time-table td:nth-child(3) {
  width: 25%;
  text-align: right;
  color: #a7adb1;
}

/* Responsive behavior for smaller screens */
@media screen and (max-width: 768px) {
  header.main-column.left {
    position: relative; /* Sidebar scrolls with the page */
    height: auto;       /* Content determines height */
    box-shadow: none;   /* Optional: remove shadow */
  }

  .right {
    padding-left: 60px;
  }

  #main-wrapper {
    display: block; /* Stack elements vertically */
  }

  #content-wrapper {
    padding: 10px;
    padding-left: 40px;
  }
}