/*
 * Styling
 */
.container {
  margin: 0 auto;
  text-align: center;
 }

.col-1-2 {
  display: inline-block;
  vertical-align: top;
  width: 45%;
  padding: 10px;
}

.gameboard {
    color: red;
    border-style: solid;
    border-color: black;
    border-width: 0px;
    width: 300px;
    height: 300px;
    padding: 0px;
    margin: 0 auto;
}
.cell {
    padding: 0px;
    margin: 0px;
    display: inline-block;
    border-style:solid;
    border-width: 1px;
    border-color: black;
    width: 30%;
    height: 30%;
    border-collapse: collapse;
    text-align: center; 
    vertical-align: middle;
}

.cell:hover {
    background-color: #e1e1ea;
    box-shadow: 0 0 10px #e1e1e1;
}


.cell:first-of-type {
  border-left-color: transparent;
  border-top-color: transparent;
}

.cell:nth-of-type(2) {
  border-top-color: transparent;
}

.cell:nth-of-type(3) {
  border-right-color: transparent;
  border-top-color: transparent;
}

.cell:nth-of-type(4) {
  border-left-color: transparent;
}

.cell:nth-of-type(6) {
  border-right-color: transparent;
}

.cell:nth-of-type(7) {
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.cell:nth-of-type(8) {
  border-bottom-color: transparent;
}

.cell:nth-of-type(9) {
  border-bottom-color: transparent;
  border-right-color: transparent;
}

i {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}