/* Base Styles */
* {
  background-color: #f5f5f5; /* Soft grey background for a gentle look */
  box-sizing: border-box;
  color: #4a4a4a; /* Dark grey for improved readability */
  font-family: "Fira Sans", sans-serif;
  font-weight: 400; /* Normal font weight for body text */
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600; /* Slightly bolder headings for emphasis */
}

h1 {
  color: #007bff; /* Soft blue for main headings */
  font-size: 2.5rem;
}

h2 {
  color: #17a2b8; /* Subtle grey for secondary headings */
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
  color: #17a2b8; /* Soft teal for tertiary headings */
}

h4, h5, h6 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  margin-top: 2.5rem;
  color: #f57c00; /* Muted orange for smaller headings, offering a pop of color */
}

p {
  font-size: 1.5rem;
  color: #6c757d; /* Grey for paragraph text, ensuring readability */
  margin: 0.25rem 0;
}

.container, .highlights, .about-me, .philosophy {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Header Navbar */
header {
  background-color: #343a40; /* Darker grey for the header, ensuring contrast */
  color: #000000; /* White text for contrast */
}

.logo {
  color: #000000; /* White for logo to stand out against the dark header */
}

.navbar {
  transition: all 0.3s ease-in-out;
}

/* Hide the checkbox used for menu on small screens */
.menu-button {
  visibility: hidden; /* Hide checkbox */
  position: absolute; /* Remove from document flow */
}

.hamburger-line, .hamburger-line::before, .hamburger-line::after {
  background: #ffffff; /* White for visibility against the header */
}

.menu li a {
  color: #007bff; /* Soft blue for links, keeping the palette consistent */
}

.menu li a:hover, .menu li a.active {
  color: #0056b3; /* Darker blue on hover for feedback */
}

/* Subtle Menu Underline */
.menu li a::after {
  background: #28a745; /* Green for a vibrant yet not overwhelming underline */
}

/* Adjustments for Greetings, Images, and Containers */
.greetings {
  background-color: #6c757d; /* Grey background for a muted greeting section */
  color: #ffffff; /* White text for contrast */
}

.greetings-text h1 {
  margin: 0 1.5rem;
  color: #000000;
}

.greetings-text h2 {
  margin: 0.5rem 1.5rem;
  color: #17a2b8;
  font-weight: 700;
}

.greetings-text p {
  font-size: 1.5rem;
  margin: 0.5rem 1.5rem;
  color: #000000;
}

.greetings-emphasis {
  color: #000000; /* Yellow for emphasis, bright but not overwhelming */
  font-size: 100%;
}

#headshot-image {
  float: right; /* Aligns the image to the right */
  margin-left: 20px; /* Adds spacing between the image and the text */
  width: 200px; /* Adjust the width as needed */
  height: auto; /* Keeps the aspect ratio of the image */
}

/* Content and Experience Sections */
.timeline-container, .experience.content, .content, .education-content {
  border-left: 0.25rem solid #dee2e6; /* Light grey for a subtle division */
}

.experience-title, .dot {
  color: #007bff; /* Consistent soft blue for important elements */
}

.experience img {
  float: right;
  margin-left: 20px;
  width: 200px; /* Adjust as needed */
  height: auto;
}

/* Skills, Education, and Footer Enhancements */
/* Base style for meter elements to set the height */
meter {
  height: 30px; /* Set the thickness of the meter here */
  -webkit-appearance: none; /* Necessary to remove default styling in WebKit browsers */
     -moz-appearance: none; /* Necessary to remove default styling in Firefox */
          appearance: none;
  width: 75%; /* or 100% to stretch it full width of its container */
}

/* For WebKit browsers, styling the bar */
meter::-webkit-meter-bar {
  background-color: #eee; /* Light grey background */
  border: 1px solid #ddd; /* Light grey border to match your design */
}

/* Styling the optimum value for WebKit browsers */
meter::-webkit-meter-optimum-value {
  background-color: #f57c00; /* Muted orange for smaller headings, offering a pop of color */
  border-radius: 5px; /* Optional: Adds rounded corners to the filled part */
}

/* Styling the bar for Firefox */
meter::-moz-meter-bar {
  background-color: #f57c00; /* Muted orange for smaller headings, offering a pop of color */
  border-radius: 5px; /* Optional: Adds rounded corners to the filled part */
}


.footer {
  background-color: #343a40; /* Consistent dark grey for footer */
  color: #ffffff; /* Ensuring text is readable against the dark background */
}

.highlights ul {
  list-style-type: disc; /* This ensures bullets are shown */
  padding-left: 20px; /* This adds some indentation to your list */
}

.highlights li {
  margin-bottom: 10px; /* Adds space between list items */
}

.grey-bar {
  height: 4px; /* Height of the grey bar */
  background-color: #ccc; /* Grey color */
  width: 100%; /* Makes the bar span the full width of the container */
  margin: 20px 0; /* Adds space above and below the bar */
}

/* Responsive and Animation Adjustments */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .header {
    margin: 0 0 1.25rem;
  }

  img {
    min-width: 50%;
    max-width: 80%;
  }

  .content {
    margin: 0 0 1.25rem;
  }

  .experience {
    margin: 0 0 1.25rem 0.25rem;
  }

  .experience-date-header {
    font-size: 1.25rem;
  }

  .experience-title {
    font-size: 1.25rem;
  }

  .experience-summary {
    font-size: 1rem;
  }

  .skills-content {
    margin: 0 0 1.25rem;
  }

  .skill {
    margin: 0 0 0.5rem;
  }

  .skill span {
    margin-left: 0;
    text-align: left;
  }

  .education-header {
    margin: 0 0 0.5rem;
  }

  .education-content {
    flex-direction: column;
    padding-left: 2.0rem;
    padding-right: 2.0rem;
  }

  .education-content ul {
    list-style-type: disc;
    margin: 0 0 0.5rem;
  }

  .education-content li {
    margin: 0.5em 0;
    font-size: 1rem;
  }

  /* Ensure a:hover effects are subtle for usability */
  a:hover {
    transform: translateY(-2px); /* Slight upward shift for interactive feedback */
  }

  /* Optional: Background pattern adjustment for body to maintain readability */
  body {
    background: #ffffff; /* Consider keeping the background simple for readability */
  }

  .photos {
    flex-direction: column;
  }

  .link-tree.content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

}