* { box-sizing: border-box; }
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex

.rTable          { display: table; }
.rTableRow       { display: table-row; }
.rTableHeading   { display: table-header-group; }
.rTableBody      { display: table-row-group; }
.rTableFoot      { display: table-footer-group; }
.rTableHead      { display: table-cell; }
.rTableCell      { display: table-cell; }

.Logo	{
 grid-area: logo;
 display: grid;
 text-align:center;
 vertical-align:middle;
/* border:1px solid red;
 background-color:yellow; */
}

.TopText	{
 grid-area: toptext;
 text-align: center;
 vertical-align: top;
 font-size: xx-large;
}

.Menu	{
 grid-area: chooser;
 text-align: center;
 vertical-align:top;
}

.Ad {
 grid-area: ad;
 text-align: center;
 }

.Content {
 grid-area: content;
 vertical-align:top;
}

.Footer	{
 grid-area: footer;
 text-align:center;
 vertical-align:middle;
 width: 100%;
 position: fixed;
 bottom: 0;
 background-color: #c0c0c0;
 z-index: 2;
}

.NoButton {
	background-color: #c0c0c0;
	color: #c0c0c0;
	border: none;
}

body { background-color: #c0c0c0; color: #c0c0c0; margin: 5px 5px 5px 5px; }
@media only screen and (max-width: 360px) {
	/* tiny phone in Portrait */
  .grid-container	{
    display: grid;
    min-height: 100vh;
    grid-template-columns: 35% 90fr;
    grid-template-rows: 35% 100fr 20px;
    grid-template-areas:
      "logo chooser"
      "ad content"
      "footer footer";
  }
}

@media only screen and ( max-width: 768px ) {
	/* Smaller device: Phone or Tab */
  .grid-container	{
    display: grid;
    min-height: 100vh;
    grid-template-columns: 25% 100fr;
    grid-template-rows: 3% 22% 100fr 10%;
    grid-template-areas:
      "logo toptext"
      "logo ad"
      "chooser content"
      "footer footer";
  }
}

@media only screen and ( max-width: 1024px )	{
	/* Medium phone or Tab */
  .grid-container	{
    display: grid;
    min-height: 100vh;
    grid-template-columns: 25% 100fr;
    grid-template-rows: auto auto 100fr 20px;
    grid-template-areas:
      "logo toptext"
      "logo ad"
      "chooser content"
      "footer footer"
  }
  body { font-size: smaller; }
}

@media only screen and ( orientation: Landscape ) and ( min-width: 768px ) {
/* For Big Tablet or Big Phone in Landscape */
  .grid-container {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 15% 100fr;
    grid-template-rows: auto auto 100fr 8%;
    grid-template-areas:
      "logo toptext"
      "logo chooser"
      "ad content"
      "footer footer"
  }
  body { font-size: smaller; }
}

@media only screen and ( orientation: Portrait ) and ( min-width: 768px ) {
	/* For Big Tablet or Big Phone in Portrait */
  .grid-container	{
    display: grid;
    min-height: 100vh;
    grid-template-columns: 10% 100fr;
    grid-template-rows: 8% auto 100fr 8%;
    grid-template-areas:
      "logo toptext"
      "logo chooser"
      "ad content"
      "ad footer";
  }
  body { font-size: smaller; }
}

@media only screen and ( min-width: 1200px) {
	/* For desktop in Landscape */
  .grid-container	{
    display: grid;
    min-height: 100vh;
    grid-template-columns: 10% 100fr;
    grid-template-rows: auto auto 100fr 8%;
    grid-template-areas:
      "logo toptext"
      "logo chooser"
      "ad content"
      "ad footer"
  }
  body { font-size: larger; }
}