:root{
  --clock-r:90;
  --date-r:140;
  --date-speed:0.4;
  --offset-x:100;
  --offset-y:0;
  --smooth:20;

  --face-color:#000;
  --date-color:#000;
  --h-color:#000;
  --m-color:#000;
  --s-color:#000;

  --font:14px/1 Arial, sans-serif;

  --dot-h:24px;
  --dot-m:20px;
  --dot-s:16px;
}

body{margin:0}

.span{
  position:fixed;
  transform:translate(-50%,-50%);
  font:var(--font);
  user-select:none;
  pointer-events:none;
}

.face{color:var(--face-color)}
.date{color:var(--date-color)}

.hdot{
  color:var(--h-color);
  font-size:var(--dot-h);
  font-weight:bold;
}
.mdot{
  color:var(--m-color);
  font-size:var(--dot-m);
  font-weight:bold;
}
.sdot{
  color:var(--s-color);
  font-size:var(--dot-s);
  font-weight:bold;
}