1  @import "tailwindcss";
 2  
 3  @theme {
 4    --spacing-under-nav: 70px;
 5    --breakpoint-xxs: 400px;
 6    --color-background-gray: #f3f3f3;
 7    --color-warning-yellow: #f19a3e;
 8    --color-error-red: #a31621;
 9    --color-primary-dark-green: #3b513e;
10    --color-success-green: #5b9279;
11  }
12  
13  body {
14    overflow: visible;
15    color: black;
16    background-color: #f3f3f3;
17    overflow-y: scroll;
18    h1 {
19      font-size: 24px;
20      font-weight: 700;
21    }
22    h2 {
23      font-size: 20px;
24      font-weight: 700;
25    }
26    h3 {
27      font-size: 18px;
28      font-weight: 500;
29    }
30  }
31  
32  @font-face {
33    font-family: "Outfit";
34    src: url("/fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations");
35    font-weight: 100 900;
36    font-style: normal;
37    font-display: swap;
38  }
39  
40  html, body, #root {
41    width: 100%;
42    font-family: "Outfit", sans-serif;
43    background-color: #f3f3f3;
44    overflow-x: auto;
45  }
46  
47  a {
48    color: white;
49  }
50  
51  input[type="checkbox"] {
52    appearance: none;
53    border: 1px solid #ccc;
54    border-radius: 50%;
55    background-color: white;
56    display: flex;
57    justify-content: center;
58    align-items: center;
59  }
60  
61  input[type="checkbox"]:checked::after {
62    content: url("/icons/checkmark.svg");
63    display: flex;
64    justify-content: center;
65    align-items: center;
66    margin-top: 3px;
67  }
68  
69  input {
70    background-color: transparent;
71  }