.clock-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #111827;
  color: #fff;
  display: inline-block;
  padding: 20px 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.time-display {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.date-display {
  font-size: 1rem;
  color: #9ca3af;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

function updateClock() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  
  document.getElementById("clock").innerText = `${hours}:${minutes}:${seconds}`;
  
  const options = { weekday: "short", month: "short", day: "numeric" };
  document.getElementById("dateinnerText").innerText = now.toLocaleDateString("en-US", options);
}

setInterval(updateClock, 1000);
updateClock();