1. $color-background: #dcdde1;
2. $color-text: #2f3640;
3. $color-letter: #f5f6fa;
4.  
5. body {
6.   background-color: $color-background;
7.   color: $color-text;
8.   font-size: 16px;
9.   line-height: 24px;
10. }
11.  
12.  
13. .wrapper {
14.   width: 100vw;
15.   height: 100vh;
16.   display: flex;
17.   justify-content: center;
18.   align-items: center;
19. }
20.  
21. .intro p {
22.   margin: 30px 0;
23. }
24.  
25. .letter {
26.   background-color: $color-letter;
27.   width: 600px;
28.   padding: 48px;
29.   position: relative;  
30.   max-width: 90vw;
31.   margin: 5vh auto;
32.  
33. }
34.  
35. .letter::before,
36. .letter::after {
37.   content: "";
38.   position: absolute;
39.   bottom: 12px;
40.   width: 40%;
41.   height: 10px;
42.   box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
43.   z-index: -1;
44. }
45.  
46. .letter::before {
47.   left: 15px;
48.   transform: skew(-5deg) rotate(-5deg);
49. }
50.  
51. .letter::after {
52.   right: 15px;
53.   transform: skew(5deg) rotate(5deg);
54. }
55.  
56. * {
57.   box-sizing: border-box;
58. }
59.  
60. /* Kasuje margin i padding z listy */
61. ul {
62.   margin: 0;
63.   padding: 0;
64.   list-style: none;
65. }
66.  
67. /* Styluje elementy listy zadań */
68. ul li {
69.   cursor: pointer;
70.   position: relative;
71.   padding: 12px 8px 12px 40px;
72.   background: #eee;
73.   font-size: 18px;
74.   transition: 0.2s;
75.  
76.  
77.  
78.   -webkit-user-select: none;
79.   -moz-user-select: none;
80.   -ms-user-select: none;
81.   user-select: none;
82. }
83.  
84. /* Ustawia nieparzyste elementy listy na inny kolor (efekt zebry) */
85. ul li:nth-child(odd) {
86.   background: #f9f9f9;
87. }
88.  
89. /* Ciemniejszy kolor tła po najechaniu myszką */
90. ul li:nth-child(even):hover {
91.   background: #ddd;
92. }
93.  
94. /* Efekt wywołany po kliknięciu - zmienia kolor i powoduje przekreślenie tekstu */
95. ul li.checked {
96.   background: #888;
97.   color: #fff;
98.   text-decoration: line-through;
99. }
100.  
101. /* Dodaje znacznik ukończenia zadania */
102. ul li.checked::before {
103.   content: '';
104.   position: absolute;
105.   border-color: #fff;
106.   border-style: solid;
107.   border-width: 0 2px 2px 0;
108.   top: 10px;
109.   left: 16px;
110.   transform: rotate(45deg);
111.   height: 15px;
112.   width: 7px;
113. }
114.  
115. /* Styluje przycisk zamknięcia zadania */
116. .close {
117.   position: absolute;
118.   right: 0;
119.   top: 0;
120.   padding: 12px 16px 12px 16px;
121. }
122.  
123. .close:hover {
124.  
125. }
126.  
127. /* Styl nagłówka */
128. .header {
129.   border-radius: 100px;
130.   background-color: #02ac46;
131.   padding: 30px 40px;
132.   color: white;
133.   margin-bottom: 15px;
134.   text-align: center;
135.   background: rgb(255,0,118);
136. background: linear-gradient(209deg, rgba(255,0,118,1) 0%, rgba(225,3,130,1) 14%, rgba(203,5,139,1) 28%, rgba(200,5,140,1) 41%, rgba(89,15,183,1) 100%);
137. }
138.  
139. /* Clear floats after the header */
140. .header:after {
141.   content: "";
142.   display: table;
143.   clear: both;
144. }
145.  
146. /* Styluje pole do wpisywania treśći */
147. input {
148.   height: 44px;
149.   margin: 0;
150.   border: none;
151.   border-radius: 0;
152.   width: 75%;
153.   padding: 10px;
154.   float: left;
155.   font-size: 16px;
156. }
157.  
158. /* Styluje przycisk "Dodaj"  */
159. .addBtn {
160.   padding: 10px;
161.   color: #555;
162.   float: left;
163.   text-align: center;
164.   cursor: pointer;
165.   transition: 0.3s;
166.   border-radius: 30px;
167.   font-size: 45px;
168.   color: white;
169.   border: 2px solid white;
170.   margin-left: 50px;
171. }
172.  
173. #myInput{
174.   border-radius: 50px;
175.   background-color: rgba(0,0,0,0);
176.   border: 2px solid white;
177.   color: white;
178.  
179. }
180.  
181. #myInput::placeholder{
182.   color: white;
183. }
184.  
185. .intro{
186.   text-align: center;
187. }
188.