:root {
	--bg-color: #002703;
	--text-color: #F8F8F2;
	--navbar-bg: #002703;
	--mobile-collapse-bg: #3E3D32cF;
	--footer-link: #75715E;
	--footer-link-hover: #F8F8F2;
	--mobile-link: #75715E;
	--mobile-link-hover: #F8F8F2;
	--timeline-dot: #F8F8F2;
	--accent-color: #4f6b15;
}

body.light-mode {
	--bg-color: #f7f6f3;
	--text-color: #231f20;
	--navbar-bg: #f7f6f3;
	--mobile-collapse-bg: #e2e0dccf;
	--footer-link: #666666;
	--footer-link-hover: #231f20;
	--mobile-link: #666666;
	--mobile-link-hover: #231f20;
	--timeline-dot: #f7f6f3;
	--accent-color: #004d1d;
}

html {
	overflow-y: scroll;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
}

.navbar-default {
	background-image: none;
	background-color: var(--navbar-bg) !important;
	padding-left: max(1rem, calc((100% - 900px) / 2));
	padding-right: max(1rem, calc((100% - 900px) / 2));
}

/* Light mode navbar overrides */
body.light-mode .navbar-dark .nav-link {
	color: rgba(0, 0, 0, 0.6);
}
body.light-mode .navbar-dark .nav-link:hover,
body.light-mode .navbar-dark .nav-link.active {
	color: var(--text-color);
}
body.light-mode .navbar-dark .navbar-toggler {
	border-color: rgba(0, 0, 0, 0.2);
}
body.light-mode .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-item a.active {
	color: white;
}

/* Make navbar transparent for mobile viewports */
@media only screen and (max-width: 575px) {
	.navbar-collapse {
		background-color: var(--mobile-collapse-bg);
	}
	.navbar-toggler {
		background-color: var(--mobile-collapse-bg);
	}
	.mobile-navbar {
		background-color: transparent !important;
		margin-left: 0px;
		margin-top: 0px;
		/* This width value depends on the longest word in hamburger menu when open */
		width: 535px;
	}
	#mobile-navbar-items-top {
		background-color: var(--mobile-collapse-bg);
		padding: 20px;
		padding-bottom: 0px;
		margin-right: 70%;
		border-radius: 0px 20px 0px 0px;
	}
	#mobile-navbar-items-bottom {
		background-color: var(--mobile-collapse-bg);
		padding: 20px;
		padding-top: 0px;
		width: auto !important;
		margin-right: 70%;
		border-radius: 0px 0px 20px 20px;
	}
	/* Disables collapsing animation */
	.collapsing {
		transition: none !important;
	}
	/* Mobile theme toggle */
	#mobile-theme-toggle {
		position: fixed;
		top: 0;
		right: 0;
		padding-right: 15px;
		padding-top: 8px;
		z-index: 1030;
		align-items: center;
	}
	#mobile-theme-toggle a {
		color: rgba(255, 255, 255, 0.5);
		text-decoration: none;
		font-size: 1rem;
		padding: 0.25rem 0.5rem;
	}
	#mobile-theme-toggle a:hover {
		color: #ffffff;
	}
	body.light-mode #mobile-theme-toggle a {
		color: rgba(0, 0, 0, 0.5);
	}
	body.light-mode #mobile-theme-toggle a:hover {
		color: #231f20;
	}
	/* Give mobile toggle same size as hamburger */
	#mobile-theme-toggle .theme-toggle {
		/* background-color: var(--mobile-collapse-bg);
		border: 1px solid rgba(255, 255, 255, 0.1); */
		border-radius: 0.25rem;
		font-size: 1.25rem;
		padding: 0.25rem 1rem;
	}
	body.light-mode #mobile-theme-toggle .theme-toggle,
	body.light-mode #mobile-portfolio-link .theme-toggle {
		border-color: rgba(0, 0, 0, 0.2);
	}
}

.site-footer {
	margin-top: 70px;
	margin-bottom: 80px;
	max-width: 900px;
}

#left-list {
	padding-left: 30px;
}

#right-list {
	padding-right: 30px;
}

.footer-links {
	padding-left: 0;
	list-style: none;
}

.site-footer a {
	color: var(--footer-link);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--footer-link-hover);
	text-decoration: none;
}

/* Theme toggle button */
.theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.5);
	font-size: 1rem;
	padding: 0.25rem 0.5rem;
	transition: color 0.2s;
}
.theme-toggle:hover {
	color: #ffffff;
}
body.light-mode .theme-toggle {
	color: rgba(0, 0, 0, 0.5);
}
body.light-mode .theme-toggle:hover {
	color: #231f20;
}