* {
  box-sizing: border-box;
  font-family: 'Catamaran', sans-serif;
  margin:0;
  padding:0;  
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
  -webkit-user-drag: none;
}

body {
  overflow: hidden; /* Hide scrollbars */
}

#frame-page {
  height: calc(var(--vh, 1vh) * 100);
  padding: calc(var(--vh, 1vh) * 1);
}

#boxButtons {
  align-content: space-around;
  background: black;
  border: calc(var(--vh, 1vh) * 1) black ridge;
  border-bottom: calc(var(--vh, 1vh) * .6) black ridge;
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 6);
  justify-content: space-around;
  width: calc(var(--vh, 1vh) * 92);
  position: absolute;
  left: 50%;
  top: calc(var(--vh, 1vh) * 1);
  transform: translate(-50%, 0%);
}

#boxButtons img {
  position: relative;
  height: 100%;
}

#boxButtons #image2 {
  position: absolute;
  height: 130%;
  top: 50%;
  transform: translate(0, -50%);
}

#boxButtons button {
  font-size: 1.1vw;
  height: 100%;
  position: relative;
  width: 20%;
}

#buttonRotate, #buttonFlip {
  display: none;
}

#board {
  background: lightgrey;
  border: calc(var(--vh, 1vh) * .4) black ridge;
  display: grid;
  grid-template-rows: calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20);
  grid-template-columns: calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20);
  height: calc(var(--vh, 1vh) * 92);
  width: calc(var(--vh, 1vh) * 92);
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: calc(var(--vh, 1vh) * 7);
  transform: translate(-50%, 0%);
}

.tileBoard {
  border: lightgray 3px ridge;
  box-shadow: inset white  .5vh .5vh .5vh;
}

#board2 {
  background: transparent;
  border: calc(var(--vh, 1vh) * .4) black ridge;
  display: grid;
  grid-template-rows: calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20);
  grid-template-columns: calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20) calc(var(--vh, 1vh) * 91/20);
  height: calc(var(--vh, 1vh) * 92);
  width: calc(var(--vh, 1vh) * 92);
  position: absolute;
  left: 50%;
  top: calc(var(--vh, 1vh) * 7);
  transform: translate(-50%, 0%);
  z-index: 1;
}

#board2 .tileBoard {
  background: transparent;
  box-shadow: none;
  border: none;
  z-index: 10;
}

[id^="containerPlayer"] {
  background: white;
  border: gray 3px ridge;
  height: calc(var(--vh, 1vh) * 49);
  left: calc(var(--vh, 1vh) * 1);
  overflow: hidden;
  position: absolute;
  top: calc(var(--vh, 1vh) * 1);
  width: calc((100vw - calc(var(--vh, 1vh) * 96))/2);
}

[id^="containerPieces"] {
  background: white;
  height: 88%;
  overflow: auto;
  position: relative;
  width: 100%;
}

#containerPlayer2, #containerPlayer4 {
  top: calc(var(--vh, 1vh) * 50);
}

#containerPlayer3, #containerPlayer4 {
  left: unset;
  right: calc(var(--vh, 1vh) * 1);
}

.red {
  background: red;
  border: 1px red solid;
  border-radius: calc(var(--vh, 1vh) * .5);
}

.blue {
  background: blue;
  border: 1px blue solid;
  border-radius: calc(var(--vh, 1vh) * .5);
}

.green {
  background: green;
  border: 1px green solid;
  border-radius: calc(var(--vh, 1vh) * .5);
}

.yellow {
  background: yellow;
  border: 1px yellow solid;
  border-radius: calc(var(--vh, 1vh) * .5);
}

[id^="containerHeader"] {
  align-content: center;
  color: whitesmoke;
  border-radius: calc(var(--vh, 1vh) * 0);
  box-shadow: inset transparent .15vh .15vh .2vh;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.3vw;
  height: calc(var(--vh, 1vh) * 5);
  justify-content: center;
  position: relative;
  width: 100%;
}

[id^="containerPieces"] [class^="piece"] {
  float: left;
  margin: calc(var(--vh, 1vh) * .5);
}

[class^="piece"] {
  transform-origin: 0% 0%;
  display: grid;
  z-index: 1;
}

[id^="board2"] [class^="piece"] {
  position: absolute;
}

.red {
  border: calc(var(--vh, 1vh) * .8 ) rgb(205, 0, 0) groove;
  box-shadow: inset white .2vh .2vh .4vh;
}

