1  /* Your CSS goes here */
 2  
 3  section {
 4    max-width: 400px;
 5    margin: auto;
 6  }
 7  
 8  header {
 9    text-align: center;
10    margin-bottom: 24px;
11  }
12  
13  .link {
14    color: var(--beige) !important;
15  }
16  
17  form {
18    margin-top: 24px;
19    display: flex;
20    align-items: center;
21    justify-content: center;
22    gap: 8px;
23    width: 100%;
24    padding: 8px;
25    background-color: var(--charcoal);
26    border-radius: 8px;
27  }
28  
29  form:focus-within {
30    outline: 1px solid var(--border-color);
31  }
32  
33  form button {
34    flex: 1;
35    white-space: nowrap;
36  }
37  
38  input {
39    width: 100%;
40    background: var(--charcoal);
41  }
42  
43  input::placeholder {
44    color: rgb(249, 244, 218, 0.5);
45  }
46  
47  ul {
48    padding: 0;
49    margin: 0;
50    margin-top: 24px;
51    display: grid;
52    gap: 16px;
53  }
54  
55  li {
56    display: flex;
57    justify-content: space-between;
58    align-items: center;
59    background: var(--purple);
60    padding: 8px 16px;
61    border-radius: 8px;
62    font-size: 14px;
63  }
64  
65  li div {
66    display: flex;
67    align-items: center;
68    gap: 12px;
69  }
70  
71  .status {
72    width: 24px;
73    height: 24px;
74    padding: 0px;
75    border-radius: 50%;
76    border: 1px solid var(--beige);
77    background: transparent;
78    position: relative;
79  }
80  
81  .status.completed {
82    background: var(--yellow);
83    border-color: var(--charcoal);
84  }
85  
86  .status.completed:after {
87    content: "\2713";
88    position: absolute;
89    top: 50%;
90    left: 50%;
91    transform: translate(-50%, -50%);
92  }
93  
94  form button {
95      position: relative;
96  }