* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: normal 400 1em / 1 "Font Awesome 6 Free";
	--fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em / 1 "Font Awesome 6 Brands";
	/*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --- IGNORE ---*/
}

body {
	display: flex;
	align-items: center;
	min-height: 100vh;
	flex-direction: column;
	width: 100%;

	background-color: #ffffff;
	color: #3b3b3b;
}


/* main */
main {
	margin-top: 60px; /* height of header */
	width: calc(100% - 250px);
	margin-left: 250px;
	padding: 50px 80px;

	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 20px;
}

@media (max-width: 1200px) {
	main {
		/* second column becomes nonexistent */
		grid-template-columns: 1fr;
	}
	/* hide right sidebar cards on narrower viewports */
	main .cards-container {
		display: none;
	}
}

@media (max-width: 768px) {
	main {
		width: 100%;
		margin-left: auto;
		margin-top: 80px;
		padding: 10px;

		justify-items: center;
	}
}

/* Projects list layout: responsive grid that wraps cards without causing overflow */
#content-container {
	display: grid;
	grid-template-columns: repeat(auto-fill,fr);
	gap: 20px;
	width: 100%;
	align-content: start;
	justify-items: stretch; /* ensure cards fill available column width */
}

/* Allow the left grid cell to shrink so it doesn't push the right column */
main > #content-container {
	min-width: 0;
}

.project-card {
	background: #fff;
	border: 1px solid #e1e4e8;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	transition: box-shadow 0.2s ease-in-out;
	cursor: pointer;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;

	/* Prevent content-based min-width from overflowing grid columns */
	min-width: 0;
	max-width: 100%;

}

.project-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	background-color: #e9eff5;
}

.project-card h2 {
	font-weight: normal;
	font-size: 1.3em;
	margin-bottom: 10px;
	color: #090909;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.project-card p {
	color: #717171;
	font-size: 0.95em;
	overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
           line-clamp: 2;
   -webkit-box-orient: vertical;
	/* Prevent long words/URLs from forcing horizontal overflow */
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
	margin-bottom: 10px;
}

.project-card div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: small;
	font-weight: bold;
	color: #8f8f8f;
	
}

.project-card div a {
	color: #8f8f8f;
	text-decoration: none;
	transition: color 0.2s ease-in-out;

	font-size: large;
}

.project-card div a:hover {
	color: #e24312;
	text-decoration: underline;
}

.cards-container {
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	align-items: flex-start;
	gap: 20px;

	position: sticky;
	top: 80px;
	height: 400px;


}

.card {
	border-left: 1px solid #efeaea;
	padding: 0 20px;
	margin-bottom: 20px;

}

.card h3 {
	color: #565151;
	margin-bottom: 10px;
		font-size: 1em;
	font-weight: bolder;
}

.card p {

	color: #717171;
	font-size: 0.9em;
	line-height: 1.4;
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
	text-overflow: ellipsis;
}
.card a {
	color: #8f8f8f;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}	
.card a:hover {
	color: #e24312;
	text-decoration: underline;
}

.trending-tags{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.trending-tags p {
	background-color: #f0f0f0;
	padding: 5px 10px;
	border-radius: 15px;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.trending-tags p:hover {
	background-color: #126ce2;
	color: #fff;
}

/* "Back to top" button */
.totop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #126ce2;
	color: #fff;
	padding: 10px 12px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	transition: all 1s ease-in-out;
	cursor: pointer;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;

	display: none;
}

.totop:hover {
	background-color: #0b4da1;
	transform: translateY(-2px);
}

.totop a {
	color: inherit;
	text-decoration: none;
	font-size: 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.totop a:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}


#searchOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% - 250px);
	height: 100%;
	margin-left: 250px;
	background-color: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(10px);
	display: none; /* hidden by default */
	z-index: 900; /* below sidebar and toggle */
	padding: 80px 40px 40px;
	box-sizing: border-box;

	/* fade-in effect */
	transition: all 0.3s ease-in-out;
	overflow-y: auto;

	/* Grid layout for when active */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	align-content: start;
}

#searchOverlay.active {
	display: grid;
}

/* Search results styling */
#searchOverlay p,
#searchOverlay .search-no-data,
#searchOverlay .search-no-results,
#searchOverlay .search-error,
#searchOverlay .search-results-count {
	grid-column: 1 / -1;
	text-align: center;
	color: #666;
	font-size: 1.1em;
	margin: 40px 0;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #e1e4e8;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

#searchOverlay .search-no-data {
	background: #fff3cd;
	border-color: #ffeaa7;
	color: #856404;
}

