.purple {
  background-color: #8c3980 !important;
  color: #fff !important;
}
.slate {
  background-color: #badde7 !important;
  color: #333 !important;
}
.orange {
  background-color: #f2b87a !important;
  color: #333 !important;
}
.green {
  background-color: #699c55 !important;
  color: #333 !important;
}
.yellow {
  background-color: #fff09e !important;
  color: #333 !important;
}
.blue {
  background-color: #68aac8 !important;
  color: #333 !important;
}
.red {
  background-color: #ca3c3e !important;
  color: #fff !important;
}
.gray {
  background-color: #c790c1 !important;
  color: #333 !important;
}
.green-1 {
  background-color: #91d169 !important;
  color: #333 !important;
}
.green-2 {
  background-color: #d0e6c3 !important;
  color: #333 !important;
}
.relax-mesh {
  counter-reset: box;
}
.relax-tile:after {
  counter-increment: box;
  content: counter(box);
  display: block;
  text-align: center;
  font-size: 10rem;
  line-height: 10rem;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 10rem;
  width: 10rem;
  pointer-events: none;
  left: 50%;
}

html, body, .relax-app{
  height: 100%;
}