1  :root {
 2    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
 3    line-height: 1.5;
 4    font-weight: 400;
 5  
 6    color-scheme: light dark;
 7    color: rgba(255, 255, 255, 0.87);
 8    background-color: #242424;
 9  
10    font-synthesis: none;
11    text-rendering: optimizeLegibility;
12    -webkit-font-smoothing: antialiased;
13    -moz-osx-font-smoothing: grayscale;
14  }
15  
16  a {
17    font-weight: 500;
18    color: #646cff;
19    text-decoration: inherit;
20  }
21  a:hover {
22    color: #535bf2;
23  }
24  
25  body {
26    margin: 0;
27    display: flex;
28    place-items: center;
29    min-width: 320px;
30    min-height: 100vh;
31  }
32  
33  h1 {
34    font-size: 3.2em;
35    line-height: 1.1;
36  }
37  
38  button {
39    border-radius: 8px;
40    border: 1px solid transparent;
41    padding: 0.6em 1.2em;
42    font-size: 1em;
43    font-weight: 500;
44    font-family: inherit;
45    background-color: #1a1a1a;
46    cursor: pointer;
47    transition: border-color 0.25s;
48  }
49  button:hover {
50    border-color: #646cff;
51  }
52  button:focus,
53  button:focus-visible {
54    outline: 4px auto -webkit-focus-ring-color;
55  }
56  
57  @media (prefers-color-scheme: light) {
58    :root {
59      color: #213547;
60      background-color: #ffffff;
61    }
62    a:hover {
63      color: #747bff;
64    }
65    button {
66      background-color: #f9f9f9;
67    }
68  }