/* BEGIN: NAV MAIN ---------------------------------------------------------- */

.nav-main.button {
	cursor: pointer;
	height: 3em;
	margin: 1em;
	position: fixed;
	width: 3em;
	transition: opacity var( --animation-duration ) ease-in-out;
	z-index: 4;
}

.nav-main.button.disabled {
	opacity: 0.5;
}

#nav-main-button-up {
	bottom: 0;
	margin-bottom: 5em;
	right: 0;
}

#nav-main-button-down {
	bottom: 0;
	right: 0;
}

#nav-main {
	background-color: var( --color-red );
	border: var( --border );
	color: white;
	display: grid;
	margin: 5em 0 0 5em;
	position: fixed;
	transform: scale( 0 );
	transform-origin: top left;
	transition: transform var( --animation-duration ) ease-in-out;
	z-index: 4;
}

#nav-main.show {
	transform: scale( 1 );
}

	#nav-main > a {
		padding-left: calc( var( --content-gap ) * 2 - 4px );
		padding-right: calc( var( --content-gap ) * 2 - 4px );
		white-space: nowrap;
	}

	#nav-main > a:first-child {
		padding-top: calc( var( --content-gap ) * 1.5 - 4px );
		font-weight: 800;
	}

	#nav-main > a:last-child {
		padding-bottom: calc( var( --content-gap ) * 1.5 - 4px );
	}

	#nav-main > a:not(:first-child) > img {
		margin-left: 1.125em;
	}

	@media ( orientation: landscape ) {

		#nav-main > a:first-child {
			grid-column: 1 / 3;
		}

		#nav-main > a:nth-of-type(2),
		#nav-main > a:nth-of-type(4),
		#nav-main > a:nth-of-type(6) {
			padding-right: calc( var( --content-gap ) * 0.5 );
		}

		#nav-main > a:nth-of-type(3),
		#nav-main > a:nth-of-type(5),
		#nav-main > a:nth-of-type(7) {
			padding-left: calc( var( --content-gap ) * 0.5 );
		}

	}

/* END: NAV MAIN ------------------------------------------------------------ */