1:root {
 2  --color-primary: #7287fd;
 3  --border-radius: 4px;
 4  --input-border: #dce0e8;
 5}
 6
 7body {
 8  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
 9  font-weight: normal;
10  margin: 0;
11}
12
13main {
14  margin: 0 auto;
15  width: calc(100vw - 4rem);
16  max-width: 50rem;
17  padding: 2rem;
18}
19
20.tasks {
21  display: flex;
22  flex-direction: column;
23  gap: 1rem;
24}
25
26.task {
27  display: flex;
28  flex-wrap: wrap;
29  gap: 1rem;
30  align-items: center;
31
32  & input {
33    border-radius: var(--border-radius);
34    border: 1px solid var(--input-border);
35    padding: 0.5rem 0.25rem;
36  }
37
38  & .name {
39    flex-grow: 50;
40  }
41
42  & .date {
43    flex-grow: 1;
44  }
45
46  & .context {
47    flex-grow: 1;
48  }
49
50  & input[checked] {
51    opacity: 0.3;
52    
53    & ~ input {
54    opacity: 0.3
55  }
56}
57
58.new-task {
59  margin-top: 4rem;
60}
61
62button {
63  background-color: var(--color-primary);
64  color: white;
65  border: none;
66  border-radius: var(--border-radius);
67  padding: 0.25rem 1rem;
68  cursor: pointer;
69}