body {
	background: #d2dfff;
	font-family : Arial, 'sans serif';
	margin : 10px;
	padding : 10px;
	grid-template-columns: 1fr 1fr;
}

.gridBox {
	background-color : white;
	padding : 10px;
	-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 24px 27px rgba(0,0,0,0); 
	box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 24px 27px rgba(0,0,0,0);

/* schatten generiert mit https://html-css-js.com/css/generator/box-shadow/ */
}
.color1{color: tomato;}
.color2{color:blue;}
.container {
	padding : 10px;
	display : grid;
	gap : 20px;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
							"1 2"
							"3 4"				
							"5 6"
							"7 8";
	}
		.button {
			background-color: #6062d8;
			border: none;
			color: white;
			padding: 20px 34px;
			text-align: center;
			text-decoration: none;
			display: grid;
			font-size: 20px;
			margin: 4px 2px;
			cursor: pointer;}

.eins{
	grid-area: 1;
	}
.zwei{
	grid-area: 2;
	}
.drei{
	grid-area: 3;
	}
.vier{
	grid-area: 4;
	}
.fünf{
	grid-area: 5;
	}
.sechs{
	grid-area: 6;
	}
.sieben{
	grid-area: 7;
	}
.acht{
	grid-area: 8;
	}