style.css

/* import fonts */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");

/* styles */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  background-color: #1d1d1d;
  padding: 5em 0;
}
body, section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1, h3, p {
  text-align: center;
  color: #f0f0f0;
  opacity: 0.9;
}
h1 {
  font: bold 80px/120% Arial, "Helvetica", sans-serif;
}
h3 {
  text-transform: uppercase;
  font: bold 34px/120% Georgia, serif;
}
p {
  font: 400 16px/120% "Rubik", sans-serif;
  padding: 0.3em 1em;
}
section {
  margin-top: 2em;
}
.clock-container {
  padding: 0 2em;
}
.clock {
  position: relative;
  background-color: #f0f0f0;
  border: 20px double #3b3b3b;
  border-radius: 100%;
  height: 17em;
  width: 17em;
}
.hand {
  position: absolute;
  background: #1d1d1d;
  border-radius: 5px;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center; /* !important */
}
.hour {
  height: 30%;
  width: 0.3em;
}
.min {
  height: 37%;
  width: 0.3em;
}
.sec {
  height: 41%;
  width: 0.2em;
  background-color: #b44848;
}
.center-dot {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  margin-left: -7px;
  margin-top: -146px;
  background: #f0f0f0;
  border: 3px solid #1d1d1d
}
.number {
  position: absolute;
  --rotation: 0;
  color: #1d1d1d;
  width: 100%;
  height: 100%;
  font: 400 18px/120% "Rubik", sans-serif;
  text-align: center;
  transform: rotate(var(--rotation));
  padding: 3px;
}
.three {
  --rotation: 90deg;
}
.nine {
  --rotation: 270deg;
}
.six {
  --rotation: 180deg;
}
.num-time {
  color: #f0f0f0;
  letter-spacing: 1px;
  font: 400 18px/120% "Share Tech Mono", monospace;
}

@media screen and (max-width: 426px) {
  h3 {
    font-size: 24px;
  }
  p {
    font-size: 14px;
    padding: 0.3em 1em;
  }
  .clock-container {
    padding: 0 1em;
  }
  .clock {
    height: 13em;
    width: 13em;
    border: 17px double #3b3b3b;
  }
  .number {
    font-size: 16px;
  }
  .num-time {
    font-size: 16px;
  }
  .center-dot {
    margin-left: -6px;
    margin-top: -113px;
    width: 16px;
    height: 16px;
  }
}