*{
 margin : 0;
 padding: 0;
 box-sizing: border-box;
}


body{
	background-color: white;
	margin: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	
}

h1{
	color: rgb(0,255,0);
	text-align: center;
	display: block;
}

p{
	color: rgb(0,255,0);
	text-align: center;
	display: block;
}

#grid-container {
	display: grid;
	gap: 0px; /* 각 셀 간 간격 */
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
	/* grid-template-columns:auto auto auto; */
	width: 100%; /* 전체 너비 채우기 */
	max-width: 1200px; /* 최대 너비 제한 */
	margin:0;
	padding :0px;

  }

#snake1, #snake2, #snake3 {
	display: flex;
      justify-content: center; /* 가로 중앙 정렬 */
	  padding: 0;
	  margin:0;
	  /* align-items: center; */
}

@media only screen and (max-width: 704px)
{

	#grid-container {
		display: grid;
		gap: 0px; /* 각 셀 간 간격 */
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
		/* grid-template-columns:auto auto auto; */
		height: 100%; /* 전체 너비 채우기 */
		max-width: 1200px; /* 최대 너비 제한 */
		margin:0;
		padding :0px;

}