@charset "UTF-8";

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
	  --body-background-color: hsl(30, 30%, 40%);
	  --background-color: hsl(0, 0%, 10%);
	  --text-color: hsl(0, 0%, 80%);
	  --border-color: hsl(240, 100%, 50%);
	  --primary: hsl(12, 90%, 60%);
	  --link-color: hsl(212.68, 90%, 60%);
	  --link-background-color: hsl(180, 80%, 60%);
	}
}


/*
https://colordesigner.io/convert/hextohsl
body-background-color: #D4C6B8 == hsl(30, 24.56%, 77.65%)
#ccccff == hsl(240, 100%, 90%)
#000000 == hsl(0, 0%, 0%)
white == #ffffff == hsl(0, 0%, 100%)
#1e84fe == hsl(212.68, 99.12%, 55.69%)
background-color: #0fffff
*/


@media (prefers-color-scheme: light) {
	:root {
	  --body-background-color: hsl(30, 24.56%, 77.65%);
	  --background-color: hsl(0, 0%, 100%);
	  --text-color: hsl(0, 0%, 0%);
	  --border-color: hsl(240, 100%, 90%);
	  --primary: hsl(12, 70%, 40%);
	  --link-color: hsl(212.68, 99.12%, 55.69%);
	  --link-background-color: hsl(180, 100%, 52.94%);
	}
}

@media all {
	
	body {
		background-color: var(--body-background-color);
		color: var(--text-color);
		font-family: Verdana, Ubuntu, Arial, sans-serif;
		font-kerning: normal;
		font-variant-ligatures: common-ligatures;
		text-rendering: optimizeLegibility;
		font-size: 13pt;
		line-height: 1.3;
	}
	
	#main {
		background-color: var(--background-color);
		border: 1px solid var(--border-color);
		margin-left: auto;
		margin-right: auto;
		max-width: 1400px;
		padding: 2em;
  		display: block;
	}
	
	.android { font-family: "Roboto", UILanguageFont, Ubuntu, Arial, sans-serif; font-weight: 300; }
	
	h1 { font-size: 28pt; }
	h1.inhalt,h1.home { font-size: 26pt; }
	h1.wellcome { text-align: center; }
	h2 { font-size: 18pt; }
	h3 { font-size: 16pt; }

	p,em { margin-bottom: 6pt; }
	p.notiz { font-family: Tahoma, Arial, sans-serif; font-size: 9pt; }
	
	a { color: var(--link-color); font-weight: bold; text-decoration: none; }
	a:link { font-stretch: semi-expanded; }
	a:active { text-decoration: underline; }
	a:visited { font-style: italic; }
	a:hover { background-color: var(--link-background-color); }

	a.hide:link { color: var(--background-color); }
	a.hide:active { color: var(--background-color); text-decoration: none; }
	a.hide:visited { color: var(--background-color); }
	a.hide:hover { background-color: transparent; }
}