:root {
  /* Themes */
  --color-dark: #222;
  --color-light: #ffffff;
  --color: var(--color-dark);

  /* Kreuzblende: schnell rein, langsam raus */
  --fade-in: 90ms;
  --fade-out: 700ms;

  /* Wird von script.js gesetzt (siehe fit()); der Wert hier greift nur,
     falls das Skript nicht laeuft. */
  --size: 10vw;

  /* Zeilenhoehe: Puffer fuer Ober-/Unterlaenge, damit nichts abgeschnitten wird */
  --line-height: 1.2;

  /* Ausrichtung: align=center (Standard) | left | right */
  --align: center;
}

html[data-theme='light'] {
  --color: var(--color-light);
}

html[data-align='left'] {
  --align: flex-start;
}

html[data-align='right'] {
  --align: flex-end;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: var(--align);
  font-family: 'Montserrat Alternates', sans-serif;
  color: var(--color);
  font-size: var(--size);
  line-height: var(--line-height);
}

.clock {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

/* Ein Ziffernplatz: feste Breite ueber den unsichtbaren Platzhalter,
   damit die Uhr beim Ziffernwechsel nicht seitlich zappelt. */
.digit {
  position: relative;
}

.digit .spacer {
  visibility: hidden;
}

.num {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  opacity: 0;
  transition: opacity var(--fade-out) ease-out;
}

.num.visible {
  opacity: 1;
  transition: opacity var(--fade-in) ease-in;
}

/* seconds=0: Sekundenziffern und der zugehoerige Doppelpunkt entfallen komplett,
   die verbleibende Uhr bleibt dank Flexbox mittig. */
html[data-seconds='0'] .optional {
  display: none;
}