body {
	
}
.container {
	border: 1px solid #000;
	margin:  auto;
	width: 1500px;
}
.grid-container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 15px;
	grid-template-rows: [row1-start] 180px repeat(12, minmax(20px, 2fr));;
}
.grid-container .box {
	background-color: #968761;
	background-color:  rgba(224,198,150,0.5);
}
.grid-container .box p {
	text-align: center;
}
.grid-container .box p span {
	background-color: #599859;
	padding: 5px 10px;
	border-radius: 50vh;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 20px;
}
pre {
	text-align: center;
	max-width: 300px;
	margin:  auto;
}
.grid-container .box {
	display: flex;
	flex-direction: column;
	justify-content: center;

}
.grid-container .box > div {
	width: 100%;
}
.grid-container .box.one {
	grid-column: span 12;
}
.grid-container .box.two {
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row: span 4;

}
.grid-container .box.three {
	grid-column:  span 5;
	grid-row:  span 2;
}
.grid-container .box.four {
	grid-column-start: 10;
	grid-column-end: 13;
	grid-row-start: 2;
	grid-row-end:  4;
	
}
.grid-container .box.five {
	grid-row:  span 3;
}
.grid-container .box.six {
	grid-column:  span 7;
}
.grid-container .box.seven {
	grid-column-start: 9;
	grid-column-end:13 ;
	grid-row-start: 5;
	grid-row-end: 7;
}
.grid-container .box.height {
	grid-column-start: 6;
	grid-column-end:8 ;
	grid-row-start: 4;
	grid-row-end: 6;
}
.grid-container .box.twenty {
	grid-column-start: 8;
	grid-column-end: 10;
	grid-row-start: 5;
	/*grid-row: span 6;*/
	grid-row-end: 8;
	background-color:  rgba(255,255,150,0.5);
}
.grid-container .box.nine {
	justify-self: center;
	grid-column: span 4;
}
.grid-container .box.twelve {
	grid-row: span 7;
}
.grid-container .box.fifteen {
	grid-row-start:-7;
	grid-row-end:  -1;
	grid-row-start: -4;
	grid-column-end: -1;
	grid-column-start: -4;
}
.grid-container .box.heighteen {
	grid-row-start:-3;
	grid-row-end:  -2;
}
.grid-container .box.seventeen,
.grid-container .box.nineteen {
	grid-row-start:-2;
	grid-row-end:  -1;
}
pre {
	display: none;
}
.rules {
	font-size: 10px;
	text-align: center;
	font-style: italic;
	font-family:  monospace;
}