#NAVI-BAR {
	--scrollbar-space: 1; /*	For browsers where intrinsic width of "overflow:auto" element doesn't grow.
								This could be changed to zero from js for browsers having intrinsic width grow
								when scrollbar appear.
								https://bugzilla.mozilla.org/show_bug.cgi?id=764076 */
	--menu-font-color-hsl: 226, 99%, 47%;
	--hidden-menu-button-color-hsl: 117, 73%, 34%;
	--menu-background-hsl: 0, 0%, 100%;
	--button-hover-opacity: 50%;
	--menu-opacity: 20%;
	--menu-shadow-opacity: 30%;
	--transition-time: 0.35s;
	--menu-transition-time: var(--transition-time);
 	--icon-color-hsl: 226, 99%, 47%;
	--font-size-open-menu: clamp(20pt, 100vw, 4vmin + 2rem);
	--menu-size-scale: clamp(4rem, 4vh + 2rem, 6rem);
	--menu-font-factor: 0.4;
	--margin-factor: 1;
	--navi-menu-space: calc(var(--menu-size-scale) * 0.1);
	--hover-stroke-hsl: var(--home-page-background-hsl);
	--menu-hover-stroke-size: calc(var(--menu-size-scale) * 0.03);
	--text-shadow-hsl: 0, 0%, 100%;
	--text-shadow:	0 0 0.1rem hsl(var(--text-shadow-hsl)),
					0 0 0.2rem hsl(var(--text-shadow-hsl)),
					0 0 0.4rem hsl(var(--text-shadow-hsl)),
					0 0 0.6rem hsl(var(--text-shadow-hsl)),
					0 0 0.8rem hsl(var(--text-shadow-hsl));
	--text-shadow-hover-hsl: 62, 98%, 60%;
	--text-shadow-hover:	0 0 0.1rem hsl(var(--text-shadow-hover-hsl)),
							0 0 0.2rem hsl(var(--text-shadow-hover-hsl)),
							0 0 0.6rem hsl(var(--text-shadow-hover-hsl));
	--svg-shadow:	drop-shadow(0 0 0.1rem hsl(var(--text-shadow-hsl)))
					drop-shadow(0 0 0.2rem hsl(var(--text-shadow-hsl)))
					drop-shadow(0 0 0.6rem hsl(var(--text-shadow-hsl)));
	--svg-shadow-hover:	drop-shadow(0 0 0.1rem hsl(var(--text-shadow-hover-hsl)))
						drop-shadow(0 0 0.2rem hsl(var(--text-shadow-hover-hsl)))
						drop-shadow(0 0 0.4rem hsl(var(--text-shadow-hover-hsl)))
						drop-shadow(0 0 0.6rem hsl(var(--text-shadow-hover-hsl)));
	--unhide-hidden-menu-animation-state: paused;  /* Controlled by js to hide/unhide hidden buttons */
	white-space: nowrap;
	font-family: Tahoma, sans-serif;
	color: hsl(var(--menu-font-color-hsl));
	user-select: none;
}


svg, #NAVI-BAR symbol {  /* To show overflow when use stroke on svg */ 
	overflow: visible;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {  /* mainly to adjust to mobile phone */
	#NAVI-BAR {
		--font-size-open-menu: clamp(20pt, 100vw, 3vmin + 1rem);
		--margin-factor: 3;
	}
}

#NAVI-BAR_page-header {
	display: inline-flex;
 	align-items: center;
	opacity: 1;
	font-size: var(--font-size-open-menu);
	color: hsl(var(--icon-color-hsl));
	position: absolute;
	margin-top: calc(var(--font-size-open-menu) * 0.2 * var(--margin-factor));
	margin-left: calc(var(--font-size-open-menu) * 0.2 * var(--margin-factor));
  	transition: opacity var(--menu-transition-time) linear;
}

#NAVI-BAR_page-header svg {
	--size: calc(var(--font-size-open-menu));
	height: var(--size);
	width: var(--size);
	cursor: pointer;
}

#NAVI-BAR_page-header svg:not(:hover) {
	-webkit-filter: var(--svg-shadow-hover);
	filter: var(--svg-shadow);
}

#NAVI-BAR_page-title {
	display: inline;
	text-shadow: var(--text-shadow);
	padding-left: calc(var(--font-size-open-menu) * 0.2);
}

#NAVI-BAR_secret {  /* Box in where to fast tap to unhide the hidden menu */
	display: inline-flex;
	transform: translate(-100%, 0);  /* Box to cover end of title text */
	width: calc(var(--font-size-open-menu) * 2);
	height: var(--font-size-open-menu);
}

#NAVI-BAR_menu {
	--blur-radius: 3rem;
	position: absolute;
	transform: translate(calc(-100% - var(--blur-radius)));
	background-color: hsla(var(--menu-background-hsl), calc(100% - var(--menu-opacity)));
	box-shadow: 0 0 var(--blur-radius) hsla(var(--menu-background-hsl), calc(100% - var(--menu-opacity)));
	direction: rtl;  /* to locate scroll bar in left side */
	animation-timing-function: linear;
	animation-duration: var(--menu-transition-time);
	animation-fill-mode: forwards;
	height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;	/*	Not supprted for all browsers.
								Works in Firefox to compensate for issue
								"intrinsic overflow:auto".
								https://bugzilla.mozilla.org/show_bug.cgi?id=764076 */
}

