:root {
  --main-color-off: hsl(0deg 0% 100% / 25%);
  --main-color-on: hsl(122deg 100% 70%);
  --bg-color: hsl(0deg 0% 14%);

  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-weight: 400;

  color-scheme: light dark;
  color: var(--main-color-off);
  background-color: var(--bg-color);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.wrapper {
  width: min(60vw, 60vh);
  height: min(60vw, 60vh);

  min-width: 200px;
  min-height: 200px;

  border: 2px solid var(--main-color-off);
  border-radius: 2rem;
  padding: 1rem;
}

.clock {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(10, 1fr);

  width: 100%;
  height: 100%;
}

.field {
  display: grid;
  place-items: center;
}

.off {
  color: var(--main-color-off);
}
.on {
  color: var(--main-color-on);

  filter: drop-shadow(0 0 1em var(--main-color-on));
}

pre {
  margin: 0;
  font-size: clamp(1rem, 0rem + min(4vw, 4vh), 3rem);
}

@media (prefers-color-scheme: light) {
  :root {
    --main-color-off: hsl(208deg 37% 20%);
    --main-color-on: hsl(0deg 100% 50%);

    --bg-color: hsl(0deg 0% 100%);
  }
}