/* ページ全体の基本 */
body {
  margin: 0;
  padding: 0;
  /* background: linear-gradient(#00111f, #003366);  */
  color: #fff;
  font-family: system-ui, sans-serif;
  overflow-x: hidden;
}
/* 時間によって背景のグラデーション変化 */

/* 夜（18〜21時） */
.night {
  background: linear-gradient(#000814, #001d3d);
}

/* 朝（4〜7時） */
.morning {
  background: linear-gradient(#001d3d, #02a9cb);
}

/* 昼（7〜16時） */
.noon {
  background: linear-gradient( #1e90ff, #87ceeb);
}

/* 夕方（16〜18時） */
.evening {
  background: linear-gradient(#f85d37, #feb47b);
}

/* 深夜（21時以降） */
.late {
  background: linear-gradient(#00111f, #003366);
}

/* 真夜中（23〜4時） */
.midnight {
  background: linear-gradient(#000000, #000814);
}


/* ここから雪要素のはず */

/* コンテンツは雪の下ではなく上に表示 */
/* .content {
  position: relative;
  z-index: 2;
  text-align: center;
  top: 30%;
} */

/* 雪コンテナ（画面全体を覆う） */
/* .snow-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
} */

/* 雪の1粒 */
/* .snowflake {
  position: absolute;
  top: -10px;
  color: #fff;
  font-size: 10px;
  opacity: 0;
  user-select: none;
  will-change: transform, opacity;
  animation: fallAndFade 5s linear forwards;
} */

/* @keyframes fallAndFade {
  0% {
    transform: translate3d(0, -10px, 0);
    opacity: 0;
  }
  10% {
    opacity: 0.8; 
  }
  100% {
    transform: translate3d(0, 110vh, 0);
    opacity: 0.8;
  }
} 

ここまでが雪要素
*/


/* 星空 */
canvas {
      display: block;
      width: 100vw;
      height: 100vh;
    }

#starfield {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 背景にする */
}