table.body, table.body tr, table.body td {
    margin:5px auto;
    table-layout:fixed; /* to make masonry working on small screens */ 
    border:1px solid #C0C0C0;
    border-collapse:collapse;
  }

  table.body {
    text-align:center;
    font-size:30px;
  }
  
  table.body td {
    border:1px solid #C0C0C0;
    width:60px;
    height:60px;
    padding:0;
    cursor:pointer;
  }

  .hit {
    color: red;
  }    

  .disabled {
    pointer-events: none;
    opacity:0.7;
  }    

  .x::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome; 
    content: "\f00d";
  }

  .o::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;  
    font-weight: 900; 
    content: "\f10c";
  }

  #info {
    font-family: monospace;
  } 
  
  table.info, table.info tr, table.info td {
    table-layout:fixed; /* to make masonry working on small screens */ 
    border:1px solid #C0C0C0;
    border-collapse:collapse;
  }

  table.info td {
    width:20px;
    height:20px;
    text-align:center;
    font-size:10px;
    padding:0;  
  }

  table.show {
    margin:0 auto;
  }