/***
This css file contains the styling for all pages of the Radsfatz website.
It contains different colour schemes depending on the users' dark mode preference (browser or operating systems).
It contains different stylings for phone screens, which are defined as ones less than 600px wide. (note, px does not equal pixels).
The font is under the Open Font License (OFL) and therefore freely useable.
***/

@font-face {
  font-family: Raleway;
  src: url(Raleway/static/Raleway-Medium.ttf) format('truetype');
}

:root {
	color-scheme: light dark;
  	--bg-image-header: url(img/black-bike-with-light.png);
}

@media (prefers-color-scheme: dark) {
  	:root {
		--bg-image-header: url(img/white-bike-with-light.png);
  	}
}

body {
	font-family: Raleway;
  	color: light-dark(#000000, #f8f8f1);
  	background-color: light-dark(#faf7f3, #000000);
	margin: 0 0;
}

/*** header PC / Laptop: start ***/
@media screen and (min-width: 600px) {
	.header {
		margin: 0 0;
		height: 15em;
		background-image: var(--bg-image-header);
		background-size: 100% 100%;
	}

	.title {
		size: 60%;
		margin-left: 20%;
		margin-right: 20%;
		text-align: right;
		padding-top: 2em;
		padding-bottom: 1em;
	}

	h1 {
		font-size: 5em;
		margin-top: 0em;
		margin-bottom: 0em;
	}

	h2 {
		font-size: 1.5em;
	}

	.choose_language {
		position: absolute;
		top: 2rem;
		right: 4rem;
		height: 2rem;
	}

	.emoji {
		height: 2rem;
		float: left;
	}

	.language-text {
		font-size: 1.5rem;
		padding-left: 0.25rem;
	}
}
/*** header PC / Laptop: end ***/

/*** header phone: start ***/ 
@media screen and (max-width: 600px) {
	.header {
		margin: 0 0;
		height: 15em;
	}

	.title {
		text-align: center;
		padding-top: 1em;
		padding-bottom: 1em;
	}

	h1 {
		font-size: 4em;
		margin-top: 0em;
		margin-bottom: 0em;
	}

	h2 {
		font-size: 1.5em;
	}

	.choose_language {
		height: 2rem;
		padding-left: 40%;
	}

	.emoji {
		height: 2rem;
		float: left;
	}

	.language-text {
		font-size: 1.5rem;
		padding-left: 0.25rem;
	}
		
}
/*** header phone: end ***/

.main{
	margin: 0 auto;
	width: 60%;
	overflow: hidden;
	font-size: large;
	line-height: 1.5em;
}

@media screen and (max-width: 600px) {
	.main{
		width: 90%;
	}
}



.announcement{
	background-color: light-dark(#ff5050, #990033);
	text-align: center;
	margin-top: 0.5em;
	padding: 0.2em 0.2em;
	border-radius: 1em;
	line-height: 1em;
}

.agenda {
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: solid;
	border-top: solid;
}

.agenda-summary {
	font-size: 1.5em;
}

.agenda-list {
	margin-top: 0.5em;
	margin-bottom: 0em;
	list-style-position: inside;
	list-style-type: square;
}

h3 {
	font-size: 1.5em;
	margin-top: 0.3em;
  	margin-bottom: 0.3em;
}

p {
	margin: 0 0;
	padding: 0 0;
}

.topic{
	padding-top: 2em;
	overflow: hidden;
}

.topic-list {
	margin-bottom: 0em;
	margin-top: 0.5em;
}

.konto {
	padding-top: 0.5em;
	padding-left: 0.5em;
	padding-bottom: 0.5em;
}

.qrcode {
	float: left;
	width: 15%;
	padding-right: 10px;
}

@media screen and (max-width: 600px) {
	.qrcode {
		display: none;
	}
}

table {
	width: 100%;
	color: black;
	text-align: center;
}

.overflow-scroll {
	
	overflow-x: scroll;
}

tr {
	border: solid;
}

.odd_row{
	background-color: lavender;
}

.even_row{
	background-color: lavenderblush;
}

.small_notes{
	font-size: 0.6em;
	color:grey;
	margin: 0;
}

.map-wrapper {
	float: left;
	width: 50%;
	aspect-ratio: 1 / 0.75;
	margin-right: 1em;
}

@media screen and (max-width: 600px) {
	.map-wrapper {
		width: 100%;
		margin-right: 0em;
		float: none;
	}
}

.map {
	width: 100%;
	height: 100%;
}

footer {
	text-align: center;
	margin-top: 2em;
	width: 100%;
	background-color: lightslategray;
	min-height: 150px;
	padding-top: 5px;
}