@charset "UTF-8";

html {
  height: 100%;
  width: 100%;
}


body {
  display: grid;
  grid-template-rows: 52px auto auto 1fr 40px;  
  height: 100%;
  margin:auto;
  width: 98%;
  max-width: 1200px;
  min-width: 240px; 
  font-family: sans-serif; 
}

a {
text-decoration: none;
color: midnightblue;
}

h1 {
font-size: 24px;
text-transform: lowercase;
font-weight: bold;
margin:0.4em;
}


h2 {
font-size: 20px;

text-transform: lowercase;
font-weight: bold;
margin:0.4em;

}

ul {
list-style-type: none;
}

header, header a {
	grid-row: 1;
	text-align: center;
	border-bottom: solid black 1px;
	background-color: midnightblue;
	color: steelblue;
}



header h1, header h2 {
display: inline-block;
}

header h3 {
display: inline-block;
font-size: 24px;
margin: 8px;
}

nav {	
grid-row: 2;
border-bottom: solid black 1px;	
background-color: royalblue;	
}



.active a {
color: white;
}


main .header {
overflow: hidden;
}

main {
grid-row: 4;
overflow: auto;		
}

.timbre {
display:inline-block;
vertical-align: top;

}

.timbre img{
border: solid black 1px;
}

.chapo {
display:inline-block;
vertical-align: top;
}

main.header.active {
	background-color: midnightblue;
	color:gray;		
}

main.header.active a {
	color:white;		
}

article {	
	display:block;
	border-bottom: solid black 1px;
}

article.art-chapo {
background-color: cornflowerblue;}




#categories article:target {
	background-color: Darkgrey;
	}
	
#categories article:hover{
background-color: lightgrey;
	}


footer {
grid-row: 5;
text-align: center;
border-top: solid black 1px;
}

footer ul#ring {
font-size: 20px;
}
 
footer li {
width: 12%;
 display: inline-block;
  vertical-align: middle;
  }