style.css

*, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  :root {
    --main: #fffdfa;
    --highlight: #067380;
    --secondary: #f25f4c;
    --stroke: #1f1235;
  }
  
  body {
    background-color: var(--main);
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue';
    font-size: 2rem;
  }
  
  .container {
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ring--seconds {
    fill: var(--highlight);
    fill-opacity: .1;
    stroke: var(--stroke);
    stroke-width: 5;
    stroke-dasharray:.1 .9; stroke-dashoffset: .05;
  }
  
  .ring--hours {
    fill: transparent;
    stroke: var(--stroke);
    stroke-width: 10;
    stroke-dasharray:.05 .95; stroke-dashoffset: .025;
  }
  
  .ring--center {
    fill: var(--stroke);
    stroke: var(--stroke);
    stroke-width: 2.5;
  }

  .hour-number {
    text-anchor:middle;
    /* font: 10px BlinkMacSystemFont; */
    font: 10px 'Helvetica Neue';
  }

  .hand {
    stroke-linecap: round;
    stroke: var(--stroke);
  }
  
  .hand--hour {
    stroke-width: 5;
    stroke: var(--secondary)
  }
  
  .hand--minute {
    stroke-width: 5;
  }

  .prayertime {
    marker-start:url(#prayerMarker);
    marker-end:url(#prayerMarker);
    stroke: var(--highlight);
    fill:none;
    opacity: .2;
  }

  .prayer--labels {
    stroke-width: .5;
    fill:var(--highlight);
    text-anchor:middle;
  }