/* Set a smaller base font size for the entire page */
html {
    font-size: 14px;
}
body {
    /* Updated font-family to IBM Plex Mono */
    font-family: 'IBM Plex Mono', monospace;
    background-color: #ffffff;
    color: #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.main-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
/* Style for the active nav link */
.active-link {
    color: #9CA3AF; /* gray-400 */
}
/* Styles for the fluid sub-menu transition */
.submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.submenu.expanded {
    max-height: 500px; /* Set a max-height large enough for the content */
    opacity: 1;
}
/* Hide page content by default */
.page-content {
    display: none;
}
/* Blog post styling */
.blog-post {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
/* Added styles for all header levels */
.page-content h1, .blog-post h1 { font-size: 1.875rem; font-weight: bold; margin-bottom: 1rem; }
.page-content h2, .blog-post h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.75rem; margin-top: 1.5rem; }
.page-content h3, .blog-post h3 { font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem; margin-top: 1.25rem; }
.page-content p, .blog-post p { margin-top: 0.5rem; }

/* Styling for code blocks */
.blog-post pre code.hljs {
    border-radius: 0.25rem;
    display: block;
    padding: 1rem;
    overflow-x: auto;
}

/* Styling for Resume/Filmography List */
#page-filmography ul {
    list-style: none;
    padding: 0;
}
#page-filmography > ul > li { /* Year */
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 1.5rem;
}
#page-filmography > ul > li > ul { /* Project list */
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 1.5rem; /* Indentation */
    margin-top: 0.75rem;
    font-weight: normal; /* Reset font weight for projects */
}
#page-filmography > ul > li > ul > li { /* Individual Project */
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}
#page-resume ul {
    list-style: none;
    padding: 0;
}