body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:linear-gradient(45deg,rgb(255,0,0),rgb(0,95,127));
}
a {
    text-decoration: none;
    color: inherit; /* Inherits the color of the surrounding text */
}
#main{
  position: absolute;
  top:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background: linear-gradient(45deg,rgb(255,0,0),rgb(0,95,127));
}
h2{
  text-align:center;
}
#layout{
  position:relative;
  width:65%;
  aspect-ratio: 1 / 1;
  border: 5px solid black;
  margin:5% auto 5% auto;
  padding:0;
}
#controls{
  position:relative;
  width:70%;
  height:15%;
  margin:0 auto 5% auto;
  padding:0;
  border: 5px solid black;
}
#game-table{
  background-color:white;
  border-collapse: collapse;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
#controls-table{
  width:60%;
  height:100%;
  display:block;
  float:left;
}
#buttons-table{
      background-color:white;
  width:40%;
  display:block;
  float:left;
}
button{
  display: block;
  float: left;
  width:20%;
  height:50%;
    border: thick solid white;
    color:black;
}
.controlsButton{
  width:calc(100% / 3);
}
#layout tr{
  width:100%;
  height:calc(100% / 6);
  border: none;
}
#layout tr td{
  border: dashed;
  width:calc(100% / 6);
  height:calc(100% / 6);
}
.gameCell, .controlsButton, .sideButton{
  text-align: center;
  font-size:1.3em;
}
@media screen and (orientation:landscape){
    #main{
        width:100%;
    }
  #layout, #controls{
    display:block;
    float:left;
    margin:auto 5% auto 5%;
  }
  #layout{
    width:auto;
    max-width: 35%;
    height:70%;
    min-height:35%;
    margin-left:10%;
  }
  #controls{
    max-width:20%;
    height:70%;
  }
  #controls-table{
    width:100%;
    height:calc(100% / 5 * 3);
    display:block;
    float:left;
  }
  #buttons-table{
    width:100%;
    height:auto;
    display:block;
    float:left;
  }
  .controlsButton{
    width:calc(100% / 2);
    height:calc(100% / 3);
    display:block;
    float:left;
  }
  .sideButton{
    width:calc(100% / 2);
    height:calc(100% / 5);
    display:block;
    float:left;
  }
  .gameCell, .controlsButton, .sideButton{
      font-size:1.5em;
  }
}
@media screen and (orientation: portrait) and (max-width: 1200px){
    #layout{
        height:45%;
        width:auto;
        max-width:80%;
    }
    #controls{
        width:80%;
        height:25%;
    }
    h2{
        font-size:3em;
    }
      .gameCell, .controlsButton, .sideButton{
      font-size:2.5em;
  }
}
@media screen and (orientation: portrait) and (max-width: 600px){
    #layout{
        height:45%;
        width:auto;
        max-width:80%;
    }
    #controls{
        width:80%;
        height:25%;
    }
    h2{
        font-size:2em;
    }
      .gameCell, .controlsButton, .sideButton{
      font-size:1.5em;
  }
}