styles.css

*, *::before, *::after {                                                                                 /* For Default values*/
  box-sizing: border-box;                                                                                  /* Includes padding and border in elements total width an d height */
  font-family: 'Poppins', sans-serif;                                                                      /* font used (with metalink in HTML) */
}

body {                                                                                                   /* body (essentially the background) */
  background: linear-gradient(to right, rgb(177, 178, 189), rgb(165, 168, 149));                     /* gradient from right grey to yellow*/
  display: flex;                                                                                         /* to center the clock, first display to flex*/
  min-height: 100vh;                                                                                     /* set the minimum height to 100vh so we can position the clock*/
  justify-content: center;                                                                               /* center the clock in the middle of the screen (at top before align-items */
  align-items: center;                                                                                   /* then align-items center to put the clock exactly in the middle of the screen. */
}