body{
    cursor: url(cursor.png) 2 2, pointer;;
    background-color: black;
    background: url("L2.jpg") no-repeat;
}

#grille {
    width: 400px;
    height: 400px;
}

#start_button{
}

div#start_button:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

div#end_button:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

div#Test:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

div#Recovery:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

#end_button{
}

.case {
    width: 50px;
    height: 50px;
    outline: 1px solid;
    float: left;
    background-size: 42px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.caseSelect{
    width :42px;
    height: 42px;
    border: 4px white inset;
    float: left;
    background-size: 42px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

.brigth:hover{
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

.pair{
	background-color: #907B61;
}

.impair{
	background-color: #5C492E;
}

.button{
    width: 200px;
    height: 50px;
    background-image: linear-gradient(red, darkred);
    border: 5px brown inset;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: fantasy;
    color: white;
    font-size: 1.4vw;
    float: left;
}

#time{
    width : 400px;
    height: 25px;
}

progress {
  display: block;
  width: 400px;
  height: 25px;
  background-color: #d4d4d4;
}

progress::-webkit-progress-bar {
  border-radius: 5px;
  background-color: #d4d4d4;
}
progress::-webkit-progress-value {
  border-radius: 5px;
  background-color: red;
}