/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	margin: 0; /* Remove default margin */
	padding: 0; /* Remove default padding */
	line-height: 1;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background-color: #f4f4f4; /* Light grey background */
	color: #333; /* Main text color */
}

a {
	color: #067df7; /* Huggingface blue for links */
	text-decoration: none; /* No underlines on links */
}

a:hover {
	text-decoration: underline; /* Underline on hover for links */
}

header {
	background-color: #fff; /* White background for the header */
	padding: 2em; /* Padding around header content */
	text-align: center; /* Centered header text */
	border-bottom: 2px solid #eaeaea; /* Light grey border at the bottom */
}

header h1 {
	color: #333; /* Dark grey color for the main title */
	font-size: 2.5rem; /* Larger font size for the main title */
	margin-bottom: 0.5em; /* Spacing below the main title */
}

header p {
	color: #666; /* Medium grey for the subtitle */
	font-size: 1.2rem; /* Subtitle size */
	margin-top: 0; /* Align top of subtitle with title's bottom */
}

footer {
	background-color: #fff; /* White background for the footer */
	padding: 1em; /* Padding around footer content */
	text-align: center; /* Centered footer text */
	border-top: 2px solid #eaeaea; /* Light grey border at the top */
	font-size: 0.9rem; /* Smaller font size for footer */
}

footer img {
	vertical-align: middle; /* Align images with text */
	margin-right: 0.5em; /* Space between icon and text */
}

footer a {
	color: #067df7; /* Consistent link color */
}

.project-card {
	background-color: #fff; /* White background for projects */
	margin: 1em; /* Margin around cards */
	padding: 2em; /* Padding inside cards */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	border-radius: 10px; /* Rounded corners for cards */
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover effects */
}

.project-card:hover {
	transform: translateY(-5px); /* Slight lift effect on hover */
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.project-card h2 {
	color: #333; /* Dark grey for titles */
	margin-bottom: 0.8em; /* Space below title */
}

.project-card p {
	color: #666; /* Medium grey for descriptions */
	margin-bottom: 1em; /* Space below description */
}

.project-card a {
	font-weight: bold; /* Make "View Project" links bold */
	color: #067df7; /* Use blue for call to action */
	padding: 0.5em 1em; /* Padding for clickable area */
	border: 2px solid #067df7; /* Border matching the text color */
	border-radius: 5px; /* Rounded corners for buttons */
	display: inline-block; /* Allow for padding and border */
}

.split {
	display: flex; /* Use flexbox for layout */
}

.split-left {
	flex: .25; /* Take up 50% of the width */
}

.split-right {
	flex: 1; /* Take up 50% of the width */
	padding: 1em; /* Padding around the content */
}

.project-card a:hover {
	background-color: #067df7; /* Background color on hover */
	color: #fff; /* Text color on hover */
}
/* Breadcrumb styling */
#breadcrumb {
    padding: 0.5em 1em;
    background-color: #f9f9f9; /* Light grey background to stand out */
    border-left: 3px solid #fae901; /* Blue accent line */
    color: #333; /* Dark text for readability */
    font-size: 0.9rem; /* Smaller font size for the breadcrumb */
    margin-bottom: 1em; /* Space before the main content */
    position: sticky; /* Stick to the top when scrolling */
    top: 0;
    z-index: 10; /* Ensure it's above other content */
}

/* Markdown container styling for better reading experience */
#markdown-container {
    padding: 1em; /* Padding around the text */
    background-color: #fff; /* White background for reading */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-width: 800px; /* Max width to maintain optimal line length for reading */
    margin: 1em auto; /* Center the container and add margin around it */
    word-wrap: break-word; /* Ensure long words don't overflow */
}

/* Style the Table of Contents */
#toc {
    padding: 1em; /* Padding around the content */
    background-color: #fff; /* White background */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-width: 800px; /* Max width to maintain optimal line length for reading */
    margin: 1em auto; /* Center the container and add margin around it */
    list-style: none; /* Remove default list styling */
}

#toc li a {
    color: #067df7; /* Blue color for links to match the theme */
    text-decoration: none; /* No underline */
    display: block; /* Block level to add padding */
    padding: 0.2em 0; /* Padding for each link */
}

#toc li a:hover {
    background-color: #f0f0f0; /* Light grey background on hover */
    border-radius: 3px; /* Slight rounding on hover */
}

/* Enhance the appearance of code blocks */
pre code {
    display: block;
    padding: 1em; /* Padding inside code blocks */
    background-color: #f0f0f0; /* Light grey background for code blocks */
    border-radius: 5px; /* Rounded corners for code blocks */
    overflow-x: auto; /* Enable horizontal scrolling if the code is too wide */
}

/* Make images responsive */
img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Adjust height automatically */
    display: block; /* Images are block level to apply max-width */
    margin: 1em 0; /* Margin above and below images */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    #markdown-container,
    #toc {
        padding: 0.5em; /* Smaller padding on small screens */
        margin: 0.5em; /* Smaller margin on small screens */
    }

	header h1 {
		font-size: 2rem; /* Slightly smaller font for smaller screens */
	}

	header p {
		font-size: 1rem; /* Smaller subtitle on smaller screens */
	}

	.project-card {
		margin: 0.5em;
	}
}