#main{
	height: 90vh;
	width: 80vw;
	background-color: #f5f7fa;
	margin: auto;
	padding: 2rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-radius: 1rem;
	font-family: Helvetica, Arial, sans-serif;
}

#center_main{
	display: grid;
	grid-template-areas:
		"A B B C"
		"D D F C"
		"G G G C"
		"E E Q Q";
	gap: 1rem;
	width: 100%;
	margin: 0 auto;
}

.center{
	background: #ffffff;
	border: 1px solid #ddd;
	text-align: center;
	border-radius: 1rem;
	padding: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.center:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.center_head{
	background: #ffffff;
	border: 1px solid #ddd;
	text-align: center;
	border-radius: 1rem;
	padding: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.text{
	text-align: justify;
	color: #333;
	line-height: 1.6;
}

.center_head:nth-child(1){grid-area: A;}
.center:nth-child(2){grid-area: B;}
.center:nth-child(3){grid-area: C;}
.center:nth-child(4){grid-area: D;}
.center:nth-child(5){grid-area: F;}
.center:nth-child(6){grid-area: G;}
.center:nth-child(7){grid-area: E;}
.center:nth-child(8){grid-area: Q;}

@media screen and (max-width: 767px) {
    #center_main {
		display: flex;
		flex-direction: column;
	}
}