body
{
	margin: 0;
	padding: 0;
	background-color: #0b0b0b;
	color: #b6b6b6;
	overflow-x: hidden;
	height: 100%;
}

#wrapper
{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#navbar
{
	background: linear-gradient(180deg, #334444, #003838 10%, #002d2d 90%, #002025);
	display: flex;
	width: 100%;
	min-height: 80px;
	margin: 0;
	padding: 8px;
	justify-content: left;
	align-items: center;
	flex-wrap: wrap;
}

#navbar a, #navbar h1, #navbar img, #navbar .disabledlink
{
	margin-left: 6px;
	margin-right: 6px;
	font-family: "Fira Sans";
	font-weight: 600;
}

#navbarname
{
  font-size: 28pt;
	font-family: "Fira Sans";
	font-weight: 800;
}


.navbutton
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 22px;
	background: linear-gradient(180deg, #609c70, #165f23 20%, #10591d 80%, #063c08);
	color: #d0e0d0;
	box-sizing: border-box;
	height: 90px;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	transition: 0.2s ease-out, background 0.2s ease-out, border 0.2s ease-out;
	margin: 4px 2px;
	border: 2px outset #73fbcab0;
	cursor: pointer;
}

.navbutton:hover
{
	background: linear-gradient(180deg, #7cb85c, #147724 20%, #0e711e 80%, #043c08);
	color: #ffffff;
	border: 2px outset #7bfcd2b0;
}

.navbutton:active
{
	background: linear-gradient(180deg, #083408, #055115 20%, #0b571b 80%, #388438);
	color: #a0b4a5;
	border: 2px inset #6bf5c2b0;
}

.navbutton.disabledlink
{
	background: linear-gradient(180deg, #083408, #055115 20%, #0b571b 80%, #388438);
	color: #a0b4a5;
	border: 2px inset #6bf5c2b0;
	cursor: default;
}

#mainduplex
{
	padding: 8px;
	margin-top: 8px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 1;
}

#mainleft
{
	padding: 8px;
	margin-right: 4px;
	background-color: #303438;
	width: 280px;
}

#mainright
{
	padding: 8px;
	margin-left: 8px;
	margin-right: 8px;
	background-color: #22242a;
	flex: 1;
}

@media (max-width: 900px)
{
	#mainduplex
	{
		flex-direction: column;
	}
	#mainleft, #mainright
	{
		width: calc(100% - 32px);
		margin: 8px;
	}
}

#footbar
{
	min-height: 80px;
  background-color: #44444f;
	background: linear-gradient(#54545f, #4a4a55 20%, #44444f 80%, #34343f);
	padding: 8px;
}

a
{
	color: #20b8d9;
}

a:hover
{
	color: #54d2f3
}

a:active
{
	color: #0093b2;
}

p
{
  font-family: "Fira Sans";
}

h1, h2, h3, h4, h5, h6
{
	font-family: "Fira Sans";
	font-weight: bold;
}