body {
	font-family: Nunito, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #000000;
}
p {
	color: #ffffff;
	font-size: 1rem;
	line-height: 1.6;
}
h2 {
	color: #ffffff;
	font-size: 2rem;
	margin-bottom: 1rem;
}
hr {
	height: 3px;
	background-color: #ffffff;
	margin: 1rem 0;
}
a {
	color: #499696;
	text-decoration: none;
	transition: color 0.2s;
}
a:visited {
	color: #3a7575;
}
a:hover {
	color: #5bb3b3;
	text-decoration: underline;
}
#modalImage {
	cursor: grab;
	transition: transform 0.3s;
	will-change: transform;
}
#modalImage:active {
	cursor: grabbing;
}
.navbar-nav .nav-link {
	padding: 0.5rem;
	border-radius: 0.5rem;
	transition: background 0.2s, color 0.2s;
	margin: 0 0.25rem;
	color: #fff !important;
	font-weight: 600;
}
.navbar-nav .nav-link.active {
	color: #ffffff !important;
	font-weight: 700;
	background: #499696;
}
.navbar-nav .nav-link:hover {
	background: #414141;
	opacity: 0.7;
}
.img-thumbnail {
	border: 2px solid #000000 !important; /* Dark, subtle border */
	border-radius: 0.5rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	background: #222;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}
.img-thumbnail:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.section {
	text-align: center;
	background-color: #222;
	color: #fff;
	margin-top: 1rem;
}