:root {
		--nb-primary-color: rgba(19,33,56,0.75);
		--nb-overlay-color: rgba(19,33,56,0.85);
		--nb-primary-highlight: #FFBA84;
		--nb-secondary-highlight: #CE8D62;
		--nb-secondary-color: rgba(58,88,105,1);
		--nb-tertiary-color-alpha: rgba(127,211,239,1);
	}

	.navbar {
		position: fixed;
		top: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		

	}

	/* 
	Position Menu Wrapper Div in the upper right corner
	Make background transparent
	Bring if forward along Z axis
	 */

	.menu-wrap {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		background: transparent;
		z-index: 1;
	}

	/*
	Bring check box (toggler) forward along the Z axis
	Define size 50px by 50px
	Hide the check box
	*/

	.menu-wrap .toggler {
		z-index: 2;
		cursor: pointer;
		width: 50px;
		height: 50px;
		/* hide the checkbox */
		opacity: 0;
		visibility: hidden;
	}

	/*
	Position hamburger absolute
	Move forward along Z axis
	Define size 60px by 60px
	Make background transparent
	Align to Vertical and Horizontal Center
	Hide the hamburger
	*/

	.menu-wrap .hamburger {
		position: absolute;
		z-index: 1;
		width: 40px;
		height: 40px;
		padding: 0rem;
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		visibility: hidden;
	}



	/* Hamburger Lines */

	.icon-bar {
		position: absolute;
		top: 0;
		width: 100%;
		height: 2px;
		background: #fff;
		z-index: 1;
		opacity: 1;
	}

	/* Position each line */

	.line1 {
		top: 10px;
	}

	.line2, .line3 {
		top: 25px;
	}

	.line4 {
		top: 40px;
	}

	/* Transition Hamburger to X when Clicked */

	.toggler:checked + .hamburger > .line1 {
		opacity: 0;
	}

	.toggler:checked + .hamburger > .line2 {
		transform: rotate(135deg);
		transition-duration: 1s;
	}

	.toggler:checked + .hamburger > .line3 {
		transform: rotate(45deg);
		transition-duration: 1s;
	}

	.toggler:checked + .hamburger > .line4 {
		opacity: 0;
	}

	.line5 {
		width: 75%;
		height: 3px;
		background: #fff;
	}

	

	/* Show Menu */

	.toggler:checked ~ .menu {
		visibility: visible;
	}

	.toggler:checked ~ .menu > div {
		transform: scale(1);
		transition-duration: 1s;
	}

	.toggler:checked ~ .menu > div > div {
		opacity: 1;
	}


/* Regular Navbar Menu */	

	#navbarLogo {
		width: 80px;
		height: 80px;
	}

	.zeldaNavMenu > ul {
		list-style-type: none;
		display: inline-flex;
	}

	.zeldaNavMenu > ul > li > a {
		color: #fff;
		font-size: 100%;
	}

	.zeldaNavMenu > ul > li > a:hover {
		text-decoration: underline;
		color: var(--nb-tertiary-color-alpha) !important;
	}


/* Popup Hamburger Menu */

	/* Positon Menu Wrapper (the circle) in center of screen */

	.menu-wrap .menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		visibility: hidden;
	}

/* Animate Menu */

	.menu-wrap .menu > div {
	background: var(--nb-overlay-color);
	border-radius: 60%;
	width: 200vw;
	height: 200vh;
	display: flex;
	flex: none;
	text-align: center;
	/*align-items: center;*/
	justify-content: center;
	transform: scale(0);
	}

	.menu-wrap .menu > div > div {
		/*text-align: center;*/
		max-width: 80vw;
		max-height: 80vh;
		opacity: 0;
	}

	.menu-wrap .menu > div > div > ul > li {
		list-style: none;
		color: #fff;
		font-size: 1rem;
		padding: 0.9rem;
	}

	.menu-wrap .menu > div > div > div > a {
		color: #fff;
		text-decoration: none;
	}

	.menu-wrap .menu > div > div  > a:hover {
		color: var(--nb-tertiary-color-alpha) !important;
		text-decoration: underline;
	}

	.zeldaHamburgerMenu {
		height: 100vh;
	}

	.zeldaHamburgerMenu a {
		color: #fff;
		font-size: 2rem;
		padding: 2rem;
	}

	.zeldaHamburgerMenu > div > div > a:hover {
		color: var(--nb-tertiary-color-alpha) !important;
		text-decoration: underline;
	}

	.zeldaActive {
		color: var(--nb-primary-highlight) !important;
	}

	.zeldaHide {
		display: none;
	}

	.zeldaNudge {
		display: block;
		height: 10%;
	}

	.zeldaHamburgerMenu hr {
		background-color: white;
		height: 1px;
	}



	#openMenu {
		font-size: 75%;
	}

	/* make full menu smaller */

	@media (max-width: 925px) {

		.zeldaNavMenu > ul > li > a {
		color: #fff;
		font-size: 75%;
		}

	}

/* make full menu smaller */

	@media (max-width: 1024px) {

		.zeldaNavMenu > ul > li > a {
		color: #fff;
		font-size: 60%;
		}

	}

/* switch from full menu to hamburger menu */

	@media (max-width: 820px) {
			.menu-wrap .toggler {
				visibility: visible;
			}

			.menu-wrap .hamburger {
				visibility: visible;
			}

			.zeldaNavMenu > ul > li > a {
				visibility: hidden;
			}

			#navbarLogo {
				width: 40px;
				height: 40px;
			}
		}