.Header {
	background-image: linear-gradient(90deg, #5843e4, #5a0760);
	/* background-color: blue; */

	height: 80px;
	display: flex;
	/* justify-content: start; */
	align-items: center;
}

.menu-bars {
	margin-left: 2rem;
	font-size: 2rem;
	background: none;
	color:#f5f5f5
}

.nav-menu{
	background-color: #060b26;
	width: 250px;
	height: 100vh;
	display: grid;
	justify-content: center;
	position: fixed;
	top: 0; 
	left: 0;
	transition: 350ms;
	/* margin-top: 10px; */

	/* left: -100%; */
	/* transition: 850ms; */
}

.nav-menu.active {
	left: 0;
	transition: 350ms;
}

.nav-text {
	display: flex;
	/* justify-content: start; */
	align-items:  center;
	padding: 8px 0px 8px 16px;

	list-style: none;
	height: 60px;
}

.nav-text a {
	text-decoration: none;
	color: #f5f5f5;
	font-size: 18px;
	width: 95%;
	height: 100%;
	display: flex;
	align-items: center;
	/* padding: 0 16px; */
	padding: 8px 8px 8px 8px;

	border-radius: 20px;
}

.nav-text a:hover {
	background-color: #5843e4;
}

.nav-menu-items {
	width: 100%;
}

.Header-toggle {
	background-color: #060b26;
	width: 100%;
	height: 80px;
	display: flex;
	/* justify-content: start; */
	align-items: center;
}

span {
	margin-left: 16px;
}

.Header-pic {
	height: 50px;
	width: 50px;
	border: solid;
	border-color: black;
	border-radius: 50%;
}

.header-pic{
	text-align: end;
	/* id: right; */
}

.footer {
	height: 0.1px;
	color: #060b26;
}

.end{
	display: flex;
	justify-content: flex-end;
	margin-right: 2rem;
}

.backdrop{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	/* background: #000000e1; */
	backdrop-filter: blur(1.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
}