body {
  color: rgb(0, 0, 0) !important;
  background-color: rgb(128, 128, 128);
  height: 48em;
}

a {color: rgb(0, 96, 0);}
a:hover {color: rgb(0, 128, 0);}

footer {
  top: 100%;
}

.face {
  width: 32em;
  height: 32em;
  border-radius: 16em;
  border-style: solid;
  border-width: 0.25em;
  position: absolute;
  top: 2em;
  left: calc(50% - 16em);
  background-color: rgb(224, 224, 224);
}

.second {
  width: 28em;
  height: 0.25em;
  background-image: conic-gradient(#FF0000 0deg, #FF0000 180deg, rgba(0, 0, 0, 0) 180deg);
  position: absolute;
  top: 18.125em;
  left: calc(50% - 14em + 0.25em); /*0.25em for face border*/
  transform: rotate(-90deg);
}

.minute {
  width: 28em;
  height: 0.25em;
  background-image: conic-gradient(#000000 0deg, #000000 180deg, rgba(0, 0, 0, 0) 180deg);
  position: absolute;
  top: 18.125em;
  left: calc(50% - 14em + 0.25em); /*0.25em for face border*/
  transform: rotate(-90deg);
}

.hour {
  width: 22em;
  height: 0.25em;
  background-image: conic-gradient(#000000 0deg, #000000 180deg, rgba(0, 0, 0, 0) 180deg);
  position: absolute;
  top: 18.125em;
  left: calc(50% - 11em + 0.25em); /*0.25em for face border*/
  transform: rotate(-90deg);
}

.pin {
  width: 1em;
  height: 1em;
  position: absolute;
  left: calc(50% - 0.25em); /*0.25em for face border*/
  top: 17.75em;
  border-radius: 0.5em;
  background-color: rgb(64, 64, 64);
}

.digital {
  background-color: rgb(64, 64, 64);
  color: rgb(0, 255, 0);
  font-family: "Lucida Console";
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 1em;
  text-align: center;
  padding: 1em;
  margin: auto;
  margin-top: 1em;
  width: 8em;
  position: relative;
  top: 24em;
}