#navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	min-height: var(--menu-height);
	z-index: 997;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg);
	box-shadow: var(--shadow-sm);
}
.navbar-container {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	justify-content: space-between;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
	padding-left: var(--container-padding-horizontal);
	padding-right: var(--container-padding-horizontal); 
}
.navbar-logo-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-md);
}
.navbar-logo {
	width: var(--font-size-lg);
	fill: var(--color-secondary);
	cursor: pointer;
}
.navbar-menu-icon {
	font-size: var(--font-size-lg);
	color: var(--color-secondary);
	cursor: pointer;
}
.navbar-links {
	display: none;
}
.navbar-links li {
	list-style: none;
}
.navbar-links a {
	text-decoration: none;
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-lg);
	color: var(--color-secondary);
	align-self: flex-end;
	cursor: pointer;
	line-height: 1;
	vertical-align: bottom;
}
.navbar-button-link-wrapper {
	display: none;
}
.navbar-button {
	background-color: var(--color-secondary);
	color: var(--color-bg);
}
/*=====[SIDEBAR]=====*/
.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 998;
	background-color: var(--color-bg);
	opacity: 0;
	pointer-events: none;
}
.overlay-animated {
	transition: opacity 0.8s ease;
}
.overlay-show {
	opacity: 1;
	pointer-events: auto;
}
.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 80%;
	z-index: 999;
	transform: translateX(100%);
	max-width: 400px;
	background-color: var(--color-bg);
	border: solid var(--border-sm) var(--color-secondary);
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
}
.sidebar-animated {
	transition: transform 0.8s ease;
}
.sidebar-open {
	transform: translateX(0);
}
.sidebar-container {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	padding: 0 var(--container-padding-horizontal);
}
.sidebar-header {
	min-height: var(--menu-height);
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}
.sidebar-body {
	width: 100%;
	min-height: var(--section-min-height);
	display: flex;
	justify-content: center;
	align-items: center;
}
.sidebar-title {
	font-family: var(--font-family);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-lg);
	color: var(--color-secondary);
}
.sidebar-close-icon {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
	cursor: pointer;
}
.sidebar-links li {
	list-style: none;
	width: 100%;
	border-bottom: solid var(--border-sm) var(--color-secondary);
}
.sidebar-link-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-lg) var(--space-md);
	width: 100%;
	text-decoration: none;
	transition: var(--transition-hover);
}
.sidebar-link-text {
	color: var(--color-secondary);
	font-family: var(--font-family);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-lg);
}
.sidebar-link-icon {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
}
/*=====[DESKTOP]=====*/
@media (min-width: 1024px) {
	.navbar-container {
		padding-right: 0; 
	}
	
	.navbar-name {
		display: block;
	}
	.navbar-menu-icon {
		display: none;
	}
	.navbar-links {
		display: flex;
		justify-content: center;
		align-items: baseline;
		gap: var(--space-lg);
		margin-left: var(--space-lg);
		margin-right: auto;
	}
	.navbar-button-link-wrapper {
		display: block;
	}
	.sidebar,
	.sidebar-open {
		display: none;
	}
	.overlay,
	.overlay-show {
		display: none;
	}
	.navbar-links a:hover {
		color: var(--color-secondary-hover);
	}
}