/* BG gray light gradient */
html,
body {
  background: #f2f2f2;
  background: -moz-linear-gradient(top, #f2f2f2 0%, #cbcbcb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f2f2), color-stop(100%, #cbcbcb));
  background: -webkit-linear-gradient(top, #f2f2f2 0%, #cbcbcb 100%);
  background: -o-linear-gradient(top, #f2f2f2 0%, #cbcbcb 100%);
  background: -ms-linear-gradient(top, #f2f2f2 0%, #cbcbcb 100%);
  background: linear-gradient(to bottom, #f2f2f2 0%, #cbcbcb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#cbcbcb', GradientType=0);
}


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


#board {
  width: 600px;
  height: 600px;
  background-color: #f46d14;
  display: flex;
  flex-direction: column;
}

/* if mobile */
@media (max-width: 599px) {
  #board {
    width: 500px;
    height: 500px;
  }
}

@media (max-width: 499px) {
  #board {
    width: 300px;
    height: 300px;
  }
}

#board.fim {
  background-color: #f46e1432;
}

#board .r {
  display: flex;
  flex-direction: row;
  flex: 1 0 auto;
}

#board .r .square {
  border: 1px solid #fff;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex: 1 0 auto;
  padding: 0;
  position: relative;
  box-shadow: 0px -1px 10px 2px #756f6ff2;
  border-radius: 5px;
}

#board .square.explodiu {
  background: red;
}

#board .square.auto {
  background: green;
}

#board .square:hover {
  background: #f2f2f2;
}

#board .square .water {
  position: absolute;
  transition: width 0.2s ease-in-out;
}

.water.water--sm {
  width: 33%;
}

.water.water--md {
  width: 66%;
}

.water.water--lg {
  width: 100%;
}

.dashboard .qnt_click .badge,
.dashboard .score .badge {
  font-size: 2rem;
}