body {
  background: #2c2f34;
  font-family: sans-serif;
  touch-action: manipulation;
}

.mainSet {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
  flex-wrap: wrap;
  min-height: 100vh;
  color: #FFF;
}
.break {
  flex-basis: 100%;
  height: 0;
}
.mainSet img {
  width: 20vh;
  height: 20vh;
  border: 1px transparent solid;
  padding: 1vh;
}
.mainSet img:hover {
  border: 1px #0096ff solid;
}
.mainSet img.selected {
  border: 2px #2aff00 solid;
}
.message {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  // align-content: space-around;
  flex-wrap: wrap;
  min-height: 100vh;
  min-width: 100vw;
  color: #FFF;
  font-size: 10vh;
  background-color: rgba(44, 47, 52, 0.9);
}
.tutorial {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
  flex-wrap: wrap;
  min-height: 100vh;
  min-width: 100vw;
  color: #FFF;
  font-size: 3vh;
  background-color: rgba(44, 47, 52, 0.9);
}
.tuto2 {
  background-position: top left;
  background-image: url("../img/steamBot2.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.tuto3 {
  /* background-position: top right;
  background-image: url("../img/steamBot3.png");
  background-size: contain;
  background-repeat: no-repeat; */
}
.displayCode {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: #FFF;
}
.countDown {
  font-size: 5vw;
}
.color0 {
  color: #FF0000;
}
.color1 {
  color: #00FF00;
}
.color2 {
  color: #0000FF;
}
.color3 {
  color: #FFFF00;
}
.saisieCode {
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  padding-top: 30vh;
  width: 50vh;
  min-height: 100vh;
  color: #FFF;
}