main
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}