/* Need a media query at 360px width for cell phones */

*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	:root {
		/*--clr-neon-link: rgb(81, 252, 9);*/
		/*--clr-neon-link: rgb(11,255,1);*/
		--clr-alternate-b-neon-link-alpha: rgba(38, 149, 255, 0.5);
		--clr-alternate-b-neon-link: rgb(38, 149, 255);
		--clr-alternate-r-neon-link-alpha: rgba(255, 0, 60, 0.5);
		--clr-alternate-r-neon-link: rgb(255, 0, 60);
		--clr-alternate-or-neon-link-alpha: rgba(255, 102, 0, 0.5);
		--clr-alternate-or-neon-link: rgb(255, 102, 0);

		--nav-container-width: min-content;
		--nav-container-max-width: 35%;
		--nav-container-margin: 0, auto;
		--nav-container-padding: 3px;
		--nav-area-width: 0, auto;
		--nav-area-margin: 13px;
		--nav-area-padding: auto;
		/*--nav-area-padding: 3px;*/
		--nav-area-background: black;
		--fs-nav-link: 0.5rem;
		--clr-neon-link: rgb(57,255,20);
		--fw-body-bold: 800;
		--fw-body-med: 400;
		--fw-body-light: 200;
		--main-radius: 5px;
		--zero-radius: 0px;
		--main-padding: 5px;
		/*	--outline-red: 3px dashed red;
		--outline-green: 3px solid green;
		--outline-blue: 3px dashed blue;*/
--outline-blue: none;
--outline-red: none;
--outline-green: none;


}

.centered {
	position:absolute;
	left:50%;
	transform:translate(-50%);
}


.nav-container {
	display: grid;
	position: fixed;
	font-size: var(--fs-nav-link);
	width: var(--nav-container-width);
	max-width: var(--nav-container-max-width);
	margin: var(--nav-container-margin);
	padding: var(--nav-container-padding);
	background:#000000;
	/*	height: 100vh; */
	grid-template-columns: repeat(7, 1fr);/*minmax(min-content, auto); */
	/*	grid-template-rows: repeat(6, 1fr);*/
	/*	grid-auto-flow: row;*/
	grid-auto-rows: minmax(min-content, auto);
	grid-template-areas:
	"nav-one"
	"nav-two"
	"nav-three"
	"nav-four"
	"nav-five"
	"nav-six"
	"nav-seven";
	grid-gap: 0.2rem;
	/*justify-content: center;*/
	/*align-content: start;*/
	/*justify-items: center;*/
	/*align-items: stretch;*/
	outline: var(--outline-green);
	text-align: center;

}

.nav-one {

	grid-area: nav-one;
	width: var(--nav-area-width);
	margin: var(--nav-area-margin);
	padding: var(--nav-area-padding);
	font-size: var(--fs-nav-link);
	outline: var(--outline-red);


}

.nav-two {

	grid-area: nav-two;
	width: var(--nav-area-width);
	margin: var(--nav-area-margin);
	padding: var(--nav-area-padding);
	font-size: var(--fs-nav-link);
	outline: var(--outline-red);

}

.nav-three {

	grid-area: nav-three;
	width: var(--nav-area-width);
	margin: var(--nav-area-margin);
	padding: var(--nav-area-padding);
	font-size: var(--fs-nav-link);
	outline: var(--outline-red);

}

.nav-four {

	grid-area: nav-four;
	width: var(--nav-area-width);
	margin: var(--nav-area-margin);
	padding: var(--nav-area-padding);
	font-size: var(--fs-nav-link);
	outline: var(--outline-red);

}

.nav-five {

	grid-area: nav-five;
	width: var(--nav-area-width);
	margin: var(--nav-area-margin);
	padding: var(--nav-area-padding);
	font-size: var(--fs-nav-link);
	outline: var(--outline-red);

}

.nav-six {

	grid-area: nav-six;
	width: var(--nav-area-width);
	margin: var(--nav-area-margin);
	padding: var(--nav-area-padding);
	font-size: var(--fs-nav-link);
	outline: var(--outline-red);

}

.nav-seven {

	grid-area: nav-seven;
	width: var(--nav-area-width);
	margin: var(--nav-area-margin);
	padding: var(--nav-area-padding);
	font-size: var(--fs-nav-link);
	outline: var(--outline-red);

}

