html,body {
	height: 100%;
}

body {
	background-color: black;
	display: flex; /* center content */
	align-items: center;
	justify-content: center;
}

#site {
	height: 100%;
	max-width: 1024px;
	max-height: 768px;

	font-family: Arial;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	background-color: black;
}

/* ******************** */

header {
	flex: 1 0 20%;
	color: white;

	background: linear-gradient(to right, #266849 15%, #9df273 115%);

	border-top-right-radius: 5pt;
	border-top-left-radius: 5pt;
	-webkit-border-top-right-radius: 5pt;
	-webkit-border-top-left-radius: 5pt;
	-moz-border-top-right-radius: 5pt;
	-moz-border-top-left-radius: 5pt;
}

main {
	flex: 0 0 285px;
	background: linear-gradient(to right, #266849 15%, #9df273 115%);
}

footer {
	position: relative;
	flex: 1 0 20%;
	color: white;
	vertical-align: bottom;
	background: linear-gradient(to right, #266849 15%, #9df273 115%);

	border-bottom-right-radius: 5pt;
	border-bottom-left-radius: 5pt;
	-webkit-border-bottom-right-radius: 5pt;
	-webkit-border-bottom-left-radius: 5pt;
	-moz-border-bottom-right-radius: 5pt;
	-moz-border-bottom-left-radius: 5pt;
}

/* ******************** */
#header-inner {
}

#main-inner {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

#main-left {
	flex: 1 1 auto;
	padding: 10pt;
}

#main-right {
	padding: 0;
	flex: 0 0 auto;
}

.main-frame {
	height: 4px;
	width: 100%;
}

#main-top {
	background: linear-gradient(to right, #000 0%, #FFF 100%);
}

#main-bottom {
	background: linear-gradient(to left, #000 0%, #FFF 100%);
}

#footer-inner {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 10pt;
	box-sizing: border-box;
	text-align: right;
}

/* ******************** */

img#pom {
	display: block;
	height: 400px;
}

#salutation {
	font-weight: 550;
}

.comList {
}

.comListElement {
	list-style-type: none;
}

#comSSH {
	position: relative;
	white-space: nowrap;
}

label {
	display: inline-block;
	width: 10em;
}

.comListElement .fa {
	padding-top: 0.25em;
	vertical-align: top;
}

.comType {
	vertical-align: top;
}

.comType::after {
	content: ": "; 
	font-family: Arial;
}

#comMatrix a {
	text-decoration: none;
	color: inherit;
}

#comMastodon a {
	text-decoration: none;
	color: inherit;
}

#comXing a {
	text-decoration: none;
	color: inherit;
}

#comNav a {
	text-decoration: none;
	color: inherit;
}

#comMail a {
	text-decoration: none;
	color: inherit;
}

#subjects {
}

#header-orga {
	white-space: nowrap; 
}

#header-name {
	white-space: nowrap;
}

#header-name::after{
	content: " • ";
}

#header-title {
	white-space: nowrap;
}

ul {
	line-height: 1.5em;
}

#impress {
	display: inline;
	font-size: 0.75em;
}

#privacy {
	display: inline;
	font-size: 0.75em;
}

#privacy::before {
	content: " • ";
}

#privacy * {
	color: white;
}

/* ******************** */

#subjects {
	display: inline-block;
	margin: 10pt;
	padding: 0.5em 0 1em 0;

	text-transform: uppercase;
	letter-spacing: 0.5em;

	border: 4px double rgba(255, 255, 255, .25);
	border-width: 4px 0;
}

#header-orga {
	display: block;
	margin: -2pt;

	font: 700 4em "Oswald", sans-serif;
	letter-spacing: 0;
	text-shadow: 0 0 80px rgba(255, 255, 255, .5);
	text-stroke: 1px rgba(0, 0, 0, .25);
		-webkit-text-stroke: 1px rgba(0, 0, 0, .25);

	background: linear-gradient(to right, #A0A0A0 0%, #505050 25%, #A0A0A0 50%, #505050 75%, #A0A0A0 100%);
	background-size: 200% 80px;
	background-clip: text;
		-webkit-background-clip: text;
	/* Animate Background Image */
	text-fill-color: transparent;
		-webkit-text-fill-color: transparent;
	animation: headerAnim 5s linear infinite;
		-webkit-animation: headerAnim 5s linear infinite;
	/* Activate hardware acceleration for smoother animations */
	transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
	backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
}

.fingerprint, .pubKey {
	display: inline-block;
	text-align-last: justify;
	width: 102px;
	margin-right: 10px;
}

.comVal:has(> span.pubKey) {
	display: block;
	text-align: right;
	width: 100%;
}

#privacytext {
	flex: 1 1 auto;
	padding: 10pt;

	background-image: url("/images/gradient.jpg");
	background-repeat: repeat-x;
	background-size: 100% 100%;
}

#backlink {
	text-decoration: none;
	color: inhert;
}