* {
margin: 0;
	padding: 0;
}

body {
	/* 
	    background-color: #D65076;
	*/
	background-image: url("xmas.jpg");
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
}

a {
  color: white;
  font-weight: bold;
}

div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color:white;
}

div#banner {
	position: absolute;
	top: 0;
	left: 0;
	background-color: black;
	width: 100%;
	padding: 0px 0px 10px 0px;   //top, right, bottom, left
}

div#banner-content {
	width: 100%;
	margin: 0 auto;
	border: none;
	}
	
div#main-content {
	padding-top: 40px;
}


.title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-weight: bold;
	text-align:center;
	  margin: auto;
	color:white;
	padding: 20px 0px 10px 0px;   //top, right, bottom, left
}

.row {
	  display: table;
	  margin: auto;
	  border-spacing: 3px;
	  height: 40px;
}


.right, .close, .wrong, .default, .spacer  {
	display: table-cell;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	text-align:center;
	width: 40px;
	height: 40px;
}

.right {
	border: 3px solid #000000;
	color:white;
	background:#6AAA64;
}

.close {
	border: 3px solid #000000;
	color:white;
	background:#C9B458;
}

.wrong {
	border: 3px solid #000000;
	color:black;
	background:white;
}

.default {
	border: 3px solid #CCCCCC;
	color:black;
	background:white;
}

.spacer {
	border: 3px solid black;
	color:black;
	background:black;
}

.keyboard {
	display: table;
	margin: auto;
	border-spacing: 3px;
	border-radius: 10px;
}

.lett {
	border: 3px solid #ffffff;
	display: table-cell;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:black;
	font-size: 22px;
	text-align:center;
	background:#cccccc;
	width: 50px;
	height: 40px;
	border-radius: 10px;
	cursor: pointer;
}

.funclett {
	border: 3px solid #ffffff;
	display: table-cell;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:black;
	font-size: 18px;
	text-align:center;
	background:#cccccc;
	width: 50px;
	height: 40px;
	border-radius: 10px;
	cursor: pointer;
}

.enter {
  border: 3px solid #ffffff;
	display: table-cell;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:black;
	font-size:15px;
	text-align:center;
	background:#cccccc;
	width: 80px;
	height: 40px;
	border-radius: 10px;
	cursor: pointer;
}

.button {
	border: none;
	display: table-cell;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:black;
	font-size: 18px;
	text-align:center;
	background:#cccccc;
	width: 80px;
	border-radius: 10px;
	cursor: pointer;
	background-color: Transparent;
}




/*
   SIZES ARE:
       320px - 480px: Mobile devices.
       481px - 768px: iPads, Tablets.
       769px - 1024px: Small screens, laptops.
*/



/* On screens that are 1024px or less, set the background color to blue */

@media screen and (max-width: 1024px) {

	.title {
		font-size: 28px;
	}
}

@media screen and (max-width: 750px) {

	.title {
		font-size: 24px;
	}
	
@media screen and (max-width: 480px) {

	.title {
		font-size: 18px;
	}
}