@font-face {
  font-family: "barlow-cb";
  src: url("/fonts/barlow-condensed/BarlowCondensed-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "quicksand-l";
  src: url("/fonts/quicksand/static/Quicksand-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "quicksand";
  src: url("/fonts/quicksand/static/Quicksand-Regular.ttf") format("truetype");
  font-weight: 500;
}

nav ul {
	list-style: none;
	// Safari hack, see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
	list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

nav li {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1em;
	align-content: center;
	text-align: center;
}

@media (min-width: 42em) {
	nav img {
		margin-left: 20px;
	}
	nav ul {
		flex-direction: row;
	}
	nav li {
		flex: 1;
		font-size: 1em;
	}
	li a.current-page {
		text-decoration: underline 8px solid #f7d638;
	}
	main .row {
		display: flex;
	}
}

nav a {
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-family: 'quicksand', sans-serif;
	color: #333;
	transition: all .25s ease-in;
}

a.current-page {
	text-decoration: underline 4px solid #f7d638;
}

nav a:focus,
nav a:hover,
nav a:active {
	color: #a26030;	
}

body {
	margin: 1em auto;
	max-width: 60em;
	font-family: sans-serif;
	color: #333333;
	
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

li img {
	width: 9.5rem;
	padding-left: 0px;
}

html {
	background: transparent!important;
}

main {
	min-height: 5em;
	flex: 1;
}

main .row {
	padding-top: 10px;
	flex-flow: row nowrap;
}

/* Create two equal columns that sits next to each other */
main .c33 {
	flex: 33%;
	padding: 20px;
}
main .c66 {
	flex: 67%;
	padding: 0px;
	align-content: flex-end;
}

main .c66s {
	flex: 67%;
	padding: 20px;
}
main .c33s {
	flex: 33%;
	padding: 0px;
	align-content: flex-end;
}

main h2 {
	margin: 10px 20px 10px 20px;
	padding-top: 10px;
	font-family: 'barlow-cb', sans-serif;
	color: white;
}

main h2.under {
	margin: 0px 20px 20px 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	font-family: 'barlow-cb', sans-serif;
	font-size: 3em;
	color: white;
}

main h2.under_small {
	margin: 0px 20px 20px 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	font-family: 'barlow-cb', sans-serif;
	font-size: 2em;
	color: white;
}

main p {
	margin: 15px 20px 20px 20px;
	padding-bottom: 10px;
	font-family: 'quicksand', sans-serif; 
	font-size: larger;
	color: #6b401d;
}

main p.over {
	margin: 10px 20px 0px 20px;
	padding-top: 50px;
	font-family: 'quicksand', sans-serif; 
	font-size: larger;
	color: #6b401d;
}

main p.flow {
	margin: 10px 20px 0px 20px;
	padding-top: 10px;
	font-family: 'quicksand', sans-serif; 
	font-size: initial;
	color: #6b401d;
}

main a {
	text-decoration: none;
	font-family: 'quicksand', sans-serif;
	color: #333333;
	transition: all .25s ease-in;
}

main a:focus,
main a:hover,
main a:active {
	color: #a26030;	
}

footer {
	background: white;
	padding-top: 3em;
	padding-right: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
}

footer a {
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-family: 'quicksand', sans-serif;
	color: #333333;
	transition: all .25s ease-in;
}

footer a:focus,
footer a:hover,
footer a:active {
	color: #a26030;	
}

.headline {
	font-family: 'barlow-cb', sans-serif;
	font-size: 1.4em;
	color: #a26030;
}

.thema {
	font-family: 'barlow-cb', sans-serif;
	font-size: 1.6em;
	color: #f7d638;
	margin-bottom: 0px;
}