1  @tailwind base;
 2  @tailwind components;
 3  @tailwind utilities;
 4  
 5  :root {
 6    line-height: 1.5;
 7    font-weight: 400;
 8  
 9    color-scheme: light dark;
10    color: rgba(255, 255, 255, 0.87);
11    background-color: #242424;
12  
13    font-synthesis: none;
14    text-rendering: optimizeLegibility;
15    -webkit-font-smoothing: antialiased;
16    -moz-osx-font-smoothing: grayscale;
17    -webkit-text-size-adjust: 100%;
18  }
19  
20  a {
21    font-weight: 500;
22    color: #646cff;
23    text-decoration: inherit;
24  }
25  a:hover {
26    color: #535bf2;
27  }
28  
29  html {
30    font-size: 16px;
31  }
32  @media screen and (min-width: 0px) {
33    html {
34      font-size: 8px;
35    }
36  }
37  @media screen and (min-width: 500px) {
38    html {
39      font-size: calc(1.4vw + 1px);
40    }
41  }
42  @media screen and (min-width: 1143px) {
43    html {
44      font-size: 17px;
45    }
46  }
47  
48  body {
49    margin: 0;
50    display: flex;
51    place-items: center;
52    min-width: 320px;
53    min-height: 100vh;
54  }
55  
56  h1 {
57    font-size: 3.2em;
58    line-height: 1.1;
59  }
60  
61  button {
62    border: 1px solid transparent;
63    padding: 0.6em 1.2em;
64    font-weight: 400;
65    font-family: inherit;
66    background: none;
67    cursor: pointer;
68    transition: border-color 0.25s;
69  }
70  
71  .lds-dual-ring:after {
72    content: " " !important;
73    animation: lds-dual-ring 1.2s linear infinite;
74  }
75  
76  @keyframes lds-dual-ring {
77    0% {
78      transform: rotate(0deg);
79    }
80  
81    100% {
82      transform: rotate(360deg);
83    }
84  }