@charset "utf-8";

	
@font-face {
  font-family: 'Playball';
  font-style: normal;
  font-weight: 400;
  src: url(font-playball/TK3gWksYAxQ7jbsKcg8Knep_Kg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

	
@font-face {
  font-family: 'Playball';
  font-style: normal;
  font-weight: 400;
  src: url(font-playball/TK3gWksYAxQ7jbsKcg8Eneo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, 
				U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

	

 html {
	background: url(braun.jpg) ;
	background-size: cover;
	color: black ; }

 body {
	background: url(hint-2.jpg) ;
	background-size: cover; 
	margin: 1em auto;
	max-width: 72em;
	font-family: sans-serif ;
    border-radius : 2em ; }



	article h2 {
		color: #5d0505 ;
		font-size: 1.8rem ;
		font-family: Playball ; }


	 article h3 {
		font-size: 1.2rem ;  }	
	
	
	 article strong {
		font-size: 1.6rem ;  
		font-family: playball ; }	
	


	article img {
		width: 33%;
		float: right ;
		margin-left: 0.2em; }



	a {
		color: #005500 ; }

	a:hover {
		color: #339966 ; }

	a:focus {
		color: darkgreen ; }



	#news h3 {
		color: #5d0505 ;
		font-size: 1.8rem ;
		font-family: Playball ; }

	

	aside h3 {
		font-family: playball ;
		font-size: 1.7rem;	
		color: #7a4609 ;  }


	aside h4	{
	font-size: 1.1rem ;	}	


	aside, article {
		font-size: 1.1rem ; }	

	
	
	header h4 a, footer h4 a {
		font-size: 0.96rem ; }

	
	

header {
  border-color: transparent;
}


figure {
  display: inline-block;
  width: 30%;
  margin: 0.2em;
}

figure img {
  width: 100%;
}

figure figcaption {
  font-style: italic;
}

section {
  border-color: transparent;
}
article {
  border-color: transparent;
}

aside {
  border-color: transparent;
}

footer {
  border-color:transparent;
}

 
 #styleswitcher  ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}


	nav a  {
	background: #5d0505 ;
	border: 1px solid; 
	border-color: #5d5050 ;
	border-left-color: saddlebrown ;
	color:  #f0d9a2 ;	}
	
	nav a:hover {
	color: #f0d9a2 ; 
	background: brown ; }
	
	nav a:focus {
	color: #f0d9a2 ; }	
	
 
	nav a[aria-current=page] {
	color:orange;
	font-weight:bold;
	}

	nav a[aria-current=page]:hover {
	color: orange; }



	nav li:first-child  a{ border-radius: 1em 0 0 1em; }
	nav li:last-child  a{ border-radius: 0 1em 1em 0; }
 
	
	

body {
  display: flex;
  flex-flow: row wrap;
}


header, nav, article, section, aside, footer {
  border-radius: 0px 0.5em 0.5em;
  border: 1px none;
  padding: 0.5em;
  margin: 0.5em;
  flex: 1 100%;
}

header {
  display: flex;
  flex-flow: row wrap;
}
header * {
  flex: 1 1 0%;
}
header img {
  flex: 0 0 150px;
  margin-right: 20px;
}
header nav {
  flex: 1 1 100%;
}
nav, nav ul, nav li{
  margin: 0;
  padding: 0;
  border: none;
}
nav ul {
  display: flex;
  flex-direction: column;
}
nav li {
  list-style-type: none;
  margin: 1.3em 0;
  padding:0;
  flex: 1 1 100%;
}
nav a {
  display: inline-block;
  margin: 0;
  width: 96%;
  padding: 0.5em 2%;
  text-decoration: none;
  text-align: center;
}


footer {
  display: flex;
  flex-flow: row wrap;
}
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer p:last-child {
  text-align: right; }
  
  

@media all and (min-width: 35em) {

  header img {
    margin-right: 50px;
  }
  nav ul {
    flex-direction: row;
  }
  nav li {
    flex: 1 1 0%;
  }
  article {
    order: 2;
  }

  #news {
    flex: 1 auto;
    order: 3;
  }

  aside {
    flex: 1 auto;
    order: 4;
  }
  
  footer {
    order: 5;
  }
}

    
@media all and (min-width: 50em) {
  article {
    order: 3;
    flex: 5 1 0%;
  }
  
  aside {
    flex: 2 1 0%;
  }
  
  #news {
    flex: 2 1 0%;
    order: 2;
    align-self: center;
    height: 12em;
  }
}


caption {
	caption-side: bottom;
	padding-top: 2em;
	font-style: italic;
}