* {
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
	background-image: url("../images/board.jpg");
	background-size: cover;
	background-repeat: repeat;
    font-family: "Open Sans", sans-serif;
}

body::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
}

body.game-container {
	text-align: center;
}

body.game-container::after {
	content: none;
	position: relative;
	background-color: transparent;
}

body.game-container > .game-canvas {
	background-color: #000;
}

body.game-container > .game-overlay-container > .game-overlay {
	color: #fff;
	overflow: none;
	font-size: 125%;
}

body.game-container > .game-overlay-container > .game-overlay h1.game-name {
    font-family: "Raleway", serif;
	font-size: 2.5em;
	font-weight: 700;
}

body.game-container > .game-overlay-container > .game-overlay h2.game-version {
    font-family: "Raleway", serif;
	font-size: 1em;
	font-weight: 700;
}

body.game-container > .game-overlay-container > .game-overlay a {
	color: inherit;
}

body.game-container > .game-overlay-container > .game-overlay * {
	cursor: default;
}

body.game-container > .game-overlay-container > .game-overlay .button-collection,
body.game-container > .game-overlay-container > .game-overlay .loading {
	margin-top: 1.5em;
}

body.game-container > .game-overlay-container > .game-overlay .button-collection > button {
    display: block;
    margin: 0.5em auto 0;
}

body.game-container > .game-overlay-container > .game-overlay button {
	font-size: 1.125em;
    font-family: inherit;
	padding: .421875em .75em;
    text-transform: uppercase;
	border-radius: 0.25em;
}

body.game-container > .game-overlay-container > .game-overlay .thin-width {
	max-width: 9.375em;
}

body.game-container > .game-overlay-container > .game-overlay .thin-width * {
	width: 100%;
}

body.game-container > .game-overlay-container > .game-overlay form input,
body.game-container > .game-overlay-container > .game-overlay form select,
body.game-container > .game-overlay-container > .game-overlay form textarea {
	font-size: 1.125em;
	margin-bottom: 0.5em;
	padding: 0.25em 0.375em;
}

body.game-container > .game-overlay-container > .game-overlay p {
	font-size: 1.25em;
	text-align: center;
	margin-bottom: 0.75em;
}

body.game-container > .game-overlay-container > .game-overlay p:last-of-type {
	margin-bottom: 0;
}

body.game-container > .game-overlay-container > .game-overlay h1 {
	font-size: 3em;
}

body.game-container > .information {
	margin-top: 0.5em;
}

body.game-container > .game-overlay-container > .game-overlay > .score,
body.game-container > .game-overlay-container > .game-overlay > .high-score {
	font-family: var(--monospace-font-family);
	position: absolute;
	top: 0.25em;
    vertical-align: top;
}

body.game-container > .game-overlay-container > .game-overlay > .score {
	right: 0.5em;
	text-align: right;
}

body.game-container > .game-overlay-container > .game-overlay > .high-score {
	left: 0.5em;
	text-align: left;
}

body.game-container > .control-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	max-width: 8em;
	margin-left: auto;
	margin-right: auto;
	grid-gap: 0.5em;
	margin-top: 0.5em;
}

body.game-container > .control-buttons > .up {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end: 3;
}

body.game-container > .control-buttons > .left,
body.game-container > .control-buttons > .down,
body.game-container > .control-buttons > .right {
	grid-row-start: 2;
	grid-row-end: 3;
}

body.game-container > .control-buttons > .left {
	grid-column-start: 1;
	grid-column-end: 2;
}

body.game-container > .control-buttons > .down {
	grid-column-start: 2;
	grid-column-end: 3;
}

body.game-container > .control-buttons > .right {
	grid-column-start: 3;
	grid-column-end: 4;
}

body.game-container > .game-overlay-container > .game-overlay form {
	margin: 0 auto;
}

body.game-container > .game-overlay-container > .game-overlay form > fieldset > label {
	margin-top: -0.75em;
	display: block;
}

body.game-container > .game-overlay-container > .game-overlay form > fieldset {
	margin-top: 0.75em;
}

body.game-container > .game-overlay-container > .game-overlay form > fieldset:first-of-type {
	margin-top: 0;
}

body.game-container > .game-overlay-container > .game-overlay > .viewer-content {
	margin: 0 1em;
}