@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap');

:root {
	--bg-color: rgb(30, 30, 30);
	--fg-color: rgb(220, 220, 220);
	--heading-color: rgb(240, 240, 240);
	--nav-color: rgba(10, 10, 10, 0.8);
	--nav-line-color: rgb(40, 40, 40);
	--nav-link-color: rgb(200, 200, 200);
	--nav-active-link-color: var(--heading-color);
	--highlight-background: rgba(255, 255, 255, 0.99);
	--highlight-color: black;
}

::selection {
	color: var(--highlight-color);
	background: var(--highlight-background);
}

::-moz-selection {
	color: var(--highlight-color);
	background: var(--highlight-background);
}

* {
	color: var(--fg-color);
}

body {
	margin: 0px;
	font-family: 'IBM Plex Sans', sans-serif;
	background-color: var(--bg-color);
}

a {
	color: #1f89ed;
	text-decoration: none;
}

.nav a {
	font-family: 'IBM Plex Sans', Sans-Serif;
}

h1 {
	color: var(--heading-color);
	font-family: 'IBM Plex Sans', Sans-Serif;
}

h2 {
	color: var(--heading-color);
	font-family:'IBM Plex Sans',  Sans-Serif;
}

h3 {
	color: var(--heading-color);
	font-family:'IBM Plex Sans',  Sans-Serif;
}

a:hover {
	color: #009bf5;
	text-decoration: none;
}

.right_align {
	float: right;
}

.left_align {
	float: left;
}

.nav {
	/*background-color: #144257;*/
	background-color: var(--nav-color);

	/*box-shadow: 0px 1px 5px 0px var(--nav-color);*/
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-style: none none solid none;
	border-width: 0.1rem;
	border-color: var(--nav-line-color);
	position: fixed;
	width: 100%;
	top: 0;
	padding: 0px 10px 0px 10px;
	overflow: hidden;
	display: flex;
	flex-direction: row;
}

.nav * {
	margin: 0px;
}


.nav .logo {
	font-weight: bold;
	color: var(--nav-active-link-color);
	font-size: 1.5em;
	padding: 9px 9px;
}

.nav a {
	float: left;
	display: block;
	text-decoration: none;
	color: var(--nav-link-color);
	padding: 14px 16px;
	text-align: center;
	/*font-weight: 200;*/
}

.nav a:hover {

	color: var(--nav-active-link-color);

}

.nav .active {
	/*background-color: #e8e8e8;*/
	/*font-weight: bold;*/
	font-weight: bold;
	color: var(--nav-active-link-color);
}

@media only screen and (max-width: 455px) {
	.nav {
		flex-direction: column;
	}

	.nav_links {
		display: none;
	}

	.nav_section {
		justify-content: space-between;
	}

	#nav_hamburger {	
		height: 36px;
		width: 48px;
		padding-left: 15px;
		margin-top: 3px;
		background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48' height='36' viewBox='0 0 48 36' fill='rgb(255, 255, 255)'%3E%3Crect x='16' y='12' width='16' height='2' /%3E%3Crect x='16' y='17' width='16' height='2' /%3E%3Crect x='16' y='22' width='16' height='2' /%3E%3C/svg>");		
	}
}

.main {
	margin-top: 30px;
	padding: 20px;
}