@font-face {
  font-family: "Rail Alphabet 2";
  src: url("fonts/numerics.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-size: 20px;
  line-height: 24px;
  font-weight: normal;

  font-family: "Rail Alphabet 2", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #000;

  display: flex;
  flex-direction: column;
}

body,
html {
  width: 100dvw;
  height: 100dvh;
  max-width: 100dvw;
  max-height: 100dvh;
  overflow-x: hidden;
  background: black;
}

main {
  flex-grow: 1;
  overflow: hidden;
  color: white;
  container-type: inline-size;
  position: relative;
}

a:any-link {
  color: inherit;
}

footer {
  font-size: 1rem;
  width: 100%;
  text-align: center;
  z-index: 10;
  padding: 0.5rem 0;
  position: relative;
  color: gray;
}

#clock {
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  max-height: 100%;
  background: #000;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  user-select: none;

  /* Centre */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#time {
  display: flex;
  font-size: 10rem;
  line-height: 1;
  font-weight: normal;
  justify-content: center;
  font-size: 23cqi;
  text-align: center;
}

#time > span {
  display: inline;
}

#time > span#colon {
  transform: translateY(-6%);
}

@property --rotation {
  /* An initial value for our custom property */
  initial-value: 0deg;
  /* Whether it inherits from parent set values or not */
  inherits: true;
  /* The type. Yes, the type. You thought TypeScript was cool */
  syntax: "<angle>";
}

.ring {
  --size: 98.65cqi;
  position: absolute;
  top: calc((100cqi - var(--size)) / 2);
  left: calc((100cqi - var(--size)) / 2);
  width: var(--size);
  height: var(--size);
}

#outer-ring {
  transform: rotate(var(--rotation-outer));
}

#inner-ring {
  transform: rotate(var(--rotation-inner));
}
