body {
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  column-gap: 1vmin;
  row-gap: 1vmin;
  height: 95vmin;
  width: 95vmin;
}

#middle-cell {
  background-color: #DDD;
  color: #444;
  display: flex;
  text-align: center;
  padding: 1vmin;
  align-items: center;
  justify-content: center;
}

.cell {
  background-color: #EEE;
  color: #444;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 1.8vmin;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  padding: 1vmin;
  align-items: center;
  justify-content: center;
}

.cell .fa-check {
  visibility: hidden;
}

.cell .category {
  opacity: .5;
}

.cell:hover {
  position: relative;
  top: -.25vmin;
  left: -.25vmin;
  box-shadow: .5vmin .5vmin 1vmin rgba(0, 0, 0, .2);
}

.cell.half {
  background: linear-gradient(180deg,#EEE 0%, #EEE 50%, #DED 50%, #DED 100%);
  color: #787;
}

.cell.completed {
  background: #DED;
  color: #787;
}

.cell.completed .fa-check {
  visibility: visible;
}

.fa-check {
  color: #7B7;
}