#minesweeper {
  display: block;
  width: 900px;
  margin: 100px auto;
  font-size: 14px;
  text-align: center;
  border: 4px solid #ccc;
  background: #999; }
  #minesweeper td {
    width: 30px;
    height: 30px;
    cursor: pointer;
    user-select: none;
    border: 0;
    box-shadow: 3px 3px 3px #fff inset, -3px -3px 3px #666 inset; }
    #minesweeper td[class^='num'], #minesweeper td.mines {
      box-shadow: 0.5px 0.5px 0px #666 inset, -0.5px -0.5px 0px #666 inset; }
    #minesweeper td.num1 {
      color: #0905d3; }
    #minesweeper td.num2 {
      color: #5dd351; }
    #minesweeper td.num3 {
      color: #d35417; }
    #minesweeper td.num4 {
      color: #d33113; }
    #minesweeper td.num5 {
      color: #d30f4f; }
    #minesweeper td.num6 {
      color: #d3108f; }
    #minesweeper td.num7 {
      color: #d307c3; }
    #minesweeper td.num8 {
      color: #af09d3; }
    #minesweeper td.mines {
      color: #000; }
    #minesweeper td.blow-point {
      color: #000;
      box-shadow: none;
      background: #f00; }
    #minesweeper td.marked {
      color: #f00; }
  #minesweeper th {
    position: relative;
    height: 60px;
    font-size: 2em; }
    #minesweeper th .num {
      padding: 0 10px;
      color: #f00;
      background: #000; }
    #minesweeper th button {
      width: 36px;
      height: 36px;
      box-shadow: 3px 3px 3px #fff inset, -3px -3px 3px #666 inset; }