@charset "UTF-8";

html {
  
  height: 100%;
  width: 100%;
  font-size: 30px;
}

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

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


h2 {
font-size: 1.75rem;

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

}

ul {
list-style-type: none;
}



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

}


header {
	grid-row: 1;
	other-flow: hidden;
	text-align: center;
	border-bottom: solid black 1px;
}

header.active, header.active a{
background-color: red;
color: white;
}

#home:target {
background-color: darkred;
}


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


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

nav.prev {
background-color: darkred;
}


.active {
background-color: red;	
}

.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;
	height: 119px;
	border-bottom: solid black 1px;
}

article:hover {
	
	}





article .art-note {
display: block;
width:100%;

background-color: red;
}


a.but .noff {
display: inline-block;
}

.note {
display: none;
}

a.but:hover .note {
display: block;
} 


#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: x-large;
}
 
footer li {
width: 12%;
 display: inline-block;
  vertical-align: top;
  }