* {
  box-sizing: border-box; /* Include borders in div size */
  font-family: 'Montserrat', sans-serif; /* Set font for site */
  margin:0; padding:0; /* Default - No margins, no padding  */
  -webkit-user-select: none; /* Do not permit select text on page - Safari */
  -ms-user-select: none; /* Do not permit select text on page - IE 10+ and Edge */
  user-select: none; /* Do not permit select text on page - Standard */
  -webkit-user-drag: none; /* Do not permit dragging of any images */
}

/* Set the size of page to one screen, add border */
#framePage {
  height: calc(var(--vh, 1vh) * 100);
  padding: calc(var(--vh, 1vh) * 1);
  position: relative;
}

#imageLeft, #imageRight {
  height: calc(var(--vh, 1vh) * 10);
  right: calc(50% + calc(var(--vh, 1vh) * 36));
  position: absolute;
  top: 52%;
  transform: rotate(90deg);
}

#imageRight {
  left: calc(50% + calc(var(--vh, 1vh) * 36));
  right: unset;
  top: 40%;
}

#boxInstructionsLeft, #boxInstructionsRight {
  align-content: flex-start;
  bottom: calc(var(--vh, 1vh) * 1);
  display: flex;
  font-size: 1.2vw;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 96);
  position: absolute;
  right: calc(50% + calc(var(--vh, 1vh) * 53));
  text-align: center;
  top: calc(var(--vh, 1vh) * 1);
  width: calc(var(--vh, 1vh) * 13);
}

#gameNumber2 {
  height: calc(var(--vh, 1vh) * 6.82);
  font-size: calc(var(--vh, 1vh) * 5);
  font-weight: bold;
  margin-top: calc(var(--vh, 1vh) * 1);
  text-align: center;
  width: 100%;
}

#boxInstructionsRight {
  align-content: unset;
  align-items: flex-start;
  left: calc(50% + calc(var(--vh, 1vh) * 53));
  right: unset;
}

#boxInstructionsRightBottom {
  align-self: flex-end;  
}

#boxInstructionsLeft button, #boxInstructionsRight button, #boxInstructionsRightBottom button {
  align-self: flex-start;  
  font-size: .9vw;
  height: calc(var(--vh, 1vh) * 6.82);
  margin-bottom: calc(var(--vh, 1vh) * .5);
  width: 100%;
}

#containerGame, #trayPieces {
  background-color: black;
  border: darkgray calc(var(--vh, 1vh) * 1) ridge;
  box-shadow: rgb(68, 68, 68)  .7vh .7vh .7vh;
  height: calc(var(--vh, 1vh) * 48);
  left: 50%;
  position: absolute;
  top: calc(var(--vh, 1vh) * 1);
  transform: translate(-50%, 0%); 
  width: calc(calc(var(--vh, 1vh) * 103.2));
}

#trayPieces {
  top: calc(var(--vh, 1vh) * 49);
}

#board, #board2 {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  height: calc(var(--vh, 1vh) * 46);
  position: relative;
  width: calc(var(--vh, 1vh) * 101.2);
}

#board2 {
  background: transparent;
  position: absolute;
  top: 0;
  z-index: 2;
}

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

.hole {
  background: rgb(24, 24, 24);
  border: 1px grey solid;
  box-shadow: inset darkgray -3px 3px 2px;
  border-radius: 50%;
  position: relative;
  width: 100%;

}

.dropArea [class^="piece"] {
  position: absolute;
}

.dropArea p {
  color: white;
  position: absolute;
  margin: 2vh;
  z-index: 8;
  color: transparent;
}

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

[class^="piece"] p {
  left: calc(calc(var(--vh, 1vh) * 6.1) * .3);
  position: fixed;  
  top: calc(calc(var(--vh, 1vh) * 6.1) * .3);
}

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

#board2 .F {
  color: transparent;
}

