* {
	padding: 0;
	margin: 0;
/*	border-color: #333333;*/
	border-width: 0.5px;
/*	color: #333333;*/
/*	font-family: Helvetica, Arial, sans-serif;*/
	font-family: 'Source Sans 3', sans-serif;
}

:root {
	--clr-light: #E0E0E0;
	--clr-dark: #333333;

	--body-light: #FFFFFF;
	--body-dark: #000000;

	--nav-light: rgba(242, 242, 242, 0.8);
	--nav-dark: rgba(17, 17, 17, 0.8);

	--stroke-light: #333333;
	--stroke-dark: #4A4A4A;

	--card-light: #F2F2F2;
	--card-dark: #111111;

	--accent-light: #A8CDFF;
	--accent-dark: #0160E0;

	--foreground: var(--clr-dark);
	--background: var(--clr-light);
	--body: var(--body-light);
	--nav: var(--nav-light);
	--stroke: var(--stroke-light);
	--card-background: var(--card-light);
	--accent: var(--accent-light);
}

@media (prefers-color-scheme: dark) {
	:root {
		--foreground: var(--clr-light);
		--background: var(--clr-dark);
		--body: var(--body-dark);
		--nav: var(--nav-dark);
		--stroke: var(--stroke-dark);
		--card-background: var(--card-dark);
		--accent: var(--accent-dark);
	}
}

* h1 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: .2rem;
	color: var(--foreground);
}

* h2 {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: .1rem;
	color: var(--foreground);
}

* h3 {
	font-size: 0.8rem;
	font-weight: 300;
	margin-bottom: .1rem;
	color: var(--foreground);
}

* p {
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: .1rem;
	color: var(--foreground);
}

* a {
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: .1rem;
	color: var(--foreground);
}

* a:visited {
  color: var(--foreground);
}

* mark {
	background: var(--accent);
	color: var(--foreground);
}

* hr {
	border-color: var(--body);
}

* body {
	background: var(--body);
}


/*##################*/

.navigation-item-container {
	width: 100%;
	background: var(--nav);
	-webkit-backdrop-filter: saturate(1.8) blur(20px);
	backdrop-filter: saturate(1.8) blur(20px);
	border-style: solid none none none;
	border-color: var(--stroke);
	position: fixed;
	bottom: 0;
}

.navigation {
	display: flex;
	list-style: none;
	margin: auto;
	width: 80%;
}

.navigation-item {
	padding: 1rem;
	margin: auto;
}

.navigation-item a,p {
	color: var(--foreground);
	text-decoration: none;
}

.selected-page {
	font-weight: 600;
	text-decoration: underline;
}

/*##################*/

.main-container {
	width: 100%;
	margin: 0;
	padding-bottom: 4rem;
}

.card {
	list-style: none;
	background: var(--card-background);
	margin: 1rem;
	padding: 1rem;
	border-style: none solid solid none;
	border-color: var(--stroke);
}

.card h3 {
	border-style: none none solid none;
	border-color: var(--stroke);
	padding-bottom: .5rem;
}

.card-links {
	list-style: none;
}

.card-links a {
	color: var(--foreground);
}

/*##################*/

@media only screen and (min-width: 767px) {
	.main-container {
		width: 80%;
		margin: auto;
		padding-top: 3rem;
	}
	.navigation-item-container {
		border-style: none none solid none;
		height: 3rem;
		top: 0;
	}
	.navigation {
		width: 60%;
		margin: auto;
	}
}

@media only screen and (min-width: 1365px) {
	.main-container {
		width: 60%;
		margin: auto;
		padding-top: 3rem;
	}
	.navigation-item-container {
		border-style: none none solid none;
		height: 3rem;
		top: 0;
	}
	.navigation {
		width: 40%;
		margin: auto;
	}
}