#searchOverlay .search-no-results {
	background: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}

#searchOverlay .search-error {
	background: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}

#searchOverlay .search-results-count {
	background: #d1ecf1;
	border-color: #bee5eb;
	color: #0c5460;
	font-size: 0.9em;
	padding: 12px;
	margin: 20px 0;
}

/* Search result project cards */
#searchOverlay .project-card {
	background: #fff;
	border: 1px solid #e1e4e8;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

#searchOverlay .project-card:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	transform: translateY(-2px);
	border-color: #0366d6;
}

#searchOverlay .project-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #0366d6, #28a745);
	transform: translateY(-3px);
	transition: transform 0.2s ease;
}

#searchOverlay .project-card:hover::before {
	transform: translateY(0);
}

#searchOverlay .project-card h2 {
	font-weight: 600;
	font-size: 1.2em;
	margin-bottom: 12px;
	color: #0366d6;
	overflow-wrap: anywhere;
	word-break: break-word;
}

#searchOverlay .project-card p {
	color: #586069;
	font-size: 0.9em;
	line-height: 1.5;
	margin-bottom: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

#searchOverlay .project-card div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8em;
	color: #8f8f8f;
	margin-top: auto;
}

#searchOverlay .project-card div span {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Mobile responsive for search overlay */
@media (max-width: 768px) {
	#searchOverlay {
		width: 100%;
		margin-left: 0;
		padding: 60px 20px 20px;
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	#searchOverlay .project-card {
		padding: 15px;
	}
	
	#searchOverlay .project-card h2 {
		font-size: 1.1em;
	}
	
	#searchOverlay .project-card p {
		font-size: 0.85em;
	}
}

/* About Page Styles */
.about-section {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

.about-header {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 40px;
	padding-bottom: 30px;
	border-bottom: 2px solid #e1e4e8;
}

.about-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 4px solid #0366d6;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.about-intro h2 {
	font-size: 2.2em;
	margin-bottom: 8px;
	color: #24292e;
}

.about-subtitle {
	font-size: 1.1em;
	color: #586069;
	font-weight: 500;
}

.about-content {
	display: grid;
	gap: 25px;
}

.about-card {
	background: #fff;
	border: 1px solid #e1e4e8;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.about-card h3 {
	font-size: 1.4em;
	margin-bottom: 15px;
	color: #0366d6;
	display: flex;
	align-items: center;
	gap: 10px;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 15px;
}

.skill-category h4 {
	color: #24292e;
	margin-bottom: 10px;
	font-size: 1.1em;
}

.skill-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.skill-tag {
	background: #f1f8ff;
	color: #0366d6;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.85em;
	border: 1px solid #c8e1ff;
}

.love-list {
	list-style: none;
	padding: 0;
}

.love-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: #586069;
}

.love-list i {
	color: #0366d6;
	width: 20px;
}

.contact-links {
	display: flex;
	gap: 15px;
	margin-top: 15px;
	flex-wrap: wrap;
}

.contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: #0366d6;
	color: white;
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.2s;
	font-weight: 500;
}

.contact-btn:hover {
	background: #0256cc;
}

/* Tags Page Styles */
.tags-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.section-header {
	text-align: center;
	margin-bottom: 40px;
}

.section-header h2 {
	font-size: 2.2em;
	margin-bottom: 10px;
	color: #24292e;
}

.section-header p {
	font-size: 1.1em;
	color: #586069;
}

.tags-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.tag-card {
	background: #fff;
	border: 2px solid #e1e4e8;
	border-radius: 12px;
	padding: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
}

.tag-card:hover {
	border-color: #0366d6;
	box-shadow: 0 4px 12px rgba(3, 102, 214, 0.1);
	transform: translateY(-2px);
}

.tag-name {
	font-size: 1.3em;
	margin-bottom: 5px;
	color: #24292e;
}

.tag-count {
	color: #586069;
	font-size: 0.9em;
}

