body {
  text-align: center;
  background-color: rgba(0,0,0,.1);
}

body * {
  font-family: 'Nova Square', cursive;
}

h1 {
  font-size: 40px;
}

button {
  margin: .5em;
  box-shadow: -6px 6px 6px rgba(0,0,0,.1);
}

button:active {
  top: 2px;
  left: -2px;
}

button:focus {
  outline: none;
}

table {
  margin: 1em;
  display: inline-block;
  background-color: rgba(255,255,255,1);
  padding: 0 50px 50px 0;
  box-shadow: -6px 6px 6px rgba(0,0,0,.1);
  border-collapse: collapse;
}

tbody:first-child tr:first-child {
  border: none;
}

caption {
  margin: 25px 0 0 50px;
}

th, td, tr {
  width: 50px;
  height: 50px;
}

td {
  border: 1px solid rgba(0,0,0,.1);
}

tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even) {
  background-color: #36454f;
}

tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd) {
  background-color: #f5f5dc;
  box-shadow: inset 0 0 5px rgba(0,0,0,.25);
}

div.modal {
  text-align: center;
  width: auto;
  height: auto;
}

div {
  width: 50px;
  height: 50px;
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
}

footer {
  margin-top: -30px;
}

.black {
  color: #36454f;
}

.red {
  color: #CC0000;
}

.red.pawn {
  background-image: url("../img/red-pawn.png");
}

.red.king {
  background-image: url("../img/red-king.png");
}

.black.pawn {
  background-image: url("../img/black-pawn.png");
}

.black.king {
  background-image: url("../img/black-king.png");
}