.hidden {
  display: none;
}

body.dark {
  background-color: #333;
  color: #fff;
}

header {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 4px solid salmon;
}

h1 {
  font-size: 25px;
  color: salmon;
  text-shadow: 1px 1px 4px #333;
}

h4 {
  font-size: 18px;
  font-weight: lighter;
}

label {
  font-size: 6px;
}


#setup-game {
  display: flex;
  justify-content: center;
}

/* button {
  width: 200px;
  height: 50px;
  justify-self: center;
  background-color: yellowgreen;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #333;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
} */
button {
  width: 120px;
  height: 40px;
  justify-self: center;
  background-color: yellowgreen;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #333;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

p#timer,
p#lives {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

#game {
  display: flex;
  justify-content: center;
}

/* #number-container>p {
  border: 1px solid black;
  border-radius: 20%;
  width: 60px;
  height: 50px;
  box-shadow: 0px 0px 5px #333;
  font-size: 40px;
  padding-top: 7px;
  margin-left: 50px;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  animation: fadeInLeft 2s ease;
} */
#number-container>p {
  border: 1px solid black;
  border-radius: 20%;
  width: 22px;
  height: 20px;
  box-shadow: 0px 0px 5px #333;
  font-size: 14px;
  padding-top: 3px;
  margin-left: 20px;
  margin-top: 6px;
  margin-bottom: 5px;
  text-align: center;
  animation: fadeInLeft 1s ease;
}

@keyframes fadeInLeft {
  0% {
    transform: translateY(3000%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}


#board {
  padding-top: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 250px;
  height: 250px;
}

/* .tile {
  border: 0.3px solid black;
  width: 60px;
  height: 50px;
  text-align: center;
  margin: 0;
  box-shadow: 0px 0px 5px #333;
  vertical-align: middle;
  font-size: 40px;
  padding-top: 7px;
  border-radius: 6px;
  animation: fadeInRight 1s ease;
} */
.tile {
  border: 0.3px solid black;
  width: 26px;
  height: 23px;
  text-align: center;
  margin: 0;
  box-shadow: 0px 0px 5px #333;
  vertical-align: middle;
  font-size: 17px;
  padding-top: 3px;
  border-radius: 6px;
  animation: fadeInRight 1s ease;
}

@keyframes fadeInRight {
  0% {
    transform: translateY(-1000%);
    opacity: 0;
  }

  60% {
    transform: translateY(-200%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

p.selected {
  background-color: rgb(243, 233, 88);
}

p.incorrect {
  color: red;
}

.rightBorder {
  border-right: 4px solid black;
  animation: fadeInRight 1s ease;
}

@keyframes fadeInRight {
  0% {
    transform: translateY(-1000%);
    opacity: 0;
  }

  60% {
    transform: translateY(-200%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.bottomBorder {
  border-bottom: 4px solid black;
  animation: fadeInRight 1s ease;
}

@keyframes fadeInRight {
  0% {
    transform: translateY(-1000%);
    opacity: 0;
  }

  60% {
    transform: translateY(-200%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

footer {
  background-color: salmon;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 50px;
}

#setup-game>* {
  margin-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
}

h3 {
  font-size: 9px;
}

#diff {
  width: 90px;
  height: auto;
  background-color: salmon;
  border-radius: 10px;
  box-shadow: 0px 0px 10px black;
}

#time {
  width: 80px;
  height: auto;
  background-color: salmon;
  border-radius: 10px;
  box-shadow: 0px 0px 10px black;
  margin-left: 5px;
  margin-right: 5px;
}

#theme {
  width: 80px;
  height: auto;
  background-color: salmon;
  border-radius: 5px;
  box-shadow: 0px 0px 10px black;
}


/*le style original de Mathiew

.tile
border: 1px solid black;
  width: 60px;
  height: 60px;
  text-align: center;
  margin: 0;
  vertical-align: middle;
  font-size: 40px;*/


/*
  animation: fadeInRight 0.5s ease;
}
@keyframes fadeInRight {
    0%{
        transform: translateY(-100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0%s);
        opacity: 1;
    }