feat: Implement responsive styling for various screen sizes and refactor the main todo list container class.

frontend/src/App.css

@@ -54,6 +54,7 @@
   margin-bottom: 2rem;
   background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
   -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
@@ -207,4 +208,90 @@
 
 .error {
   color: var(--danger);
+}
+
+/* --- Responsive Design --- */
+
+/* Tablets and small desktops */
+@media (max-width: 768px) {
+  .app-container {
+    padding: 1.75rem;
+    width: 90%;
+    max-width: 600px;
+    min-height: 80vh;
+  }
+
+  .title {
+    font-size: 2.25rem;
+  }
+}
+
+/* Mobile phones */
+@media (max-width: 480px) {
+  .app-container {
+    padding: 1.5rem 1rem;
+    border-radius: 0;
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+    min-height: 100vh;
+    border: none;
+    box-shadow: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .todo-wrapper {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .todo-list {
+    flex-grow: 1;
+  }
+
+  .title {
+    font-size: 1.75rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .todo-form {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .add-btn {
+    padding: 1rem;
+    width: 100%;
+    font-size: 1.05rem;
+    justify-content: center;
+  }
+
+  .todo-item {
+    padding: 0.85rem 0.75rem;
+    border-radius: 10px;
+  }
+
+  .todo-text {
+    font-size: 1rem;
+  }
+
+  .app-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 2rem;
+    padding-bottom: 1rem;
+  }
+
+  .app-footer code {
+    display: inline-block;
+  }
 }