.tag-arrow {
	color: #0366d6;
	font-size: 1.2em;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.tag-card:hover .tag-arrow {
	opacity: 1;
}

.tagged-projects {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 2px solid #e1e4e8;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.project-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.85em;
	color: #8f8f8f;
	margin-top: 10px;
}

/* Archives Page Styles */
.archives-section {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

.archive-filters {
	display: flex;
	gap: 10px;
	margin-bottom: 30px;
	flex-wrap: wrap;
	justify-content: center;
}

.filter-btn {
	padding: 8px 16px;
	border: 2px solid #e1e4e8;
	background: #fff;
	color: #586069;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s;
	font-weight: 500;
}

.filter-btn:hover {
	border-color: #0366d6;
	color: #0366d6;
}

.filter-btn.active {
	background: #0366d6;
	border-color: #0366d6;
	color: white;
}

.timeline {
	position: relative;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 30px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #e1e4e8;
}

.timeline-item {
	position: relative;
	padding-left: 70px;
	margin-bottom: 40px;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: 24px;
	top: 10px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #0366d6;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px #0366d6;
}

.timeline-date h3 {
	color: #24292e;
	margin-bottom: 5px;
	font-size: 1.3em;
}

.timeline-count {
	color: #586069;
	font-size: 0.9em;
}

.timeline-content {
	margin-top: 15px;
}

.timeline-project {
	background: #fff;
	border: 1px solid #e1e4e8;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 15px;
	transition: box-shadow 0.2s;
}

.timeline-project:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.project-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.project-header h4 {
	color: #0366d6;
	font-size: 1.1em;
	margin: 0;
}

.project-date {
	color: #586069;
	font-size: 0.85em;
}

.project-tags {
	display: flex;
	gap: 8px;
	margin: 10px 0;
}

.tech-tag {
	background: #f1f8ff;
	color: #0366d6;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 0.8em;
	border: 1px solid #c8e1ff;
}

.stars-tag {
	background: #fff5b4;
	color: #735c0f;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 0.8em;
	border: 1px solid #d9cd6e;
}

.project-links {
	display: flex;
	gap: 10px;
	margin-top: 15px;
}

.external-link, .view-details-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
}

.external-link {
	background: #f6f8fa;
	color: #586069;
	border: 1px solid #d1d9e0;
}

.external-link:hover {
	background: #e1e4e8;
}

.view-details-btn {
	background: #0366d6;
	color: white;
}

.view-details-btn:hover {
	background: #0256cc;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.about-header {
		flex-direction: column;
		text-align: center;
	}
	
	.skills-grid {
		grid-template-columns: 1fr;
	}
	
	.contact-links {
		justify-content: center;
	}
	
	.tags-grid {
		grid-template-columns: 1fr;
	}
	
	.projects-grid {
		grid-template-columns: 1fr;
	}
	
	.timeline::before {
		left: 15px;
	}
	
	.timeline-item {
		padding-left: 40px;
	}
	
	.timeline-item::before {
		left: 9px;
	}
	
	.project-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}
	
	.project-links {
		flex-direction: column;
	}
}


/* Dark mode styles */
body.dark-mode {
	background-color: #0d1117;
	color: #d4d7da;
}

/* Links */
body.dark-mode a {
	color: #58a6ff;
}
body.dark-mode a:hover {
	color: #1f6feb;
}

/* Header and navigation */
body.dark-mode header {
	background-color: #161b22;
	border-bottom-color: #30363d;
}

body.dark-mode nav a {
	color: #e6edf3;
}

body.dark-mode nav a:hover {
	color: #58a6ff;
	background-color: #21262d;
}

/* Sidebar */
body.dark-mode aside {
	background-color: #161b22;
	border-right-color: #30363d;
}

body.dark-mode .sidebar-header h1 {
	color: #58a6ff;
}

body.dark-mode .sidebar-nav a {
	color: #e6edf3;
	border-bottom-color: #30363d;
}

body.dark-mode .sidebar-nav a:hover {
	background-color: #21262d;
	color: #58a6ff;
}

/* Main content */
body.dark-mode main {
	background-color: #0d1117;
}

body.dark-mode .project-card {
	background-color: #21262d;
	border-color: #30363d;
	color: #e6edf3;
}

body.dark-mode .project-card:hover {
	border-color: #58a6ff;
	background-color: #262c36;
	box-shadow: 0 4px 12px rgba(88,166,255,0.15);
}

body.dark-mode .project-card h2 {
	color: #58a6ff;
}

body.dark-mode .project-card p {
	color: #c9d1d9;
}

body.dark-mode .project-card div {
	color: #8b949e;
}

body.dark-mode .project-card div a {
	color: #8b949e;
}

body.dark-mode .project-card div a:hover {
	color: #58a6ff;
}

body.dark-mode .project-title {
	color: #58a6ff;
}

body.dark-mode .project-description {
	color: #c9d1d9;
}

body.dark-mode .project-stats {
	color: #8b949e;
}

body.dark-mode .project-tags {
	background-color: #161b22;
	color: #8b949e;
}

body.dark-mode .project-tags .tag {
	background-color: #1f6feb;
	color: #ffffff;
}

