* {
  box-sizing: border-box; /* Include borders in div size */
  font-family: 'Sancreek', cursive; /* 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 */
}

input {
  -webkit-user-select: text; /* Chrome, Opera, Safari */
  -moz-user-select: text; /* Firefox 2+ */
  -ms-user-select: text; /* IE 10+ */
  user-select: text; /* Standard syntax */
}

#container-game {
  background: #452925;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}

h1 {
  background: #be302f;
  color: #452925;
  font-size: calc(var(--vh, 1vh) * 10);
  text-align: center;
}

h3 {
  align-content: center;
  background: #be302f;
  border: 1px #be302f solid;
  color: #452925;
  display: flex;
  font-size: calc(var(--vh, 1vh) * 2);
  flex-wrap: wrap;
  float: left;
  height: 100%;
  justify-content: center;
  text-orientation: upright;
  width: 2vw;
  writing-mode: vertical-rl;
}

#boxDeckSelector {
  align-content: center;
  color: #452925;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: calc(var(--vh, 1vh) * 4);
  line-height: calc(var(--vh, 1vh) * 7.5);
  height: calc(var(--vh, 1vh) * 7.5);  
  justify-content: center;
  left: calc(var(--vh, 1vh) * 1);
  position: absolute;
  top: calc(var(--vh, 1vh) * 3);
  width: calc(var(--vh, 1vh) * 25);  
}

#trayDeckNumber {
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  padding: calc(var(--vh, 1vh) * .5);
  text-align: center;
  width: calc(var(--vh, 1vh) * 10);
  vertical-align: middle;
}

#boxButtons {
  align-content: space-around;
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 14);
  justify-content: space-around;
  right: calc(var(--vh, 1vh) * 2);
  position: absolute;
  top: 0;
  width: calc(var(--vh, 1vh) * 35);
}

#buttonHowTo, #buttonInstructions {
  font-size: 1.5vh;
  height: calc(var(--vh, 1vh) * 6);
  position: relative;
  width: calc(var(--vh, 1vh) * 15);
}

#deckUnsorted {
  display: none;
}

#deckSorted .gridPipsLarge, #deckSorted .gridPipsSmall, #deckSorted .bar {
  visibility: hidden;
}

#deckSorted {
  height: auto;
  left: calc(var(--vh, 1vh) * 1);
  margin-top: calc(var(--vh, 1vh) * 1);
  position: absolute;
  top: calc(var(--vh, 1vh) * 14);
  width: calc(100vw - calc(var(--vh, 1vh) * 2));
}

.domino {
  background: white;
  border: dimgray 1px solid;;
  border-radius: calc(var(--vh, 1vh) * .5);
  box-shadow: darkgray calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .2);
  color: black;
  display: grid;
  float: left;
  grid-template-rows: 5fr .5fr 5fr;
  height: calc(var(--vh, 1vh) * 9.5);
  margin: calc(var(--vh, 1vh) * .25);
  padding: calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .133);
  position: relative;
  text-align: center;
  transform-origin: -50% -50%;
  width: calc(var(--vh, 1vh) * 4.75);
}

#deckSorted .domino {
  height: 5vw;
  width: 2.5vw;
}

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

.gridPipsLarge {
  display: grid;
  gap: 2%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  padding: 5%;
}

.gridPipsSmall {
  display: grid;
  gap: 2%;
  grid-template-columns: 1fr .33fr 1fr .33fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  padding: 5%;
}

.pip {border-radius: 50%;}

.d1 {background: #773c00; box-shadow: inset .75vh .75vh .5vh #5a2d01;}
.d2 {background: olivedrab; box-shadow: inset .75vh .75vh .5vh rgb(66, 88, 22);}
.d3 {background: darkred; box-shadow: inset .75vh .75vh .5vh rgb(70, 0, 0);}
.d4 {background: gray; box-shadow: inset .75vh .75vh .5vh rgb(90, 90, 90);}
.d5 {background: black;}
.d6 {background: yellow; box-shadow: inset .75vh .75vh .5vh rgb(207, 207, 0);}
.d7 {background: magenta; box-shadow: inset .75vh .75vh .5vh rgb(170, 0, 170);}
.d8 {background: darkblue; box-shadow: inset .75vh .75vh .5vh rgb(1, 1, 73);}
.d9 {background: purple; box-shadow: inset .75vh .75vh .5vh rgb(71, 0, 71);}
.d10 {background: orange; box-shadow: inset .75vh .75vh .5vh rgb(204, 133, 1);}
.d11 {background: green; box-shadow: inset .75vh .75vh .5vh rgb(0, 75, 0);}
.d12 {background: red; box-shadow: inset .75vh .75vh .5vh rgb(173, 1, 1);}

.d11M {
  grid-area: 2 / 3 / 4 / 4;
  background: green;
  box-shadow: inset .75vh .75vh .5vh rgb(0, 75, 0);
  height: 50%;
  margin-top: 50%;
}
.bar {
  background: black;
  height: 100%;
  margin-left: 5%;
  width: 90%;
}

#hand, #board, #boxDiscard {
  border: #be302f 2px solid;
  top: calc(16vw + calc(var(--vh, 1vh) * 16));
  display: block;
  height: calc(var(--vh, 1vh) * 14);
  left: calc(var(--vh, 1vh) * 1);
  overflow: hidden;
  position: absolute;
  width: calc(100vw - calc(var(--vh, 1vh) * 2));
}

