* {
  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/backgroundWoodDark.jpg');
  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-player {
  height: 23%;
  text-align: center;
  width: 42%;
}

.top-left {
  left: 0;
  position: absolute;
  top:0;
}

.bottom-left {
  bottom:0;
  left: 0;
  position: absolute;
}

.top-right {
  right: 0;
  position: absolute;
  top:0;
}

.bottom-right {
  bottom:0;
  right: 0;
  position: absolute;
}

.pile-discard {
  background:#69B121;
  border: #250F57 2px solid;
  float: left;
  height: 100%;
  position: relative;
  width: 16.667%;
}

.pile-discard img {
  height: auto;
  left: 50%;
  max-height: 90%;
  max-width: 90%;
  position: absolute;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.pile-stock {
  background: #d72a84;
  border: #250F57 2px solid;
  border-radius: 5%;
  float: left;
  height: 100%;
  margin: 0 1%;
  padding:.5%;
  position: relative;
  width: 31.333%;
}

.pile-stock img {
  height: auto;
  position: absolute;
  transform: rotate(90deg) translate(0%, 40%);
  width: 60%;
}

.tray-cards {
  height: 52%;
  width: 30.5%;
  position: relative;
}

.tray-card {
  float: left;
  height: 33%;
  position: relative;
  width:20%;
}
.tray-card img {
  left: 50%;
  position: absolute; 
  top:50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.tray-card button {
  height: 30%;
  position: absolute;
  left: 50%;
  position: absolute; 
  top:50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.middle-left {
  left: 5.25%;
  top:50%;
  position: absolute;
  transform: translate(0%, -50%);
}

.middle-right {
  right: 5.25%;
  top:50%;
  position: absolute;
  transform: translate(0%, -50%);
}

.tray-building {
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 15%;
}

.pile-building {
  border: 1px white solid;
  height: 20%;
  padding:2%;
  position: relative;
  text-align: center;
  width: 100%;
}

.pile-building img {
  height: 98%;
  left: 50;
  top:50%;
  position: absolute;
  transform: translate(-50%, -42%) rotate(90deg);
}


.pile-draw {
  background: #250F57;
  height: 20%;
  padding:2%;
  position: relative;
  border-radius: 5%;
  text-align: center;
  width: 100%;
}

.pile-draw img {
  height: 98%;
  left: 50;
  top:48%;
  position: absolute;
  transform: translate(-50%, -42%) rotate(90deg);
}

.setup {
  background-color: #250F57;
  border: #69B121 10px ridge;
  color: #d72a84;
  display: block;
  font-size: 1.8em;
  height: 50%;
  left: 25%;
  overflow: auto; /* Enable scroll if needed */
  outline: 15vh #d72a84 solid;
  padding: 10px 20px 10px 40px;
  position: fixed; /* Stay in place */
  text-align: center;
  top: 25%;
  width: 50%;
  z-index: 1; /* Sit on top */
}

.setup input {
  display: block;
  font-size: 150%;
  margin: 5% auto;
  text-align: center;
  width: 30%;
  height: 30%;
}

.setup button {
  display: block;
  width: 20%;
  height: 15%;
}

@media only screen and (max-width: 1024px) {
  #game-container {
    height: 658px;
    width: 1013px;
   }
  }