* {
	box-sizing: border-box;
	scrollbar-gutter: stable both-edges;
}

aside {
	float: right;
}

body {
	background: #358a46;
	display: grid;
	grid-template-rows: auto 1fr auto;
	font-family: -apple-system, BlinkMacSystemFont,
	"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
	"Fira Sans", "Droid Sans", "Helvetica Neue",
	sans-serif;
	font-feature-settings: "kern" 1;
	font-kerning: normal;
}

button {
	box-shadow: rgb(202, 239, 171) 0px 1px 0px 0px inset;
	border-radius: 3px;
	border: 1px solid rgb(38, 138, 22);
	cursor: pointer;
	font-weight: bold;
	max-height: 3em;
	padding: 6px;
	background: linear-gradient(rgb(92, 184, 17) 5%, rgb(119, 212, 42) 100%) rgb(92, 184, 17);
}

button:disabled, button[disabled] {
	cursor: auto;
}

header nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 1.25rem;
}
header nav ul li {
	display: inline;
	float: right;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
header nav ul li a {
	color: black;
	display: block;
	text-decoration: none;
}
header nav ul li.nav-menu-title {
	background: #126623;
	float: left;
	text-transform: uppercase;
	font-weight: 700;
	margin-right: 4px;
}
header nav ul li.nav-menu-margin-left {
	margin-left: 4px;
}
form input {
	margin-bottom: 8px;
}

main {
	background: #126623;
	padding-left: 1em;
	padding-right: 1em;
}

#games {
	border-collapse: collapse;
}
#games tr:nth-child(even){background-color: #f2f2f2;}
#games tr:hover {background-color: #ddd;}
#games td, #games th {
  border: 1px solid #ddd;
  padding: 8px;
}
#games th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

#remaining_letters {
	max-width: 405px;
}

#rack-area {
	max-width: 405px;
}
#rack {
	display:inline-block;
	font-weight: bold;
}
#board {
	border-collapse: collapse;
	font-weight: bold;
	max-width: 405px;
}
#board tr td, #rack tr td {
	background: #47b75e;
	border: 1px solid #d4fcdb;
	min-width: 27px;
	height: 27px;
	text-align: center;
}

#board tr td.tw {
	background:#E60000;
}
#board tr td.dw {
	background:#F86969;
}
#board tr td.tl {
	background:#3675FA;
}
#board tr td.dl {
	background:#22ACD8;
}
#board tr td.start {
	background:#ff5500;
}

#board tr td.letter, #rack tr td.letter {
	background:#f3e797;
}
.placed {
	color:red;
}

.points {
	display: inline;
	font-weight: normal;
	font-size: 8pt;
}

@media only screen and (min-width: 48rem) {
	body {
		max-width:48rem;
		margin-left: auto;
		margin-right: auto;
	}
}