clock.css

* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F0F0F0;
}

#clock {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 10em;
  height: 10em;
  border: 1px solid #909090;
  border-radius: 100%;
}

@media (min-width: 500px) and (min-height: 400px) {
  #clock {
    width: 25em;
    height: 25em;
  }
}

#center {
  background-color: #383838;
  width: 3.5%;
  height: 3.5%;
  z-index: 10;
  border-radius: 100%;
}

#hour-filler {
  background-color: #686868;
  height: 60%;
  width: 100%;
}

#minute-filler {
  background-color: #989898;
  height: 80%;
  width: 80%;
}

.arm {
  /*border: 1px dotted green;*/
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hand {
  /*border: 1px dotted orange;*/
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 2%;
  height: 50%;
}

.filler {
  background-color: #B8B8B8;
  height: 95%;
  width: 20%;
  min-width: 1px;
}