html {
  background: #001500;
  height: 100%;
   overflow: hidden;
}

div#turn_screen p {	
	font-size: 27.5vw;
    font-family: monospace;
}

div.turn_screen {
	opacity:    0.5; 
	background: #000; 
	width:      100%;
	height:     100%; 
	z-index:    10;
	top:        0; 
	left:       0; 
	position:   fixed; 
}

div.container {
	background-image: url("images/poker_green_background.jpg");
	background-size: cover;
}

div.col {
	opacity: 50%;
}

.card {
	width: 10%;
}

body {
  margin: 0;
}

.container {
	1% auto 1% auto;
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
    width: 100%; 
	height: 100svh;
	min-width: 95vw;
}
.col {
    background: #444;
    display: flex;
    justify-content: center;
    align-content: center;
}
.col > * {
    object-fit: contain;
    max-height: 100%; max-width: 100%;
}

.player_money, .player_name {
	position: absolute; 
	padding-top: 4%; 
	padding-left: 3%; 
	font-family: monospace; 
	font-size: 4vh; 
	color: #ffffff;
}

.player_info_box_div {
	width: 60%;	
	height: 6vh;
	background: #ffffdd;
	border: 0.5vmin solid black;
	display: none;
}

.player_info_box {
	position: absolute; 
	color: rgb(0 0 0);
    font-size: 1.5vh;
	padding-top: 6%;
	padding-left: 3%; 
	font-family: monospace; 
}

.pot_container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pot_value {
	color: #fff;
	font-family: monospace;
	font-size: 500%;
	padding-bottom: 10%;
}

/* buttons */
.poker_button {
	position: absolute;
	width: 4%;
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1.5% 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  font-family: monospace;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #1b8d63;
}

.button1:hover {
  background-color: #1b8d63;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #ffbf00;
}

.button2:hover {
  background-color: #ffbf00;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #800020;
}

.button3:hover {
  background-color: #800020;
  color: white;
}

.range_buttons {
	position: relative;
    top: -45%;
    margin: 4% 1% 4% 6%;
}

/* range input */
#range_form {
	position: relative;
    display: flex;
    justify-content: center;
    top: 35%;
}

#range_value {
  position: relative;
  display: block;
  text-align: center;
  color: #fff;
}
.range {
  width: 400px;
  height: 15px;
  -webkit-appearance: none;
  background: #0f5428;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #001500;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #001500;
}

/* new game button */
div.new_game_button_class {
	display: flex;
    justify-content: center;
}

/* speech bubble */
.b {
	border: 0.5vmin solid black;
}

.r {
	border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
}

.bubble {
	position: absolute;
    z-index: 1;
	width: 11%;
	height: 19%;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 5vmin;
	background: #ffd;
	box-shadow: 0 -0.25vmin, 0 0.125vmin;
	font-family: "Comic Sans", "Comic Neue", sans-serif;
}

.bubble::before {
	width: 40%;
	height: 100%;
	bottom: -51%;
	border-radius: 50%;
	left: 10%;
	box-shadow: 0.5vmin 0, 2vmin -0.5vmin #ffd, 2vmin -0.5vmin 0 0.5vmin;
	clip-path: polygon(0% 49%, 150% 48%, 150% 100%, 0% 100%);
}

div#hole_cards_player_2 > .bubble::before,
div#hole_cards_player_3 > .bubble::before, 
div#hole_cards_player_4 > .bubble::before, 
div#hole_cards_player_8 > .bubble::before {
    bottom: 27%;
    left: -26%;
    rotate: 83deg;
}

div#hole_cards_player_7 > .bubble::before,
div#hole_cards_player_10 > .bubble::before {
    bottom: 57%;
    left: 10%;
    rotate: 135deg;
}

div#hole_cards_player_5 > .bubble::before,
div#hole_cards_player_6 > .bubble::before,
div#hole_cards_player_9 > .bubble::before {
    bottom: -14%;
    left: 83%;
    rotate: 260deg;
}