body {
  margin: 0;
}

.clock-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #f1f2f3;
  /* background-color: #FFA69E; */
}

#clock {
  width: 90%;
  height: 90%;
  box-sizing: border-box;
}

/* Clock styles */
.circle {
  fill: #E0FAF4;
/*   stroke: #FDD835; */
  stroke: #123456;
  stroke-width: 9;
  stroke-miterlimit: 10;
}

.white-circle {
  fill: #E0FAF4;
}

.mid-circle {
  /*     fill: #CEE397; */
  fill: #37474F;
}

.small-circle {
  fill: #F44336;
}

.hour-marks {
  fill: none;
  stroke: #607D8B;
  stroke-width: 9;
  stroke-miterlimit: 10;
}

.hour-arm {
  fill: none;
/*   stroke: #009688; */
  stroke: #3f51b5;
  stroke-width: 17;
  stroke-miterlimit: 10;
}

.minute-arm {
  fill: none;
  stroke: #24ada0;
  stroke-width: 11;
  stroke-miterlimit: 10;
}

.second-arm {
  fill: none;
  stroke: #F44336;
  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 .5s ease-in-out; */
}