@keyframes NAVI-BAR_menu_show {
	from { transform: translate(calc(-100% - var(--blur-radius))); }
	to { transform: translate(0%);	}
}

@keyframes NAVI-BAR_menu_hide {
	from { transform: translate(0%); }
	to { transform: translate(calc(-100% - var(--blur-radius))); }
}

#NAVI-BAR_menu div {
	display: flex;
	justify-content: center;
}

#NAVI-BAR_close-menu-button {
	--size: calc(var(--menu-size-scale) * var(--menu-font-factor) * 2.5);
	color: hsl(var(--icon-color-hsl));
	height: var(--size);
	width: var(--size);
	margin-top: calc(var(--navi-menu-space) * 2);
	cursor: pointer;
}

.NAVI-BAR_list table {
	--margin-y: var(--navi-menu-space);
	--margin-x: calc((1 + var(--scrollbar-space) * 2) *  var(--margin-y));
	margin: var(--margin-y) var(--margin-x) var(--margin-y) var(--margin-x);
	color: hsl(var(--menu-font-color-hsl));
	fill: hsl(var(--menu-font-color-hsl));  /* svg icon coloring */
}

.NAVI-BAR_list tr {
	cursor: pointer;
	font-size: calc(var(--menu-size-scale) * var(--menu-font-factor));
	line-height: 0;
	border-radius: 5pt;
}

.NAVI-BAR_list tr td:last-child {
	width: 100%;
	padding-left: calc(var(--navi-menu-space) * 2);
	padding-right: calc(var(--navi-menu-space) * 3);
}

.NAVI-BAR_list svg {
	--size: calc(var(--menu-size-scale) * var(--menu-font-factor) * 1.5);
	--margin-x: var(--navi-menu-space);
	--margin-y: calc(var(--navi-menu-space) * 2);
	height: var(--size);
	width: var(--size);
	margin: var(--margin-y) var(--margin-x) var(--margin-y) var(--margin-x);
}

#NAVI-BAR_hidden-menu ~ tr {
	color: hsl(var(--hidden-menu-button-color-hsl));
	animation-name: NAVI-BAR_unhide-animation;
	animation-timing-function: ease-out;
	animation-duration: 0.7s;
   	animation-delay: 0.1s;
 	animation-play-state: var(--unhide-hidden-menu-animation-state);
	animation-fill-mode: forwards;
}

@keyframes NAVI-BAR_unhide-animation {  /* Unhide secret menu */
	0% {
		color: red;
 		text-shadow: var(--text-shadow-hover);
		-webkit-filter: var(--svg-shadow-hover);
		filter: var(--svg-shadow-hover);
		transform: scale(0.2, 0.2);
	}
	80% {
		transform: scale(1, 1);
	}
	90% {
		transform: scale(0.8, 0.8);
 		color: red;
		text-shadow: var(--text-shadow-hover);
		-webkit-filter: var(--svg-shadow-hover);
		filter: var(--svg-shadow-hover);
	}
	100% {
		transform: scale(1, 1);
		visibility: visible;
		opacity: 1;
	}
}

@media(any-hover: hover) and (pointer: fine) {

	.NAVI-BAR_list tr:hover {
		box-shadow: 0 0 1rem hsla(var(--menu-font-color-hsl), calc(100% - var(--button-hover-opacity)));
		-webkit-text-stroke: var(--menu-hover-stroke-size) hsl(var(--menu-font-color-hsl));
	}

	#NAVI-BAR_hidden-menu ~ tr:hover {
		box-shadow: 0 0 1rem hsla(var(--hidden-menu-button-color-hsl), calc(100% - var(--button-hover-opacity)));
		-webkit-text-stroke: var(--menu-hover-stroke-size) hsl(var(--hidden-menu-button-color-hsl));
	}

	#NAVI-BAR_close-menu-button:hover, #NAVI-BAR_open-menu-button:hover, #NAVI-BAR_open-menu-button:hover ~ #NAVI-BAR_page-title {
		-webkit-text-stroke: calc(var(--font-size-open-menu) * 0.02) hsl(var(--hover-stroke-hsl));
		text-shadow: var(--text-shadow-hover);
		-webkit-filter: var(--svg-shadow-hover);
		filter: var(--svg-shadow-hover);
		stroke: hsl(var(--hover-stroke-hsl));
		stroke-width: calc(var(--font-size-open-menu) * 0.3);
	}

	#NAVI-BAR_close-menu-button:hover {
		-webkit-filter: var(--svg-shadow-hover);
		filter: var(--svg-shadow-hover);
		stroke: hsl(var(--hover-stroke-hsl));
		stroke-width: calc(var(--font-size-open-menu) * 0.3);
	}

}