::-webkit-scrollbar { width:0.5vw; }
::-webkit-scrollbar-track { background-color:rgba(255,255,255,0.2); }
::-webkit-scrollbar-thumb { background:#3F9111; }

@font-face {
  font-family:CardChar;
  src:url("stuff/ph.ttf");
}

body {
  background-color:#3F9111;
  font-size:1vw;
  user-select:none;
}

#top-row, #bottom-row, #non-card-row {
  display:flex;
  justify-content:center;
}

.card-area {
  background-color:#FFFFFF;
  background-image:url("stuff/diamondbg.png");
  background-repeat:repeat;
  border:0.15vw solid #000000;
  border-radius:0.5vw;
  box-sizing:border-box;
  cursor:pointer;
  font-family:Georgia;
  font-size:5.5vw;
  height:16vw;
  margin:2vw 1.5vw 0 1.5vw;
  padding:4vw 0 2vw 0;
  text-align:center;
  width:10vw;
}

#deck2, #pile1, #pile2, #pile3, #pile4 {
  background-color:rgba(0,0,0,0);
  background-image:none;
}

#deck1 {
  background-image:url("stuff/diamondbg.png");
}

.between {
  border:0.15vw solid rgba(0, 0, 0, 0.0);
  border-radius:0.5vw;
  margin:2vw 1.5vw 0 1.5vw;
  width:10vw;
}

#dialogue {
  background-color:rgba(255,255,255,0.2);
  border:0.15vw solid #000000;
  border-radius:0.5vw 0 0 0.5vw;
  box-sizing:border-box;
  height:8vw;
  margin:2vw 1.5vw 0 1.5vw;
  overflow-y:auto;
  padding:0.5vw;
  user-select:text;
  width:23.5vw;
  word-wrap:break-word;
}

#reset {
  background-color:rgba(255,255,255,0.2);
  border:0.15vw solid #000000;
  border-radius:0.5vw;
  box-sizing:border-box;
  cursor:pointer;
  font-size:6vw;
  height:8vw;
  margin:2vw 1.5vw 0 1.5vw;
  padding:0.5vw;
  text-align:center;
  width:10vw;
}