/*
 * puts a fixed nav bar menu on the top with a height of --nav-height
 * should define the css var --nav-height
 */

nav {
	position: fixed;
	top: 0px;
	width: 100%;
	padding: 4px 32px;

	display: grid;
	grid-auto-flow:  column;
	justify-content:  space-between;
	align-items:  center;
	z-index: 2;

	overflow: hidden;
	grid-gap: 18px;
}

nav img {
	height: var(--nav-height);

}

nav a {
	align-self:  center;
	font-size: 15px;
	color: unset;
	text-decoration: none;
	white-space:  nowrap;
}


nav a.currentURL {
  border-bottom: 2px solid white;
	line-height: 1.5em;
}

nav #menuIcon {
	display: none;
    padding-left: 10px;
}

@media only screen and (max-width : 1000px) {
	nav {
		grid-gap: 0;
	}
	nav img {
		grid-column: 1;
		grid-row: 1;
	}

	nav #menuIcon {
		grid-column: 2;
		grid-row: 1;
		display: block;
	}

	nav > a {
		grid-column: 1/3;
		justify-self:  end;
		transition: height .2s;
		height: 2em;
		font-size: 22px !important;
		border: unset !important;
	}

	nav:not(.menuVisible) > a {
		height: 0px;
	} 
}