/***************************************************************
Stylesheet High Speed Sailing             2020 - Marion Tischler

Colors: blue bg	:	#63baf9		rgba(99, 186, 249)
		red inv:	#af3c1e		rgba(175, 60, 30)
		cyan:		#50c3e1		rgba(80, 195, 225)
		blue dark:	#116eb8		rgba(17, 110, 184)
		blue dark2:	#0d3956		rgba(13, 57, 86)
		sand:		#e8e8e8		rgba(232, 232, 232)
		
***************************************************************/

/**************************************************************/
/*                      Global settings                       */
/**************************************************************/

* {
	margin: 0;
	padding: 0;
}

html {
	background-color: #63baf9;
}

body {
	background-color: #63baf9;
	background-image: url(../images/pirene-palmen.jpg);
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	font-size: 22px;
	width: 100%;
	min-height: 500px;
/*	background-attachment: fixed;*/
  	background-position: center top;
  	background-repeat: no-repeat;
  	background-size: cover;
}

h1 {
	font-family: 'Comfortaa', cursive;
	font-size: 2em;
	padding: 5px;
	color: white;
	font-weight: 700;
}

h2 {
	font-family: 'Comfortaa', cursive;
	font-size: 1.4em;
	padding: 5px;
	font-weight: 300;
}

p, a { 
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	padding: 5px;
}

a, a:visited {
	text-decoration: none;
	color: #50c3e1;
}

a:hover, a:active {
	color: #116eb8;
}

.note {
	font-size: 0.8em;
}

/**************************************************************/
/*                       General layout                       */
/**************************************************************/

.flex-container {
	max-width: 1200px;
	width: 80%;
	margin: 100px auto 0 auto;
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

.logo {
	padding: 5%;
	color: white;
	text-align: left;
}

.announcement, .flexbox {
	background: rgba(255, 255, 255, .25);
	border: 3px solid white;
	border-radius: 2px;
	margin: 20px 20px 40px 20px;
	color: white;
	text-align: center;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
}

.flex-bottom {
	background-color: white;
	color: #0d3956;
	padding: 10px;
}

.announcement {
	width: 60%;
	padding: 10px;
}

.flexbox { 
	width: 40%;
}

/**************************************************************/
/*                           Footer                           */ 
/**************************************************************/

footer {
	background-color: #0d3956;
	clear: both;
	display: block;
	text-align: center;
	padding-bottom: 30px;
	min-height: 20px;
	color: white;
	padding: 5px;
	display: flex;
} 

footer .flex-container {
	margin: 0 auto;
}

footer .flexbox {
	background: none;
	border: none;
	width: auto;
}

.footer p {
	padding: 10px;
}