From 271e51d243ac7064db30c7af75d63b8c8c3a6d0f Mon Sep 17 00:00:00 2001
From: KJ-MU <gullssea5@gmail.com>
Date: Sat, 16 Mar 2024 04:55:07 +0300
Subject: [PATCH 1/4] finish task

---
 package-lock.json          |  6 +++++
 package.json               |  1 +
 src/App.js                 |  4 ++-
 src/components/TodoItem.js | 45 +++++++++++++++++++++++++++++++++
 src/components/TodoList.js | 51 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TodoItem.js
 create mode 100644 src/components/TodoList.js

diff --git a/package-lock.json b/package-lock.json
index e6a160a..6dc47ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "uuid4": "^2.0.3",
         "web-vitals": "^2.1.4"
       }
     },
@@ -17332,6 +17333,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/uuid4": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/uuid4/-/uuid4-2.0.3.tgz",
+      "integrity": "sha512-CTpAkEVXMNJl2ojgtpLXHgz23dh8z81u6/HEPiQFOvBc/c2pde6TVHmH4uwY0d/GLF3tb7+VDAj4+2eJaQSdZQ=="
+    },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
diff --git a/package.json b/package.json
index 88a269e..c84620f 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "uuid4": "^2.0.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 0ff7d8a..eca5a72 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,13 @@
 import "./App.css";
+import TodoList from "./components/TodoList";
+import todoData from "./todoData";
 // TODO: Import the todoData and pass it as a prop to the TodoList component
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        {/* Call the TodoList Component Here */}
+        <TodoList todoData={todoData} />
       </header>
     </div>
   );
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
new file mode 100644
index 0000000..0eda838
--- /dev/null
+++ b/src/components/TodoItem.js
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+function TodoItem({ todo, handleDelete, Edit }) {
+  const [isEditing, setisEditing] = useState(false);
+  const [todoTitle, setTodoTitel] = useState(todo.title);
+
+  const handelEdit = () => {
+    setisEditing(true);
+  };
+
+  const handelEditChange = (e) => {
+    setTodoTitel(e.target.value);
+  };
+
+  const handelSave = () => {
+    const updatedTodo = { ...todo, title: todoTitle };
+    if (updatedTodo.title.trim() === "") {
+      return;
+    }
+
+    Edit(updatedTodo);
+    setisEditing(false);
+  };
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", columnGap: "20px" }}>
+      {isEditing ? (
+        <input onChange={handelEditChange} type="text" value={todoTitle} />
+      ) : (
+        <p>{todo.title}</p>
+      )}
+
+      <sub style={{ color: "red" }} onClick={() => handleDelete(todo.id)}>
+        Delete
+      </sub>
+
+      {isEditing ? (
+        <sub onClick={handelSave}>Save</sub>
+      ) : (
+        <sub onClick={handelEdit}>Edit</sub>
+      )}
+    </div>
+  );
+}
+export default TodoItem;
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
new file mode 100644
index 0000000..6760a14
--- /dev/null
+++ b/src/components/TodoList.js
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import uuid4 from "uuid4";
+import TodoItem from "./TodoItem";
+
+function TodoList({ todoData }) {
+  const [todoList, setTodoList] = useState(todoData);
+  const [newTodo, setNewTodo] = useState("");
+
+  const handelChange = (e) => {
+    setNewTodo(e.target.value);
+  };
+  const handelClick = () => {
+    if (newTodo.trim() === "") {
+      return;
+    }
+    const newTodoObj = {
+      id: uuid4(),
+      title: newTodo,
+      done: false,
+    };
+    setTodoList([...todoList, newTodoObj]);
+    setNewTodo(" ");
+  };
+
+  const handleDelete = (todoId) => {
+    setTodoList(todoList.filter((todo) => todo.id !== todoId));
+  };
+  const handleEdit = (updatedTodo) => {
+    setTodoList((TodoList) =>
+      TodoList.map((todoItem) =>
+        todoItem.id === updatedTodo.id ? updatedTodo : todoItem
+      )
+    );
+  };
+
+  return (
+    <div>
+      <input type="text" onChange={handelChange} value={newTodo} />
+      <button onClick={handelClick}>Add</button>
+      {todoList.map((todo) => (
+        <TodoItem
+          key={todo.id}
+          todo={todo}
+          handleDelete={handleDelete}
+          Edit={handleEdit}
+        />
+      ))}
+    </div>
+  );
+}
+export default TodoList;

From f06d9f6d7f78535c6bb709ac40312a95713ade95 Mon Sep 17 00:00:00 2001
From: KJ-MU <gullssea5@gmail.com>
Date: Sat, 23 Mar 2024 04:25:33 +0300
Subject: [PATCH 2/4] add some styles

---
 package-lock.json          | 132 ++++++-------------------------------
 package.json               |   4 ++
 src/App.css                |  29 --------
 src/App.js                 |   3 +-
 src/components/TodoItem.js |  52 ++++++++++-----
 src/components/TodoList.js | 115 +++++++++++++++++++++++++++-----
 src/index.css              |  11 +++-
 tailwind.config.js         |  19 ++++++
 8 files changed, 187 insertions(+), 178 deletions(-)
 create mode 100644 tailwind.config.js

diff --git a/package-lock.json b/package-lock.json
index 6dc47ce..c6e3512 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,15 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "lottie-react": "^2.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "uuid4": "^2.0.3",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.4.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3671,104 +3675,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "9.3.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
-      "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
-      "peer": true,
-      "dependencies": {
-        "deep-equal": "^2.0.5"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "peer": true
-    },
-    "node_modules/@testing-library/dom/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -12464,6 +12370,23 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-react": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.0.tgz",
+      "integrity": "sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==",
+      "dependencies": {
+        "lottie-web": "^5.10.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -17133,19 +17056,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index c84620f..3ea248f 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -35,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/src/App.css b/src/App.css
index 13088c2..0f59ada 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,37 +13,8 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
   }
 }
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index eca5a72..f4396a1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,12 @@
 import "./App.css";
 import TodoList from "./components/TodoList";
