/* Basic reset and font setup */
body,
html {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: #f9f9f9;
	/* A very light off-white background */
	color: #333;
	/* Dark gray for text for better readability */
	scroll-behavior: smooth;
}

/* Main container to center the content */
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	padding: 2rem;
	box-sizing: border-box;
}

/* Header section */
.header-section {
	text-align: center;
	padding: 4rem 0;
}

/* Styling for the main name/title */
.name {
	font-size: 2.2rem;
	/* Larger font for the name */
	font-weight: 500;
	/* A medium weight, not too bold */
	letter-spacing: 0.5px;
	margin: 0;
	margin-bottom: 0.75rem;
	/* Space between name and subtitle */
}

/* Styling for the subtitle */
.subtitle {
	font-size: 1.2rem;
	font-weight: 300;
	color: #555;
	margin: 0;
	margin-bottom: 2.5rem;
	/* Space between subtitle and navigation */
}

/* Navigation list styling */
.navigation ul {
	list-style: none;
	/* Removes bullet points */
	padding: 0;
	margin: 0;
}

.navigation li {
	display: inline-block;
	/* Aligns links horizontally */
	margin: 0 1rem;
	/* Adds space between the links */
}

/* Navigation link styling */
.navigation a {
	text-decoration: none;
	/* Removes the underline from links */
	color: #333;
	/* Ensures links have the same color as text */
	font-size: 1rem;
	transition: color 0.3s ease;
	/* Smooth transition for hover effect */
}

/* Simple hover effect for links */
.navigation a:hover {
	color: #888;
	/* Changes color to a lighter gray on hover */
}

/* Content wrapper */
.content {
	max-width: 720px;
	width: 100%;
	padding-top: 2rem;
}

.content section {
	margin-bottom: 3rem;
}

.content h2 {
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #eaeaea;
	padding-bottom: 0.75rem;
}

.content p,
.content ul {
	line-height: 1.7;
	font-size: 1.05rem;
	color: #444;
	margin-top: 0;
}

.content ul {
	padding-left: 20px;
	margin-bottom: 1rem;
}

.content li {
	margin-bottom: 0.5rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
	.navigation li {
		display: block;
		/* Stacks the links vertically */
		margin: 0.8rem 0;
		/* Adjusts spacing for vertical layout */
	}

	.name {
		font-size: 1.8rem;
		margin-bottom: 0.5rem;
	}

	.subtitle {
		font-size: 1rem;
		margin-bottom: 2rem;
	}

	.header-section {
		padding: 2rem 0;
	}

	.content h2 {
		font-size: 1.4rem;
	}
}