* {
  box-sizing: border-box;
  font-family: sans-serif; }

html {
  font-size: 18px; }

.red {
  background-color: #ff141d;
  color: #ff141d; }

.green {
  background-color: #00f40d;
  color: #00f40d; }

.blue {
  background-color: #2882ff;
  color: #2882ff; }

.cyan {
  background-color: #14fcff;
  color: #14fcff; }

.orange {
  background-color: #ff9300;
  color: #ff9300; }

.purple {
  background-color: #ff00bd;
  color: #ff00bd; }

.titlebar {
  margin-top: 2rem;
  height: 4rem; }
  .titlebar .title {
    font-size: 3rem;
    margin: auto;
    text-align: center;
    transition: scale 500ms linear; }

#gamecontainer {
  display: flex;
  font-size: 0;
  padding-top: 2rem;
  margin: auto;
  justify-content: space-around; }

#boardcontainer {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
  min-width: 650px; }
  #boardcontainer .square {
    width: 5rem;
    height: 5rem;
    border: 1px solid #bcbcbc;
    display: inline-block; }
    #boardcontainer .square.active {
      scale: 110%;
      transition: scale 150ms ease;
      border: 1px solid #FFF; }
  #boardcontainer .b-left {
    border-left: 2px solid #bcbcbc; }
  #boardcontainer .b-right {
    border-right: 2px solid #bcbcbc; }
  #boardcontainer .b-top {
    border-top: 2px solid #bcbcbc; }
  #boardcontainer .b-bottom {
    border-bottom: 2px solid #bcbcbc; }

#stats {
  font-size: 18px;
  display: inline-block;
  vertical-align: top; }

.levelUp {
  transform: scale(1.5, 1.5); }

@keyframes expando {
  from {
    scale: 100%; }
  to {
    scale: 110%; } }