.nav:hover {
	font-size: 1.0rem;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	color: var(--clr-alternate-or-neon-link);
	border: var(--clr-alternate-or-neon-link) 0.125em solid;
	padding: 0.25em 1em;
	border-radius: 0.25em;
	text-shadow: 0 0 0.125em var(--clr-alternate-or-neon-link),
	0 0 0.45em var(--clr-alternate-or-neon-link);
	box-shadow: inset 0 0 0.5em var(--clr-alternate-or-neon-link),
	0 0 0.5em var(--clr-alternate-or-neon-link);
	position: relative;
	transition: background-color 100ms linear;


}

.nav {
	font-size: 1.0rem;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	color: var(--clr-neon-link);
	border: var(--clr-neon-link) 0.125em solid;
	padding: 0.25em 1em;
	border-radius: 0.25em;
	text-shadow: 0 0 0.125em var(--clr-neon-link),
	0 0 0.45em var(--clr-neon-link);
	box-shadow: inset 0 0 0.5em var(--clr-neon-link),
	0 0 0.5em var(--clr-neon-link);
	position: relative;
	transition: background-color 100ms linear;


}







/*.nav::before {
pointer-events: none;
content: "";
position: absolute;
background: var(--clr-neon-link);
top: 115%;
left: 0;
width: 100%;
height: 100%;
color: black;
transform: perspective(0.8em) rotateX(40deg)
scale(1, 0.35);
filter: blur(1em);
opacity: 0.7;


}*/

.nav > a {
	/*	font-size: 1.5rem;
	display: inline-block;
	cursor: pointer;*/
text-decoration: none;
color: var(--clr-neon-link);
/*	border: var(--clr-neon-link) 0.125em solid;
padding: 0.25em 1em;
border-radius: 0.25em;
text-shadow: 0 0 0.125em var(--clr-neon-link),
0 0 0.45em var(--clr-neon-link);
box-shadow: inset 0 0 0.5em var(--clr-neon-link),
0 0 0.5em var(--clr-neon-link);*/
position: relative;
transition: background-color 100ms linear;


}

.nav:hover > a {
	/*	font-size: 1.5rem;*/
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	background: black;
	color: var(--clr-alternate-or-neon-link);
	/*	border: var(--clr-alternate-or-neon-link) 0.125em solid;
	padding: 0.25em 1em;*/
/*	border-radius: 0.25em;*/
/*	border: none;*/
text-shadow: 1px 1px 0.125em var(--clr-alternate-or-neon-link),
1px 1px 0.45em var(--clr-alternate-or-neon-link);
/*	box-shadow: inset 0 0 0.5em var(--clr-alternate-or-neon-link),
0 0 0.5em var(--clr-alternate-or-neon-link);*/
position: relative;
transition: background-color 100ms linear;
outline: var(--outline-blue);	

}

.nav::after {
	content: "";
	position: absolute;
	/*	top 0;*/
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 0 2em 0.5em var(--clr-neon-link);
	opacity: 0;
	transition: opacity 100ms linear;

	background: var(--clr-neon-link);
	color: #000000;

}


.nav:hover::after {
	content: "";
	position: absolute;
	/*	top 0;*/
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 0 2em 0.5em var(--clr-alternate-or-neon-link);
	opacity: 0;
	transition: opacity 100ms linear;

	background: var(--clr-alternate-or-neon-link);
	color: #000000;

}



.nav:hover,
.nav:focus {
	background: black;
	color: var(--clr-alternate-or-neon-link);
	text-shadow: none;
}

.nav:hover::before,
.nav:focus::before {
	opacity: 1;
}


.nav:hover::after,
.nav:focus::after {
	opacity: 1;
}

/*        a ONLY SECTION XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX            */

a.nav::after {
	content: "";
	position: absolute;
	/*	top 0;*/
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 0 2em 0.5em var(--clr-alternate-or-neon-link);
	opacity: 0;
	transition: opacity 100ms linear;

	background: black;
	color: var(--clr-alternate-or-neon-link);

}

a.nav:hover,
a.nav:focus {
	background: black;
	color: var(--clr-alternate-or-neon-link);
	text-shadow: none;
}

a.nav:hover::before,
a.nav:focus::before {
	opacity: 1;
}


a.nav:hover::after,
a.nav:focus::after {
	opacity: 1;
}