/** @format */

:root {
	/* 
   --bg-color: #0d0d0d;
	--1-color: #00ff85;
	--2-color: #1e90ff;
	--3-color: #ff0099; //hover
	--text-color: #ffffff;
*/

	/*
--bg-color: #003049;
--1-color: #d62828;
--2-color: #f77f00;
--3-color: #fcbf49;
--text-color: #eae2b7;
*/
	--bg-color: #2c3e50;
	--1-color: #34495e;
	--2-color: #1abc9c;
	--3-color: #d53ee3;
	--text-color: #ecf0f1;
}

header {
	position: sticky;
	top: 0;
	background-color: var(--bg-color);
	z-index: 100;
}

header * {
	z-index: 100;
}

nav {
	margin: 0px auto;
}

nav > ul {
	display: flex;
	flex-flow: row nowrap;
	align-items: start;
	justify-content: center;
	list-style: none;
}

.nav_button {
	color: var(--text-color);
	/* transition: 100ms; */
	font-weight: bold;
	text-decoration: none;
	padding: 10px 35px;
	margin: 0px 50px;
	font-size: 28px;
}

/* .nav_button:hover {
	border-bottom: 3px solid var(--2-color);
} */

#hover_marker {
	background-color: var(--2-color);
	height: 5px;
	width: 100px;
	height: 5px;
	position: relative;
	left: 500px;
	transition: 300ms;
	transform-origin: center center;
	visibility: hidden;
	border-radius: 2px;
	box-shadow: 0px 0px 10px var(--2-color);
}

#section_marker {
	background-color: var(--3-color);
	height: 5px;
	width: 100px;
	height: 5px;
	position: relative;
	left: 500px;
	transition: 0ms;
	transform-origin: center center;
	visibility: visible;
	border-radius: 2px;
	box-shadow: 0px 0px 10px var(--3-color);
}