/* Search overlay */
body.dark-mode .search-overlay {
	background-color: rgba(13, 17, 23, 0.9);
}

body.dark-mode .search-container {
	background-color: #21262d;
	border-color: #30363d;
}

body.dark-mode .search-input {
	background-color: #161b22;
	border-color: #30363d;
	color: #e6edf3;
}

body.dark-mode .search-input::placeholder {
	color: #8b949e;
}

body.dark-mode .search-input:focus {
	border-color: #58a6ff;
	box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}

body.dark-mode .search-results {
	background-color: #161b22;
	border-color: #30363d;
}

body.dark-mode .search-result-item {
	border-bottom-color: #30363d;
}

body.dark-mode .search-result-item:hover {
	background-color: #21262d;
}

body.dark-mode .close-search {
	color: #8b949e;
}

body.dark-mode .close-search:hover {
	color: #e6edf3;
}

/* Buttons */
body.dark-mode button {
	background-color: #21262d;
	border-color: #30363d;
	color: #e6edf3;
}

body.dark-mode button:hover {
	background-color: #30363d;
	border-color: #58a6ff;
}

/* Form elements */
body.dark-mode input,
body.dark-mode textarea {
	background-color: #161b22;
	border-color: #30363d;
	color: #e6edf3;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus {
	border-color: #58a6ff;
	box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}

/* About page specific */
body.dark-mode .about-content {
	color: #e6edf3;
}

body.dark-mode .about-header h2 {
	color: #58a6ff;
}

body.dark-mode .about-subtitle {
	color: #8b949e;
}

body.dark-mode .about-card {
	background: #21262d;
	border-color: #30363d;
	box-shadow: 0 2px 8px rgba(255,255,255,0.05);
}

body.dark-mode .about-card h3 {
	color: #58a6ff;
}

body.dark-mode .about-card p {
	color: #c9d1d9;
}

body.dark-mode .skill-category h4 {
	color: #e6edf3;
}

body.dark-mode .skill-category h3 {
	color: #58a6ff;
}

body.dark-mode .skill-tag {
	background: #161b22;
	color: #58a6ff;
	border-color: #30363d;
}

body.dark-mode .love-list li {
	color: #c9d1d9;
}

body.dark-mode .love-list i {
	color: #58a6ff;
}

body.dark-mode .contact-btn {
	background: #1f6feb;
	color: #ffffff;
}

body.dark-mode .contact-btn:hover {
	background: #0969da;
}

/* Tags page specific */
body.dark-mode .section-header h2 {
	color: #58a6ff;
}

body.dark-mode .section-header p {
	color: #8b949e;
}

body.dark-mode .tag-card {
	background: #21262d;
	border-color: #30363d;
	color: #e6edf3;
}

body.dark-mode .tag-card:hover {
	border-color: #58a6ff;
	background: #262c36;
	box-shadow: 0 4px 12px rgba(88, 166, 255, 0.15);
}

body.dark-mode .tag-name {
	color: #58a6ff;
}

body.dark-mode .tag-count {
	color: #8b949e;
}

body.dark-mode .tag-arrow {
	color: #58a6ff;
}

body.dark-mode .tag-cloud .tag {
	background-color: #21262d;
	color: #58a6ff;
	border-color: #30363d;
}

body.dark-mode .tag-cloud .tag:hover {
	background-color: #1f6feb;
	color: #ffffff;
}

/* Archives page specific */
body.dark-mode .timeline::before {
	background: #30363d;
}

body.dark-mode .timeline-item::before {
	background: #1f6feb;
	border-color: #21262d;
	box-shadow: 0 0 0 2px #1f6feb;
}

body.dark-mode .timeline-date h3 {
	color: #58a6ff;
}

body.dark-mode .timeline-count {
	color: #8b949e;
}

body.dark-mode .timeline-project {
	background: #21262d;
	border-color: #30363d;
	color: #e6edf3;
}

body.dark-mode .timeline-project:hover {
	background: #262c36;
	box-shadow: 0 4px 8px rgba(255,255,255,0.1);
}

body.dark-mode .project-header h4 {
	color: #58a6ff;
}

body.dark-mode .project-date {
	color: #8b949e;
}

body.dark-mode .tech-tag {
	background: #161b22;
	color: #58a6ff;
	border-color: #30363d;
}

body.dark-mode .stars-tag {
	background: #2d2508;
	color: #ffd33d;
	border-color: #735c0f;
}

body.dark-mode .filter-btn {
	background: #21262d;
	border-color: #30363d;
	color: #8b949e;
}

