/* class to make texts unselectable */
.unselectable-text {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Additional fonts */
@font-face {
  src: url(../fonts/PressStart.ttf);
  font-family: PressStart;
}

@font-face {
  src: url(../fonts/Righteous-Regular.ttf);
  font-family: RighteousReg;
}

body {
  text-align: center;
  background-color: #011F3F;
  /* display: grid;
  justify-content: center;
  justify-items: center;
  height: 100vh; */
}

/* Title */
.title {
  color: #e23e57;
  padding-top: 50px;
  padding-bottom: 75px;

}

.title-text {
  font-size: 1.8rem;
  font-family: PressStart;
}


.test-btn {
  font-size: 1.6rem;
  font-family: PressStart;
  color: aqua;
  visibility: hidden;
}


/* The container of all boxes */

.container-0 {
  display: grid;

  justify-content: center;
  grid-gap: 10px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 30px);


}

/* The boxes */
.box0 {
  width: 30px;
  height: 30px;
  display: flex;
  background-color: mediumseagreen;
  align-items: center;
  justify-content: center;

}

.box0:hover {
  background-color: powderblue;
}

/* middle button box */
.box-mid {
  width: 30px;
  height: 30px;

  background-color: blue !important;
  padding-top: 32px;

}


.redBox {
  background-color: #e23e57 !important;
  animation-name: redBox-anim;
  animation-duration: 1s;
}

@keyframes redBox-anim {
  from {
    background-color: mediumseagreen;
  }

  to {
    background-color: #e23e57;
  }
}

.safeBox {
  background-color: paleturquoise !important;
  animation-name: safeBox-anim;
  animation-duration: 1s;
}

@keyframes safeBox-anim {
  from {
    background-color: mediumseagreen;
  }

  to {
    background-color: paleturquoise;
  }
}

/* Show elemnts */
.appearElem {
  visibility: visible !important;
}

/* Additional informations */
.info {
  color: palevioletred;
  padding-top: 75px;
  padding-bottom: 25px;
  /* visibility: hidden; */
}

.info-text {
  font-size: 1.6rem;
  font-family: PressStart;
  visibility: hidden;
}

.start-button {
  font-family: RighteousReg;
  visibility: hidden;
}

.mine-number {
  /* a class made for JS */
}