/* Base styles for the document */
body {
    font-family: Arial, sans-serif; /* Set the font family for the document */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    background-color: #f4f4f4; /* Set background color */
}

.justified-text {
    text-align: justify;
}

/* Container for the main content */
.container {
    max-width: 800px; /* Set maximum width */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Add padding */
    background-color: #fff; /* Set background color */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Add subtle shadow */
}

/* Style for main headings to align left */
.main-heading {
    text-align: left; /* Align text to the left */
    margin-left: 0; /* Remove left margin */
    padding-left: 0; /* Remove left padding */
}

/* Header section styles */
header {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    margin-bottom: 20px; /* Add space below header */
}

/* Style for the profile picture */
#headshot {
    width: 150px; /* Set width */
    height: 150px; /* Set height */
    border-radius: 50%; /* Make it circular */
    margin-right: 20px; /* Add space to the right */
}

/* Style for the header information */
.header-info {
    flex: 1; /* Allow this section to grow and fill space */
}

/* Style for the main name heading */
h1 {
    margin: 10px 0 5px; /* Set margins */
}

/* General section styling */
section {
    margin-bottom: 20px; /* Add space below sections */
}

/* Timeline styling */
.timeline {
    position: relative; /* Relative positioning */
    margin: 20px 0; /* Vertical margins */
    padding: 10px 0; /* Vertical padding */
    list-style-type: none; /* Remove list styling */
}

.timeline::before {
    content: ''; /* Empty content for the line */
    position: absolute; /* Absolute positioning */
    top: 0; /* Align to top */
    bottom: 0; /* Align to bottom */
    width: 4px; /* Set width */
    background: #ddd; /* Set background color */
    left: 20%; /* Position from the left */
    margin-left: -2px; /* Center the line */
}

/* Individual timeline item styling */
.timeline-item {
    margin: 10px 0; /* Vertical margins */
    padding-left: 30%; /* Padding to the left */
    position: relative; /* Relative positioning */
}

.timeline-item::before {
    content: ''; /* Empty content for the dot */
    position: absolute; /* Absolute positioning */
    width: 10px; /* Set width */
    height: 10px; /* Set height */
    border-radius: 50%; /* Make it circular */
    background: #ddd; /* Set background color */
    top: 10px; /* Position from the top */
    left: 20%; /* Position from the left */
    margin-left: -5px; /* Center the dot */
}

/* Styling for the timeline content */
.timeline-content {
    padding: 10px 20px; /* Padding inside the box */
    background: #fff; /* Set background color */
    position: relative; /* Relative positioning */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow */
}

.timeline-content h3 {
    margin-top: 0; /* Remove top margin */
}

/* Styling for the date in the timeline */
.timeline-date {
    position: absolute; /* Absolute positioning */
    left: 0; /* Align to the left */
    width: 20%; /* Set width */
    text-align: right; /* Align text to the right */
    padding-right: 10px; /* Padding to the right */
    box-sizing: border-box; /* Include padding in width */
}

/* Style for images in the timeline */
.timeline-img {
    width: 100px; /* Set width */
    height: auto; /* Auto height to maintain aspect ratio */
    margin-top: 10px; /* Add space above */
}

/* Style for the projects section */
.projects {
    margin: 20px 0; /* Vertical margins */
}

.project-item {
    margin: 10px 0; /* Vertical margins */
    padding: 10px; /* Padding inside the box */
    background: #fff; /* Set background color */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow */
}

.project-item h3 {
    margin-top: 0; /* Remove top margin */
}

/* Style for the Education collapsible buttons */
.collapsible {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 10px; /* Padding inside the button */
    width: 100%; /* Full width */
    border: none; /* No border */
    text-align: left; /* Left-aligned text */
    outline: none; /* Remove outline */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* Change background color on hover */
.active, .collapsible:hover {
    background-color: #2A9237; /* Darker green */
    color: black; /* Black text */
}

/* Style for the collapsible blue buttons */
.collapsible-education {
    background-color: #84b9e4; /* Blue background */
    color: black; /* White text */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 10px; /* Padding inside the button */
    margin: 5px; /* adds padding outside */
    width: 100%; /* Full width */
    border: 1px solid black; /* Small border */
    text-align: left; /* Left-aligned text */
    outline: none; /* Remove outline */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* Change background color on hover */
.active, .collapsible-education:hover {
    background-color: #9c909a; /* Grey background */
}


/* Style for the collapsible project buttons */
.collapsible-projects {
    background-color: #84b9e4; /* Blue background */
    color: black; /* Black text */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 10px; /* Padding inside the button */
    margin: 5px; /* adds padding outside */
    width: 100%; /* Full width */
    border: 0px solid black; /* Small border */
    text-align: left; /* Left-aligned text */
    outline: none; /* Remove outline */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* Change background color on hover */
.active, .collapsible-projects:hover {
    background-color: #9c909a; /* Grey background */
}

/* Additional styles for content panels */
.project-content {
    display: none; /* Hidden by default */
    padding: 10px; /* Padding inside the panel */
    margin: 5px 0; /* Margin outside the panel */
    border: 1px solid #ddd; /* Light grey border */
    background-color: white; /* White background */
}


/* Style for the collapsible buttons */
.collapsible-certifications {
    background-color: #84b9e4; /* Blue background */
    color: black; /* White text */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 10px; /* Padding inside the button */
    margin: 5px; /* adds padding outside */
    width: 100%; /* Full width */
    border: 1px solid black; /* Small border */
    text-align: left; /* Left-aligned text */
    outline: none; /* Remove outline */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* Change background color on hover */
.active, .collapsible-certifications:hover {
    background-color: #9c909a; /* Grey background */
}

/* Style for the collapsible buttons */
.collapsible-future {
    background-color: #84b9e4; /* Blue background */
    color: black; /* White text */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 10px; /* Padding inside the button */
    margin: 5px; /* adds padding outside */
    width: 100%; /* Full width */
    border: none; /* No border */
    text-align: left; /* Left-aligned text */
    outline: none; /* Remove outline */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* Change background color on hover */
.active, .collapsible-future:hover {
    background-color: #9c909a; /* Grey background */
}

/* Style for the content inside the collapsible */
.content {
    padding: 0 18px; /* Padding inside the content */
    display: none; /* Hidden by default */
    overflow: hidden; /* Overflow hidden */
    background-color: #f9f9f9; /* Light grey background */
}

.achievements_list { 
    list-style-type: none;
    padding-left: 0;
  }


  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #DDD;
  }
  
  tr:hover {background-color: #D6EEEE;}

  .td-fontsize {
    font-size: 14px;
  }