.A {background: #e9421c radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#e9421c 35%,#9c2105 75%, black 100%);}
.B {background: #bf252a radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#bf252a 35%,#8a0e12 75%, black 100%);}
.C {background: #2a3182 radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#2a3182  35%,#060a3a 75%, black 100%);}
.D {background: #f5c4c0 radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#f5c4c0 35%,#775451 75%, black 100%);}
.E {background: #439a5a radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#439a5a 35%,#174e26 75%, black 100%);}
.F {background: #f1ecdb radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#f1ecdb 35%,#999588 75%, black 100%);color:black;}
.G {background: #91c0c6 radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#7eb7be 35%,#3f6064 75%, black 100%);}
.H {background: #c83f87 radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#c83f87 35%,#661842 75%, black 100%);}
.I {background: #f2d741 radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#f2d741 35%,#83731a 75%, black 100%);}
.J {background: #603474 radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#603474 35%,#2e143a 75%, black 100%);}
.K {background: #a1f969 radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#a1f969 35%,#55922f 75%, black 100%);}
.L {background: #b8bebb radial-gradient(at 100% 5%,rgba(255, 255, 255, 0.4) 5%,#b8bebb 35%,#4e5250 75%, black 100%);}

.dot {
  border-radius: 50%;
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#trayPieces [class^="piece"] {
  float: left;
  margin: calc(var(--vh, 1vh) * .3);
  position: relative;
}

#trayPieces .piece2X2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(calc(var(--vh, 1vh) * 6.1) * 2);
  width: calc(calc(var(--vh, 1vh) * 6.1) * 2);
}

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

#trayPieces .piece4X1 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(calc(var(--vh, 1vh) * 6.1) * 1);
  width: calc(calc(var(--vh, 1vh) * 6.1) * 4);
}

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

#trayPieces .piece3X3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: calc(calc(var(--vh, 1vh) * 6.1) * 3);
  width: calc(calc(var(--vh, 1vh) * 6.1) * 3);
}

#board2 .piece2X2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(calc(var(--vh, 1vh) * 9.2) * 2);
  width: calc(calc(var(--vh, 1vh) * 9.2) * 2);
}

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

#board2 .piece4X1 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: calc(calc(var(--vh, 1vh) * 9.2) * 1);
  width: calc(calc(var(--vh, 1vh) * 9.2) * 4);
}

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

#board2 .piece3X3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: calc(calc(var(--vh, 1vh) * 9.2) * 3);
  width: calc(calc(var(--vh, 1vh) * 9.2) * 3);
}


/* The Modal (background) */
.modal {
  background-color: rgb(0,0,0); /* Fallback color */  
  display: none; /* Hidden by default */
  display: block; /* CHANGE THIS */
  height: calc(var(--vh, 1vh) * 100); /* Full height */
  left: 0;
  padding-top: 100px; /* Location of the box */
  position: fixed; /* Stay in place */
  top: 0;
  width: 100%; /* Full width */
  z-index: 3; /* Sit on top */
}

#modalInner {
  background: white;
  border: #a1f969 calc(var(--vh, 1vh) * 2) ridge;
  border-left-color: #c83f87;
  border-right-color: #e9421c;
  border-bottom-color: #7eb7be;
  height: calc(var(--vh, 1vh) * 75);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
}

#modalInner img {
  height: calc(var(--vh, 1vh) * 15);
  left: 50%;
  position: absolute;
  top: 2%;
  transform: translate(-50%, 0%);
}

#boxGameQuestion, #boxPiecesQuestion {
  font-size: 6vh;
  height: auto;
  left: 50%;
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 20);
  transform: translate(-50%, 0%);
  width: 90%;
}

#gameNumber {
  text-align: center;
  font-size: 6vh;
}

#boxPiecesQuestion {
  display: none;
}


#buttonStartGame {
  bottom: calc(var(--vh, 1vh) * 2);
  display: none;
  font-size: calc(var(--vh, 1vh) * 3); 
  height: calc(var(--vh, 1vh) * 8);
  left: 50%;
  padding: 0 calc(var(--vh, 1vh) * 2);
  position: absolute;
  text-align: center;
  transform: translate(-50%, 0%);
  width: auto;
}

#buttonAddOne, #buttonSubtractOne {
  font-size: calc(var(--vh, 1vh) * 3); 
  height: calc(var(--vh, 1vh) * 8);
  vertical-align: middle;
  width: calc(var(--vh, 1vh) * 8);
}