-import todoData from "./todoData";
 // TODO: Import the todoData and pass it as a prop to the TodoList component
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <TodoList todoData={todoData} />
+        <TodoList />
       </header>
     </div>
   );
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
index 0eda838..40d7f11 100644
--- a/src/components/TodoItem.js
+++ b/src/components/TodoItem.js
@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 
-function TodoItem({ todo, handleDelete, Edit }) {
+function TodoItem({ todo, handleDelete, Edit, handleToggle }) {
   const [isEditing, setisEditing] = useState(false);
   const [todoTitle, setTodoTitel] = useState(todo.title);
-
+  const [todoDescription, setTodoDescription] = useState(todo.details);
+  ///////////////////////////////////////////////////////////////
   const handelEdit = () => {
     setisEditing(true);
   };
@@ -11,9 +12,12 @@ function TodoItem({ todo, handleDelete, Edit }) {
   const handelEditChange = (e) => {
     setTodoTitel(e.target.value);
   };
+  const handelDescriptionChange = (e) => {
+    setTodoDescription(e.target.value);
+  };
 
   const handelSave = () => {
-    const updatedTodo = { ...todo, title: todoTitle };
+    const updatedTodo = { ...todo, title: todoTitle, details: todoDescription };
     if (updatedTodo.title.trim() === "") {
       return;
     }
@@ -21,23 +25,37 @@ function TodoItem({ todo, handleDelete, Edit }) {
     Edit(updatedTodo);
     setisEditing(false);
   };
-
+  /////////////////////////////////////////////////////////////////////////////////
   return (
-    <div style={{ display: "flex", alignItems: "center", columnGap: "20px" }}>
-      {isEditing ? (
-        <input onChange={handelEditChange} type="text" value={todoTitle} />
-      ) : (
-        <p>{todo.title}</p>
-      )}
-
-      <sub style={{ color: "red" }} onClick={() => handleDelete(todo.id)}>
-        Delete
-      </sub>
-
+    <div className="bg-lightwhite p-2 w-full flex items-start justify-center rounded shadow-md">
       {isEditing ? (
-        <sub onClick={handelSave}>Save</sub>
+        <div>
+          <input onChange={handelEditChange} type="text" value={todoTitle} />
+          <input
+            onChange={handelDescriptionChange}
+            type="text"
+            value={todoDescription}
+          />
+          <sub onClick={handelSave}>Save</sub>
+          <sub onClick={() => handleDelete(todo.id)}>Delete</sub>
+        </div>
       ) : (
-        <sub onClick={handelEdit}>Edit</sub>
+        <div className="flex flex-col items-start w-full justify-center">
+          <h3 className="text-violet font-xl">{todo.title}</h3>
+          <p className="text-grey">{todo.details}</p>
+          <input
+            className="self-end mr-6 mb-4 "
+            type="checkbox"
+            checked={todo.isComplete}
+            onChange={() => handleToggle(todo.id)}
+          />
+
+          <div className="self-end flex gap-4 p-4">
+            <sub onClick={handelEdit}>Edit</sub>
+
+            <sub onClick={() => handleDelete(todo.id)}>Delete</sub>
+          </div>
+        </div>
       )}
     </div>
   );
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 6760a14..84791d2 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -1,25 +1,35 @@
 import { useState } from "react";
 import uuid4 from "uuid4";
 import TodoItem from "./TodoItem";
-
-function TodoList({ todoData }) {
-  const [todoList, setTodoList] = useState(todoData);
+/////////////////////////////////////////////////////////////////////
+function TodoList() {
+  const [todoList, setTodoList] = useState([]);
   const [newTodo, setNewTodo] = useState("");
-
+  const [decription, setDecription] = useState("");
+  const [showCompleted, setShowCompleted] = useState(false);
+  //////////////////////////////////////////////////////////////////////
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
   const handelChange = (e) => {
     setNewTodo(e.target.value);
   };
-  const handelClick = () => {
+  const handelDescription = (e) => {
+    setDecription(e.target.value);
+  };
+  const handelClick = (e) => {
     if (newTodo.trim() === "") {
       return;
     }
     const newTodoObj = {
       id: uuid4(),
       title: newTodo,
-      done: false,
+      details: decription,
+      isComplete: false,
     };
     setTodoList([...todoList, newTodoObj]);
-    setNewTodo(" ");
+    setNewTodo("");
+    setDecription("");
   };
 
   const handleDelete = (todoId) => {
@@ -32,19 +42,92 @@ function TodoList({ todoData }) {
       )
     );
   };
+  const handleToggle = (Id) => {
+    setTodoList(
+      todoList.map((todo) =>
+        todo.id === Id ? { ...todo, isComplete: !todo.isComplete } : todo
+      )
+    );
+  };
+  const handleShowAll = () => {
+    setShowCompleted(null);
+  };
 
+  const filteredTodos =
+    showCompleted === false
+      ? todoList.filter((todo) => !todo.isComplete)
+      : showCompleted === true
+      ? todoList.filter((todo) => todo.isComplete)
+      : todoList;
+  /////////////////////////////////////////////////////////////////////
   return (
     <div>
-      <input type="text" onChange={handelChange} value={newTodo} />
-      <button onClick={handelClick}>Add</button>
-      {todoList.map((todo) => (
-        <TodoItem
-          key={todo.id}
-          todo={todo}
-          handleDelete={handleDelete}
-          Edit={handleEdit}
+      <span>Start your day with a plan!!</span>
+      <form
+        className=" shadow-md flex items-start flex-col text-violet bg-darkwhite p-6  grow gap-2 w-90% m-2 mr-2 rounded-s "
+        onSubmit={handleSubmit}
+      >
+        <label className="text-xl font-semibold" htmlFor="#todo">
+          Task
+        </label>
+        <input
+          className="h-10 w-full p-1 rounded-full text-grey hover:brightness-95 hover:transition-all	duration-300"
+          id="todo"
+          type="text"
+          placeholder="What is the task for today?"
+          onChange={handelChange}
+          value={newTodo}
+        />
+        <label className="font-medium " htmlFor="#description">
+          Description
+        </label>
+        <input
+          className="h-10 w-full p-1 rounded-full text-grey hover:brightness-95 hover:transition-all	duration-300"
+          id="description"
+          type="text"
+          placeholder="What is the task description?"
+          onChange={handelDescription}
+          value={decription}
         />
-      ))}
+        <button
+          className="bg-rose rounded-full h-12 w-12 self-end m-2 text-l font-bold text-center hover:scale-110 hover:transition-all	duration-500"
+          onClick={handelClick}
+        >
+          +
+        </button>
+      </form>
+      {/* //////////////////////////////////////////////////////////////// */}
+      <div className="flex p-2">
+        <button
+          className="shadow-md bg-violet hover:brightness-75 hover:transition-all	duration-300 w-16 p-2 text-veryLight rounded-l	"
+          onClick={handleShowAll}
+        >
+          All
+        </button>
+        <button
+          className="shadow-md bg-violet hover:brightness-75 hover:transition-all	duration-300  w-auto p-2 text-veryLight"
+          onClick={() => setShowCompleted(false)}
+        >
+          Uncompleted
+        </button>
+        <button
+          className="shadow-md bg-violet hover:brightness-75 hover:transition-all	duration-300 w-auto p-2 text-veryLight pr-6 rounded-r"
+          onClick={() => setShowCompleted(true)}
+        >
+          Completed
+        </button>
+      </div>
+      <div className="flex p-2 flex-col items-start   gap-4">
+        {filteredTodos.map((todo) => (
+          <TodoItem
+            key={todo.id}
+            todo={todo}
+            handleDelete={handleDelete}
+            Edit={handleEdit}
+            handleToggle={handleToggle}
+          />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index ec2585e..20690e6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  width: 100%;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..aad55a9
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    colors: {
+      violet: "#4f46e5",
+      rose: "#fb7185",
+      grey: "#1e293b",
+      darkwhite: "#e2e8f0",
+      lightwhite: "#f1f5f9",
+      veryLight: "rgb(226 232 240)",
+    },
+    fontFamily: {
+      sans: ["Graphik", "sans-serif"],
+      serif: ["Merriweather", "serif"],
+    },
+  },
+  plugins: [],
+};

From b208da78d60afa8e6b66f3968907abe259b5f510 Mon Sep 17 00:00:00 2001
From: KJ-MU <gullssea5@gmail.com>
Date: Sun, 24 Mar 2024 03:41:18 +0300
Subject: [PATCH 3/4] add tabs, animation and local storage

---
 package-lock.json           | 149 ++++++++++++++++++++++++++++++++++++
 package.json                |   2 +
 src/App.js                  |   1 -
 src/a.json                  |   1 +
 src/b.json                  |   1 +
 src/components/Animation.js |  42 ++++++++++
 src/components/ListTabs.js  |  27 +++++++
 src/components/TodoItem.js  |  60 +++++++++++----
 src/components/TodoList.js  |  64 +++++++++-------
 tailwind.config.js          |   5 +-
 10 files changed, 308 insertions(+), 44 deletions(-)
 create mode 100644 src/a.json
 create mode 100644 src/b.json
 create mode 100644 src/components/Animation.js
 create mode 100644 src/components/ListTabs.js

diff --git a/package-lock.json b/package-lock.json
index c6e3512..a32d60f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,10 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "lottie-react": "^2.4.0",
+        "lottie-web": "^5.12.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-lottie": "^1.2.4",
         "react-scripts": "5.0.1",
         "uuid4": "^2.0.3",
         "web-vitals": "^2.1.4"
@@ -3675,6 +3677,104 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "9.3.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
+      "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.1.3",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "peer": true,
+      "dependencies": {
+        "deep-equal": "^2.0.5"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "peer": true
+    },
+    "node_modules/@testing-library/dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -5692,6 +5792,27 @@
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -14987,6 +15108,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lottie": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.4.tgz",
+      "integrity": "sha512-kBGxI+MIZGBf4wZhNCWwHkMcVP+kbpmrLWH/SkO0qCKc7D7eSPcxQbfpsmsCo8v2KCBYjuGSou+xTqK44D/jMg==",
+      "dependencies": {
+        "babel-runtime": "^6.26.0",
+        "lottie-web": "^5.1.3"
+      },
+      "engines": {
+        "npm": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17056,6 +17192,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index 3ea248f..88fd4e0 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,10 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "lottie-react": "^2.4.0",
+    "lottie-web": "^5.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-lottie": "^1.2.4",
     "react-scripts": "5.0.1",
     "uuid4": "^2.0.3",
     "web-vitals": "^2.1.4"
diff --git a/src/App.js b/src/App.js
index f4396a1..d9b0c76 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
 import "./App.css";
 import TodoList from "./components/TodoList";
-// TODO: Import the todoData and pass it as a prop to the TodoList component
 
 function App() {
   return (
diff --git a/src/a.json b/src/a.json
new file mode 100644
index 0000000..ec0b85b
--- /dev/null
+++ b/src/a.json
@@ -0,0 +1 @@
+{"v":"5.4.3","fr":30,"ip":0,"op":31,"w":400,"h":400,"nm":"good","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Calque de forme 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,200,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[],"ip":0,"op":31,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"coche","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-12.249,-5.011,0],"ix":2},"a":{"a":0,"k":[-18,-78.5,0],"ix":1},"s":{"a":0,"k":[111.35,111.35,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-107.006,-69.99],[-19.597,2.505],[85.185,-123.056]],"o":[[-107.006,-69.99],[-19.597,2.505],[85.185,-123.056]],"v":[[-107.006,-69.99],[-19.597,2.505],[85.185,-123.056]],"c":false},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.266],"y":[1]},"o":{"x":[0.807],"y":[0]},"n":["0p266_1_0p807_0"],"t":4,"s":[0],"e":[100]},{"t":19}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Raccorder les tracés 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.5412,0.4902,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":25,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer ","_render":true}],"nm":"Forme 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":31,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"circle","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.281],"y":[1]},"o":{"x":[0.748],"y":[0]},"n":["0p281_1_0p748_0"],"t":0,"s":[-81.143],"e":[0]},{"t":10}],"ix":10},"p":{"a":0,"k":[200,200,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.309,0.309,0.667],"y":[1,1,1]},"o":{"x":[0.841,0.841,0.333],"y":[0,0,0]},"n":["0p309_1_0p841_0","0p309_1_0p841_0","0p667_1_0p333_0"],"t":0,"s":[41.198,41.198,100],"e":[89.36,89.36,100]},{"t":10}],"ix":6,"x":"var $bm_rt;\nvar amp, freq, decay, n, time_max, n, t, t, v;\namp = 0.5;\nfreq = 2;\ndecay = 3;\nn = 0;\n$bm_rt = time_max = 3;\nif (numKeys > 0) {\n    $bm_rt = n = nearestKey(time).index;\n    if (key(n).time > time) {\n        n--;\n    }\n}\nif (n == 0) {\n    $bm_rt = t = 0;\n} else {\n    $bm_rt = t = sub(time, key(n).time);\n}\nif (n > 0 && t < time_max) {\n    v = velocityAtTime(sub(key(n).time, div(thisComp.frameDuration, 10)));\n    $bm_rt = sum(value, div(mul(mul(v, amp), Math.sin(mul(mul(mul(freq, t), 2), Math.PI))), Math.exp(mul(decay, t))));\n} else {\n    $bm_rt = value;\n}"}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[400,400],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Tracé d'ellipse 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.5412,0.4902,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":25,"ix":5},"lc":2,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.282,89.282],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer ","_render":true}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.281],"y":[1]},"o":{"x":[0.803],"y":[0]},"n":["0p281_1_0p803_0"],"t":0,"s":[0],"e":[100]},{"t":10}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":-46,"ix":3},"m":1,"ix":2,"nm":"Raccorder les tracés 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true}],"ip":0,"op":31,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}
\ No newline at end of file
diff --git a/src/b.json b/src/b.json
new file mode 100644
index 0000000..7346b46
--- /dev/null
+++ b/src/b.json
@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.4","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":30,"w":1200,"h":1200,"nm":"watermelone","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"yellow glases","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-5,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":1,"s":[-15.735,-211.21,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":8,"s":[-16.223,-223.708,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":16,"s":[-14.761,-211.293,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24,"s":[-15.217,-219.618,0],"to":[0,0,0],"ti":[0,0,0]},{"t":30,"s":[-15.735,-211.21,0]}],"ix":2},"a":{"a":0,"k":[15,-205.5,0],"ix":1},"s":{"a":0,"k":[117.939,122.853,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[15,-13],[-14,-20],[-39.809,0.458],[0,0],[23.426,5.406]],"o":[[-15.302,13.261],[14,20],[87,-1],[0,0],[-52,-12]],"v":[[-212,-222],[-196,-124],[-119,-90],[-31,-194],[-57,-218]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[30,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[-100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 4","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[101,1.75],[4.993,-2.774],[-4.075,-2.637],[-3.5,-8.5],[-51,-45.5],[-47.5,24],[-2.5,17.5],[15.5,9.5]],"o":[[-61.503,-1.066],[-4.5,2.5],[4.25,2.75],[3.5,8.5],[24.443,21.807],[53.089,-26.824],[2.5,-17.5],[-15.5,-9.5]],"v":[[-160,-248.5],[-249,-241],[-247.5,-212],[-235,-203],[-193,-90.5],[-66,-84],[-7,-181.5],[-19.5,-224]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.870588295133,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[30,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[-100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 5","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-16.264,-0.008],[0,0],[0,0],[13.668,0.084]],"o":[[0,0],[0,0],[16.736,0.008],[0,0],[0,0],[-13.499,-0.083]],"v":[[-27.25,-227.25],[-8,-178.75],[14.764,-193.008],[37.25,-179],[54.25,-226.75],[13.247,-216.252]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.870588295133,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[15,-13],[-14,-20],[-39.809,0.458],[0,0],[23.426,5.406]],"o":[[-15.302,13.261],[14,20],[87,-1],[0,0],[-52,-12]],"v":[[-212,-222],[-196,-124],[-119,-90],[-31,-194],[-57,-218]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[101,1.75],[4.993,-2.774],[-4.075,-2.637],[-3.5,-8.5],[-51,-45.5],[-47.5,24],[-2.5,17.5],[15.5,9.5]],"o":[[-61.503,-1.066],[-4.5,2.5],[4.25,2.75],[3.5,8.5],[24.443,21.807],[53.089,-26.824],[2.5,-17.5],[-15.5,-9.5]],"v":[[-160,-248.5],[-249,-241],[-247.5,-212],[-235,-203],[-193,-90.5],[-66,-84],[-7,-181.5],[-19.5,-224]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.870588295133,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"left thingers","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-400.185,37.697,0],"ix":2},"a":{"a":0,"k":[-400.185,37.697,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.517,-7.517],[-6,-5],[-4,6],[8,3]],"o":[[-6,6],[6,5],[4,-6],[-8,-3]],"v":[[-416,32],[-412,49],[-393,52],[-401,39]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.75,2.5],[3.75,-2.75],[-2.75,-1],[-5.75,4.75]],"o":[[-2.667,-3.81],[-3.75,2.75],[2.75,1],[5.75,-4.75]],"v":[[-382.5,22.75],[-392.25,23],[-395.25,33.25],[-386.25,31.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"coctail","parent":7,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[-14]},{"t":30,"s":[2]}],"ix":10},"p":{"a":0,"k":[-393.775,52.646,0],"ix":2},"a":{"a":0,"k":[-395.775,42.646,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[7,7],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-401.5,-25.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 8","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[9,9],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-380.5,-61.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 5","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[10,13],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-363,-80.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 4","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[9,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-413.5,-45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 3","np":3,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[11,13],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-408.5,-82.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[10,13],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-440,-74.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[6.5,5.5],[4.5,-8],[-12.5,-0.5]],"o":[[-8.721,-7.379],[-4.5,8],[14.996,0.6]],"v":[[-326,-98],[-478,-93.5],[-399.5,-3]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.870588295133,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[-401.875,-52.463],"ix":2},"a":{"a":0,"k":[-401.875,-52.463],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"drink","np":7,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[29.5,-1],[-0.676,-11.047],[0,0],[1.103,-6.985],[-4.5,-6.5],[-22.5,0.5],[1.5,6.5],[3.5,8],[0,0],[1,26]],"o":[[-26.56,0.9],[1.5,24.5],[0,0],[-1.5,9.5],[4.5,6.5],[22.5,-0.5],[-1.5,-6.5],[-3.5,-8],[0,0],[-0.438,-11.393]],"v":[[-406.5,-115.5],[-502.5,-100.5],[-411,12.5],[-406,92],[-444.5,122.5],[-389.5,127.5],[-340.5,115],[-382,90.5],[-389.5,12],[-305,-106.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"coctail glass","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-477.423,-116.19],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.186,86.186],"ix":3},"r":{"a":0,"k":-211.976,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 21","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-480.513,-110.494],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.186,86.186],"ix":3},"r":{"a":0,"k":-189.011,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 20","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-486.702,-114.356],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[83.036,83.036],"ix":3},"r":{"a":0,"k":-216.293,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 19","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-507.28,-85.467],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.186,86.186],"ix":3},"r":{"a":0,"k":-268.7,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 18","np":3,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-509.912,-77.012],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.186,86.186],"ix":3},"r":{"a":0,"k":-236.185,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 17","np":3,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-515.287,-84.985],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":-236.185,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 16","np":3,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-524.54,-108.782],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.186,86.186],"ix":3},"r":{"a":0,"k":-186.721,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 15","np":3,"cix":2,"bm":0,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-528.881,-102.984],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.186,86.186],"ix":3},"r":{"a":0,"k":-154.206,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 14","np":3,"cix":2,"bm":0,"ix":8,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-534.256,-110.957],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":-154.206,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 13","np":3,"cix":2,"bm":0,"ix":9,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-504.871,-135.562],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.186,86.186],"ix":3},"r":{"a":0,"k":-32.515,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 12","np":3,"cix":2,"bm":0,"ix":10,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-509.212,-129.763],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.186,86.186],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 11","np":3,"cix":2,"bm":0,"ix":11,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[4.444,3.581],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-514.587,-137.737],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":12,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[6,7.5],[1.5,-7],[0,0]],"o":[[-6,-7.5],[-1.5,7],[0,0]],"v":[[-488.5,-159],[-528.5,-153.5],[-501,-114]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.839215746113,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-506.5,-97.5],"ix":2},"a":{"a":0,"k":[-501.565,-114.95],"ix":1},"s":{"a":0,"k":[67.799,67.799],"ix":3},"r":{"a":0,"k":-156.804,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 5","np":3,"cix":2,"bm":0,"ix":13,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[6,7.5],[1.5,-7],[0,0]],"o":[[-6,-7.5],[-1.5,7],[0,0]],"v":[[-488.5,-159],[-528.5,-153.5],[-501,-114]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.839215746113,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-495.5,-109.5],"ix":2},"a":{"a":0,"k":[-501.565,-114.95],"ix":1},"s":{"a":0,"k":[67.799,67.799],"ix":3},"r":{"a":0,"k":77.669,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 6","np":3,"cix":2,"bm":0,"ix":14,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[6,7.5],[1.5,-7],[0,0]],"o":[[-6,-7.5],[-1.5,7],[0,0]],"v":[[-488.5,-159],[-528.5,-153.5],[-501,-114]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.839215746113,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-513.5,-107.5],"ix":2},"a":{"a":0,"k":[-501.565,-114.95],"ix":1},"s":{"a":0,"k":[67.799,67.799],"ix":3},"r":{"a":0,"k":-85.342,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 4","np":3,"cix":2,"bm":0,"ix":15,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[6,7.5],[1.5,-7],[0,0]],"o":[[-6,-7.5],[-1.5,7],[0,0]],"v":[[-488.5,-159],[-528.5,-153.5],[-501,-114]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.839215746113,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-505.5,-117],"ix":2},"a":{"a":0,"k":[-501.565,-114.95],"ix":1},"s":{"a":0,"k":[67.799,67.799],"ix":3},"r":{"a":0,"k":0.52,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":16,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[171,170],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019667682,0.254901960784,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-504.5,-107],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[59.701,59.701],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 10","np":3,"cix":2,"bm":0,"ix":17,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[171,170],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.839215746113,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-504.5,-107],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[68.107,68.107],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 9","np":3,"cix":2,"bm":0,"ix":18,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[-504.5,-107],"ix":2},"a":{"a":0,"k":[-504.5,-107],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"lemon","np":18,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-3.875,22.984],[0,0]],"o":[[4.109,-11.369],[13.02,3.085],[0,0]],"v":[[-402.023,-33.108],[-386.893,-185.612],[-358.222,-175.757]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-394.26,-40.806],"ix":2},"a":{"a":0,"k":[-405.495,-30.984],"ix":1},"s":{"a":0,"k":[96.901,89.975],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"drink tube","np":3,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"body 4","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-15.452,206.915,0],"ix":2},"a":{"a":0,"k":[-15.452,206.915,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-45.452,15.733],[-104.81,57.687],[-5.702,-15.684],[157.255,-14.282]],"o":[[105.205,-10.765],[7.388,18.03],[2.872,7.901],[-41.949,3.81]],"v":[[46,168.44],[329.359,81.257],[349.069,131.97],[68.498,218.807]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.315833506865,0.803921568627,0.208073814242,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-40,-40],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,92.186],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"body 2","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-15.452,206.915,0],"ix":2},"a":{"a":0,"k":[-15.452,206.915,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-31,3.127],[-23,11.466],[-23,2.085],[-19,13.551]],"o":[[31,-3.127],[23,-11.466],[23,-2.085],[19,-13.551]],"v":[[52.548,248.609],[117.548,218.381],[190.548,203.788],[265.548,185.025]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.372549019608,0.729411764706,0.274509803922,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-29,-7.296],[-26,-5.212],[-31,10.424],[-48,-10.424],[0,0]],"o":[[0,0],[29,7.296],[26,5.212],[31,-10.424],[48,10.424],[0,0]],"v":[[-326.452,215.254],[-289.452,214.211],[-241.452,242.355],[-162.452,244.44],[-77.452,235.059],[9.548,251.736]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.372549019608,0.729411764706,0.274509803922,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-52.064,-25.263],[-138,54.202]],"o":[[0,0],[58,28.144],[53.877,-21.161]],"v":[[-305.452,157.924],[-165.452,168.348],[134.548,167.305]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.372549019608,0.729411764706,0.274509803922,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-87.452,8.948],[-104.81,57.687],[4.064,-21.617],[224.565,-36.073],[12.027,27.179],[-24.361,81.223]],"o":[[105.205,-10.765],[29.117,71.057],[-5.303,28.208],[-212.892,34.198],[-5.081,-11.482],[173.075,50.074]],"v":[[46,168.44],[329.359,81.257],[371.621,228.988],[43.984,364.977],[-315.621,301.353],[-282.527,149.929]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.221256645053,0.572549019608,0.143698568905,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-40,-40],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,92.186],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"body 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":15,"s":[5]},{"t":30,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.578,"y":1},"o":{"x":0.169,"y":0},"t":0,"s":[628,882,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.835,"y":1},"o":{"x":0.411,"y":0},"t":7,"s":[628,872,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.578,"y":1},"o":{"x":0.167,"y":0},"t":15,"s":[628,882,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.411,"y":0},"t":23,"s":[628,872,0],"to":[0,0,0],"ti":[0,0,0]},{"t":30,"s":[628,882,0]}],"ix":2},"a":{"a":0,"k":[-3.452,238.186,0],"ix":1},"s":{"a":0,"k":[100,95.937,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.375,4.56],[-2,-8.339],[-7.375,4.039],[1.5,8.599]],"o":[[-8.375,-4.56],[2,8.339],[7.375,-4.039],[-1.5,-8.599]],"v":[[0.923,-395.045],[-8.577,-371.202],[11.423,-362.472],[7.298,-380.843]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.470588235294,0.042715282066,0.0184544395,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 9","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.385,-0.094],[-11,1.042]],"o":[[-10.25,0.13],[11,-1.042]],"v":[[-47.327,-465.795],[-48.577,-429.183]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.470588235294,0.042715282066,0.0184544395,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 8","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[6.875,-0.13],[4,-5.342],[-4.25,-2.606],[-1,6.645]],"o":[[-6.875,0.13],[-4,5.342],[4.25,2.606],[1,-6.645]],"v":[[-85.952,-414.068],[-94.577,-398.824],[-98.702,-382.407],[-80.702,-391.267]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.470588235294,0.042715282066,0.0184544395,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 7","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7,5.994],[-0.25,-11.727],[-5.25,3.648],[-0.5,14.332]],"o":[[-7,-5.994],[0.25,11.727],[5.25,-3.648],[0.5,-14.332]],"v":[[191.798,-41.426],[169.298,-18.494],[193.548,5.74],[190.548,-16.931]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.470588235294,0.042715282066,0.0184544395,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 6","np":3,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.25,6.515],[0.5,-12.769],[-6,1.042],[2.75,16.417]],"o":[[-8.25,-6.515],[-0.5,12.769],[6,-1.042],[-2.75,-16.417]],"v":[[102.048,36.229],[80.548,54.992],[99.798,84.438],[100.048,65.936]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.470588235294,0.042715282066,0.0184544395,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 5","np":3,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.5,5.994],[1,-13.551],[-6.25,1.042],[1.5,14.854]],"o":[[-5.5,-5.994],[-1,13.551],[6.25,-1.042],[-1.5,-14.854]],"v":[[-22.202,-3.901],[-44.952,13.819],[-24.202,43.005],[-24.952,23.721]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.470588235294,0.042715282066,0.0184544395,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 4","np":3,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[9.5,-3.648],[1.5,-14.593],[-9,2.085],[-0.75,11.727]],"o":[[-9.5,3.648],[-1.5,14.593],[9,-2.085],[0.75,-11.727]],"v":[[-129.952,50.301],[-136.702,71.409],[-136.702,96.686],[-118.452,69.845]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.470588235294,0.042715282066,0.0184544395,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[23,1.564],[-18.75,-4.951]],"o":[[-8.268,-0.562],[18.75,4.951]],"v":[[-202.952,-28.657],[-229.702,24.503]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.470588235294,0.042715282066,0.0184544395,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":8,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[-19.841,-184.443],"ix":2},"a":{"a":0,"k":[-19.841,-184.443],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"seeds","np":8,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[3.678,2.715],[11.461,1.477],[10.958,-10.455],[-22.925,0.783]],"o":[[-2.833,-2.092],[-19.336,-2.492],[-10.192,9.725],[13.477,-0.46]],"v":[[11.562,-94.453],[-11.48,-88.229],[-44.166,-112.834],[-10.841,-76.38]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.113725497676,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[3.009,-83.403],"ix":2},"a":{"a":0,"k":[-6.5,-84.431],"ix":1},"s":{"a":0,"k":[92.163,79.498],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"mouth","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-59.452,13.471],[16.927,-90.044],[224.565,-36.073],[12.027,27.179]],"o":[[44.353,-10.05],[-5.303,28.208],[-212.892,34.198],[-19.83,-44.815]],"v":[[-8,-521.296],[371.621,228.988],[43.984,364.977],[-315.621,301.353]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976470588235,0.215552311318,0.172318327661,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-40,-40],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,92.186],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"left hand","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[4]},{"t":30,"s":[0]}],"ix":10},"p":{"a":0,"k":[-283.542,8.089,0],"ix":2},"a":{"a":0,"k":[-252.09,61.253,0],"ix":1},"s":{"a":0,"k":[100,104.236,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[42,2],[6.5,-3],[-52.5,0.5],[0,0]],"o":[[0,0],[-42,-2],[-6.5,3],[52.5,-0.5],[0,0]],"v":[[-230,40],[-324,68],[-386.5,53],[-329.5,86.5],[-235.5,64.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"right hand","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.756]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[3]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[-0.728]},"t":8,"s":[-11.149]},{"i":{"x":[0.667],"y":[1.048]},"o":{"x":[0.333],"y":[0]},"t":15,"s":[-7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.015]},"t":23,"s":[-12.55]},{"t":30,"s":[3]}],"ix":10},"p":{"a":0,"k":[237.953,-34.18,0],"ix":2},"a":{"a":0,"k":[269.405,20.701,0],"ix":1},"s":{"a":0,"k":[100,104.236,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-21.365,-8.648],[-4.5,1],[-4.5,1.5],[-0.991,5.614],[32.292,18.861]],"o":[[0,0],[0,0],[63,25.5],[4.5,-1],[4.5,-1.5],[1.5,-8.5],[-56.5,-33]],"v":[[245.5,-1.5],[262,34],[355.5,64],[434,106.5],[431.5,97.5],[457,113.5],[378.5,51.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"left leg","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":0,"s":[29]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":15,"s":[0]},{"t":30,"s":[29]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":0,"s":[527.184,851.75,0],"to":[114,-79,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[767.184,851.75,0],"to":[0,0,0],"ti":[0,0,0]},{"t":30,"s":[527.184,851.75,0]}],"ix":2},"a":{"a":0,"k":[26.184,279.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[21.505,19.969],[0,0],[2,-40],[-6,-6],[-4,10],[-1.822,5.466],[-2.114,25.725]],"o":[[-7,-6.5],[0,0],[-2,40],[6,6],[4,-10],[0.875,-2.625],[3,-36.5]],"v":[[37,276.5],[14,290],[55,373],[44,438],[90,448],[62.375,428.5],[72.5,377]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"right leg","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":15,"s":[29]},{"t":30,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[767.184,851.75,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[527.184,851.75,0],"to":[0,0,0],"ti":[-142,-150,0]},{"t":30,"s":[767.184,851.75,0]}],"ix":2},"a":{"a":0,"k":[26.184,279.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[21.505,19.969],[0,0],[2,-40],[-6,-6],[-4,10],[-1.822,5.466],[-2.114,25.725]],"o":[[-7,-6.5],[0,0],[-2,40],[6,6],[4,-10],[0.875,-2.625],[3,-36.5]],"v":[[37,276.5],[14,290],[55,373],[44,438],[90,448],[62.375,428.5],[72.5,377]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/src/components/Animation.js b/src/components/Animation.js
new file mode 100644
index 0000000..bbb7128
--- /dev/null
+++ b/src/components/Animation.js
@@ -0,0 +1,42 @@
+import React from "react";
+import Lottie from "react-lottie";
+import a from "../a.json";
+import { useState } from "react";
+
+const defaultOptions = {
+  loop: false,
+  autoplay: true,
+  animationData: a,
+  rendererSettings: {
+    preserveAspectRatio: "xMidYMid slice",
+  },
+};
+
+const Animation = () => {
+  const [isStopped, setIsStopped] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const animationCompleted = () => {
+    setIsStopped(true);
+    setIsPaused(true);
+  };
+
+  return (
+    <div className="absolute inset-0 mt-20">
+      <Lottie
+        options={defaultOptions}
+        height={400}
+        width={400}
+        isStopped={isStopped}
+        isPaused={isPaused}
+        eventListeners={[
+          {
+            eventName: "complete",
+            callback: animationCompleted,
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default Animation;
diff --git a/src/components/ListTabs.js b/src/components/ListTabs.js
new file mode 100644
index 0000000..c2706e8
--- /dev/null
+++ b/src/components/ListTabs.js
@@ -0,0 +1,27 @@
+import React from "react";
+
+const ListTabs = ({ handleShowAll, setShowCompleted }) => {
+  return (
+    <div className="flex m-2 mt-4">
+      <button
+        className="shadow-md bg-violet hover:brightness-75 hover:transition-all duration-300 w-16 p-2 text-veryLight rounded-l group focus:brightness-75 focus:outline-none "
+        onClick={handleShowAll}
+      >
+        All
+      </button>
+      <button
+        className="shadow-md bg-violet hover:brightness-75 hover:transition-all	duration-300  w-auto p-2 text-veryLight focus:brightness-75 focus:outline-none "
+        onClick={() => setShowCompleted(false)}
+      >
+        Uncompleted
+      </button>
+      <button
+        className="shadow-md bg-violet hover:brightness-75 hover:transition-all	duration-300 w-auto p-2 text-veryLight pr-6 rounded-r focus:brightness-75 focus:outline-none "
+        onClick={() => setShowCompleted(true)}
+      >
+        Completed
+      </button>
+    </div>
+  );
+};
+export default ListTabs;
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
index 40d7f11..2b4901e 100644
--- a/src/components/TodoItem.js
+++ b/src/components/TodoItem.js
@@ -1,10 +1,14 @@
 import React, { useState } from "react";
-
-function TodoItem({ todo, handleDelete, Edit, handleToggle }) {
+import trash from "../assets/trash.svg";
+import edit from "../assets/edit.svg";
+import Animation from "./Animation";
+function TodoItem({ todo, handleDelete, Edit, handleToggle, toggleAnimation }) {
   const [isEditing, setisEditing] = useState(false);
   const [todoTitle, setTodoTitel] = useState(todo.title);
   const [todoDescription, setTodoDescription] = useState(todo.details);
+  const [isChecked, setIsChecked] = useState(todo.isComplete);
   ///////////////////////////////////////////////////////////////
+
   const handelEdit = () => {
     setisEditing(true);
   };
@@ -27,33 +31,59 @@ function TodoItem({ todo, handleDelete, Edit, handleToggle }) {
   };
   /////////////////////////////////////////////////////////////////////////////////
   return (
-    <div className="bg-lightwhite p-2 w-full flex items-start justify-center rounded shadow-md">
+    <div className="w-full bg-lightwhite p-2 w-full flex items-start justify-center rounded shadow-md">
       {isEditing ? (
-        <div>
-          <input onChange={handelEditChange} type="text" value={todoTitle} />
+        <div className="flex flex-col gap-2 items-start w-full">
+          <input
+            className="text-violet h-10 w-full p-1 rounded-full text-grey hover:brightness-95 hover:transition-all	duration-300"
+            onChange={handelEditChange}
+            type="text"
+            value={todoTitle}
+            placeholder="What is the task?"
+          />
           <input
+            className="text-violet h-10 w-full p-1 rounded-full text-grey hover:brightness-95 hover:transition-all	duration-300"
             onChange={handelDescriptionChange}
             type="text"
             value={todoDescription}
+            placeholder="What is the description?"
           />
-          <sub onClick={handelSave}>Save</sub>
-          <sub onClick={() => handleDelete(todo.id)}>Delete</sub>
+          <div className="self-end flex justify-center aitems-center gap-6 p-4">
+            <button
+              className="text-sm bg-violet font-bold rounded-full p-2 text-white		"
+              onClick={handelSave}
+            >
+              Save
+            </button>
+            <sub onClick={() => handleDelete(todo.id)}>
+              {" "}
+              <img className="w-6" src={trash} alt="trash-icon" />
+            </sub>
+          </div>
         </div>
       ) : (
-        <div className="flex flex-col items-start w-full justify-center">
-          <h3 className="text-violet font-xl">{todo.title}</h3>
+        <div className="ml-4 flex flex-col items-start w-full justify-center">
+          <div onClick={toggleAnimation}>{isChecked && <Animation />}</div>
+          <h3 className="text-rose font-4xl">{todo.title}</h3>
           <p className="text-grey">{todo.details}</p>
           <input
-            className="self-end mr-6 mb-4 "
+            className="self-end mr-6 mb-4  w-6 h-6 border border-violet-300 rounded-md checked:bg-violet checked:border-transparent focus:outline-none focus:border-violet focus:ring-2 focus:ring-violet relative"
             type="checkbox"
-            checked={todo.isComplete}
-            onChange={() => handleToggle(todo.id)}
+            checked={isChecked}
+            onChange={() => {
+              handleToggle(todo.id);
+              setIsChecked(!isChecked);
+            }}
           />
 
-          <div className="self-end flex gap-4 p-4">
-            <sub onClick={handelEdit}>Edit</sub>
+          <div className="self-end flex aitems-center gap-6 p-4">
+            <sub onClick={handelEdit}>
+              <img className="w-6" src={edit} alt="React Logo" />
+            </sub>
 
-            <sub onClick={() => handleDelete(todo.id)}>Delete</sub>
+            <sub onClick={() => handleDelete(todo.id)}>
+              <img className="w-6" src={trash} alt="trash-icon" />
+            </sub>
           </div>
         </div>
       )}
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 84791d2..7c9ae54 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -1,13 +1,20 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import uuid4 from "uuid4";
 import TodoItem from "./TodoItem";
+import ListTabs from "./ListTabs";
+import Animation from "./Animation";
 /////////////////////////////////////////////////////////////////////
 function TodoList() {
   const [todoList, setTodoList] = useState([]);
   const [newTodo, setNewTodo] = useState("");
   const [decription, setDecription] = useState("");
   const [showCompleted, setShowCompleted] = useState(false);
-  //////////////////////////////////////////////////////////////////////
+  const [showAnimation, setShowAnimation] = useState(false);
+  let isChecked = null;
+  //////////////////////////////////////////////////////////////////////////
+  const toggleAnimation = () => {
+    setShowAnimation(!showAnimation);
+  };
   const handleSubmit = (e) => {
     e.preventDefault();
   };
@@ -17,6 +24,12 @@ function TodoList() {
   const handelDescription = (e) => {
     setDecription(e.target.value);
   };
+  useEffect(() => {
+    let savedTodoList = JSON.parse(localStorage.getItem("todoList"));
+    if (savedTodoList) {
+      setTodoList(savedTodoList);
+    }
+  }, []);
   const handelClick = (e) => {
     if (newTodo.trim() === "") {
       return;
@@ -27,14 +40,23 @@ function TodoList() {
       details: decription,
       isComplete: false,
     };
-    setTodoList([...todoList, newTodoObj]);
+    setTodoList((oldTodoList) => {
+      const newArray = [...oldTodoList, newTodoObj];
+      localStorage.setItem("todoList", JSON.stringify(newArray));
+      return newArray;
+    });
     setNewTodo("");
     setDecription("");
   };
 
   const handleDelete = (todoId) => {
-    setTodoList(todoList.filter((todo) => todo.id !== todoId));
+    setTodoList((oldTodoList) => {
+      const oldArray = oldTodoList.filter((todo) => todo.id !== todoId);
+      localStorage.setItem("todoList", JSON.stringify(oldArray));
+      return oldArray;
+    });
   };
+
   const handleEdit = (updatedTodo) => {
     setTodoList((TodoList) =>
       TodoList.map((todoItem) =>
@@ -42,6 +64,7 @@ function TodoList() {
       )
     );
   };
+
   const handleToggle = (Id) => {
     setTodoList(
       todoList.map((todo) =>
@@ -62,7 +85,10 @@ function TodoList() {
   /////////////////////////////////////////////////////////////////////
   return (
     <div>
-      <span>Start your day with a plan!!</span>
+      {showAnimation && <Animation />}
+      <span className="text-violet font-semibold tracking-tight flex items-start text-3xl m-6">
+        Start Your Day with Plan!!
+      </span>
       <form
         className=" shadow-md flex items-start flex-col text-violet bg-darkwhite p-6  grow gap-2 w-90% m-2 mr-2 rounded-s "
         onSubmit={handleSubmit}
@@ -71,7 +97,7 @@ function TodoList() {
           Task
         </label>
         <input
-          className="h-10 w-full p-1 rounded-full text-grey hover:brightness-95 hover:transition-all	duration-300"
+          className=" h-10 w-full p-1 rounded-full text-grey hover:brightness-95 hover:transition-all	duration-300"
           id="todo"
           type="text"
           placeholder="What is the task for today?"
@@ -97,26 +123,10 @@ function TodoList() {
         </button>
       </form>
       {/* //////////////////////////////////////////////////////////////// */}
-      <div className="flex p-2">
-        <button
-          className="shadow-md bg-violet hover:brightness-75 hover:transition-all	duration-300 w-16 p-2 text-veryLight rounded-l	"
-          onClick={handleShowAll}
-        >
-          All
-        </button>
-        <button
-          className="shadow-md bg-violet hover:brightness-75 hover:transition-all	duration-300  w-auto p-2 text-veryLight"
-          onClick={() => setShowCompleted(false)}
-        >
-          Uncompleted
-        </button>
-        <button
-          className="shadow-md bg-violet hover:brightness-75 hover:transition-all	duration-300 w-auto p-2 text-veryLight pr-6 rounded-r"
-          onClick={() => setShowCompleted(true)}
-        >
-          Completed
-        </button>
-      </div>
+      <ListTabs
+        handleShowAll={handleShowAll}
+        setShowCompleted={setShowCompleted}
+      />
       <div className="flex p-2 flex-col items-start   gap-4">
         {filteredTodos.map((todo) => (
           <TodoItem
@@ -125,6 +135,8 @@ function TodoList() {
             handleDelete={handleDelete}
             Edit={handleEdit}
             handleToggle={handleToggle}
+            isChecked={isChecked}
+            toggleAnimation={toggleAnimation}
           />
         ))}
       </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index aad55a9..a8c811a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,12 +3,13 @@ module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     colors: {
-      violet: "#4f46e5",
-      rose: "#fb7185",
+      violet: "#4338ca",
+      rose: "#f87171",
       grey: "#1e293b",
       darkwhite: "#e2e8f0",
       lightwhite: "#f1f5f9",
       veryLight: "rgb(226 232 240)",
+      white: "rgb(255 255 255)",
     },
     fontFamily: {
       sans: ["Graphik", "sans-serif"],

From 96363e54c546636773a623c7891751fda0c3fa2c Mon Sep 17 00:00:00 2001
From: KJ-MU <gullssea5@gmail.com>
Date: Sun, 24 Mar 2024 15:21:16 +0300
Subject: [PATCH 4/4] add new stuff

---
 src/App.js                     |  2 +-
 src/assignTo.js                |  7 +++++++
 src/components/DropdownMenu.js | 35 ++++++++++++++++++++++++++++++++++
 src/components/TodoItem.js     |  7 +++++--
 src/components/TodoList.js     | 23 +++++++++++++++++++++-
 tailwind.config.js             |  2 ++
 6 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 src/assignTo.js
 create mode 100644 src/components/DropdownMenu.js

diff --git a/src/App.js b/src/App.js
index d9b0c76..b9be991 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import "./App.css";
 import TodoList from "./components/TodoList";
-
+// import DropdownMenu from "./components/DropdownMenu";
 function App() {
   return (
     <div className="App">
diff --git a/src/assignTo.js b/src/assignTo.js
new file mode 100644
index 0000000..fc32755
--- /dev/null
+++ b/src/assignTo.js
@@ -0,0 +1,7 @@
+const assignTo = [
+  { value: "Hamza", label: "Hamza" },
+  { value: "Umabass", label: "Umabass" },
+  { value: "Jasimia", label: "Jasimia" },
+  { value: "Stopha", label: "Stopha" },
+];
+export default assignTo;
diff --git a/src/components/DropdownMenu.js b/src/components/DropdownMenu.js
new file mode 100644
index 0000000..a3dce64
--- /dev/null
+++ b/src/components/DropdownMenu.js
@@ -0,0 +1,35 @@
+import assignTo from "../assignTo";
+function DropdownMenu({
+  isOpen,
+  selectedOption,
+  toggleDropdown,
+  handleOptionClick,
+}) {
+  const options = assignTo;
+
+  return (
+    <div className="ml-2 ">
+      <button onClick={toggleDropdown}>
+        {selectedOption ? selectedOption.label : "Assign to:"}
+      </button>
+
+      {isOpen && (
+        <div className="absolute bg-veryLight">
+          <ul className="flex flex-col items-start">
+            {options.map((option) => (
+              <li
+                className="flex shadow-2xl bg-whatever pl-2 w-20 text-violet underline"
+                key={option.value}
+                onClick={() => handleOptionClick(option)}
+              >
+                {option.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DropdownMenu;
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
index 2b4901e..f145834 100644
--- a/src/components/TodoItem.js
+++ b/src/components/TodoItem.js
@@ -62,10 +62,13 @@ function TodoItem({ todo, handleDelete, Edit, handleToggle, toggleAnimation }) {
           </div>
         </div>
       ) : (
-        <div className="ml-4 flex flex-col items-start w-full justify-center">
+        <div className="ml-4 flex flex-col items-start w-full justify-center gap-2">
           <div onClick={toggleAnimation}>{isChecked && <Animation />}</div>
-          <h3 className="text-rose font-4xl">{todo.title}</h3>
+          <h3 className="text-rose font-6xl">{todo.title}</h3>
           <p className="text-grey">{todo.details}</p>
+          <p className="text-xs text-lightgrey italic">
+            Assigned to: {todo.assignedto.label}
+          </p>
           <input
             className="self-end mr-6 mb-4  w-6 h-6 border border-violet-300 rounded-md checked:bg-violet checked:border-transparent focus:outline-none focus:border-violet focus:ring-2 focus:ring-violet relative"
             type="checkbox"
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 7c9ae54..53e3beb 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -3,6 +3,7 @@ import uuid4 from "uuid4";
 import TodoItem from "./TodoItem";
 import ListTabs from "./ListTabs";
 import Animation from "./Animation";
+import DropdownMenu from "./DropdownMenu";
 /////////////////////////////////////////////////////////////////////
 function TodoList() {
   const [todoList, setTodoList] = useState([]);
@@ -10,8 +11,20 @@ function TodoList() {
   const [decription, setDecription] = useState("");
   const [showCompleted, setShowCompleted] = useState(false);
   const [showAnimation, setShowAnimation] = useState(false);
+  // const [assignedfor, setAssignedfor] = useState(null);
   let isChecked = null;
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+
   //////////////////////////////////////////////////////////////////////////
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleOptionClick = (option) => {
+    setSelectedOption(option);
+    setIsOpen(false);
+  };
   const toggleAnimation = () => {
     setShowAnimation(!showAnimation);
   };
@@ -31,6 +44,7 @@ function TodoList() {
     }
   }, []);
   const handelClick = (e) => {
+    setSelectedOption(null);
     if (newTodo.trim() === "") {
       return;
     }
@@ -39,6 +53,7 @@ function TodoList() {
       title: newTodo,
       details: decription,
       isComplete: false,
+      assignedto: selectedOption,
     };
     setTodoList((oldTodoList) => {
       const newArray = [...oldTodoList, newTodoObj];
@@ -75,7 +90,7 @@ function TodoList() {
   const handleShowAll = () => {
     setShowCompleted(null);
   };
-
+  console.log(todoList);
   const filteredTodos =
     showCompleted === false
       ? todoList.filter((todo) => !todo.isComplete)
@@ -115,6 +130,12 @@ function TodoList() {
           onChange={handelDescription}
           value={decription}
         />
+        <DropdownMenu
+          isOpen={isOpen}
+          selectedOption={selectedOption}
+          toggleDropdown={toggleDropdown}
+          handleOptionClick={handleOptionClick}
+        />
         <button
           className="bg-rose rounded-full h-12 w-12 self-end m-2 text-l font-bold text-center hover:scale-110 hover:transition-all	duration-500"
           onClick={handelClick}
diff --git a/tailwind.config.js b/tailwind.config.js
index a8c811a..bd5f663 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,10 +6,12 @@ module.exports = {
       violet: "#4338ca",
       rose: "#f87171",
       grey: "#1e293b",
+      lightgrey: "#475569",
       darkwhite: "#e2e8f0",
       lightwhite: "#f1f5f9",
       veryLight: "rgb(226 232 240)",
       white: "rgb(255 255 255)",
+      whatever: "#f1f5f9",
     },
     fontFamily: {
       sans: ["Graphik", "sans-serif"],