/* Canvas を背景いっぱいに敷き、最背面に配置 */
#bg-clock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: #5563DE; /* 時計の背景色。お好みで変更可 */
}

/* 既存のスタイル */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#time {
  font-size: 9rem;
  margin: 0;
}

#date {
  font-size: 2rem;
  margin: 0 0 2rem;
  font-weight: 900;
}

/* 日付／時刻の文字に濃い影をつけて視認性アップ */
#time,
#date {
  color: #fff;
  /* 横2px・縦2pxに8pxのぼかしで、濃い黒影を追加 */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}


.weather {
  display: flex;
  align-items: center;
  font-size: 2rem;
  text-shadow: 4px 4px 16px rgba(0, 0, 0, 0.8);
  position:absolute;
  bottom:50%;
  right:10%;
}

.weather img {
  width: 48px;
  height: 48px;
  margin-right: 0.5rem;
}

.Clockbutton{
  background-color: #fff;
  border: solid 2px #2f4f4f;
  color: #2f4f4f;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}
.Clockbutton:hover {
  color: #2f4f4f;
  background-color: #b0e0e6;
}