body {
  background-color: #C2CC8E; /* light pastel blue */
}

..clock-container {
  text-align: center; /* centers everything inside */
  margin-top: 30px;   /* optional spacing from top */
}

.page-title {
  text-align: center;                     /* center it */
  font-family: 'Zen Old Mincho', serif; /* custom font */
  font-size: 40px;                         /* size */
  font-weight: 300;                        /* boldness */
  color: #798246;                          /* pink */
             
  margin: 40px 0;                          /* spacing top/bottom */
}


.digital-clock {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 48px;
  font-weight: bold;
  color: #4A5124;
  background: #E7EBD3;
  border: 4px solid #4A5124;
  border-radius: 20px;
  padding: 15px 30px;
  display: inline-block; /* this makes centering work */
  box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
  text-align: center;
}

.timezone {
  margin-top: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #4A5124;
}

.banner img {
  display: block;
  margin: 20px auto;   /* centers it */
  max-width: 800px;    /* controls max size */
  width: 100%;         /* makes it responsive */
  height: auto;        /* keeps proportions */
}

.search-box {
  width: 400px;
  padding: 15px; /* makes it taller */