.blue {
  border: calc(var(--vh, 1vh) * .8 ) rgb(0, 0, 205) groove;
  box-shadow: inset white .2vh .2vh .4vh;
}

.green {
  border: calc(var(--vh, 1vh) * .8 ) rgb(0, 125, 0) groove;
  box-shadow: inset white .2vh .2vh .4vh;
}

.yellow {
  border: calc(var(--vh, 1vh) * .8 ) rgb(235, 235, 0) groove;
  box-shadow: inset white .2vh .2vh .4vh;
  color: black;
}

.piece1X1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * 91/20);
  width: calc(var(--vh, 1vh) * 91/20);
}

.piece2X1 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * 91/20);
  width: calc(var(--vh, 1vh) * 91/20*2);
}

.piece2X2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(var(--vh, 1vh) * 91/20*2);
  width: calc(var(--vh, 1vh) * 91/20*2);
}

.piece2X3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: calc(var(--vh, 1vh) * 91/20*3);
  width: calc(var(--vh, 1vh) * 91/20*2);
}

.piece3X1 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * 91/20);
  width: calc(var(--vh, 1vh) * 91/20*3);
}

.piece3X2 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(var(--vh, 1vh) * 91/20*2);
  width: calc(var(--vh, 1vh) * 91/20*3);
}

.piece4X1 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * 91/20);
  width: calc(var(--vh, 1vh) * 91/20*4);
}

.piece4X2 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(var(--vh, 1vh) * 91/20*2);
  width: calc(var(--vh, 1vh) * 91/20*4);
}

.piece3X3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: calc(var(--vh, 1vh) * 91/20*3);
  width: calc(var(--vh, 1vh) * 91/20*3);
}

.piece5X1 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * 91/20);
  width: calc(var(--vh, 1vh) * 91/20*5);
}

[id^="containerPieces"] .red {
  border: calc(var(--vh, 1vh) * .55 ) rgb(205, 0, 0) groove;
  box-shadow: inset white .1vh .1vh .2vh;
}
  
[id^="containerPieces"] .blue {
  border: calc(var(--vh, 1vh) * .55 ) rgb(0, 0, 205) groove;
  box-shadow: inset white .1vh .1vh .2vh;
 }
  
[id^="containerPieces"] .green {
  border: calc(var(--vh, 1vh) * .55 ) rgb(0, 125, 0) groove;
  box-shadow: inset white .1vh .1vh .2vh;
 }
  
[id^="containerPieces"] .yellow {
  border: calc(var(--vh, 1vh) * .55 ) rgb(235, 235, 0) groove;
  box-shadow: inset white .1vh .1vh .2vh;
}
  
[id^="containerPieces"] .piece1X1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20);
  width: calc(var(--vh, 1vh) * .57 * 91/20);
}

[id^="containerPieces"] .piece2X1 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20);
  width: calc(var(--vh, 1vh) * .57 * 91/20*2);
}

[id^="containerPieces"] .piece2X2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20*2);
  width: calc(var(--vh, 1vh) * .57 * 91/20*2);
}

[id^="containerPieces"] .piece2X3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20*3);
  width: calc(var(--vh, 1vh) * .57 * 91/20*2);
}

[id^="containerPieces"] .piece3X1 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20);
  width: calc(var(--vh, 1vh) * .57 * 91/20*3);
}

[id^="containerPieces"] .piece3X2 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20*2);
  width: calc(var(--vh, 1vh) * .57 * 91/20*3);
}

[id^="containerPieces"] .piece4X1 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20);
  width: calc(var(--vh, 1vh) * .57 * 91/20*4);
}

[id^="containerPieces"] .piece4X2 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20*2);
  width: calc(var(--vh, 1vh) * .57 * 91/20*4);
}

[id^="containerPieces"] .piece3X3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20*3);
  width: calc(var(--vh, 1vh) * .57 * 91/20*3);
}

[id^="containerPieces"] .piece5X1 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(var(--vh, 1vh) * .57 * 91/20);
  width: calc(var(--vh, 1vh) * .57 * 91/20*5);
}

[id^="containerHeader"] {
  box-shadow: none;
}

.howto {
  color: white;
}

#warningLandscape {
  background: black;
  color: grey;
  display: none;
  font-size: 8vh;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}

#warningLandscape p {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
}

@media screen and (orientation:portrait) {
  #warningLandscape {
    display: block;
  }  
  html {
    background: grey;
  }
  #frame-page {
    display: none;
  }
}