/* This section affects the text above the box, and any
   additional '<h1>text</h1>' added in the future. */
h1 {
	color: darkorange;
	font-size: 30px;
	text-align: center;
}
p {
	color: black;
	font-size: 30px;
	text-align: center;
}

/* This section centers everything in the html 'gameBody'
   in the center of the screen. This does not affect
   h1 because it is outside of gameBody. */
gameBody, html {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f0f0f0;
}

/* This section edits the appearance and position of the outter
   box. Using '.name' edits any class by the same name in the
   html. In this case it's 'gameScreen'. */
.gameScreen {
	width: 500px;
	height: 500px;
	border: 2px solid #000;
	position: relative;
	overflow: hidden;
}

/* This section edits any class object in html by the name of
   'player'. */
.player1 {
	width: 100px;
	height: 50px;
	background-color: brown;
	position: absolute;
	top: 50%;
	left: 30%;
	transform: translate(-50%, -50%);
}
.player2 {
	width: 100px;
	height: 50px;
	background-color: gray;
	position: absolute;
	top: 50%;
	left: 70%;
	transform: translate(-50%, -50%);
}