body    {
  margin: 0;
  background: #000;
  color: white;
}

h1 {
  text-align: center;
}

#game {
  display: flex;  /*a flex container*/
  justify-content: center;
  align-items: center;
}

canvas {  /*the game*/
  display : block;
  border: 5px inset grey; /*defines a 3d inset grey border*/
  border-bottom-style: none;  /*the border's bottom line will not be rendered*/
  line-height: 100px;
  text-align: center;
  width: 1024px;
  height: 768px;
}

#warningLand {
  display: none;
}

h3 {
  margin-left: 4%;
}

footer {
  margin: 1% 10% 1% 10%;
  background-color: #B2B2B2;
  font-size: 20px;
  border: 5px inset black;
  padding-bottom: 10px;
}

.gridContainer {
  display: grid;
  grid-template-columns: auto auto;  /*sets the number of columns of the grid to two and their size to auto*/
  grid-gap: 1px;
}

.gridContainer > div {
  padding-left: 5%;
}

/*.item1 is already in the right place*/
.item3 { grid-area: 2 / 1; } /*puts .item3 in the second row first column (swipes with .item2)*/
.item5 { grid-area: 3 / 1; } /*puts .item5 in the second row first column (swipes with .item4) and so on for the others*/
.item7 { grid-area: 4 / 1; }
.item9 { grid-area: 5 / 1; }


@media screen and (max-width: 1024px) and (orientation: landscape) {

  canvas {
    width: 920px;
    height: 690px;
  }

  .gridContainer {
    grid-auto-columns: auto;  /*sets the number of columns of the grid to one and its size to auto*/
  }

  .item1 { grid-area: 1; }   /*puts .item1 in the first row*/
  .item2 { grid-area: 2; }   /*puts .item2 in the second row and so on for the others*/
  .item3 { grid-area: 3; }
  .item4 { grid-area: 4; }
  .item5 { grid-area: 5; }
  .item6 { grid-area: 6; }
  .item7 { grid-area: 7; }
  .item8 { grid-area: 8; }
  .item9 { grid-area: 9; }
  .item10 { grid-area: 10; }

}

@media screen and (max-width: 768px) and (orientation: portrait) {

  canvas {
    width: 680px;
    height: 535px;
  }

  .gridContainer {
    grid-template-columns: auto;
  }

  .item1 { grid-area: 1; }
  .item2 { grid-area: 2; }
  .item3 { grid-area: 3; }
  .item4 { grid-area: 4; }
  .item5 { grid-area: 5; }
  .item6 { grid-area: 6; }
  .item7 { grid-area: 7; }
  .item8 { grid-area: 8; }
  .item9 { grid-area: 9; }
  .item10 { grid-area: 10; }

}

@media screen and (max-width: 667px) and (orientation: landscape) {

  body {
    min-width: 667px;
    min-height: 375px;
  }

  canvas {
    width: 454px;
    height: 340px;
  }

  footer {
    margin: 1% 5% 1% 5%;
    font-size: 11px;
  }

  .gridContainer > div {
    padding-left: 3%;  /*so that the content has more space: reduces it from 5% to 3%*/
  }
}

@media screen and (max-width: 375px) and (orientation: portrait) {
  body {
    min-width: 375px;
    min-height: 667px;
  }

  canvas {
    width: 360px;
    height: 300px;
  }

  footer {
    margin: 1% 5% 1% 5%;
    font-size: 11px;
  }

  .gridContainer > div {
    padding-left: 3%;
  }

}