.center-div
{
  /*margin: 0 auto;*/
  width: 565px;
  height: 565px;
  background-color: #ccc;
  border-radius: 3px;
  align-items: right;
}

h1 {
  color: #009900
}

header{
  background-color: #ccc;
  color: #fff;
  margin-bottom: 0;
  background-position: right;
  background-repeat: no-repeat;
  padding: 10px;
  font-family: OCR A Std, monospace, serif;
	text-align: center;
}
table {
  border-width:2px; 
  border-style:solid; 
  border-color:black;
  width:50%;
}

.case {
  border-width:1px;
  border-style:solid; 
  border-color:black;
  width:60%;
  background-color: rgb(133, 130, 130);
  cursor: default;
  text-align: center;
}

.case div {
  width : 50px;
  height : 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}
.case img {
  width: 100%;
  height: 100%;
}

.case.decouverte{
  background-color: white;
}

.case.decouverte div {
  cursor: default;
}

.chrono {
  display: flex;
  align-items: center;
  justify-content: center;
}

.masque {
  display: flex;
  align-items: center;
  justify-content: center;
  
}

#jeu {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1 1 50%;
  align-items: center;
}

#button {
  align-items: left;
  padding: 0.3em 0.5em;
}

#bandeau {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #43b343;
  color: black;
  width: 565px;
  height: 50px;
  border-width:1px; 
  border-style:solid; 
  border-color:black;
}

#main {
  display: flex;
  flex-wrap: wrap;
}

#explication{
  width: 400px;
}

.text {
  min-width: 400px;
  flex: 1 1 50%;
}





details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: .5em .5em 0;
  /*height: 100%;*/
}

summary {
  font-weight: bold;
  margin: -.5em -.5em 0;
  padding: .5em;
  cursor: pointer;
}

details[open] {
  padding: .5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: .5em;
}

details summary > * {
  display: inline;
}