@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

  .converter { max-width: 700px; margin: 0 auto 40px; font-family: 'Poppins', sans-serif; }
  .clock-wrap { position:relative; width:250px; margin:0 auto 10px; }

  svg { width:250px; height:auto; display:block; }

  .face { fill:#fff; stroke:#eee; stroke-width:2; }
  .rim  { fill:none; stroke:#ddd; stroke-width:6; }

  #ticks line { stroke:#bbb; stroke-linecap:round; }
  #ticks line.major { stroke:#888; stroke-width:3; }
  #ticks line.minor { stroke-width:1.5; }

  .hand { stroke-linecap:round; pointer-events:none; }
  .hand.hour   { stroke:#333; stroke-width:4.5; }
  .hand.minute { stroke:#333; stroke-width:3; }
  .hand.second { stroke:#d14; stroke-width:1.5; }
  .cap { fill:#333; }

  #time {
    text-align:center;
    color:#111827;
    margin-top:8px;
    font: 700 20px/1.2 'Poppins', sans-serif;
    letter-spacing: 0.4px;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 420px) {
    #time { font-size:18px; }
  }