@font-face {
    font-family: bingoFontBody;
    src: url('fonts/quicksand-regular.otf');
}
@font-face {
    font-family: bingoFontBold;
    src: url('fonts/quicksand-bold.otf');
    font-weight: bold;
}
@font-face {
    font-family: bingoFontLightItalic;
    src: url('fonts/quicksand-italic.otf');
    font-style: italic;
}
@font-face {
    font-family: bingoFontRegular;
    src: url('fonts/quicksand-regular.otf');
}
body {	
	margin: 0;
	font-size: 13pt; 
	letter-spacing: -1px;    
	color: black;
	line-height: 140%; 
	font-family: bingoFontBody, Tahoma, Geneva, Helvetica, Arial, sans-serif; 
}
p {
		font-family: bingoFontBody;
}	
b {
		font-family: bingoFontBold;
}
bi	{
	font-family: bingoFontRegular, Tahoma, Geneva, Helvetica, Arial, sans-serif; 
	color: #0059b3;
}
li {
		font-family: bingoFontRegular;
		text-align: left;
		line-height: 150%;
}
h1 {
	font-family: bingoFontBold;
	color: #f0001e;
	font-size: 18pt;
}	
h2	{
	font-family: bingoFontBold; 
	line-height: 120%; 
	letter-spacing: -1px;
	color: #004080;
}
h3 { 	
	font-family: bingoFontBold; 
	color: white; 
	letter-spacing: 0px;
	background-color: #004080; 
	margin-top: 5px;	
	margin-bottom: 5px;
	padding: 8pt; 
}
#button {
	color: white;
	width: 230px;
	padding: 5px;
	padding-left: 12px;
	border-radius: 23px;
	margin-bottom: -9pt;
}
#button a {
	color: white;
  text-decoration: none;
}
.gamesTable {
	border-collapse: separate;
	border-spacing: 0px 10px;
  table-layout: fixed;
}
.gamesTable tr {
	vertical-align: top;
	height: 230px;
}
#gameTitle {
	font-size: 18pt;
	font-family: bingoFontBold;
	line-height: 110%; 
	color: #004080;
	text-align: left;
	margin: 0px;
}
#gameBody {
	font-size: 13pt;
	line-height: 120%; 
	margin-top: 6px;
}
img#shadow {
	display: block;
	box-shadow: 5px 5px 8px #888888;
	vertical-align:top;
}
img#shadow_right {
	display: block;
	box-shadow: 5px 5px 8px #888888;
	vertical-align:top;
	float: right;
}
#withdots	{
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-color: red;
	border-width: 3px;
}
.email	{
	position:fixed;
	padding:0;
	margin:0;
	top:50px;
	left:47px;
	width: 680px;
	height: 380px;
	background-color: #ffedaf;
	box-shadow: 5px 5px 8px #555555;
}

/* layout email on an iPhone screen */
@media (max-width: 414px) {
	.email	{
		top:20px;
		left:20px;
		width: 410px;
	}
}
@media (max-height: 414px) {
	.email	{
		top:20px;
		left:30px;
		height: 380px;
	}
}

/* BELOW: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media3 */
* {
  box-sizing: border-box;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 699px) {
  .container, .navbar, gamesDiv {   
    flex-direction: column;
  }
	img#header	{	
		width: 100%;
	}
	#gameTitle {
		font-size: 24pt;
	}
	#gameBody {
		font-size: 15pt;
	}
}

.kreet	{
	background: #004080;
	border-style: solid;
	border-width: 0px 0px 2px 0px;
	border-color: white;
}
.header {
  text-align: center;
  background: #1abc9c;
  color: white;
  min-height: 200px;
	background: url(images/GameroomBackground2duo.jpg) left top no-repeat, url(images/GameroomBackground1duo.jpg) right top no-repeat;
}
img.book {
	border: 1px solid #004080;
	border-radius: 0.5px;
	width: 49%;
}
img:hover.book { box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); }

.navbar {
/*  display: inline; */
  background-color: #444;
  padding: 14px 8px;
	border-style: solid;
	border-width: 2px 0px 0px 0px;
	border-color: white;
}
.navbar a {
  color: white;
  padding: 14px 8px;
  text-decoration: none;
  text-align: center;
}
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Main content Container div */
.container { 
  display: flex;
  flex-wrap: wrap;
}
/*	Two columns that sits next to each other, or
		mainrightcolumn follows meinleft if browserwindow too small */
/* left column */
.mainleftcolumn {
  flex: 50%;
  background-color: #f1f1f1;
  padding: 20px;
}
/* right column */
.mainrightcolumn {
  flex: 50%;
  background-color: white;
  padding: 20px;
}
.gamesDiv {
  display: flex;
  flex-wrap: wrap;
}
.gameThumbs {
  flex: 65%;
	overflow: hidden;
	margin-bottom: 14px;
}
.gameText {
	flex: 30%;
	margin: 0px 0px 10px 20px;
}
#gotoTopBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
}