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.actions {
23  display: grid;
24  grid-template-columns: auto auto;
25  justify-items: center;
26  justify-content: center;
27}
28
29.actions > form {
30  padding-inline: 5px;
31}
32
33thead {
34  font-weight: bold;
35}
36
37.good {
38  background-color: hsl(120, 50%, 10%) !important;
39}
40
41.bad {
42  background-color: hsl(0, 50%, 10%) !important;
43}
44
45.warn {
46  background-color: hsl(60, 50%, 10%) !important;
47}
48
49@media (prefers-color-scheme: light) {
50  .good {
51    background-color: hsl(120, 50%, 85%) !important;
52    color: black;
53  }
54
55  .bad {
56    background-color: hsl(0, 50%, 85%) !important;
57    color: black;
58  }
59
60  .warn {
61    background-color: hsl(60, 50%, 85%) !important;
62    color: black;
63  }
64}