#northDirection {
  background-image: url("../images/northArrow.png");
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 2 / span 5;
  background-color: rgba(0, 0, 0, 0.9);
}
#eastDirection {
  background-image: url("../images/eastArrow.png");
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 7;
  grid-row: 1 / span 11;
  background-color: rgba(0, 0, 0, 0.9);
}
#southDirection {
  background-image: url("../images/southArrow.png");
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 2 / span 5;
  grid-row: 11;
  background-color: rgba(0, 0, 0, 0.9);
}
#westDirection {
  background-image: url("../images/westArrow.png");
  background-position: center;
  background-repeat: no-repeat;
  grid-row: 1 / span 11;
  grid-column: 1;
  background-color: rgba(0, 0, 0, 0.9);
}

.arrowNorth {
  background-image: url("../images/northArrow.png");
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 2 / span 5;
  background-color: rgba(0, 0, 0, 0.9);
}

.arrowEast {
  background-image: url("../images/eastArrow.png");
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 7;
  grid-row: 1 / span 11;
  background-color: rgba(0, 0, 0, 0.9);
}
.arrowSouth {
  background-image: url("../images/southArrow.png");
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 2 / span 5;
  grid-row: 11;
  background-color: rgba(0, 0, 0, 0.9);
}
.arrowWest {
  background-image: url("../images/westArrow.png");
  background-position: center;
  background-repeat: no-repeat;
  grid-row: 1 / span 11;
  grid-column: 1;
  background-color: rgba(0, 0, 0, 0.9);
}