@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
	font-family: 'Inter', sans-serif;
	background-color: #ffffff;
	color: #000000;
}

.container {
	margin: auto;
	padding: 2em 1em;
	max-width: 65ch;
	line-height: 2;
	font-size: 1em;
}

a {
	text-decoration: none;
	color: #000000;
}

header {
	margin-bottom: 1em;
	display: flex;
}

header table {
	width: 100%;
}

.logo {
	font-weight: 800;
	padding-left: 0;
	flex: 1;
}

.logo a {
	color: #000;
}

.main-nav ul {
	list-style-type: none;
	text-align: right;
}

.main-nav ul li {
	display: inline;
	padding-left: 0.5em;
}

.main-nav ul li a {
	text-align: center
}

.main-nav ul li a:hover {
	border-bottom: 1px solid #000000;
}

.main-nav ul li a.active {
	border-bottom: 1px solid #000000;
}

.wrapper {
	margin-bottom: 5%;
}

ul.projects {
	width: 100%;
	padding: 0;
	list-style-type: none;
}

ul.projects li {
	padding: 1em 0;
}

ul.projects li a {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: 
		"title year"
		"brief year";
	gap: 0.2em 1em;
	padding: 1em;
	margin: -1em;
	border-radius: 8px;
	transition: background-color 0.2s ease;
}

ul.projects li a:hover {
	background-color: #f8f8f8;
}

ul.projects li a span.desc {
	grid-area: title;
	font-weight: 700; /* Make title bold */
	font-size: 1em;
}

ul.projects li a span.desc-brief {
	grid-area: brief;
	color: #666666; /* Dark gray color */
	font-size: 0.8em; /* Smaller font size */
}

ul.projects li a span.year {
	grid-area: year;
	white-space: nowrap;
	font-size: 0.9em;
	align-self: center;
}

/* Handle mobile styling below */
@media only screen and (max-width: 600px) {
	.main-nav ul {
		list-style-type: none;
	}

	.main-nav ul li {
		display: block;
	}

	ul.projects li a span.desc {
		display: block;
		max-width: 85%;
	}
	ul.projects li a span.desc-brief {
		margin-bottom: 1em; /* Add margin for mobile */
	}
}

@media only screen and (max-width: 360px) {
	ul.projects li a span.desc span.desc-brief {
		display: none;
	}
}