 .clockDiv {
    margin: auto;
    color: black;
    width: calc(20% + 200px);
    animation: clock 1s forwards 1.5s;

  }
  
  .clockDiv h1 {
    position: flex;
    text-align: center;
    font-style: normal;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
      "Lucida Sans", Arial, sans-serif;
  }
  
  footer {
    text-align: center;
  }
  
  /* Layout */
  .mainClock {
    display: flex;
    padding: 1em;
    height: 40vh;
    justify-content: center;
    align-items: middle;
      
  }
  
  .clockbox,
  #clock {
    width: 100%;
    height: 100%;
  }

  #clock{
    filter: saturate(10);
  }

 
  
  /* Clock styles */
  .circle {
    fill: none;
    stroke: #000;
    stroke-width: 9;
    stroke-miterlimit: 10;
  }

  
  .mid-circle {
    fill: #000;
  }
  
  .hour-marks {
    fill: none;
    stroke: #000;
    stroke-width: 9;
    stroke-miterlimit: 10;
  }
  
  .hour-arm {
    fill: none;
    stroke: #000;
    stroke-width: 17;
    stroke-miterlimit: 10;
  }
  
  .minute-arm {
    fill: none;
    stroke: #000;
    stroke-width: 11;
    stroke-miterlimit: 10;
  }
  
  .second-arm {
    fill: none;
    stroke: rgb(112, 0, 0);
    stroke-width: 4;
    stroke-miterlimit: 10;
  }
  
  /* Transparent box ensuring arms center properly. */
  .sizing-box {
    fill: none;
  }

  /* Make all arms rotate around the same center point. */
  /* Optional: Use transition for animation. */
  #hour,
  #minute,
  #second {
    transform-origin: 300px 300px;
    transition: transform 0.3s ease-in-out;
  }

  .clockbox{
    background-size:cover !important;
    background-repeat: no-repeat !important;
    image-rendering:optimizeQuality;
    border-radius: 20%;
  }