1@font-face {
 2  font-family: "BerkeleyMono";
 3  src: url("fonts/BerkeleyMono-Regular.woff2");
 4}
 5
 6body {
 7  --text-color: #171717;
 8  --bkg-color: #d4d4d4;
 9}
10body.dark-theme {
11  --text-color: #e5e5e5;
12  --bkg-color: #0a0a0a;
13}
14
15@media (prefers-color-scheme: dark) {
16  body {
17    --text-color: #e5e5e5;
18    --bkg-color: #0a0a0a;
19  }
20  body.light-theme {
21    --text-color: #171717;
22    --bkg-color: #d4d4d4;
23  }
24}
25
26body {
27  background: var(--bkg-color);
28  margin: 0;
29  padding: 0;
30}
31
32nav {
33  display: flex;
34  justify-content: flex-end;
35}
36
37button.theme-toggle {
38  margin: 1em;
39  cursor: pointer;
40}
41
42main {
43  position: absolute;
44  top: 0;
45  pointer-events: none;
46  font-family: "BerkeleyMono", monospace, serif;
47  display: flex;
48  flex-direction: column;
49  justify-content: center;
50  align-items: center;
51  width: 100%;
52  height: 100vh;
53}
54
55#clock {
56  color: var(--text-color);
57  font-size: min(95vh, 34vw);
58  letter-spacing: -0.075em;
59}
60
61main .details {
62  color: rgba(102,102,102,0.40);
63  font-size: 3.5vmin;
64  display: flex;
65  justify-content: space-around;
66  width: 100%;
67  margin: -1.25em auto;
68}
69
70#timer {
71  width: 9ch;
72  text-align: center;
73}
74
75@media (min-aspect-ratio: 16/10) {
76  main .details {
77    display: none;
78  }
79}