Adding toDo app functionability

Closes #2 (closed)

public/css/index.css

@@ -26,16 +26,29 @@ h1 {
   margin: 0;
 }
 #logout-btn {
-  background-color: transparent;
+  background-color: rgb(170, 17, 17);
   border: 1px solid #333;
-  color: #333;
+  color: white;
   padding: 0.5rem 1rem;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s ease;
 }
 #logout-btn:hover {
-  background-color: #333;
+  background-color: #852828;
+  color: #fff;
+}
+#toggle-completed-btn{
+  background-color: rgb(42, 50, 170);
+  border: 1px solid #333;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+#toggle-completed-btn:hover{
+  background-color: #1c277e;
   color: #fff;
 }
 #new-task-form {
@@ -71,8 +84,8 @@ button[type="submit"]:hover {
   margin-bottom: 1rem;
   padding: 1rem;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;  
+  align-items: flex-start;  
   transition: all 0.3s ease;
 }
 .task-list li:hover {
@@ -85,7 +98,13 @@ button[type="submit"]:hover {
 .task-list li.completed span {
   text-decoration: line-through;
 }
+.task-text {
+  white-space: normal;  
+  word-wrap: break-word;  
+  width: 100%; 
+}
 .task-actions {
+  margin-left: auto;  
   display: flex;
   gap: 0.5rem;
 }