html
{
	height:100%;
}
body
{
background-color: #000000;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 120%;
border: 0;
margin: 0;
height: 100%;
}
#container
{
width: 100%;
border: 0;
margin: 0;
min-height: 100%;
margin-bottom: -120px; /* to allow for footer */
position: relative;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-areas: 'game game wallet';
}
#header
{
background: #000000 url('roulette-wheel-large.jpg') no-repeat fixed top right;
width: 100%;
height: 20%;
margin: 0; /* consider increasing */
border: 0;
padding: 15px; /* consider increasing */
box-sizing: border-box;
}
h1
{
	color: Silver;
	font-size: 200%;
	text-align: center;
}
h2
{
	font-size:150%;
	color:#4CAF50; /* green */
}
h3
{
	font-size:120%;
	color:#4CAF50; /* green */
}
#game /* the main content */
{
margin: 10px;
padding: 15px;
border: 0;
box-sizing: border-box;
grid-area: game;
}
#game p
{
text-align: justify;
}
#wallet /* displays number of chips */
{
padding: 15px;
margin: 10px;
border: 0;
box-sizing: border-box;
grid-area: wallet;
}
#bar p
{
text-align: justify;
}
#footer
{
width: 100%;
height: 120px;
position: relative;
text-align: center;
padding: 30px;
box-sizing: border-box;
}
/* helps ensure the footer remains at the bottom of the page, even if there is not enough content to fill the page */
#clearfooter
{
	height: 120px;
	clear: both;
}
/* for buttons and other interactive ui controls */
.ui
{
	background-color: #4CAF50; /* Green */
	font-size: 120%;
	padding: 16px 32px;
	font-weight:bold;
	border-radius: 8px;
}
#tip
{
	font-size:80%;
}
fieldset
{
	border:0;
}