.playfields,
.cellx{
  border: 1px solid white;
  border-collapse: collapse;
}
td > div{
    color: white;
}
.cellx{
    text-align: center;
    height: 100%;
    padding: 0.78%;
}
#playfield {
    width: 100%;
    height: 100%;
}
#localdiv,
#remotediv {
    width: 100%;
    height: 100%;
}
#localauxdiv,
#remoteauxdiv {
    width: 100%;
    height: 100%;
    float: center;
}
#local,
#remote {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    object-fit: contain;
}
#localaux,
#remoteaux {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    object-fit: contain;
}
body{
    background-color: #666;
}
#maingrids{
    width: 100%;
    height: 100%;
}
.mainboards{
    width: 68%;
    height: 100%;
    display: inline-block;
}
.auxboards{
    width: 30%;
    height: 100%;
    display: inline-block;
    padding-left: 1%;
}
#locals,
#remotes{
    height: 50%;
    table-layout: fixed;
    object-fit: contain;
}
.localcellx{
    background-color: #2d772d;
}
.remotecellx{
    background-color: #941f1f;
}
.localauxcellx{
    background-color: #006100;
}
.remoteauxcellx{
    background-color: #6b0000;
}