:root {
	--color-bg: #e0e0e0;
	--color-shadow: #888888;
	--color-container: #ffffff;

	--color-text-light: #ffffff;
	--color-text-dark: #000000;
	--color-text: var(--color-text-light);

	--color-anchor-light: #ffffff;
	--color-anchor-dark: #222222;
	--color-anchor: var(--color-anchor-light);

	--color-anchor-hover-light: #dddddd;
	--color-anchor-hover-dark: #555555;
	--color-anchor-hover: var(--color-anchor-hover-light);

	--color-nav-1-light: #c29191;
	--color-nav-2-light: #deca9b;
	--color-nav-3-light: #9eba9e;
	--color-nav-4-light: #99afbf;
	--color-nav-5-light: #aea5b8;

	--color-nav-1-dark: #c26565;
	--color-nav-2-dark: #debe71;
	--color-nav-3-dark: #88bb88;
	--color-nav-4-dark: #86a3b8;
	--color-nav-5-dark: #a18ab8;

	--color-nav-1: var(--color-nav-1-dark);
	--color-nav-2: var(--color-nav-2-dark);
	--color-nav-3: var(--color-nav-3-dark);
	--color-nav-4: var(--color-nav-4-dark);
	--color-nav-5: var(--color-nav-5-dark);
}

* {
	vertical-align: middle;
}

body,
html {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

body {
	color: var(--color-text-dark);
	font-family: "IBM Plex Mono", "Roboto Mono", monospace;
	font-size: 10pt;
	text-decoration: none;
	background-color: var(--color-bg);
	overflow-y: scroll;
	padding: 0 8px;
}

a {
	color: var(--color-anchor);
	vertical-align: baseline;
}

a:hover {
	color: var(--color-anchor-hover);
	text-decoration: none;
}

div {
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}

td:first-child {
	padding-right: 8px;
}

.ctmy-icon {
	background-image: url("/images/pixel-icons.png");
	display: inline-block;
	line-height: 16px;
	height: 16px;
	width: 16px;
}

.ctmy-mail {
	background-position: -0px -0px;
}

.ctmy-package {
	background-position: -16px -0px;
}

.ctmy-crystal {
	background-position: -32px -0px;
}

.ctmy-rss {
	background-position: -48px -0px;
}

.row {
	margin: 8px 0px;
}

.horizontal-line {
	width: 100%;
	height: 2px;
	margin: 0px 0px;
	border: 0px;
	border-bottom: 2px;
	border-color: #000000;
	border-style: solid;
}

.vertical-spacer {
	height: 8px;
}

.container-fluid {
	overflow: auto;
}

.card {
	height: auto;
	min-height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.card a {
	color: var(--color-anchor-dark);
	font-weight: bold;
}

.card a:hover {
	color: var(--color-anchor-hover-dark);
	font-weight: bold;
}

.card-body {
	padding: 0;
}

.card-header,
.card-body {
	border-radius: 0 !important;
	border: 1px;
	border-color: #000000;
	border-style: solid;
}

.card-body > .container-fluid {
	padding: 16px;
}

.card-header {
	color: var(--color-container);
	text-align: left;
	vertical-align: middle;
	background-color: var(--color-nav-1);
	border-bottom: 0;
	padding: 8px;
	margin: 0;
}

#site-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 750px;
	height: auto;
	min-height: 100vh;
	position: relative;
	margin: 0 auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	border: 0px;
}

#site-navigation {
	border: 0px;
	padding: 0px;
	background-color: #101010;
	vertical-align: middle;
	text-align: center;
	font-weight: bolder;
}

#site-navigation a {
	text-decoration: none;
}

#site-navigation a.active.nav-1 {
	color: var(--color-nav-1);
}

#site-navigation a.active.nav-2 {
	color: var(--color-nav-2);
}

#site-navigation a.active.nav-3 {
	color: var(--color-nav-3);
}

#site-navigation a.active.nav-4 {
	color: var(--color-nav-4);
}

#site-navigation a.active.nav-5 {
	color: var(--color-nav-5);
}

#site-navigation a.active {
	color: var(--color-nav-5);
}

#site-navigation a.nav-1:hover {
	color: var(--color-text-light);
	background-color: var(--color-nav-1-dark);
}

#site-navigation a.nav-2:hover {
	color: var(--color-text-light);
	background-color: var(--color-nav-2-dark);
}

#site-navigation a.nav-3:hover {
	color: var(--color-text-light);
	background-color: var(--color-nav-3-dark);
}

#site-navigation a.nav-4:hover {
	color: var(--color-text-light);
	background-color: var(--color-nav-4-dark);
}

#site-navigation a.nav-5:hover {
	color: var(--color-text-light);
	background-color: var(--color-nav-5-dark);
}

#site-navigation a:hover {
	color: var(--color-text-light);
	background-color: var(--color-nav-1-dark);
}

#site-navigation a {
	display: inline-block;
	height: 100%;
	color: var(--color-anchor);
	padding: 4px;
	text-transform: uppercase;
}

#site-header {
	padding-top: 16px;
	position: relative;
}

#site-content .card-header.nav-1 {
	background-color: var(--color-nav-1-dark);
}

#site-content .card-header.nav-2 {
	background-color: var(--color-nav-2-dark);
}

#site-content .card-header.nav-3 {
	background-color: var(--color-nav-3-dark);
}

#site-content .card-header.nav-4 {
	background-color: var(--color-nav-4-dark);
}

#site-content .card-header.nav-5 {
	background-color: var(--color-nav-5-dark);
}

#site-content .card-header {
	background-color: var(--color-nav-5-dark);
}

#site-footer {
	width: 100%;
	text-align: right;
	margin-left: 0;
	margin-right: 0;
	margin-top: auto;
	color: var(--color-text-dark);
	font-weight: bold;
	padding: 16px 4px;
}

#site-footer a {
	color: var(--color-anchor-dark);
}

#site-footer a:hover {
	color: var(--color-anchor-hover-dark);
}

#site-navigation,
#site-content {
	margin-right: 4px;
	box-shadow: 3px 3px 2px var(--color-shadow);
}

#logo {
	left: 0px;
	bottom: 0px;
	margin: 0px;
	height: 32px;
}

#socials {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0px;
}

#socials a {
	color: var(--color-text-dark);
}

#socials a:hover i {
	color: var(--color-text-light);
	background-color: var(--color-text-dark);
}

#socials a i {
	width: 26px;
	height: 26px;
	line-height: 26px;
	font-size: 24px;
	text-align: center;
	border-radius: 4px;
	margin-bottom: -2px;
}