body.dark-mode .filter-btn:hover {
	border-color: #58a6ff;
	color: #58a6ff;
}

body.dark-mode .filter-btn.active {
	background: #1f6feb;
	border-color: #1f6feb;
	color: #ffffff;
}

body.dark-mode .external-link {
	background: #161b22;
	color: #8b949e;
	border-color: #30363d;
}

body.dark-mode .external-link:hover {
	background: #21262d;
	color: #58a6ff;
}

body.dark-mode .view-details-btn {
	background: #1f6feb;
	color: #ffffff;
}

body.dark-mode .view-details-btn:hover {
	background: #0969da;
}

body.dark-mode .archive-item {
	border-bottom-color: #30363d;
}

body.dark-mode .archive-date {
	color: #8b949e;
}

/* Pagination */
body.dark-mode .pagination {
	border-top-color: #30363d;
}

body.dark-mode .pagination a {
	background-color: #21262d;
	border-color: #30363d;
	color: #e6edf3;
}

body.dark-mode .pagination a:hover {
	background-color: #30363d;
	border-color: #58a6ff;
}

body.dark-mode .pagination .current {
	background-color: #1f6feb;
	color: #ffffff;
	border-color: #1f6feb;
}

/* Cards container and sidebar elements */
body.dark-mode .cards-container {
	background-color: #0d1117;
}

body.dark-mode .card {
	border-left-color: #30363d;
	background-color: #0d1117;
}

body.dark-mode .card h3 {
	color: #58a6ff;
}

body.dark-mode .card p {
	color: #8b949e;
}

body.dark-mode .card a {
	color: #58a6ff;
}

body.dark-mode .card a:hover {
	color: #1f6feb;
}

/* Trending tags */
body.dark-mode .trending-tags p {
	background-color: #21262d;
	color: #8b949e;
	border: 1px solid #30363d;
}

body.dark-mode .trending-tags p:hover {
	background-color: #1f6feb;
	color: #ffffff;
	border-color: #1f6feb;
}

/* Back to top button */
body.dark-mode .totop {
	background-color: #1f6feb;
	box-shadow: 0 2px 8px rgba(31, 111, 235, 0.3);
}

body.dark-mode .totop:hover {
	background-color: #0969da;
}

body.dark-mode .totop a:focus {
	outline: 2px solid #58a6ff;
}

/* Search overlay dark mode specific improvements */
body.dark-mode #searchOverlay {
	background-color: rgba(13, 17, 23, 0.95);
	backdrop-filter: blur(15px);
}

body.dark-mode #searchOverlay .search-no-data {
	background: #2d1b06;
	border-color: #735c0f;
	color: #ffd33d;
}

body.dark-mode #searchOverlay .search-no-results {
	background: #2d1b1e;
	border-color: #8e1538;
	color: #f85149;
}

body.dark-mode #searchOverlay .search-error {
	background: #2d1b1e;
	border-color: #8e1538;
	color: #f85149;
}

body.dark-mode #searchOverlay .search-results-count {
	background: #0c2d36;
	border-color: #1f6feb;
	color: #58a6ff;
}

body.dark-mode #searchOverlay .project-card::before {
	background: linear-gradient(90deg, #58a6ff, #3fb950);
}

/* Dark mode styles for search overlay project cards */
body.dark-mode #searchOverlay .project-card {
	background: #21262d;
	border-color: #30363d;
	color: #e6edf3;
}

body.dark-mode #searchOverlay .project-card:hover {
	background: #161b22;
	border-color: #58a6ff;
	box-shadow: 0 6px 20px rgba(88, 166, 255, 0.2);
}

body.dark-mode #searchOverlay .project-card h2 {
	color: #58a6ff;
}

body.dark-mode #searchOverlay .project-card p {
	color: #8b949e;
}

body.dark-mode #searchOverlay .project-card div {
	color: #6e7681;
}

body.dark-mode #searchOverlay .project-card div a {
	color: #58a6ff;
}

body.dark-mode #searchOverlay .project-card div a:hover {
	color: #1f6feb;
}

/* Additional improvements for better dark mode experience */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
	color: #58a6ff;
}

body.dark-mode .section-header h2 {
	color: #58a6ff;
}

body.dark-mode .section-header p {
	color: #8b949e;
}

/* Loading spinner dark mode */
body.dark-mode .loading-spinner {
	color: #58a6ff;
}

body.dark-mode .loading-spinner i {
	color: #58a6ff;
}

/* Content wrapper */
body.dark-mode .content-wrapper {
	background-color: #0d1117;
}