#top-nav
{
	background : purple;
	position   : sticky;
	top        : 0;
	width      : 100%;
	z-index    : 1000;
}

.site-nav
{
	display   : flex;
	flex-wrap : wrap; /* Allows links to wrap on small phones */
	gap       : 15px;
	margin    : 0 auto;
	max-width : 750px; /* Match your container */
	padding   : 10px;
}

.nav-link
{
	color           : rgba(255, 255, 255, 0.8);
	font-size       : 1rem;
	text-decoration : none;
}

.nav-link:hover, .nav-link.active
{
	color : #fff;
}

.nav-link.active
{
	border-bottom : 2px solid #fff;
	font-weight   : bold;
}

/* Mobile adjustments for Nav */

@media (max-width: 600px)
{
	.site-nav
	{
		gap             : 10px;
		justify-content : center;
	}
}