body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

	font-family: Arial, Helvetica, sans-serif;
  
	margin: 0px;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100); /* --vh defined in index.html*/

  background-image: url('squares.svg');
	background-color: lightgray;
	background-attachment: fixed;

}

html { 
  width: 100%;
  height: 100%;
}

#content {
  width: 100%;
  height: 100%;
}

#root {
  width: 100%;
  height: 100%;
}

/**
top-section, middle-section, bottom-section
are all shared across the game pages. 
**/
.top-section, .bottom-section {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	background-color: black;
  color: white;
}

.top-section {
  height: 50px;
}

.bottom-section {
  height: 40px;
}
  
/* height = 100% - top and bottom section heights*/
.middle-section {
  display: inline-flex;
	width: 100%;
	height: calc(100% - 90px); 
  min-height: calc(100% - 90px);
	max-width: 800px;
	margin: auto;
}

.section-block {
  margin: auto;
  height: 80%;
}