/* General styles */
body {
  font-family: 'IBM Plex Mono', monospace;
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #000;
}

.container {
    width: 960px;
    margin: 60px auto;
    display: flex;
    flex-direction: column;
    max-width: 6in; /* Ensures the content spans no more than six inches */
}

/* Sidebar styles (navigation menu) */
.sidebar {
    width: 116px; /* Fixed width for the sidebar */
    padding-right: 20px;
    text-align: left;
    flex-shrink: 0; /* Prevents shrinking of the sidebar */
}

.sidebar a {
    display: block;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    line-height: normal;
    text-decoration: none; /* Removes underline by default */
    color: #000;
}

.sidebar a.active {
    text-decoration: underline; /* Adds underline for the active page */
}

/* Content styles */
.content {
    flex-grow: 1; /* Allows the content to take up the remaining space */
    font-size: 12.5px;
    letter-spacing: -0.05em; /* Negative value reduces space */
    line-height: 1.6;
    text-align: left;
}

/* Blog entry styles */
.blog-entry {
    margin-bottom: 6px;
    font-size: 16px;
    font-size: 12.8px;
    line-height: 1.6;
}

.blog-entry a {
    text-decoration: none;
    color: #000;
}

.blog-entry a:hover {
    text-decoration: underline;
}

/* General Blog Heading Styles */


/* TEXT STYLES FOR PROJECTS PAGE */

/* Project Title */
h2 {
    font-size: 1.2rem; /* Large and bold title */
    font-weight: normal;
/*    margin-bottom: 8px;*/
    position: relative; /* Fine-tune alignment */
    top: -23.5px; /* Fine-tune alignment */
    margin-bottom: 0px; /* Reduce space below the title */
}

/* Time and Date */
h3 {
    font-size: .7rem;
    font-weight: normal;
    color: #888; /* Light gray color */
    margin-top: 0px;
    margin-bottom: 10px;
}

/* Project Description and Credits */
caption {
    font-size: .7rem;
    line-height: 1.6;
    color: #000;
    display: block; /* Ensures captions appear as block text */
    margin-bottom: 10px;
} 


/* Blog image styles */
.blog-image {
    margin: 4px 0;
    /*margin-top: 40px;
    margin-bottom: 40px;*/
    text-align: center;
}

.blog-image img {
  display: block; /* Ensures the image aligns properly */
/*  margin: 0 auto; /* Centers the image */
  width: 100%; /* Matches the width of the container */
  max-width: 100%; /* Ensures it doesn't exceed the container width */
  height: auto; /* Maintains the aspect ratio */
}

.blog-image video {
  display: block; /* Ensures the image aligns properly */
/*  margin: 0 auto; /* Centers the image */
  width: 100%; /* Matches the width of the container */
  max-width: 100%; /* Ensures it doesn't exceed the container width */
  height: auto; /* Maintains the aspect ratio */
}

/* Back link styles */
.back-link {
    margin-top: 24px;
    font-size: 12.8px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.back-link:hover {
    text-decoration: underline;
}

/* PROJECTS PAGE STYLES */

/* Main container for the Projects page */
.projects-container {
/*    max-width: 1200px; /* Limits content width for better readability */
    margin: auto; /* Centers content horizontally */
    margin-top: 40px; /* Adds space above the content */
    padding: 16px; /* Adds padding around the container */
}

/* Standard Layout: Image/Video on the left, text on the right */
.project {
    display: flex; /* Uses flexbox for layout */
    align-items: flex; /* Aligns the tops of both elements */
    align-items: left; /* Aligns items vertically */
    margin-bottom: 4px; /* Adds spacing between projects */
    gap: 16px; /* Adds space between image/video and text */

}

/* Styling for project images and videos */
/* Original project styling */
.project img, .project video {
    width: 68%; /* Sets media width to take up two-thirds of the container */
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures the image doesn’t stretch */
    max-width: 100%; /* Prevents the image from exceeding its container */
}

/* Hero Layout: Full-width image/video without text */
.hero {
    width: 100%; /* Takes up the full width of the container */
/*    margin-bottom: 32px; /* Adds spacing below the hero image */*/
}

/* Styling for hero images and videos */
.hero img, .hero video {
    width: 100%; /* Stretches across the full width of the container */
    height: auto; /* Maintains aspect ratio */
}

/* Adjustments for mobile */
@media (max-width: 768px) {
        .container {
            flex-direction: column;
            padding: 0 20px;
        }
        .sidebar {
            width: 100%;
            margin-bottom: 20px; /* Adds spacing below the nav for mobile */
            text-align: left;
        }
        .content {
            width: 100%; /* Adjusts content width for smaller screens */
            margin-bottom: 16px;
        }
        .blog-image img {
            max-width: 100%; /* Adjusts image width for smaller screens */
        }

        .blog-image video {
        max-width: 100%; /* Adjusts image width for smaller screens */
        }

        /* Projects Page Adjustments for Mobile */

        .projects-container {
            margin-top: 0; /* Removes the extra margin on mobile */
            padding-top: 0px; /* Optionally, reduce padding instead of removing it completely */
        }

        .project {
            flex-direction: column;
        }
    

        .project img, .project video, .project-text {
            width: 100%;
        }
        .hero img, .hero video {
            width: 100%;
        }

    }

}


/*New Test*/
.container-wide {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.two-column-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  max-width: 100%;
  padding: 12px 12px 12px 4px;
  box-sizing: border-box;
}

.column-images {
  flex: 0 0 61.8%;
  max-width: 61.8%;
}

.column-images img {
  width: 100%;
  height: auto;
  display: block;
}

.column-text {
  /*flex: 0 0 33%;
  max-width: 33%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.03em;*/
  padding-left: 8px;
  /*box-sizing: border-box;*/
}

/* Responsive: stack on narrow screens */
@media (max-width: 1000px) {
  .two-column-container {
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
  }

  .column-images,
  .column-text {
    flex: none;
    max-width: 100%;
  }

  .column-text {
    padding-left: 0;
  }
}