@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; }


body {
	background: url(back/hint-2.jpg) ;
    background-size: cover ; 
	margin: 1em auto;
	max-width: 72em;
	font-family: sans-serif;
    border-radius : 2em ; }
 
 
 html {
	background:  url(back/star-4.jpg)  ;
	background-size: cover ;
	color: black ; }
	
	
 h2 {
	color: #5d0505 ;
	font-family: Playball ;
	font-size: 1.88rem ;
	margin-left: 1rem ;
		}

	h3 {
	 color: black ;
	 font-family: Playball;
	 font-size: 1.65rem;	}
	 
	

	.dates {
		font-size: 1.1rem ; 
		margin-left: 0.4rem ; }
		
	@media (max-width: 600px) {
		.dates {
		font-size: 1.08rem ; } }
	
	
	strong {
		font-size: 1.15rem ; 
		 }
	
 
   a {
	color: #005500 ;	}

  a:hover {
	color: #339966 ; }

  a:focus {
	color: darkgreen ; }
	
	
	
	aside h5	{
	font-size: 1em ; 
	 }



header {
  border-color: transparent;
}

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

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: #ccc ; 
	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;
}