body {
  background: #211d3a;
}

.heading {
  border: 5px;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #caebf3;
  font-size: 60px;
  font-family: "Poppins", sans-serif;
  letter-spacing: 10px;
}

.clock {
  border: 5px;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #35c1e4;
  font-size: 60px;
  font-family: "Poppins", sans-serif;
  letter-spacing: 7px;
}

.clock:hover {
  border: 5px;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  border-radius: 10px;

  color: rgb(212, 227, 240);
}