//---------Header---------
header {
	background-color: var(--background-color);
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	padding: 10px 20px;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.3);
	opacity: 0.7;
	z-index: 1;
	overflow: hidden;
	//---------Media Query---------
	&.signed {
		@media screen and (max-width: 730px) {
			.menu-wrap {
				display: block;
			}
		}
	}
	//---------Navbar---------
	nav {
		position: relative;
		//---------Hamburger Menu Styling---------//
		.menu-wrap {
			@media screen and (max-width: 450px) {
				right: 25%;
			}
			@media screen and (max-width: 350px) {
				right: 30%;
			}
			display: none;
			position: absolute;
			top: 3%;
			right: 15%;
			z-index: 2;
			.toggler {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 3;
				cursor: pointer;
				width: 50px;
				height: 50px;
				opacity: 0;
				//---------Toggler Animation---------
				&:checked {
					& + .hamburger > div {
						transform: rotate(135deg);
						//---------Turn Lines into X---------
						&::after,
						&::before {
							top: 0;
							transform: rotate(90deg);
						}
					}
					//---------Rotate On Hover When Checked---------
					&:hover {
						& + .hamburger > div {
							transform: rotate(225deg);
						}
					}
					//---------Show Menu---------
					& ~ .menu {
						visibility: visible;
						& > div {
							transform: scale(1);
							transition-duration: 0.75s;
							& > div {
								opacity: 1;
								transition: opacity 0.4s ease 0.4s;
							}
						}
					}
				}
			}
			.hamburger {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 60px;
				height: 60px;
				padding: 1rem;
				background: var(--logo-color);
				display: flex;
				align-items: center;
				justify-content: center;
				//---------Hamburger Line---------
				& > div {
					position: relative;
					flex: none;
					width: 100%;
					height: 2px;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.4s ease;
					//---------Hamburger Lines - Top & Bottom---------
					&::before,
					&::after {
						content: "";
						position: absolute;
						z-index: 2;
						top: -10px;
						width: 100%;
						height: 2px;
						background: inherit;
					}
					//---------Move Lines Down---------
					&::after {
						top: 10px;
					}
				}
			}
			.menu {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				visibility: hidden;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				& > div {
					background: var(--logo-color);
					border-radius: 50%;
					width: 200vw;
					height: 200vw;
					display: flex;
					flex: none;
					align-items: center;
					justify-content: center;
					transform: scale(0);
					transition: all 0.4s ease;
					& > div {
						text-align: center;
						max-width: 90vw;
						max-height: 100vh;
						opacity: 0;
						transition: opacity 0.4s ease;
						& > ul > li {
							list-style: none;
							color: #fff;
							font-size: 1.5rem;
							padding: 1rem;
							& > a {
								color: var(--accent-color);
								text-decoration: none;
								transition: color 0.1s ease;
								font-size: 1.2rem;
								font-weight: 500;
								&:hover {
									color: var(--background-color);
								}
								&.active {
									color: var(--background-color);
									border-bottom: 2px solid var(--background-color);
								}
							}
						}
					}
				}
			}
		}
		//---------Hamburger Menu Styling---------//
	}
}
