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;
+  }
 }

frontend/src/components/TodoList.jsx

@@ -73,7 +73,7 @@ const TodoList = () => {
     };
 
     return (
-        <div className="app-container">
+        <div className="todo-wrapper">
             <h1 className="title">Tasks</h1>
 
             <form className="todo-form" onSubmit={handleCreate}>

frontend/src/index.css

@@ -22,7 +22,7 @@ body {
   font-family: var(--font-family);
   background-color: var(--bg-color);
   background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15), transparent 40%),
-                    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
+    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
   color: var(--text-main);
   min-height: 100vh;
   display: flex;
@@ -31,6 +31,19 @@ body {
   padding: 4rem 1rem;
 }
 
+@media (max-width: 768px) {
+  body {
+    padding: 2rem 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  body {
+    padding: 0;
+    align-items: flex-start;
+  }
+}
+
 button {
   cursor: pointer;
   font-family: inherit;
@@ -42,4 +55,4 @@ button {
 input {
   font-family: inherit;
   outline: none;
-}
+}