/*
+------------------------------------------+
|	Datei:	CSS-Datei für Berner Feiertage |
|	Autor:	Marcel Schaller                |
+------------------------------------------+
*/
/*
	@font-face {
		font-family: Comfortaa;
		src: url("Comfortaa Regular.ttf");
	}
*/

* {	
/*	background-color: white;	*/
	border: 0;
/*	color: black;	*/
	font-family: sans-serif;
	margin: 0;
	padding: 0;
}
html {
	background-image: linear-gradient(to bottom, midnightblue, mediumblue);
	background-attachment: fixed;
	height: 100vh;
	width: 100vw;
}
/*	box-sizing: border-box;
			}
			*,
			::before,
			::after {
				box-sizing: inherit;
			}
*/
/*	Kompaktes Layout für mobile Geräte	*/
body {
/*	background-image: linear-gradient(to bottom, rgba(128,0,0,1), rgba(210,105,30,1));	*/
/*	background-attachment: fixed;	*/
/*	display: flex;
	flex-flow: row wrap;
*/
/*	font-family: sans-serif;	*/
/*	margin: 10px auto;	*/
/*	margin: .3em;	*/
/*				max-width: 90em;	*/
/* 				background-color: #404060;	*/
/*				color: #f0f0f0;	*/
}
/*			header {
				padding: .3em;
			}
*/
/*	Dark/Light Modus berücksichtigen	*/
/*
@media (prefers-color-scheme: dark) {
	body {
		background-color: black;
		background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(40,40,40,1));
		background-attachment: fixed;
		color: white;
	}
	header {
		background-color:  #333;
		color: white;
	}
}
@media (prefers-color-scheme: light) {
	html {
		background-color: rgb(25,25,112);
	}	
	body {
		background-color: white;
		color: black;
	}
	header {
		background-color: darkgray;
		color: black;
	}
}
@media (color-scheme: normal) {
	html {
		background-color: rgb(25,25,112);
	}	
	body {
		background-image: linear-gradient(to bottom, maroon, chocolate);
		background-image: linear-gradient(to bottom, rgba(128,0,0,1), rgba(210,105,30,1));
		background-attachment: fixed;
		color: black;
	}
}
*/
/*	Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
/*			header, article, aside, section, footer {
				flex: 1 100%;
			}
*/
/*	Blöcke nebeneinander bei ausreichender Breite */
/*
			@media all and (min-width: 35em) {
				header {
					flex: 3 1 0%;
					flex-flow: row wrap;
				}
				article {
					flex: 3 1 0%;
					flex-flow: row wrap;
				}
				aside {
					flex: 1 1 0%;
				}
			}
*/
header {
/*				background-color: #063E53;	*/	/* #3f2860; */
	background-image: linear-gradient(to bottom, rgba(0,64,128,1), rgba(95,160,160,1));
/*				border: 0;	*/
	border-radius: 0.3em;
	color: white;
	margin: .5em;
	padding: .5em;
/*				font-size: 1.2em;	*/
}
input.button { 
  background-image: #3839ab linear-gradient(hsl(0 0 100% .2), transparent);
  background-color: teal;
  border: thin solid rgb(0 0 0 / .1);
  box-shadow: 0 .2em .4em rgb(0 0 0 / .5); 
  color: white;
  margin: .2em;
  padding: .2em;
  text-shadow: 0 -.05em .05em rgb(0 0 0 / .5); 
}
nav {
/*	background-color: royalblue;	*/	/* #3f2860; */
	background-image: linear-gradient(to bottom, rgba(0,0,192,1), rgba(0,0,255,1));
	border-radius: 0.3em;
	color: white;
	margin: .5em;
	padding: .2em;
}
/*			main {				*/
/*				float: left;	*/
/*				width: 70%;		*/
/*			}					*/
			aside {
				background-color: lightgrey;
				border: 1px none black;
				color: grey;
/*				float: right;		*/
				font-size: smaller;
				padding: 20px;
				width: 30%;
			}
			table {
				border: 0;
				margin: 0;
				padding: 0;
				width: 100%;
			}
			main tr:nth-child(odd) {
				background-color: #C0F390;
			}
			main th {
				background-color: grey;
				color: white;
				line-height: 2em;
				text-align: left;
			}

.flex-container {
	display: flex;
	flex-direction: column;
/*				flex-flow: row wrap;	*/
	align-items: center;
/*				max-width: 45em;	*/
/*				border: 1px dotted;	*/
}
@media all and (min-width: 30em) {
	.flex-container {
		flex-direction: row;
	}
}

			.flex-container:nth-child(even) {
				background-color: #555570;
			}
			
.flex-titel {
/*	background-color: #063E70;	*/
	background-image: linear-gradient(to right, rgba(6,64,112,1), rgba(0,0,255,1));
/*				border: 0;	*/
	border-radius: .3em;
	flex: 3;
/*				margin-bottom: 0.1em;
				margin-top: 0.1em;	*/
	margin: .1em;
	padding: .1em;
}
			.flex-item {
				flex: 1;
			}
			h1 .flex-item {
				line-height: 2em;
			}

@media print {
	* {
		background-color: white;
		color: black;
	}
	input.button {
		display: none;
	}
}