.square {
  background-color: #000;
  transition: background-color ease-in-out 300ms;
}

.square.chosen {

}

.square.star {
  background: #222 url("../icon.png") no-repeat;
  background-size: contain;
}

.square.cake {
  background: #111 url("/img/shortcake.png") no-repeat center center;
  opacity: 0.5;
  background-size: 50% 50%;
}

.square.flag {
  background: #111 url("/img/flag.png") no-repeat center center;
  opacity: 0.5;
  background-size: 50% 50%;
}

.square.butterfly {
  background: #111 url("/img/butterfly.png") no-repeat center center;
  opacity: 0.7;
  background-size: 50% 50%;
}

.square.bg1 { background-color: #111; }
.square.bg2 { background-color: #010101; }
.square.bg3 { background-color: #151515; }


.container {
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(5, 20%);
  grid-template-columns: repeat(3, 33.3%);
}

#timer {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Major Mono Display', monospace;
  font-weight: bold;
  padding: 1em;
  text-align: center;
}

#timer div {
  flex: 1 1 auto;
}

#timer div:first-child {
  flex: 0 1 auto;
  margin-top: 8em;
  margin-bottom: 3em;
}

#timer.itIsTime {
  background: url("/img/boom.gif") no-repeat;
  background-size: contain;
}

#timerDisplay {
  font-size: 62px;
  text-shadow: #222222 3px 3px;
  transition: content ease-in-out 200ms;
}

.itIsTime #timerDisplay {
  animation: blinker 500ms linear infinite;
}

.itIsAlmostTime #timerDisplay {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes explosion {
  50% {
    background: none;
  }
}