@font-face { font-family: 'Eurostile'; src: url('eurostile.ttf'); }
@font-face { font-family: 'Percolator'; src: url('percolator.ttf'):; }

body { font-family: Eurostile; font-size: 18px; 
margin: 0 auto; width: 80%; text-align: center;
background-image: url(wall.png);
background-attachment: fixed;
margin-top: 10px; margin-bottom: 10px;
}

.link { text-align: center; padding: 3px;}
.link a { display: inline-block }

summary:focus{ outline: none; }
summary, summary:focus { cursor: pointer; }

summary {
text-decoration: none; font-weight: bold; display: block; text-align:center; font-size: 1.2em; width: 250px; color:rgb(57,87,128); margin : 0 auto; 
padding: 10px; border-left: 1px black solid; border-right: 1px black solid; border-radius: 10%; margin-top: 10px; margin-bottom: 10px; 
background: rgba(255,255,255,0.6);
}
summary:hover, .link a:hover, .link:hover { background: #bbd2e1; }

.index { width: 95%; margin: 0 auto; }
article { text-align: justify; padding: 12px; border-radius: 20px; background:rgba(255,255,255,0.5); }

h2, h3 { border-left: 1px black solid; border-right: 1px black solid; border-radius: 10%; display: inline-block; margin-bottom: 10px; padding: 10px;}
h2 { font-size: 1.4em; } h3 { font-size: 1.2em; }

#avertissement { text-align: justify; margin: 0 auto; width: 76%; background-color: rgb(211,201,228); padding: 8px; border: 2px rgb(56,45,95) dashed; font-size: 15px; border-radius: 20px; margin-top: 2px; margin-bottom: 8px; }
#avertissement a:hover {background: rgba(255,255,255,0.4); color: rgb(16,24,35); }
#avertissement a { padding: 4px;}


a { text-decoration: none;  font-weight: bold; color:rgb(57,87,128); }



details { padding-bottom: 6px; }

#index img, #soon img:hover, menu img {  filter: grayscale(70%);
    -webkit-filter: grayscale(70%);
    -moz-filter: grayscale(70%);
    -ms-filter: grayscale(70%);
-o-filter: grayscale(70%); }

#index img:hover, menu img:hover {  filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
-o-filter: grayscale(0%); }

#soon img, #actuel img, #actuel img:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

#soon {padding-top: 10px;}

#pixel { margin-top: 12px; margin-bottom: 12px; }

#general {
	background: rgba(255,255,255,0.9); border-radius: 20%; padding: 8px; max-width: 900px; margin: 0 auto; border: 1px solid rgb(218,218,218);
}

#corps {  margin-top: 20px; width: 90%; margin: 0 auto; }
	
menu, #pixel { text-align: center; 	display: inline-block;
}

#back { text-align: center; padding: 8px; }

a:hover, #back a:hover {
	background: #bbd2e1; border-radius: 35px; padding: 5px; 
}

img a:hover, a img:hover {
	background: none;
}

h3 a { margin-bottom: 15px;}

p { padding: 3px; }

menu a:hover, #index a:hover, #soon a:hover, #lien a:hover, #pixel a:hover { border-radius: 0px; padding: 0px; background: none; }

#flex { 
display: flex; 
justify-content: space-around;}