#navMenu {

    width: 100%;
    max-height: 3rem;
    overflow: hidden;
    background-color: var(--faint-black);
    z-index: 3;

} #navMenu.active {

    max-height: 30rem;
    padding-bottom: 1rem;
    background-color: var(--black);

} #navMenu div.homeButton a {
    
    display: block;
    height: 3rem;
    padding: 0.5rem;

} #navMenu div.homeButton img {

    height: 100%;

} #navMenu div.navMenuLinks a {

    display: block;
    padding: 0.5em;
    font-family: Industry;
    font-weight: bold;

} #navMenu div.navMenuLinks a:hover {

    text-decoration: none;
    color: var(--blue) !important;

}

#mobileMenuButton {

    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.5rem;

}

@media screen and (min-width: 768px) {
    
    #navMenu {

        display: flex;
        justify-content: space-between;
        align-items: stretch;
        padding-right: 0.5rem;

    } #navMenu div.navMenuLinks {

        display: flex;

    } #navMenu div.navMenuLinks a {

        display: flex;
        align-items: center;
        font-size: 0.8em;

    }
    
    #mobileMenuButton {

        display: none;

    }

}

/* header.navMenu {
	display: flex;
	width: 100%;
	height: 3rem;
	background-color: var(--faint-black);
	z-index: 3;
} header.navMenu div.homeButton a.navLink {
	position: absolute;
	display: flex;
	align-items: center;
	white-space: nowrap;
	text-transform: uppercase;
} header.navMenu div.mainMenu {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: inherit;
	display: flex;
} header.navMenu div.userMenu {
	position: absolute;
	right: 0;
	height: inherit;
	display: flex;
} header.navMenu a.navLink {
	font-family: Industry;
	font-size: 0.9em;
	font-weight: bold;
	height: 3rem;
	padding: 1rem;
} header.navMenu a.navLink img {
	font-size: inherit;
	height: 3rem;
	padding: 0.3rem;
	padding-left: 0;
} header.navMenu a.navLink:hover {
	text-decoration: none;
} header.navMenu a.navLink:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: inherit;
	border-width: 0 0 0.1rem 0;
	border-style: solid;
	transform: scaleX(0);
	transition: transform 0.1s ease;
} header.navMenu a.navLink:hover:after {
	transform: scaleX(1);
}

/* mobile 


	header.navMenu div.mainMenu, header.navMenu div.userMenu {
		display: none;
	} header.navMenu a.navLink:after {
		border: none;
	} header.navMenu div.mobile.menuButton {
		position: absolute;
		right: 0;
		height: inherit;
	} header.navMenu div.mobile.menuButton a.navLink {
		position: absolute;
		top: 0;
		right: 0;
		height: 3rem;
		width: 3rem;
	} header.navMenu div.mobile.menuButton a.navLink img {
		position: absolute;
		top: 0;
		right: 0;
		padding: 0.5rem;
	} header.navMenu div.mobileMenu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: min-content;
		max-height: 100vh;
		margin-top: 3rem;
		background-color: var(--black);
		overflow: hidden;
		transition: max-height 0.25s;
	} header.navMenu div.mobileMenu a.navLink {
		display: block;
		width: 100%;
		height: 3rem;
		z-index: inherit;
	} header.navMenu div.collapsed.mobileMenu {
		max-height: 0;
	} */