style.css

* {
  box-sizing: border-box;
  background-color: black;
  font-family: 'Lato', sans-serif;
}

#container {
  margin: 5em auto 5em auto;
  width: 30em;
  height: 30em;
  -webkit-transform : rotate(0deg);
  -moz-transform : rotate(0deg);
  -ms-transform : rotate(0deg);
  -o-transform : rotate(0deg);
  transform : rotate(0deg);
}

.outer-boxes {
  display: inline-block;
  width: 32%;
  height: 32%;
  padding: 5%;
  margin: 0px auto;
  text-align: center;
  color: white;
  border-color: white;
  font-size: 5.5em;
  vertical-align: top;
}

#box-0-out, #box-3-out, #box-6-out {
  border-right: 1px solid white;
}

#box-0-out, #box-1-out, #box-2-out, #box-3-out, #box-4-out, #box-5-out {
  border-bottom: 1px solid white;
}

#box-3-out, #box-4-out, #box-5-out {
  border-top: 1px solid white;
}

#box-1-out, #box-4-out, #box-7-out {
  border-right: 1px solid white;
  border-left: 1px solid white;
}

#box-2-out, #box-5-out, #box-8-out {
  border-left: 1px solid white;
}

#box-6-out, #box-7-out, #box-8-out {
  border-top: 1px solid white;
}

#container_2 {
  width: 30em;
  /*border: solid white 1px;*/
  margin: 2em auto 0 auto;
}

p {
  color: white;
  display: inline;
  font-size: 3em;
  font-weight: 100;
}

#player-score {
  margin: 0 3.35em 0 1.8em;
}

#other-score {
  margin:0;
}

.turn {
  font-weight:normal;
}

img {
  display: inline;
  width: 2em;
  -webkit-filter: invert(1);
  filter: invert(1);
  background-color: white;
}

.players {
  margin: 0 0 0 4.5em;
}


@media(max-width:35em) {
  #container {
    width: 20em;
    height: 20em;
    margin-top: 6em;
  }
  #container_2 {
    width: 20em;
  }
  #player-score {
    margin: 0 2.35em 0 1.3em;
    font-size: 2.5em;
  }
  #other-score {
    margin:0;
    font-size: 2.5em;
  }
  img {
    width: 1.5em;
  }

  .players {
    margin: 0 0 0 3em;
  }

  .outer-boxes {
    font-size: 3.6em;
    padding-top: 0.2em;
  }
}