1label {
 2  display: grid;
 3  grid-template-columns: auto auto;
 4  align-items: center;
 5  justify-items: start;
 6  align-content: center;
 7  justify-content: space-between;
 8  max-width: 350px;
 9}
10
11label > input {
12  max-width: 250px;
13}
14
15.habits-title {
16  display: grid;
17  grid-template-columns: auto auto;
18  justify-content: space-between;
19  align-items: center;
20}
21
22.habits-title > h3 {
23  margin-block: 10px;
24}
25
26.actions {
27  display: grid;
28  grid-template-columns: auto auto;
29  justify-items: center;
30  justify-content: center;
31}
32
33.actions > form {
34  padding-inline: 5px;
35}
36
37thead {
38  font-weight: bold;
39}
40
41.spaced {
42  margin-top: 25px;
43}
44
45.good {
46  background-color: hsl(120, 50%, 10%) !important;
47}
48
49.bad {
50  background-color: hsl(0, 50%, 10%) !important;
51}
52
53.warn {
54  background-color: hsl(60, 50%, 10%) !important;
55}
56
57@media (prefers-color-scheme: light) {
58  .good {
59    background-color: hsl(120, 50%, 85%) !important;
60    color: black;
61  }
62
63  .bad {
64    background-color: hsl(0, 50%, 85%) !important;
65    color: black;
66  }
67
68  .warn {
69    background-color: hsl(60, 50%, 85%) !important;
70    color: black;
71  }
72}