body {
	background-color: #8BFEA8;
	font-family: Lato;
}
.p1 {
	background-color: #FFA8A8
}
.p2 {
	background-color: #7BA7E1
}
section {
	width: 100%;
	margin: 0px auto;
	text-align: center;
}
header {
	margin-top: 50px;
	font-size: 400%;
	padding-bottom: 50px; 
}
main {
	display: flex;
	flex-direction: row;
}
article {
	padding: 0% 3% ;
	width: calc(44% - 350px);
	font-size: 400%;
	text-align: left;
}
span {
	font-size: 40%;
}
table {
	margin: 0px auto;
}
td {
	width: 99px;
	height: 99px;
	border: 1px solid black;
}
div {
	z-index: 10;
	position: fixed;
	width: 700.5px;
	height: 595px;
	margin-left: calc(50% - 350px);
	background-color: rgba(241, 236, 255, 0.6);
	display: none;
}
h2 {
	margin-top: 100px;
	font-size: 400%;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('fonts/lato-thin-webfont'), local('fonts/lato-thin-webfont'), url(fonts/lato-thin-webfont.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}