@charset "UTF-8";
/**
 * startseite.malte70.de
 * 
 * Farben
 *    #eee     Hellgrau
 *    #888     Grau
 *    #444     Dunkelgrau
 *    #ff8000  Orange
 */

:root {
	--color-light-grey: #eee;
	--color-grey: #888;
	--color-dark-grey: #444;
	--color-orange: #ff8000;
}

body {
	background: var(--color-light-grey);
	font: 26px "Source Code Pro", monospace;
}
main {
	/*width: 30em;*/
	width: 40em;
	margin: 3em auto 1em;
	color: var(--color-dark-grey);
	
	/* ALT: zentriert
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 600px;
	height: 350px;
	margin: 100px auto;*/
}
a:link, a:visited {
	color: var(--color-grey);
	text-decoration: none;
}
a:hover, a:active {
	color: var(--color-dark-grey);
}
.red {
	color: var(--color-orange);
}

/**
 * WhoAmI / User name
 */
#whoami p {
	text-align: center;
	margin-bottom: 1.5em;
	/*font-size: 1.3em;*/
}

/**
 * Google Search
 */
#google-search p * {
	display:      inline-block;
}
#google-search input[type=text] {
	font:         1em "Source Code Pro", monospace;
	display:      inline-block;
	padding:      6px;
	border:       0;
}
#google-search input[type=text]:focus {
	outline: 0;
}
/*#google-search input[type=text]:active {
	color: var(--color-orange);
}*/
#google-search input[type=text]:hover {
	border-bottom-color: var(--color-orange);
}
@media (prefers-color-scheme: light) {
	#google-search input[type=text] {
		background:   var(--color-light-grey);
		color:        var(--color-grey);
		border-bottom: 2px solid var(--color-grey);
	}
	#google-search input[type=text]:focus {
		color: var(--color-dark-grey);
		border-bottom-color: var(--color-orange);
	}
}
@media (prefers-color-scheme: dark) {
	#google-search input[type=text] {
		background:   var(--color-dark-grey);
		color:        var(--color-grey);
		border-bottom: 2px solid var(--color-grey);
	}
	#google-search input[type=text]:focus {
		color: var(--color-light-grey);
		border-bottom-color: var(--color-orange);
	}
}


/**
 * Notepad
 */
#notepad p {
	margin: 0;
	color: var(--color-grey);
}
#notepadContent {
	border-left: 2px solid var(--color-grey);
	font: 1em "Source Code Pro", monospace;
	padding: .3em .8em;
	color: var(--color-grey);
	margin: .5em 0;
}
#notepadContent:focus {
	outline: 0;
	border-left-color: var(--color-dark-grey);
	color: var(--color-dark-grey);
}
#notepadContent:hover {
	border-left-color: var(--color-orange);
}

/**
 * Footer
 */
footer {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 7px;
	padding: 0;
	text-align: right;
}
footer p {
	margin: 0 0 .5em;
	padding: .1em;
	font-size: 0.6em;
	color: var(--color-dark-grey);
}
footer p:last-child {
	margin: 0;
}
footer p a:link, footer p a:visited {
	color: var(--color-dark-grey);
	text-decoration: underline;
}
footer p a:hover, footer p a:active {
	color: var(--color-grey);
}
footer button {
	display: inline-block;
	border: 1px solid var(--color-grey);
	border-radius: .4em;
	padding: .4em .6em;
}


/**
 * Form elements
 */
dialog {
	input[type=text] {
		border: 0;
		border-bottom: 1px solid var(--color-light-grey);
		background-color: var(--color-dark-grey);
		color: var(--color-light-grey);
		height: 32px;
		vertical-align: middle;
		width: 400px;
		max-width: 100%;
		font-size: 20px;
		padding: .3em .5em;
	}
	h4 {
		margin-bottom: .5em;
	}
	button {
		border: 1px solid var(--color-light-grey);
		border-radius: .2em;
		padding: .1em .3em;
		font-size: 26px;
		display: inline-block;
		margin-top: 1.5em;
	}
}
#whoami_user:active, #whoami_host:active {
	outline: 0;
}


.small-caps {
	font-variant: small-caps;
}


/**
 * Dark theme variant
 */
@media (prefers-color-scheme: dark) {
	body {
		background: var(--color-dark-grey);
	}
	main {
		color: var(--color-light-grey);
	}
	a:link, a:visited {
		color: var(--color-light-grey);
	}
	a:hover, a:active {
		color: var(--color-light-grey);
		text-decoration: underline;
	}
	/*#google-search input[type=text] {
		color: var(--color-light-grey);
		background-color: var(--color-dark-grey);
		border-bottom: 1px solid var(--color-orange);
	}*/
	#notepad p {
		color: var(--color-light-grey);
	}
	footer p {
		color: var(--color-grey);
	}
	footer p a:link, footer p a:visited {
		color: var(--color-grey);
	}
	footer p a:hover, footer p a:active {
		color: var(--color-light-grey);
	}
	footer button {
		/*background:    var(--color-grey);
		color:         var(--color-light-grey);
		border-color:  var(--color-light-grey);
		padding:       .2em.4em;
		border-radius: 8%;*/
		
		border: 1px solid var(--color-light-grey);
		border-radius: .2em;
		padding: .1em .3em;
		/*font-size: 22px;*/
		
		display: inline-block;
		margin-top: 1.5em;
	}
	section#google-search input[type=text] {
		background: var(--color-dark-grey);
		color: var(--color-light-grey);
	}
	#notepadContent:focus {
		color: var(--color-light-grey);
		border-left-color: var(--color-light-grey);
	}
}