#hand {
  border-bottom-width: 1px; 
}

#board {
  border-top-width: 1px; 
  z-index: 1;
}

#board, #boxDiscard {
  border:#be302f 2px solid;
  height: calc(-16vw + calc(var(--vh, 1vh) * 69)); 
  top: calc(16vw + calc(var(--vh, 1vh) * 30))
}

#boxDiscard {
  border: #be302f 2px solid;
  left: unset;
  position: absolute;
  right: calc(var(--vh, 1vh) * 1);
  width: calc(var(--vh, 1vh) * 40);
}

#boxDiscard h1 {
  align-content: center;
  color: #452925;
  display: flex;
  flex-wrap: wrap;
  font-size: calc(var(--vh, 1vh) * 2);
  font-weight: bold;
  justify-content: center;
  width: 100%;
}

[id^="space"] {  
  border-radius: .1%;
  float: left;
  height: calc(var(--vh, 1vh) * 9.375 * .25);
  position: relative;
  width: calc(var(--vh, 1vh) * 9.375 * .25);
}

[id^="space"] .domino {
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#hand .domino {
  border-radius: calc(var(--vh, 1vh) * .5);
  float: left;
  height: calc(var(--vh, 1vh) * 10);
  margin: calc(var(--vh, 1vh) * .5);
  margin-top: calc(var(--vh, 1vh) * 2.75);
  max-height: 14vw;
  max-width: 7vw;
  position: relative;
  transform-origin: 50% 50%;
  width: calc(var(--vh, 1vh) * 5);
  z-index: 1;
}

#board .domino {
  border-radius: calc(var(--vh, 1vh) * 1.5 * .3);
  box-shadow: darkgray calc(var(--vh, 1vh) * -.3) calc(var(--vh, 1vh) * .3);
  height: calc(var(--vh, 1vh) * 18.75 * .5);
  padding: .2% .1%;
  transform: rotate(270deg) translate(-200%, -75%);
  width: calc(var(--vh, 1vh) * 9.375 * .5);
}

#hand .domino p, #board .domino p {
  background: white;
  border-radius: calc(var(--vh, 1vh) * 1); 
  color: #452925;
  font-size: calc(var(--vh, 1vh) * 2.5);
  height: calc(var(--vh, 1vh) * 3);  
  left: 50%;
  position: absolute;
  text-align: center;
  top: 0;  
  transform: translate(-50%, -85%) rotate(0deg);
  transform-origin: 50%, 50%;
  width: 70%;
}

#board .domino p {
  left: 100%;
  top: 50%;
  transform: translate(-5%, -50%) rotate(90deg);
}

/* Start modal */
#modalStart {
  background: #452925;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
}

#modalStartInner {
  background-image: url(resources/objects/backgroundMexicanTrain.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: .5vh;
  box-shadow: #6b3601 1vh 1vh .5vh .5vh;
  color: #452925;
  font-size: 2.5vh;
  height: 76vh;
  left: 50%;
  padding-top: 54vh;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 85vh;
  z-index: 1;
}

#modalStartInner p {
  font-size: calc(var(--vh, 1vh) * 4); 
  margin-bottom: calc(var(--vh, 1vh) * 1.5); 
}

#modalStartInner button {
  font-size: calc(var(--vh, 1vh) * 3); 
  height: calc(var(--vh, 1vh) * 5);
  text-align: center;
  width: calc(var(--vh, 1vh) * 15);
  position: relative;
}

.radio {
  display: inline;
  margin-left: calc(var(--vh, 1vh) * 3);
  margin-right: calc(var(--vh, 1vh) * 2);
  transform: scale(2.5);
  
  -ms-transform: scale(2.5);
  -webkit-transform: scale(2.5);
  -o-transform: scale(2.5);
  -moz-transform: scale(2.5);
}

label {
  display: inline;
  float: left;
}