* {
    box-sizing: border-box;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin:0 auto;
    padding:0;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
  }
  
html, body {
  color: white;
  background-image: url(resources/objects/backgroundWoodLightLarge.png);
  background-size: cover;
  height: 100%;
  margin: 0; 
}

.full-height {
  height: 100%;
  padding:.5%; 
}
  
#game-container {
  position: relative;
  height: 872px;
  left: 50%;
  margin: 0;
  max-height: 99%;
  max-width: 99%;
  padding-right:-18%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 1810px;
}

.tray-bank {
  background: maroon;
  border: maroon 1px solid;
  margin-bottom: 1%;
  height: 49%;
  width: 98%;
}
  
.tray-label {
  background: white;  
  border-right: white 1px solid;
  color: maroon;
  float: left;
  font-size: 2vw;
  height: 100%;
  position: relative;
  text-align: center;
  text-orientation: upright;
  width: 3%;
  writing-mode: vertical-rl;
}


.grid-container {
  float: left;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100%;

  width:82%;
}

.tray-letter {
  border: tan 1px solid;
  height: 100%;
  position: relative;
  width: 100%; 
}

.tray-discard {
  border: tan 1px solid;
  color: tan;
  float: right;
  font-size: calc(var(--vh, 1vh) * 4);
  height: 100%;
  padding-top: 1vh;
  position: relative;
  text-align: center;
  width: 15%;
}

.tiles {
  background-image: url(resources/objects/backgroundWoodLight.jpg);
  color: black;
  border-bottom: brown 3px solid;
  border-right: brown 3px solid;
  float: left;
  font-size: calc(var(--vh, 1vh) * 8);
  left: 50%;
  line-height: calc(var(--vh, 1vh) * 12);
  height: calc(var(--vh, 1vh) * 12);
  top: 50%;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: calc(var(--vh, 1vh) * 12);
}

.tiles:after {
  bottom: calc(var(--vh, 1vh) * -4);
  font-size: calc(var(--vh, 1vh) * 3);
  position: absolute;
  text-align: center;
  left: calc(var(--vh, 1vh) * 8.1);
  right: calc(var(--vh, 1vh) * 0);
}

.S1:after {content: '1';}
.S2:after {content: '2';}
.S3:after {content: '3';}
.S4:after {content: '4';}
.S5:after {content: '5';}
.S6:after {content: '6';}
.S7:after {content: '7';}
.S8:after {content: '8';}
.S10:after {content: '10';}

.tray-player {
  background: maroon;
  border: maroon 1px solid;
  height: 49%;
  position: relative;
  width: 98%;
}

.tray-tile-player {
  background: maroon;
  border: tan 1px solid;
  border-top-width: calc(var(--vh, 1vh) * 5);
  float: left;
  height: calc(var(--vh, 1vh) * 25);
  margin-top: calc(var(--vh, 1vh) * 10);
  margin-left: calc(var(--vh, 1vh) * 2);
  position: relative;
  width: calc(var(--vh, 1vh) * 20);
  z-index: 1;
}

.tray-tile-player:after {
  color: black;
  left: 50%;
  top: calc(var(--vh, 1vh) * -4);
  font-size: calc(var(--vh, 1vh) * 3);
  position: absolute;
  transform: translate(-50%, 0);
}

.tray-order-tiles {
  background: red;
  height: 10%;
  position: relative;
  width: 100%;
}