/* General page layout */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

/* Header Image Rounded Corners */
.header img {
  border-radius: 8px; /* Rounded corners for header image */
  width: 100%;
}

.row {
  display: flex;
  gap: 20px; /* Space between the columns */
  justify-content: space-between;
}

.leftcolumn {
  width: 75%; /* Take up 3/4 of the page */
  margin-top: 0px; /* Space above the article section */
}

.rightcolumn {
  width: 25%; /* Narrower, take up 1/4 of the page */
  margin-top: 0px; /* Space above the article section */
}

.card {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Article List Layout */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-post {
  display: grid;
  grid-template-columns: 150px 1fr; /* Image on the left, title and description on the right */
  gap: 20px; /* Space between image and text */
  align-items: start; /* Ensures the content aligns to the top */
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.article-post:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Post Image Style */
.post-image {
  width: 150px; /* Fixed width for the image */
  height: auto;
  object-fit: cover; /* Ensure the image covers the area properly */
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.post-image:hover {
  transform: scale(1.05);
}

.date-text {
  font-family: 'Roboto', sans-serif;  /* Cool, modern font */
  font-size: 12px;  /* Small text size */
  color: #b0b0b0;  /* Light grey color */
  font-weight: 300;  /* Light font weight */
}

.rightstuff-text {
  font-family: 'Roboto', sans-serif;  /* Cool, modern font */
  font-size: 0.9rem; 
  color: #666;
}  

/* Post Blurb Style */
.post-blurb {
  padding-left: 20px;
  color: #666; /* Blurb text color */
}

/* Post Link Style */
.post-link {
  color: #333;
}

.post-title {
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  color: #333; /* Ensuring the title is legible */
}

.post-description {
  font-size: 1rem;
  color: #666; /* Description text color */
}

.profile-post {
  display: grid;
  grid-template-columns: 25% 1fr; /* Image on the left, title and description on the right */
  gap: 20px; /* Space between image and text */
  align-items: start; /* Ensures the content aligns to the top */
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Profile image in the article, matching the width of the right column */
.profile-page-image {
  width: 100%;  /* Set image to take up the full width of the column */
  height: auto; /* Ensure the image maintains its aspect ratio */
  object-fit: cover; /* Scale image to cover the area without stretching */
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.profile-page-description {
  font-size: 0.9rem;
  color: #666; /* Description text color */
  font-style: italic;
}

.breadcrumbs {
  display: flex;
  justify-content: center;  /* Center horizontally */
  align-items: center;      /* Center vertically */
  height: 50px;             /* Adjust this based on the space you want to give to breadcrumbs */
  font-size: 1.1rem;        /* Slightly larger font size for better readability */
  margin: 0;
  font-family: 'Arial', sans-serif; /* Modern sans-serif font */
  font-weight: 500;          /* Slightly bold font for better emphasis */
  letter-spacing: 0.5px;     /* Adding slight spacing between characters */
  color: #555;              /* Slightly lighter color for the text */
}

/* Basic styles for breadcrumbs container */
.breadcrumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;           /* Smaller font size */
  color: #777;                  /* Default grey color for the container */
  margin: 0;
  font-family: 'Arial', sans-serif; /* Clean sans-serif font */
  font-weight: 400;              /* Normal weight */
  letter-spacing: 0.5px;         /* Slight spacing for clarity */
}

/* Styling for links inside the breadcrumbs */
.breadcrumbs a {
  text-decoration: none;
  color: #007BFF;               /* Blue color for links */
  font-weight: 500;              /* Slightly bolder for emphasis */
  margin: 0 5px;                 /* Small margin between crumbs */
  transition: color 0.2s ease, text-decoration 0.2s ease;  /* Smooth transition for color and underline */
  border-bottom: 1px solid transparent;  /* Border for underline effect */
}

.breadcrumbs a:hover {
  color: #0056b3;               /* Darker blue on hover */
  border-bottom: 1px solid #0056b3;  /* Underline on hover */
}

/* Styling for the active (current) breadcrumb */
.breadcrumbs .active {
  color: #333;                  /* Darker color for active page */
  font-weight: 600;             /* Slightly bolder text for active page */
  border-bottom: none;         /* No underline for the active page */
}

/* Styling for separator (>) */
.breadcrumbs span {
  color: #bbb;                  /* Grey color for separators */
  font-weight: 400;              /* Normal weight for separators */
  margin: 0 5px;                 /* Small margin for spacing */
}

/* Adjust the size of the share button image inside the breadcrumbs */
.breadcrumbs .share-button img {
  width: 30px; /* Set the width of the image */
  height: auto; /* Ensure the height maintains the aspect ratio */
}

/* Optional: If you want to adjust the size of the button itself (div) */
.breadcrumbs .share-button {
  width: 30px; /* Ensure the div has the correct width */
  height: auto; /* Maintain the aspect ratio */
}

/* Specifically target share button inside breadcrumbs to set the color to black */
.breadcrumbs .share-dropdown .share-btn {
  color: black !important;  /* Force the color to black */
}

.breadcrumbs .share-dropdown .share-btn i {
  color: black !important;  /* Ensure icons are black */
}

.breadcrumbs .share-dropdown .share-btn span {
  color: black !important;  /* Ensure text is black */
}

<style>
    /* Main Share Button (using JPG Image) */
    .share-button {
      width: 50px;
      height: 50px;
      cursor: pointer;
    }

    /* Share icon (from JPG) */
    .share-button img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* Dropdown Container */
    .share-dropdown {
      display: none;
      position: absolute;
      background-color: white;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 150px;  /* Container width */
      max-width: 90vw;  /* Prevent dropdown from exceeding the viewport width */
      padding: 10px;
      z-index: 1000; /* Make sure it's on top of other content */
    }

    /* Show dropdown when active */
    .share-button.active + .share-dropdown {
      display: block;
    }

    /* Share buttons container */
    .share-buttons-container {
      display: flex;
      flex-direction: column;  /* Stack buttons vertically */
      gap: 10px;
    }

    .share-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* Hover effect for share buttons */
    .share-btn:hover {
      background-color: #f0f0f0;
    }

    .share-btn i {
      font-size: 20px;
      color: #333;
    }

    .share-btn:not(:last-child) {
      border-bottom: 1px solid #ddd;  /* Thin grey line separator */
    }


.responsive-img {
  width: 100%;
  height: auto;
}

/* Media Query for Mobile */
@media (max-width: 768px) {
  .row {
    flex-direction: column; /* Stack the columns vertically */
  }

  .leftcolumn {
    width: 100%; /* Full width for the left column */
    margin-top: 20px; /* Add some space above the left column */
  }

  .rightcolumn {
    width: 100%; /* Full width for the right column */
    margin-top: 20px; /* Add space between columns */
    order: 1; /* This will ensure the right column appears below the left column */
  }

  .article-post {
    grid-template-columns: 1fr; /* Stack image and text vertically */
    padding: 10px;
  }

  .post-image {
    width: 100%; /* Full-width for images */
  }

  .post-blurb {
    padding-left: 0;
    padding-top: 10px; /* Add space between image and text */
  }

  .profile-page-image {
    width: 100%; /* On mobile, allow the image to fill the container */
    max-width: none; /* Remove the max-width limitation */
    margin-bottom: 20px; /* Add space below image for mobile */
  }

  .profile-post {
    grid-template-columns: 1fr; /* Stack image and text vertically */
    padding: 10px;
  }

  .breadcrumbs {
    font-size: 0.9rem;
    height: 50px;  /* Adjusted for mobile */
  }
  
  .breadcrumbs a {
    word-wrap: break-word;  /* Ensure long URLs or page titles break and don't overflow */
    display: inline-block;  /* Make sure the links don’t span the full width */
  }

  .breadcrumbs a:after {
    content: " > ";
  }

  .breadcrumbs a:last-child:after {
    content: "";  /* Remove the ">" after the last breadcrumb */
  }

  .breadcrumbs .share-dropdown .share-btn {
    color: black !important;  /* Ensure the share button text is black on mobile */
  }

  .breadcrumbs .share-dropdown .share-btn i {
    color: black !important;  /* Ensure icons are black on mobile */
  }

  .breadcrumbs .share-dropdown .share-btn span {
    color: black !important;  /* Ensure text is black on mobile */
  }

  .share-dropdown {
    width: 90%;  /* Adjust width on mobile */
  }
}