﻿* {
  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;
}

.pile-draw {
  background: #250F57;
  border: white 2px solid;
  border-radius: 10px;
  font-size: 2vw;
  height: 40%;
  margin:2.5%;
  padding: .5%;
  position: absolute;
  text-align: center;
  top:0;
  width: 40%;
}

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

.tray-player {
  height: 50%;
  left: 50%;
  text-align: center;
  width: 100%;
  bottom:0;
  position: absolute;
  transform: translate(-50%, 0%);
}

.card-player {
  background:#69B121;
  border: #250F57 2px solid;
  border-radius: 10px;
  float: left;
  font-size: 2vw;
  height: 96%;
  margin:0 2%;
  padding: .5%;
  position: relative;
  width: 16%;
}

.card-player img {
  height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -43%);
  width: auto;
}

.pile-discard {
  background: #d72a84;
  border: #250F57 2px solid;
  border-radius: 10px;
  font-size: 2vw;
  height: 40%;
  left:55%;
  margin:2.5%;
  padding: .5%;
  position: absolute;
  text-align: center;
  top:0;
  width: 40%;
}

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

.button-howto {
  height: 5%;
  left: 50%;
  position: absolute; 
  top:20%;
  transform: translate(-50%, -50%);
  width: 10%;
}

.button-instructions {
  height: 5%;
  left: 50%;
  position: absolute; 
  top:35%;
  transform: translate(-50%, -50%);
  width: 10%;
}