.navbar-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #222;
	color: #fff;
	height: 10vh;
	position: fixed;
	width: 100%;
	z-index: 1;
}
.navbar {
	width: 50%;
}
.navbar-container h1 a {
	font-size: 2.2rem;
	text-decoration: none;
	color: #fff;
}
.nav-list {
	display: flex;
	justify-content: space-around;
	width: 100%;
}
.navbar li {
	list-style: none;
}
.navbar a {
	text-decoration: none;
	color: #fff;
	padding: 1rem;
	font-size: 1.2rem;
	border-radius: 5px;
	outline: none;
}
.navbar a:hover {
	background-color: red;
}
/*Burger*/
.burger div {
	width: 35px;
	height: 5px;
	margin: 5px;
	background-color: #fff;
	transition: all 0.3s ease;
}
.burger {
	display: none;
	cursor: pointer;
}
/* mobile */
@media screen and (max-width: 960px) {
	body {
		overflow-x: hidden;
	}
	.navbar {
		width: 9%;
	}
	.nav-list {
		width: 100%;
		position: absolute;
		right: 0px;
		height: 100vh;
		top: 9vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #222;
		transform: translateX(100%);
		transition: transform 0.7s ease-in;
	}
	.nav-list li {
		opacity: 0;
	}
	.burger {
		display: block;
	}
}

/*Slide the menubar*/
.navbar-active {
	transform: translateX(0%);
}
/*Animate The Anchor tag in the navbar*/
@keyframes navLinkFade {
	from {
		opacity: 0;
		transform: translateX(50%);
	}
	to {
		opacity: 1;
		transform: translateX(0%);
	}
}
.toggle .line1 {
	transform: rotate(-45deg) translate(-6px, 6px);
}
.toggle .line2 {
	opacity: 0;
}
.toggle .line3 {
	transform: rotate(45deg) translate(-6px, -6px);
}