html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;               /* Flexbox有効化 */
  justify-content: center;     /* 横中央 */
  align-items: center;         /* 縦中央 */
  flex-direction: column;      /* 要素を縦に並べる */
  text-align: center;
  background-color: #00000000;  /* 背景色（任意） */
  color: #fff;                 /* 文字色 */
  overflow: hidden;
}

header {
  color: #fff;
  text-align: center;
  z-index: 3;
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
}

footer {
  color: #fff;
  margin-top: 400px;
  margin-left: 0px;
  position: absolute;
  width: calc(100% - 36px); /* マージン分を考慮して幅を設定 */
  display: flex;             /* Flexbox有効化 */
  justify-content: center;   /* 横中央 */
}

footer * {
  white-space: nowrap;         /* 文字が折り返さないようにする */
}

@media (max-width: 1152px) {
  .tetris-grid {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .tetris1-grid {
    text-align: center;
  }
}

.main-content {
  width: 100%;
  max-width: 800px;           /* 任意の幅 */
  position: relative;          /* 相対位置指定を追加 */
  z-index: 2;                 /* 背景と重なるようにするための z-index */
}