.navbarContainer input[type="checkbox"],
.navbarContainer .hamburger-lines {
	display: none;
}

.navbarContainer {
	box-shadow: 0px 5px 10px 0px var(--backgroundColorShadow);
	position: fixed;
	width: 100%;
	background: linear-gradient(
		to left,
		var(--backgroundColorShadow),
		var(--backgroundColor2)
	);
	color: var(--txtColor);
	opacity: 1;
	height: var(--navbarHeight);
	z-index: 30;
}

#navbarSubContainer {
	max-width: 1200px;
	width: 90%;
	margin: auto;
	height: 64px;
}

.menu-items {
	order: 2;
}

.menu-items li {
	list-style: none;
	margin-left: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
	text-decoration: none;
	color: var(--txtColor);
	font-weight: 500;
	transition: color 0.3s ease-in-out;
}

.menu-txt {
	transition: color 0.3s ease-in-out;
	cursor: pointer;
}

.menu-txt:hover {
	color: var(--txtOrange);
}

#burgerMenuInput {
	cursor: pointer;
}

@media screen and (max-width: 767px) {
	#navbarSubContainer input[type="checkbox"],
	#navbarSubContainer .hamburger-lines {
		display: block;
		height: var(--burgerBoxSize);
		width: var(--burgerBoxSize);
		position: absolute;
		top: calc(var(--navbarHeight) / 2 - var(--burgerBoxSize) / 2);
		left: 5vw;
		z-index: 25;
	}

	#navbarSubContainer input[type="checkbox"] {
		opacity: 0;
	}

	#navbarSubContainer {
		display: block;
		position: relative;
		height: 64px;
	}

	#navbarSubContainer .hamburger-lines {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		z-index: 20;
	}

	#navbarSubContainer .hamburger-lines .line {
		display: block;
		height: 4px;
		border-radius: 10px;
		background: var(--txtColor);
	}

	#navbarSubContainer .hamburger-lines .line1 {
		transform-origin: 0% 0%;
		width: 100%;
		transition: transform 0.4s ease-in-out, width 0.4s ease-in-out;
	}

	#navbarSubContainer .hamburger-lines .line2 {
		transition: transform 0.2s ease-in-out;
	}

	#navbarSubContainer .hamburger-lines .line3 {
		transform-origin: 0% 100%;
		width: 100%;
		transition: transform 0.4s ease-in-out, width 0.4s ease-in-out;
	}

	.navbarContainer .menu-items {
		padding-top: 100px;
		background: linear-gradient(
			to top,
			var(--backgroundColor1),
			var(--backgroundColor2)
		);
		height: 100vh;
		max-width: 300px;
		transform: translate(-150%);
		display: flex;
		flex-direction: column;
		margin-left: -40px;
		padding-left: 50px;
		transition: transform 0.5s ease-in-out;
		box-shadow: 5px 0px 10px 0px var(--backgroundColorShadow);
	}

	.navbarContainer .menu-items li {
		margin-bottom: 1.5rem;
		font-size: 1.3rem;
		font-weight: 500;
	}

	#navbarSubContainer input[type="checkbox"]:checked ~ .menu-items {
		transform: translateX(0);
	}

	#navbarSubContainer input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
		transform: rotate(45deg);
		width: 125%;
	}

	#navbarSubContainer input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
		transform: scaleY(0);
	}

	#navbarSubContainer input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
		transform: rotate(-45deg);
		width: 125%;
	}
}

@media screen and (min-width: 768px) {
	.navbarContainer {
		position: absolute;
		width: 100%;
	}

	.menu-items {
		position: relative;
		display: flex;
		justify-content: space-around;
		height: var(--navbarHeight);
		align-items: center;
	}
}