diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
new file mode 100644
index 000000000..84ca58a42
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
@@ -0,0 +1,48 @@
+
+name: "🐞 Bug Report"
+description: "Create a detailed report to help us improve"
+title: "BUG:"
+labels: ["Bug"]
+body:
+  - type: checkboxes
+    attributes:
+      label: "Preliminary Check"
+      description: "Please confirm the following before reporting a bug."
+      options:
+        - label: "I have searched the existing issues"
+          required: true
+        - label: "This issue is reproducible"
+          required: true
+  - type: textarea
+    attributes:
+      label: "Bug Summary"
+      description: "Provide a concise summary of the bug, including what you expected to happen and what actually happened."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Steps to Reproduce"
+      description: "List the steps to reproduce the bug. Include specific details so that we can easily replicate the issue."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Expected Behavior"
+      description: "What did you expect to happen instead?"
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: "Screenshots/Logs"
+      description: "If applicable, add screenshots or logs that can help us understand the issue better."
+    validations:
+      required: false
+  - type: checkboxes
+    attributes:
+      label: "Additional Information"
+      options:
+        - label: "I agree to follow this project's Code of Conduct"
+          required: true
+        - label: "I'm a GSSOC'24 contributor"
+        - label: "I want to work on this issue"
+        - label: "I can provide more details if needed"
diff --git a/.github/ISSUE_TEMPLATE/Documentation.yml b/.github/ISSUE_TEMPLATE/Documentation.yml
new file mode 100644
index 000000000..6d917b1af
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/Documentation.yml
@@ -0,0 +1,37 @@
+name: "📝 Documentation Update"
+description: "Propose an update or correction to the documentation"
+title: "DOC UPDATE:"
+labels: ["Documentation"]
+body:
+  - type: textarea
+    attributes:
+      label: "Documentation Page"
+      description: "Which page or section of the documentation needs to be updated?"
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Description of Changes"
+      description: "Describe the changes you propose for the documentation."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Reason for Update"
+      description: "Explain why these changes are necessary or beneficial."
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: "Screenshots/Logs"
+      description: "If applicable, add screenshots or logs that can help us understand the issue better."
+    validations:
+      required: false
+  - type: checkboxes
+    attributes:
+      label: "Additional Information"
+      options:
+        - label: "I have checked the documentation for accuracy"
+          required: true
+        - label: "I am willing to help with this update"
+        - label: "I can provide further clarification if needed"
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
new file mode 100644
index 000000000..9167f7312
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
@@ -0,0 +1,43 @@
+name: "🌟 Feature Request"
+description: "Suggest a new feature to enhance our project."
+title: "FEATURE:"
+labels: ["Feature Request"]
+body:
+  - type: textarea
+    attributes:
+      label: "Feature Summary"
+      description: "Provide a brief summary of the feature you would like to see implemented. Try to keep it concise."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Description"
+      description: "Explain why this feature is needed. What problem does it solve, or what value does it add for users?"
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Proposed Solution"
+      description: "Describe your proposed solution or how you envision the feature working. Include any relevant details such as user stories or use cases."
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: "Alternatives Considered"
+      description: "Have you considered any alternatives to this feature? If so, please describe them and why they might be less effective."
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: "Screenshots/Logs"
+      description: "If applicable, add screenshots or logs that can help us understand the issue better."
+    validations:
+      required: false
+  - type: checkboxes
+    attributes:
+      label: "Additional Information"
+      options:
+        - label: "I have searched for existing feature requests"
+          required: true
+        - label: "I am willing to help implement this feature"
+        - label: "I can provide more details or clarification if needed"
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/backend_issue.yml b/.github/ISSUE_TEMPLATE/backend_issue.yml
new file mode 100644
index 000000000..14751fefb
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/backend_issue.yml
@@ -0,0 +1,72 @@
+name: "🔧 Backend Issue Report"
+description: "Create a detailed report to help us improve the backend services."
+title: "BACKEND ISSUE:"
+labels: ["Backend", "Bug"]
+body:
+  - type: checkboxes
+    attributes:
+      label: "Preliminary Checks"
+      description: "Please confirm the following before reporting a backend issue."
+      options:
+        - label: "I have checked the server logs"
+          required: true
+        - label: "I have searched the existing issues"
+          required: true
+  - type: dropdown
+    attributes:
+      label: "Environment"
+      description: "Where does this issue occur?"
+      options:
+        - Development
+        - Staging
+        - Production
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: "Backend Version/Commit"
+      description: "Specify the version or commit hash where this issue occurs"
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Issue Summary"
+      description: "Provide a concise summary of the issue, including what you expected to happen and what actually happened."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Steps to Reproduce"
+      description: "List the steps to reproduce the issue. Include specific details, such as API endpoints, request parameters, etc."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Expected vs Actual Behavior"
+      description: |
+        Clearly describe:
+        1. What you expected to happen
+        2. What actually happened
+        3. Why you believe this is incorrect behavior
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Logs/Errors"
+      description: "If applicable, attach logs or error messages that can help us diagnose the issue."
+    validations:
+      required: false
+  - type: checkboxes
+    attributes:
+      label: "Additional Information"
+      options:
+        - label: "I agree to follow this project's Code of Conduct"
+          required: true
+        - label: "I can provide more details if needed"
+          required: true
+  - type: input
+    attributes:
+      label: "Contact Information"
+      description: "How can we reach you if we need more information? (email/Slack/etc.)"
+    validations:
+      required: true
diff --git "a/.github/ISSUE_TEMPLATE/bug-report-\360\237\220\233.md" "b/.github/ISSUE_TEMPLATE/bug-report-\360\237\220\233.md"
deleted file mode 100644
index 4cf2af144..000000000
--- "a/.github/ISSUE_TEMPLATE/bug-report-\360\237\220\233.md"
+++ /dev/null
@@ -1,29 +0,0 @@
----
-name: "Bug Report \U0001F41B"
-about: Reporting for any bug in the project
-title: "\U0001F41E : "
-labels: ''
-assignees: ''
-
----
-
-:red_circle: **Title** :
-:red_circle: **Bug** :
-:red_circle: **Changes** :  <!-- Explain the approach to handle this bug. -->
-
-
-### Screenshots 📷
-<!-- Write N/A if not available-->
-
-
-************************************************************
-
-✅ Details to Include When Taking the Issue:
-Name :
-Participant Role (Specify the Open Source Program name, e.g., GSSOC, Hacktoberfest, etc.):
-
-***********************************************************************
-
-Happy Contributing! 🚀
-
-Wishing you all the best on your open source journey. Enjoy! 😎
diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
new file mode 100644
index 000000000..fb9114ae8
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -0,0 +1,51 @@
+name: ​🐞 Bug
+description: Report an issue to help us improve the project.
+title: '[BUG] '
+labels: ["bug"]
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      id: description
+      description: A brief description of the issue or bug you are facing, also include what you tried and what didn't work.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Screenshots
+      id: screenshots
+      description: Please add screenshots if applicable
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Any additional information?
+      id: extrainfo
+      description: Any additional information or Is there anything we should know about this bug?
+    validations:
+      required: false
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browser are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+  - type: checkboxes
+    id: no-duplicate-issues
+    attributes:
+      label: 'Checklist'
+      options:
+        - label: 'I have checked the existing issues'
+          required: true
+
+        - label: 'I have read the [Contributing Guidelines](https://github.com/alo7lika/master-web-development/blob/dev/CONTRIBUTING.md)'
+          required: true
+        - label: "I'm a GSSoC'24-Extd contributor"
+        - label: "I'm a Hacktoberfest'24 contributor"
+
+        - label: 'I am willing to work on this issue (optional)'
+          required: false
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 000000000..122b9507c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Questions or need suggestions?
+    url: https://github.com/iamrahulmahato/master-web-development/discussions/new?category=q-a
+    about: You can create a Q&A discussion and ask for clarifications 
diff --git a/.github/ISSUE_TEMPLATE/documentation.yml b/.github/ISSUE_TEMPLATE/documentation.yml
new file mode 100644
index 000000000..554caab74
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/documentation.yml
@@ -0,0 +1,71 @@
+name: 📝 Documentation Update
+description: Improve Documentation
+title: "[Doc]: "
+labels: [documentation]
+body:
+  - type: checkboxes
+    id: existing-issue
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the updates you want to make.
+      options:
+        - label: I have searched the existing issues
+          required: true
+
+  - type: textarea
+    id: issue-description
+    attributes:
+      label: Issue Description
+      description: Please provide a clear description of the documentation update you are suggesting.
+      placeholder: Describe the improvement or correction you'd like to see in the documentation.
+    validations:
+      required: true
+
+  - type: textarea
+    id: suggested-change
+    attributes:
+      label: Suggested Change
+      description: Provide details of the proposed change to the documentation.
+      placeholder: Explain how the documentation should be updated or corrected.
+    validations:
+      required: true
+
+  - type: textarea
+    id: rationale
+    attributes:
+      label: Rationale
+      description: Why is this documentation update necessary or beneficial?
+      placeholder: Explain the importance or reasoning behind the suggested change.
+    validations:
+      required: false
+
+  - type: dropdown
+    id: urgency
+    attributes:
+      label: Urgency
+      description: How urgently do you believe this documentation update is needed?
+      options:
+        - High
+        - Medium
+        - Low
+      default: 0
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Acknowledgements
+      description: Ensure you have read and agree to the project's guidelines.
+      options:
+        - label: I have read the [Contributing Guidelines](https://github.com/alo7lika/master-web-development/blob/test/CONTRIBUTING.md)*
+          required: true
+        - label: I'm a GSSOC'24-Extd contributor
+        - label: I'm a Hacktoberfest contributor
+        - label: I have starred the repository
+          required: true
+        - label: 'I am willing to work on this issue (optional)'
+          required: false
+        
+        
+    
diff --git a/.github/ISSUE_TEMPLATE/frontend_issue.yml b/.github/ISSUE_TEMPLATE/frontend_issue.yml
new file mode 100644
index 000000000..1dd3e724d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/frontend_issue.yml
@@ -0,0 +1,51 @@
+name: "🌐 Frontend Issue Report"
+description: "Create a detailed report to help us improve the frontend user experience."
+title: "FRONTEND ISSUE:"
+labels: ["Frontend", "Bug"]
+body:
+  - type: checkboxes
+    attributes:
+      label: "Preliminary Checks"
+      description: "Please confirm the following before reporting a frontend issue."
+      options:
+        - label: "I have checked the browser console for errors"
+          required: true
+        - label: "I have searched the existing issues"
+          required: true
+        - label: "I have included my browser name and version"
+          required: true
+        - label: "I have included my operating system"
+          required: true
+        - label: "I have included my device type (desktop/mobile/tablet)"
+          required: true
+  - type: textarea
+    attributes:
+      label: "Issue Summary"
+      description: "Provide a concise summary of the issue, including what you expected to happen and what actually happened."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Steps to Reproduce"
+      description: "List the steps to reproduce the issue, including which pages or components are affected."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Expected vs Actual Behavior"
+      description: "What did you expect to happen instead of the current behavior?"
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: "Screenshots/Recordings"
+      description: "If applicable, attach screenshots or recordings that illustrate the issue."
+    validations:
+      required: false
+  - type: checkboxes
+    attributes:
+      label: "Additional Information"
+      options:
+        - label: "I agree to follow this project's Code of Conduct"
+          required: true
+        - label: "I can provide more details if needed"
diff --git a/.htaccess b/.htaccess
new file mode 100644
index 000000000..9fded1ed8
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1 @@
+ErrorDocument 404 /404.html
\ No newline at end of file
diff --git a/404.html b/404.html
new file mode 100644
index 000000000..fffc865f6
--- /dev/null
+++ b/404.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 PAGE</title>
+    <link rel="shortcut icon" href="./assets/images/favicon2.webp" type="image/png" />
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Arvo'>
+<style>
+    
+.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
+}
+
+.page_404  img{ width:100%;}
+
+.four_zero_four_bg{
+ 
+ background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
+    height: 400px;
+    background-position: center;
+ }
+ 
+ 
+ .four_zero_four_bg h1{
+ font-size:80px;
+ }
+ 
+  .four_zero_four_bg h3{
+			 font-size:80px;
+			 }
+			 
+			 .link_404{			 
+	color: #fff!important;
+    padding: 10px 20px;
+    background: #39ac31;
+    margin: 20px 0;
+    display: inline-block;}
+	.contant_box_404{ margin-top:-50px;}
+</style>
+    
+  </head>
+  
+  <body>
+  
+    <section class="page_404">
+      <div class="container">
+          <div class="row">	
+          <div class="col-sm-12 ">
+          <div class="col-sm-10 col-sm-offset-1  text-center">
+          <div class="four_zero_four_bg">
+              <h1 class="text-center ">404</h1>
+          
+          
+          </div>
+          
+          <div class="contant_box_404">
+          <h3 class="h2">
+          Look like you're lost
+          </h3>
+          
+          <p>The page you are looking for not available!</p>
+          
+          <a href="/" class="link_404">Go to Home</a>
+      </div>
+          </div>
+          </div>
+          </div>
+      </div>
+  </section>
+  
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/ATS-SCORE-RECOZNIZER/templates/index.html b/ATS-SCORE-RECOZNIZER/templates/index.html
index 9ece9bf2d..dff76dedd 100644
--- a/ATS-SCORE-RECOZNIZER/templates/index.html
+++ b/ATS-SCORE-RECOZNIZER/templates/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ATS Score Recognizer</title>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <style>
         body {
diff --git a/Archery Game/index.html b/Archery Game/index.html
new file mode 100644
index 000000000..7b0fe4cd0
--- /dev/null
+++ b/Archery Game/index.html	
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Archery Game</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <svg id="game" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400" overflow="visible">
+      <linearGradient id="ArcGradient" >
+          <stop offset="0"  stop-color="#fff" stop-opacity=".2"/>
+          <stop offset="50%" stop-color="#fff" stop-opacity="0"/>
+      </linearGradient>
+        <path id="arc" fill="none" stroke="url(#ArcGradient)" stroke-width="4" d="M100,250c250-400,550-400,800,0"  pointer-events="none"/>
+        <defs>
+            <g id="arrow">
+                <line x2="60" fill="none" stroke="#888" stroke-width="2" />
+                <polygon fill="#888" points="64 0 58 2 56 0 58 -2" />
+                <polygon fill="#88ce02" points="2 -3 -4 -3 -1 0 -4 3 2 3 5 0" />
+            </g>
+        </defs>
+        <g id="target">
+            <path fill="#FFF" d="M924.2,274.2c-21.5,21.5-45.9,19.9-52,3.2c-4.4-12.1,2.4-29.2,14.2-41c11.8-11.8,29-18.6,41-14.2 C944.1,228.3,945.7,252.8,924.2,274.2z" />
+            <path fill="#F4531C" d="M915.8,265.8c-14.1,14.1-30.8,14.6-36,4.1c-4.1-8.3,0.5-21.3,9.7-30.5s22.2-13.8,30.5-9.7 C930.4,235,929.9,251.7,915.8,265.8z" />
+            <path fill="#FFF" d="M908.9,258.9c-8,8-17.9,9.2-21.6,3.5c-3.2-4.9-0.5-13.4,5.6-19.5c6.1-6.1,14.6-8.8,19.5-5.6 C918.1,241,916.9,250.9,908.9,258.9z" />
+            <path fill="#F4531C" d="M903.2,253.2c-2.9,2.9-6.7,3.6-8.3,1.7c-1.5-1.8-0.6-5.4,2-8c2.6-2.6,6.2-3.6,8-2 C906.8,246.5,906.1,250.2,903.2,253.2z" />
+        </g>
+        <g id="bow" fill="none" stroke-linecap="round" vector-effect="non-scaling-stroke" pointer-events="none">
+          <polyline fill="none" stroke="#ddd" stroke-linecap="round" points="88,200 88,250 88,300"/>
+          <path fill="none" stroke="#88ce02" stroke-width="3" stroke-linecap="round" d="M88,300 c0-10.1,12-25.1,12-50s-12-39.9-12-50"/>
+        </g>
+      <g class="arrow-angle"><use x="100" y="250" xlink:href="#arrow"/></g>
+      <clipPath id="mask">
+        <polygon opacity=".5" points="0,0 1500,0 1500,200 970,290 950,240 925,220 875,280 890,295 920,310 0,350" pointer-events="none"/>
+      </clipPath>
+      <g class="arrows" clip-path="url(#mask)"  pointer-events="none">
+      </g>
+      <g class="miss" fill="#aaa" opacity="0" transform="translate(0, 100)">
+        <path d="M358 194L363 118 386 120 400 153 416 121 440 119 446 203 419 212 416 163 401 180 380 160 381 204"/>
+        <path d="M450 120L458 200 475 192 474 121"/>
+        <path d="M537 118L487 118 485 160 515 162 509 177 482 171 482 193 529 199 538 148 501 146 508 133 537 137"/>
+        <path d="M540 202L543 178 570 186 569 168 544 167 546 122 590 116 586 142 561 140 560 152 586 153 586 205"/>
+        <path d="M595,215l5-23l31,0l-5,29L595,215z M627,176l13-70l-41-0l-0,70L627,176z"/>
+      </g>
+      <g class="bullseye" fill="#F4531C" opacity="0">
+        <path d="M322,159l15-21l-27-13l-32,13l15,71l41-14l7-32L322,159z M292,142h20l3,8l-16,8 L292,142z M321,182l-18,9l-4-18l23-2V182z"/>
+        <path d="M340 131L359 125 362 169 381 167 386 123 405 129 392 183 351 186z"/>
+        <path d="M413 119L402 188 450 196 454 175 422 175 438 120z"/>
+        <path d="M432 167L454 169 466 154 451 151 478 115 453 113z"/>
+        <path d="M524 109L492 112 466 148 487 155 491 172 464 167 463 184 502 191 513 143 487 141 496 125 517 126z"/>
+        <path d="M537 114L512 189 558 199 566 174 533 175 539 162 553 164 558 150 543 145 547 134 566 148 575 124z"/>
+        <path d="M577 118L587 158 570 198 587 204 626 118 606 118 598 141 590 112z"/>
+        <path d="M635 122L599 198 643 207 649 188 624 188 630 170 639 178 645 162 637 158 649 143 662 151 670 134z"/>
+        <path d="M649,220l4-21l28,4l-6,25L649,220z M681,191l40-79l-35-8L659,184L681,191z"/>
+      </g>
+      <g class="hit" fill="#ffcc00" opacity="0" transform="translate(180, -80) rotate(12) ">
+        <path d="M383 114L385 195 407 191 406 160 422 155 418 191 436 189 444 112 423 119 422 141 407 146 400 113"/>
+        <path d="M449 185L453 113 477 112 464 186"/>
+        <path d="M486 113L484 130 506 130 481 188 506 187 520 131 540 135 545 119"/>
+        <path d="M526,195l5-20l22,5l-9,16L526,195z M558,164l32-44l-35-9l-19,51L558,164z"/>
+      </g>
+    <!-- 	<line x1= "875", y1= "280", x2= "925", y2= "220" stroke="red"/>
+
+    <circle class="point" r="7" fill="purple" opacity=".4"/> -->
+    </svg>
+
+    <span>Draw back an arrow and launch it!</span>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
+<script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Archery Game/script.js b/Archery Game/script.js
new file mode 100644
index 000000000..7789eae3b
--- /dev/null
+++ b/Archery Game/script.js	
@@ -0,0 +1,223 @@
+var svg = document.querySelector("svg");
+var cursor = svg.createSVGPoint();
+var arrows = document.querySelector(".arrows");
+var randomAngle = 0;
+
+// center of target
+var target = {
+	x: 900,
+	y: 249.5
+};
+
+// target intersection line segment
+var lineSegment = {
+	x1: 875,
+	y1: 280,
+	x2: 925,
+	y2: 220
+};
+
+// bow rotation point
+var pivot = {
+	x: 100,
+	y: 250
+};
+aim({
+	clientX: 320,
+	clientY: 300
+});
+
+
+
+// set up start drag event
+window.addEventListener("mousedown", draw);
+
+function draw(e) {
+	// pull back arrow
+	randomAngle = (Math.random() * Math.PI * 0.03) - 0.015;
+	TweenMax.to(".arrow-angle use", 0.3, {
+		opacity: 1
+	});
+	window.addEventListener("mousemove", aim);
+	window.addEventListener("mouseup", loose);
+	aim(e);
+}
+
+
+
+function aim(e) {
+	// get mouse position in relation to svg position and scale
+	var point = getMouseSVG(e);
+	point.x = Math.min(point.x, pivot.x - 7);
+	point.y = Math.max(point.y, pivot.y + 7);
+	var dx = point.x - pivot.x;
+	var dy = point.y - pivot.y;
+	// Make it more difficult by adding random angle each time
+	var angle = Math.atan2(dy, dx) + randomAngle;
+	var bowAngle = angle - Math.PI;
+	var distance = Math.min(Math.sqrt((dx * dx) + (dy * dy)), 50);
+	var scale = Math.min(Math.max(distance / 30, 1), 2);
+	TweenMax.to("#bow", 0.3, {
+		scaleX: scale,
+		rotation: bowAngle + "rad",
+		transformOrigin: "right center"
+	});
+	var arrowX = Math.min(pivot.x - ((1 / scale) * distance), 88);
+	TweenMax.to(".arrow-angle", 0.3, {
+		rotation: bowAngle + "rad",
+		svgOrigin: "100 250"
+	});
+	TweenMax.to(".arrow-angle use", 0.3, {
+		x: -distance
+	});
+	TweenMax.to("#bow polyline", 0.3, {
+		attr: {
+			points: "88,200 " + Math.min(pivot.x - ((1 / scale) * distance), 88) + ",250 88,300"
+		}
+	});
+
+	var radius = distance * 9;
+	var offset = {
+		x: (Math.cos(bowAngle) * radius),
+		y: (Math.sin(bowAngle) * radius)
+	};
+	var arcWidth = offset.x * 3;
+
+	TweenMax.to("#arc", 0.3, {
+		attr: {
+			d: "M100,250c" + offset.x + "," + offset.y + "," + (arcWidth - offset.x) + "," + (offset.y + 50) + "," + arcWidth + ",50"
+		},
+			autoAlpha: distance/60
+	});
+
+}
+
+function loose() {
+	// release arrow
+	window.removeEventListener("mousemove", aim);
+	window.removeEventListener("mouseup", loose);
+
+	TweenMax.to("#bow", 0.4, {
+		scaleX: 1,
+		transformOrigin: "right center",
+		ease: Elastic.easeOut
+	});
+	TweenMax.to("#bow polyline", 0.4, {
+		attr: {
+			points: "88,200 88,250 88,300"
+		},
+		ease: Elastic.easeOut
+	});
+	// duplicate arrow
+	var newArrow = document.createElementNS("http://www.w3.org/2000/svg", "use");
+	newArrow.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#arrow");
+	arrows.appendChild(newArrow);
+
+	// animate arrow along path
+	var path = MorphSVGPlugin.pathDataToBezier("#arc");
+	TweenMax.to([newArrow], 0.5, {
+		force3D: true,
+		bezier: {
+			type: "cubic",
+			values: path,
+			autoRotate: ["x", "y", "rotation"]
+		},
+		onUpdate: hitTest,
+		onUpdateParams: ["{self}"],
+		onComplete: onMiss,
+		ease: Linear.easeNone
+	});
+	TweenMax.to("#arc", 0.3, {
+		opacity: 0
+	});
+	//hide previous arrow
+	TweenMax.set(".arrow-angle use", {
+		opacity: 0
+	});
+}
+
+function hitTest(tween) {
+	// check for collisions with arrow and target
+	var arrow = tween.target[0];
+	var transform = arrow._gsTransform;
+	var radians = transform.rotation * Math.PI / 180;
+	var arrowSegment = {
+		x1: transform.x,
+		y1: transform.y,
+		x2: (Math.cos(radians) * 60) + transform.x,
+		y2: (Math.sin(radians) * 60) + transform.y
+	}
+
+	var intersection = getIntersection(arrowSegment, lineSegment);
+	if (intersection.segment1 && intersection.segment2) {
+		tween.pause();
+		var dx = intersection.x - target.x;
+		var dy = intersection.y - target.y;
+		var distance = Math.sqrt((dx * dx) + (dy * dy));
+		var selector = ".hit";
+		if (distance < 7) {
+			selector = ".bullseye"
+		}
+		showMessage(selector);
+	}
+
+}
+
+function onMiss() {
+	// Damn!
+	showMessage(".miss");
+}
+
+function showMessage(selector) {
+	// handle all text animations by providing selector
+	TweenMax.killTweensOf(selector);
+	TweenMax.killChildTweensOf(selector);
+	TweenMax.set(selector, {
+		autoAlpha: 1
+	});
+	TweenMax.staggerFromTo(selector + " path", .5, {
+		rotation: -5,
+		scale: 0,
+		transformOrigin: "center"
+	}, {
+		scale: 1,
+		ease: Back.easeOut
+	}, .05);
+	TweenMax.staggerTo(selector + " path", .3, {
+		delay: 2,
+		rotation: 20,
+		scale: 0,
+		ease: Back.easeIn
+	}, .03);
+}
+
+
+
+function getMouseSVG(e) {
+	// normalize mouse position within svg coordinates
+	cursor.x = e.clientX;
+	cursor.y = e.clientY;
+	return cursor.matrixTransform(svg.getScreenCTM().inverse());
+}
+
+function getIntersection(segment1, segment2) {
+	// find intersection point of two line segments and whether or not the point is on either line segment
+	var dx1 = segment1.x2 - segment1.x1;
+	var dy1 = segment1.y2 - segment1.y1;
+	var dx2 = segment2.x2 - segment2.x1;
+	var dy2 = segment2.y2 - segment2.y1;
+	var cx = segment1.x1 - segment2.x1;
+	var cy = segment1.y1 - segment2.y1;
+	var denominator = dy2 * dx1 - dx2 * dy1;
+	if (denominator == 0) {
+		return null;
+	}
+	var ua = (dx2 * cy - dy2 * cx) / denominator;
+	var ub = (dx1 * cy - dy1 * cx) / denominator;
+	return {
+		x: segment1.x1 + ua * dx1,
+		y: segment1.y1 + ua * dy1,
+		segment1: ua >= 0 && ua <= 1,
+		segment2: ub >= 0 && ub <= 1
+	};
+}
diff --git a/Archery Game/styles.css b/Archery Game/styles.css
new file mode 100644
index 000000000..0415b6099
--- /dev/null
+++ b/Archery Game/styles.css	
@@ -0,0 +1,16 @@
+body{
+	background:#222;
+	margin:20px;
+}
+svg{
+	width:100%;
+	height:100%;
+	position:fixed;
+	top:0;
+	left:0;
+}
+span{
+	color:white;
+	font-family:sans-serif;
+	opacity:.3;
+}
diff --git a/AutoMatic Resume Generator/images/image.png b/AutoMatic Resume Generator/images/image.png
new file mode 100644
index 000000000..1b724bc6f
Binary files /dev/null and b/AutoMatic Resume Generator/images/image.png differ
diff --git a/AutoMatic Resume Generator/index.html b/AutoMatic Resume Generator/index.html
new file mode 100644
index 000000000..d703d0e48
--- /dev/null
+++ b/AutoMatic Resume Generator/index.html	
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resume Generator</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="container mt-5">
+        <h1 class="text-center">Resume Generator</h1>
+
+
+        <form id="resume-form" class="mt-4">
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="name">Full Name</label>
+                    <input type="text" class="form-control" id="name" placeholder="Enter your full name" required>
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="email">Email</label>
+                    <input type="email" class="form-control" id="email" placeholder="Enter your email" required>
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="phone">Phone Number</label>
+                    <input type="tel" class="form-control" id="phone" placeholder="Enter your phone number" required>
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="address">Address</label>
+                    <input type="text" class="form-control" id="address" placeholder="Enter your address">
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="photo">Upload Photo</label>
+                <input type="file" class="form-control-file" id="photo" accept="image/*" onchange="loadPhoto(event)">
+            </div>
+            <div class="form-group">
+                <label for="summary">Summary</label>
+                <textarea class="form-control" id="summary" rows="3"
+                    placeholder="Brief summary about yourself"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="experience">Experience</label>
+                <textarea class="form-control" id="experience" rows="4"
+                    placeholder="List your work experience"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="education">Education</label>
+                <textarea class="form-control" id="education" rows="3"
+                    placeholder="List your educational qualifications"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="skills">Skills</label>
+                <textarea class="form-control" id="skills" rows="2"
+                    placeholder="List your skills separated by commas"></textarea>
+            </div>
+            <button type="button" class="btn btn-primary" onclick="generateResume()">Generate Resume</button>
+        </form>
+
+
+        <div id="resume-preview" class="mt-5 p-4 border" style="display: none;">
+            <div class="resume-header d-flex align-items-center">
+                <img id="preview-photo" src="" alt="Profile Photo" class="profile-photo mr-4">
+                <div>
+                    <h2 id="preview-name"></h2>
+                    <p id="preview-contact" class="text-muted"></p>
+                </div>
+            </div>
+            <hr>
+            <div class="resume-section">
+                <h4>Summary</h4>
+                <p id="preview-summary"></p>
+            </div>
+            <div class="resume-section">
+                <h4>Experience</h4>
+                <p id="preview-experience"></p>
+            </div>
+            <div class="resume-section">
+                <h4>Education</h4>
+                <p id="preview-education"></p>
+            </div>
+            <div class="resume-section">
+                <h4>Skills</h4>
+                <p id="preview-skills"></p>
+            </div>
+            <button id="download-btn" class="btn btn-success mt-3" onclick="downloadResume()">Download as PDF</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/AutoMatic Resume Generator/script.js b/AutoMatic Resume Generator/script.js
new file mode 100644
index 000000000..f89a7cedb
--- /dev/null
+++ b/AutoMatic Resume Generator/script.js	
@@ -0,0 +1,47 @@
+function loadPhoto(event) {
+  const previewPhoto = document.getElementById("preview-photo");
+  previewPhoto.src = URL.createObjectURL(event.target.files[0]);
+}
+
+function generateResume() {
+  const name = document.getElementById("name").value;
+  const email = document.getElementById("email").value;
+  const phone = document.getElementById("phone").value;
+  const address = document.getElementById("address").value;
+  const summary = document.getElementById("summary").value;
+  const experience = document.getElementById("experience").value;
+  const education = document.getElementById("education").value;
+  const skills = document.getElementById("skills").value;
+
+  document.getElementById("preview-name").innerText = name;
+  document.getElementById(
+    "preview-contact"
+  ).innerText = `${email} | ${phone} | ${address}`;
+  document.getElementById("preview-summary").innerText = summary;
+  document.getElementById("preview-experience").innerText = experience;
+  document.getElementById("preview-education").innerText = education;
+  document.getElementById("preview-skills").innerText = skills
+    .split(",")
+    .join(", ");
+
+  document.getElementById("resume-preview").style.display = "block";
+}
+
+function downloadResume() {
+  const { jsPDF } = window.jspdf;
+  const doc = new jsPDF();
+
+  doc.text(document.getElementById("preview-name").innerText, 10, 10);
+  doc.text(document.getElementById("preview-contact").innerText, 10, 20);
+
+  doc.text("Summary", 10, 30);
+  doc.text(document.getElementById("preview-summary").innerText, 10, 40);
+  doc.text("Experience", 10, 60);
+  doc.text(document.getElementById("preview-experience").innerText, 10, 70);
+  doc.text("Education", 10, 90);
+  doc.text(document.getElementById("preview-education").innerText, 10, 100);
+  doc.text("Skills", 10, 120);
+  doc.text(document.getElementById("preview-skills").innerText, 10, 130);
+
+  doc.save("resume.pdf");
+}
diff --git a/AutoMatic Resume Generator/styles.css b/AutoMatic Resume Generator/styles.css
new file mode 100644
index 000000000..4ea02bcd7
--- /dev/null
+++ b/AutoMatic Resume Generator/styles.css	
@@ -0,0 +1,44 @@
+body{
+    background-image: url(./images/image.png);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    padding-bottom: 20px;
+}
+#resume-preview {
+    background-color: #f8f9fa;
+    font-family: Arial, sans-serif;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 8px;
+  }
+  
+  .resume-header {
+    display: flex;
+    align-items: center;
+  }
+  
+  .profile-photo {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  
+  .resume-section {
+    margin-top: 20px;
+  }
+  
+  .resume-section h4 {
+    color: #007bff;
+    font-size: 1.2em;
+    margin-bottom: 10px;
+  }
+  
+  .resume-section p {
+    font-size: 1em;
+    line-height: 1.6;
+    color: #555;
+  }
+  
\ No newline at end of file
diff --git a/Backbone Tetris Game/index.html b/Backbone Tetris Game/index.html
new file mode 100644
index 000000000..8930975cb
--- /dev/null
+++ b/Backbone Tetris Game/index.html	
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>TetNet</title>
+ <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+ <style>
+   
+</style>
+<script src="lib/cerebrum.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
+</head>
+<body>
+  <div id="output" class="text"></div>
+  <div id="score" class="text"></div>
+  <div id="instructions" class="text"><br /><b>[Key Commands]</b><br />Load Fully Evolved Archive: [CTRL]<br />Speed Up: [E]<br />Slow Down: [D]<br />Toggle AI: [A]<br />Move Shape: [Arrow Keys]<br />Rotate Shape: [Up Arrow]<br />Drop Shape: [Down Arrow]<br />Save State: [Q]<br />Load State: [W]<br />Get Archive: [G]<br />Load Archive: [R]<br />Pick Shape: [I,O,T,S,Z,J,L]</div>
+  <div id="signature" class="text">Created By Idrees Hassan<br />Questions? Just ask!<br /><a href="mailto:&#105;&#100;&#114;&#101;&#101;&#115;&#064;&#105;&#100;&#114;&#101;&#101;&#115;&#105;&#110;&#099;&#046;&#099;&#111;&#109;" target="_top">&#105;&#100;&#114;&#101;&#101;&#115;&#064;&#105;&#100;&#114;&#101;&#101;&#115;&#105;&#110;&#099;&#046;&#099;&#111;&#109;</a></div>
+  <script src="./tetnet.js"></script>
+  <script>
+    $(window).keydown(function (e){
+      if (e.ctrlKey) {
+        var archiveJSON = $.ajax({
+          url: "./archive.json",
+          async: false
+        }).responseText;
+        loadArchive(archiveJSON);
+        alert("Archive loaded successfully!");
+      }
+    });
+  </script>
+  <script type="text/javascript">
+  </script>
+</body>
+</html>
diff --git a/Backbone Tetris Game/script.js b/Backbone Tetris Game/script.js
new file mode 100644
index 000000000..36575f306
--- /dev/null
+++ b/Backbone Tetris Game/script.js	
@@ -0,0 +1,2211 @@
+//Define 10x20 grid as the board
+var grid = [
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0],
+];
+
+//Block shapes
+var shapes = {
+	I: [[0,0,0,0], [1,1,1,1], [0,0,0,0], [0,0,0,0]],
+	J: [[2,0,0], [2,2,2], [0,0,0]],
+	L: [[0,0,3], [3,3,3], [0,0,0]],
+	O: [[4,4], [4,4]],
+	S: [[0,5,5], [5,5,0], [0,0,0]],
+	T: [[0,6,0], [6,6,6], [0,0,0]],
+	Z: [[7,7,0], [0,7,7], [0,0,0]]
+};
+
+//Block colors
+var colors = ["F92338", "C973FF", "1C76BC", "FEE356", "53D504", "36E0FF", "F8931D"];
+
+//Used to help create a seeded generated random number for choosing shapes. makes results deterministic (reproducible) for debugging
+var rndSeed = 1;
+
+//BLOCK SHAPES
+//coordinates and shape parameter of current block we can update
+var currentShape = {x: 0, y: 0, shape: undefined};
+//store shape of upcoming block
+var upcomingShape;
+//stores shapes
+var bag = [];
+//index for shapes in the bag
+var bagIndex = 0;
+
+//GAME VALUES
+//Game score
+var score = 0;
+// game speed
+var speed = 500;
+// boolean for changing game speed
+var changeSpeed = false;
+//for storing current state, we can load later
+var saveState;
+//stores current game state
+var roundState;
+//list of available game speeds
+var speeds = [500,100,1,0];
+//inded in game speed array
+var speedIndex = 0;
+//turn ai on or off
+var ai = true;
+//drawing game vs updating algorithms
+var draw = true;
+//how many so far?
+var movesTaken = 0;
+//max number of moves allowed in a generation
+var moveLimit = 500;
+//consists of move the 7 move parameters
+var moveAlgorithm = {};
+//set to highest rate move 
+var inspectMoveSelection = false;
+
+
+//GENETIC ALGORITHM VALUES
+//stores number of genomes, init at 50 
+var populationSize = 50;
+//stores genomes
+var genomes = [];
+//index of current genome in genomes array
+var currentGenome = -1;
+//generation number
+var generation = 0;
+//stores values for a generation
+var archive = {
+	populationSize: 0,
+	currentGeneration: 0,
+	elites: [],
+	genomes: []
+};
+//rate of mutation
+var mutationRate = 0.05;
+//helps calculate mutation
+var mutationStep = 0.2;
+
+
+//main function, called on load
+function initialize() {
+	//init pop size
+	archive.populationSize = populationSize;
+	//get the next available shape from the bag
+	nextShape();
+	//applies the shape to the grid
+	applyShape();
+	//set both save state and current state from the game
+	saveState = getState();
+	roundState = getState();
+	//create an initial population of genomes
+	createInitialPopulation();
+	//the game loop
+	var loop = function(){
+		//boolean for changing game speed
+		if (changeSpeed) {
+			//restart the clock
+			//stop time
+			clearInterval(interval);
+			//set time, like a digital watch
+			interval = setInterval(loop, speed);
+			//and don't change it
+			changeInterval = false;
+		}
+		if (speed === 0) {
+			//no need to draw on screen elements
+			draw = false;
+			//updates the game (update fitness, make a move, evaluate next move)
+			update();
+			update();
+			update();
+		} else {
+			//draw the elements
+			draw = true;
+		}
+		//update regardless
+		update();
+		if (speed === 0) {
+			//now draw elements
+			draw = true;
+			//now update the score
+			updateScore();
+		}
+	};
+	//timer interval
+	var interval = setInterval(loop, speed);
+}
+document.onLoad = initialize();
+
+
+//key options
+window.onkeydown = function (event) {
+
+	var characterPressed = String.fromCharCode(event.keyCode);
+	if (event.keyCode == 38) {
+		rotateShape();
+	} else if (event.keyCode == 40) {
+		moveDown();
+	} else if (event.keyCode == 37) {
+		moveLeft();
+	} else if (event.keyCode == 39) {
+		moveRight();
+	} else if (shapes[characterPressed.toUpperCase()] !== undefined) {
+		removeShape();
+		currentShape.shape = shapes[characterPressed.toUpperCase()];
+		applyShape();
+	} else if (characterPressed.toUpperCase() == "Q") {
+		saveState = getState();
+	} else if (characterPressed.toUpperCase() == "W") {
+		loadState(saveState);
+	} else if (characterPressed.toUpperCase() == "D") {
+		//slow down
+		speedIndex--;
+		if (speedIndex < 0) {
+			speedIndex = speeds.length - 1;
+		}
+		speed = speeds[speedIndex];
+		changeSpeed = true;
+	} else if (characterPressed.toUpperCase() == "E") {
+		//speed up
+		speedIndex++;
+		if (speedIndex >= speeds.length) {
+			speedIndex = 0;
+		}
+		//adjust speed index
+		speed = speeds[speedIndex];
+		changeSpeed = true;
+		//Turn on/off AI
+	} else if (characterPressed.toUpperCase() == "A") {
+		ai = !ai;
+	} else if (characterPressed.toUpperCase() == "R") {
+		//load saved generation values
+		loadArchive(prompt("Insert archive:"));
+	} else if (characterPressed.toUpperCase() == "G") {
+		if (localStorage.getItem("archive") === null) {
+			alert("No archive saved. Archives are saved after a generation has passed, and remain across sessions. Try again once a generation has passed");
+		} else {
+			prompt("Archive from last generation (including from last session):", localStorage.getItem("archive"));
+		}
+	} else if (characterPressed.toUpperCase() == "F") {
+		//?
+		inspectMoveSelection = !inspectMoveSelection;
+	} else {
+		return true;
+	}
+	//outputs game state to the screen (post key press)
+	output();
+	return false;
+};
+
+/**
+ * Creates the initial population of genomes, each with random genes.
+ */
+ function createInitialPopulation() {
+ 	//inits the array
+ 	genomes = [];
+ 	//for a given population size
+ 	for (var i = 0; i < populationSize; i++) {
+ 		//randomly initialize the 7 values that make up a genome
+ 		//these are all weight values that are updated through evolution
+ 		var genome = {
+ 			//unique identifier for a genome
+ 			id: Math.random(),
+ 			//The weight of each row cleared by the given move. the more rows that are cleared, the more this weight increases
+ 			rowsCleared: Math.random() - 0.5,
+ 			//the absolute height of the highest column to the power of 1.5
+ 			//added so that the algorithm can be able to detect if the blocks are stacking too high
+ 			weightedHeight: Math.random() - 0.5,
+ 			//The sum of all the column’s heights
+ 			cumulativeHeight: Math.random() - 0.5,
+ 			//the highest column minus the lowest column
+ 			relativeHeight: Math.random() - 0.5,
+ 			//the sum of all the empty cells that have a block above them (basically, cells that are unable to be filled)
+ 			holes: Math.random() * 0.5,
+ 			// the sum of absolute differences between the height of each column 
+ 			//(for example, if all the shapes on the grid lie completely flat, then the roughness would equal 0).
+ 			roughness: Math.random() - 0.5,
+ 		};
+ 		//add them to the array
+ 		genomes.push(genome);
+ 	}
+ 	evaluateNextGenome();
+ }
+
+/**
+ * Evaluates the next genome in the population. If there is none, evolves the population.
+ */
+ function evaluateNextGenome() {
+ 	//increment index in genome array
+ 	currentGenome++;
+ 	//If there is none, evolves the population.
+ 	if (currentGenome == genomes.length) {
+ 		evolve();
+ 	}
+ 	//load current gamestate
+ 	loadState(roundState);
+ 	//reset moves taken
+ 	movesTaken = 0;
+ 	//and make the next move
+ 	makeNextMove();
+ }
+
+/**
+ * Evolves the entire population and goes to the next generation.
+ */
+ function evolve() {
+
+ 	console.log("Generation " + generation + " evaluated.");
+ 	//reset current genome for new generation
+ 	currentGenome = 0;
+ 	//increment generation
+ 	generation++;
+ 	//resets the game
+ 	reset();
+ 	//gets the current game state
+ 	roundState = getState();
+ 	//sorts genomes in decreasing order of fitness values
+ 	genomes.sort(function(a, b) {
+ 		return b.fitness - a.fitness;
+ 	});
+ 	//add a copy of the fittest genome to the elites list
+ 	archive.elites.push(clone(genomes[0]));
+ 	console.log("Elite's fitness: " + genomes[0].fitness);
+
+ 	//remove the tail end of genomes, focus on the fittest
+ 	while(genomes.length > populationSize / 2) {
+ 		genomes.pop();
+ 	}
+ 	//sum of the fitness for each genome
+ 	var totalFitness = 0;
+ 	for (var i = 0; i < genomes.length; i++) {
+ 		totalFitness += genomes[i].fitness;
+ 	}
+
+ 	//get a random index from genome array
+	function getRandomGenome() {
+		return genomes[randomWeightedNumBetween(0, genomes.length - 1)];
+	}
+	//create children array
+	var children = [];
+	//add the fittest genome to array
+	children.push(clone(genomes[0]));
+	//add population sized amount of children
+	while (children.length < populationSize) {
+		//crossover between two random genomes to make a child
+		children.push(makeChild(getRandomGenome(), getRandomGenome()));
+	}
+	//create new genome array
+	genomes = [];
+	//to store all the children in
+	genomes = genomes.concat(children);
+	//store this in our archive
+	archive.genomes = clone(genomes);
+	//and set current gen
+	archive.currentGeneration = clone(generation);
+	console.log(JSON.stringify(archive));
+	//store archive, thanks JS localstorage! (short term memory)
+	localStorage.setItem("archive", JSON.stringify(archive));
+}
+
+/**
+ * Creates a child genome from the given parent genomes, and then attempts to mutate the child genome.
+ * @param  {Genome} mum The first parent genome.
+ * @param  {Genome} dad The second parent genome.
+ * @return {Genome}     The child genome.
+ */
+ function makeChild(mum, dad) {
+ 	//init the child given two genomes (its 7 parameters + initial fitness value)
+ 	var child = {
+ 		//unique id
+ 		id : Math.random(),
+ 		//all these params are randomly selected between the mom and dad genome
+ 		rowsCleared: randomChoice(mum.rowsCleared, dad.rowsCleared),
+ 		weightedHeight: randomChoice(mum.weightedHeight, dad.weightedHeight),
+ 		cumulativeHeight: randomChoice(mum.cumulativeHeight, dad.cumulativeHeight),
+ 		relativeHeight: randomChoice(mum.relativeHeight, dad.relativeHeight),
+ 		holes: randomChoice(mum.holes, dad.holes),
+ 		roughness: randomChoice(mum.roughness, dad.roughness),
+ 		//no fitness. yet.
+ 		fitness: -1
+ 	};
+ 	//mutation time!
+
+ 	//we mutate each parameter using our mutationstep
+ 	if (Math.random() < mutationRate) {
+ 		child.rowsCleared = child.rowsCleared + Math.random() * mutationStep * 2 - mutationStep;
+ 	}
+ 	if (Math.random() < mutationRate) {
+ 		child.weightedHeight = child.weightedHeight + Math.random() * mutationStep * 2 - mutationStep;
+ 	}
+ 	if (Math.random() < mutationRate) {
+ 		child.cumulativeHeight = child.cumulativeHeight + Math.random() * mutationStep * 2 - mutationStep;
+ 	}
+ 	if (Math.random() < mutationRate) {
+ 		child.relativeHeight = child.relativeHeight + Math.random() * mutationStep * 2 - mutationStep;
+ 	}
+ 	if (Math.random() < mutationRate) {
+ 		child.holes = child.holes + Math.random() * mutationStep * 2 - mutationStep;
+ 	}
+ 	if (Math.random() < mutationRate) {
+ 		child.roughness = child.roughness + Math.random() * mutationStep * 2 - mutationStep;
+ 	}
+ 	return child;
+ }
+
+/**
+ * Returns an array of all the possible moves that could occur in the current state, rated by the parameters of the current genome.
+ * @return {Array} An array of all the possible moves that could occur.
+ */
+ function getAllPossibleMoves() {
+ 	var lastState = getState();
+ 	var possibleMoves = [];
+ 	var possibleMoveRatings = [];
+ 	var iterations = 0;
+ 	//for each possible rotation
+ 	for (var rots = 0; rots < 4; rots++) {
+
+ 		var oldX = [];
+ 		//for each iteration
+ 		for (var t = -5; t <= 5; t++) {
+ 			iterations++;
+ 			loadState(lastState);
+ 			//rotate shape
+ 			for (var j = 0; j < rots; j++) {
+ 				rotateShape();
+ 			}
+ 			//move left
+ 			if (t < 0) {
+ 				for (var l = 0; l < Math.abs(t); l++) {
+ 					moveLeft();
+ 				}
+ 			//move right
+ 			} else if (t > 0) {
+ 				for (var r = 0; r < t; r++) {
+ 					moveRight();
+ 				}
+ 			}
+ 			//if the shape has moved at all
+ 			if (!contains(oldX, currentShape.x)) {
+ 				//move it down
+ 				var moveDownResults = moveDown();
+ 				while (moveDownResults.moved) {
+ 					moveDownResults = moveDown();
+ 				}
+ 				//set the 7 parameters of a genome
+ 				var algorithm = {
+ 					rowsCleared: moveDownResults.rowsCleared,
+ 					weightedHeight: Math.pow(getHeight(), 1.5),
+ 					cumulativeHeight: getCumulativeHeight(),
+ 					relativeHeight: getRelativeHeight(),
+ 					holes: getHoles(),
+ 					roughness: getRoughness()
+ 				};
+ 				//rate each move
+ 				var rating = 0;
+ 				rating += algorithm.rowsCleared * genomes[currentGenome].rowsCleared;
+ 				rating += algorithm.weightedHeight * genomes[currentGenome].weightedHeight;
+ 				rating += algorithm.cumulativeHeight * genomes[currentGenome].cumulativeHeight;
+ 				rating += algorithm.relativeHeight * genomes[currentGenome].relativeHeight;
+ 				rating += algorithm.holes * genomes[currentGenome].holes;
+ 				rating += algorithm.roughness * genomes[currentGenome].roughness;
+ 				//if the move loses the game, lower its rating
+ 				if (moveDownResults.lose) {
+ 					rating -= 500;
+ 				}
+ 				//push all possible moves, with their associated ratings and parameter values to an array
+ 				possibleMoves.push({rotations: rots, translation: t, rating: rating, algorithm: algorithm});
+ 				//update the position of old X value
+ 				oldX.push(currentShape.x);
+ 			}
+ 		}
+ 	}
+ 	//get last state
+ 	loadState(lastState);
+ 	//return array of all possible moves
+ 	return possibleMoves;
+ }
+
+/**
+ * Returns the highest rated move in the given array of moves.
+ * @param  {Array} moves An array of possible moves to choose from.
+ * @return {Move}       The highest rated move from the moveset.
+ */
+ function getHighestRatedMove(moves) {
+ 	//start these values off small
+ 	var maxRating = -10000000000000;
+ 	var maxMove = -1;
+ 	var ties = [];
+ 	//iterate through the list of moves
+ 	for (var index = 0; index < moves.length; index++) {
+ 		//if the current moves rating is higher than our maxrating
+ 		if (moves[index].rating > maxRating) {
+ 			//update our max values to include this moves values
+ 			maxRating = moves[index].rating;
+ 			maxMove = index;
+ 			//store index of this move
+ 			ties = [index];
+ 		} else if (moves[index].rating == maxRating) {
+ 			//if it ties with the max rating
+ 			//add the index to the ties array
+ 			ties.push(index);
+ 		}
+ 	}
+ 	//eventually we'll set the highest move value to this move var
+	var move = moves[ties[0]];
+	//and set the number of ties
+	move.algorithm.ties = ties.length;
+	return move;
+}
+
+/**
+ * Makes a move, which is decided upon using the parameters in the current genome.
+ */
+ function makeNextMove() {
+ 	//increment number of moves taken
+ 	movesTaken++;
+ 	//if its over the limit of moves
+ 	if (movesTaken > moveLimit) {
+ 		//update this genomes fitness value using the game score
+ 		genomes[currentGenome].fitness = clone(score);
+ 		//and evaluates the next genome
+ 		evaluateNextGenome();
+ 	} else {
+ 		//time to make a move
+
+ 		//we're going to re-draw, so lets store the old drawing
+ 		var oldDraw = clone(draw);
+ 		draw = false;
+ 		//get all the possible moves
+ 		var possibleMoves = getAllPossibleMoves();
+ 		//lets store the current state since we will update it
+ 		var lastState = getState();
+ 		//whats the next shape to play
+ 		nextShape();
+ 		//for each possible move 
+ 		for (var i = 0; i < possibleMoves.length; i++) {
+ 			//get the best move. so were checking all the possible moves, for each possible move. moveception.
+ 			var nextMove = getHighestRatedMove(getAllPossibleMoves());
+ 			//add that rating to an array of highest rates moves
+ 			possibleMoves[i].rating += nextMove.rating;
+ 		}
+ 		//load current state
+ 		loadState(lastState);
+ 		//get the highest rated move ever
+ 		var move = getHighestRatedMove(possibleMoves);
+ 		//then rotate the shape as it says too
+ 		for (var rotations = 0; rotations < move.rotations; rotations++) {
+ 			rotateShape();
+ 		}
+ 		//and move left as it says
+ 		if (move.translation < 0) {
+ 			for (var lefts = 0; lefts < Math.abs(move.translation); lefts++) {
+ 				moveLeft();
+ 			}
+ 			//and right as it says
+ 		} else if (move.translation > 0) {
+ 			for (var rights = 0; rights < move.translation; rights++) {
+ 				moveRight();
+ 			}
+ 		}
+ 		//update our move algorithm
+ 		if (inspectMoveSelection) {
+ 			moveAlgorithm = move.algorithm;
+ 		}
+ 		//and set the old drawing to the current
+ 		draw = oldDraw;
+ 		//output the state to the screen
+ 		output();
+ 		//and update the score
+ 		updateScore();
+ 	}
+ }
+
+/**
+ * Updates the game.
+ */
+ function update() {
+ 	//if we have our AI turned on and the current genome is nonzero
+ 	//make a move
+ 	if (ai && currentGenome != -1) {
+ 		//move the shape down
+ 		var results = moveDown();
+ 		//if that didn't do anything
+ 		if (!results.moved) {
+ 			//if we lost
+ 			if (results.lose) {
+ 				//update the fitness
+ 				genomes[currentGenome].fitness = clone(score);
+ 				//move on to the next genome
+ 				evaluateNextGenome();
+ 			} else {
+ 				//if we didnt lose, make the next move
+ 				makeNextMove();
+ 			}
+ 		}
+ 	} else {
+        //else just move down
+ 		moveDown();
+ 	}
+ 	//output the state to the screen
+ 	output();
+ 	//and update the score
+ 	updateScore();
+ }
+
+/**
+ * Moves the current shape down if possible.
+ * @return {Object} The results of the movement of the piece.
+ */
+ function moveDown() {
+ 	//array of possibilities
+ 	var result = {lose: false, moved: true, rowsCleared: 0};
+ 	//remove the shape, because we will draw a new one
+ 	removeShape();
+ 	//move it down the y axis
+ 	currentShape.y++;
+ 	//if it collides with the grid
+ 	if (collides(grid, currentShape)) {
+ 		//update its position
+ 		currentShape.y--;
+ 		//apply (stick) it to the grid 
+ 		applyShape();
+ 		//move on to the next shape in the bag
+ 		nextShape();
+ 		//clear rows and get number of rows cleared
+ 		result.rowsCleared = clearRows();
+ 		//check again if this shape collides with our grid
+ 		if (collides(grid, currentShape)) {
+ 			//reset
+ 			result.lose = true;
+ 			if (ai) {
+ 			} else {
+ 				reset();
+ 			}
+ 		}
+ 		result.moved = false;
+ 	}
+ 	//apply shape, update the score and output the state to the screen
+ 	applyShape();
+ 	score++;
+ 	updateScore();
+ 	output();
+ 	return result;
+ }
+
+/**
+ * Moves the current shape to the left if possible.
+ */
+ function moveLeft() {
+ 	//remove current shape, slide it over, if it collides though, slide it back
+ 	removeShape();
+ 	currentShape.x--;
+ 	if (collides(grid, currentShape)) {
+ 		currentShape.x++;
+ 	}
+ 	//apply the new shape
+ 	applyShape();
+ }
+
+/**
+ * Moves the current shape to the right if possible.
+ */
+ //same deal
+ function moveRight() {
+ 	removeShape();
+ 	currentShape.x++;
+ 	if (collides(grid, currentShape)) {
+ 		currentShape.x--;
+ 	}
+ 	applyShape();
+ }
+
+/**
+ * Rotates the current shape clockwise if possible.
+ */
+ //slide it if we can, else return to original rotation
+ function rotateShape() {
+ 	removeShape();
+ 	currentShape.shape = rotate(currentShape.shape, 1);
+ 	if (collides(grid, currentShape)) {
+ 		currentShape.shape = rotate(currentShape.shape, 3);
+ 	}
+ 	applyShape();
+ }
+
+/**
+ * Clears any rows that are completely filled.
+ */
+ function clearRows() {
+ 	//empty array for rows to clear
+ 	var rowsToClear = [];
+ 	//for each row in the grid
+ 	for (var row = 0; row < grid.length; row++) {
+ 		var containsEmptySpace = false;
+ 		//for each column
+ 		for (var col = 0; col < grid[row].length; col++) {
+ 			//if its empty
+ 			if (grid[row][col] === 0) {
+ 				//set this value to true
+ 				containsEmptySpace = true;
+ 			}
+ 		}
+ 		//if none of the columns in the row were empty
+ 		if (!containsEmptySpace) {
+ 			//add the row to our list, it's completely filled!
+ 			rowsToClear.push(row);
+ 		}
+ 	}
+ 	//increase score for up to 4 rows. it maxes out at 12000
+ 	if (rowsToClear.length == 1) {
+ 		score += 400;
+ 	} else if (rowsToClear.length == 2) {
+ 		score += 1000;
+ 	} else if (rowsToClear.length == 3) {
+ 		score += 3000;
+ 	} else if (rowsToClear.length >= 4) {
+ 		score += 12000;
+ 	}
+ 	//new array for cleared rows
+ 	var rowsCleared = clone(rowsToClear.length);
+ 	//for each value
+ 	for (var toClear = rowsToClear.length - 1; toClear >= 0; toClear--) {
+ 		//remove the row from the grid
+ 		grid.splice(rowsToClear[toClear], 1);
+ 	}
+ 	//shift the other rows
+ 	while (grid.length < 20) {
+ 		grid.unshift([0,0,0,0,0,0,0,0,0,0]);
+ 	}
+ 	//return the rows cleared
+ 	return rowsCleared;
+ }
+
+/**
+ * Applies the current shape to the grid.
+ */
+ function applyShape() {
+ 	//for each value in the current shape (row x column)
+ 	for (var row = 0; row < currentShape.shape.length; row++) {
+ 		for (var col = 0; col < currentShape.shape[row].length; col++) {
+ 			//if its non-empty
+ 			if (currentShape.shape[row][col] !== 0) {
+ 				//set the value in the grid to its value. Stick the shape in the grid!
+ 				grid[currentShape.y + row][currentShape.x + col] = currentShape.shape[row][col];
+ 			}
+ 		}
+ 	}
+ }
+
+/**
+ * Removes the current shape from the grid.
+ */
+ //same deal but reverse
+ function removeShape() {
+ 	for (var row = 0; row < currentShape.shape.length; row++) {
+ 		for (var col = 0; col < currentShape.shape[row].length; col++) {
+ 			if (currentShape.shape[row][col] !== 0) {
+ 				grid[currentShape.y + row][currentShape.x + col] = 0;
+ 			}
+ 		}
+ 	}
+ }
+
+/**
+ * Cycles to the next shape in the bag.
+ */
+ function nextShape() {
+ 	//increment the bag index
+ 	bagIndex += 1;
+ 	//if we're at the start or end of the bag
+ 	if (bag.length === 0 || bagIndex == bag.length) {
+ 		//generate a new bag of genomes
+ 		generateBag();
+ 	}
+ 	//if almost at end of bag
+ 	if (bagIndex == bag.length - 1) {
+ 		//store previous seed
+ 		var prevSeed = rndSeed;
+ 		//generate upcoming shape
+ 		upcomingShape = randomProperty(shapes);
+ 		//set random seed
+ 		rndSeed = prevSeed;
+ 	} else {
+ 		//get the next shape from our bag
+ 		upcomingShape = shapes[bag[bagIndex + 1]];
+ 	}
+ 	//get our current shape from the bag
+ 	currentShape.shape = shapes[bag[bagIndex]];
+ 	//define its position
+ 	currentShape.x = Math.floor(grid[0].length / 2) - Math.ceil(currentShape.shape[0].length / 2);
+ 	currentShape.y = 0;
+ }
+
+/**
+ * Generates the bag of shapes.
+ */
+ function generateBag() {
+ 	bag = [];
+ 	var contents = "";
+ 	//7 shapes
+ 	for (var i = 0; i < 7; i++) {
+ 		//generate shape randomly
+ 		var shape = randomKey(shapes);
+ 		while(contents.indexOf(shape) != -1) {
+ 			shape = randomKey(shapes);
+ 		}
+ 		//update bag with generated shape
+ 		bag[i] = shape;
+ 		contents += shape;
+ 	}
+ 	//reset bag index
+ 	bagIndex = 0;
+ }
+
+/**
+ * Resets the game.
+ */
+ function reset() {
+ 	score = 0;
+ 	grid = [[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	[0,0,0,0,0,0,0,0,0,0],
+ 	];
+ 	moves = 0;
+ 	generateBag();
+ 	nextShape();
+ }
+
+/**
+ * Determines if the given grid and shape collide with one another.
+ * @param  {Grid} scene  The grid to check.
+ * @param  {Shape} object The shape to check.
+ * @return {Boolean} Whether the shape and grid collide.
+ */
+ function collides(scene, object) {
+ 	//for the size of the shape (row x column)
+ 	for (var row = 0; row < object.shape.length; row++) {
+ 		for (var col = 0; col < object.shape[row].length; col++) {
+ 			//if its not empty
+ 			if (object.shape[row][col] !== 0) {
+ 				//if it collides, return true
+ 				if (scene[object.y + row] === undefined || scene[object.y + row][object.x + col] === undefined || scene[object.y + row][object.x + col] !== 0) {
+ 					return true;
+ 				}
+ 			}
+ 		}
+ 	}
+ 	return false;
+ }
+
+//for rotating a shape, how many times should we rotate
+ function rotate(matrix, times) {
+ 	//for each time
+ 	for (var t = 0; t < times; t++) {
+ 		//flip the shape matrix
+ 		matrix = transpose(matrix);
+ 		//and for the length of the matrix, reverse each column
+ 		for (var i = 0; i < matrix.length; i++) {
+ 			matrix[i].reverse();
+ 		}
+ 	}
+ 	return matrix;
+ }
+//flip row x column to column x row
+ function transpose(array) {
+ 	return array[0].map(function(col, i) {
+ 		return array.map(function(row) {
+ 			return row[i];
+ 		});
+ 	});
+ }
+
+/**
+ * Outputs the state to the screen.
+ */
+ function output() {
+ 	if (draw) {
+ 		var output = document.getElementById("output");
+ 		var html = "<h1>TetNet</h1><h5>Evolutionary approach to Tetris AI</h5>var grid = [";
+ 		var space = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+ 		for (var i = 0; i < grid.length; i++) {
+ 			if (i === 0) {
+ 				html += "[" + grid[i] + "]";
+ 			} else {
+ 				html += "<br />" + space + "[" + grid[i] + "]";
+ 			}
+ 		}
+ 		html += "];";
+ 		for (var c = 0; c < colors.length; c++) {
+ 			html = replaceAll(html, "," + (c + 1), ",<font color=\"" + colors[c] + "\">" + (c + 1) + "</font>");
+ 			html = replaceAll(html, (c + 1) + ",", "<font color=\"" + colors[c] + "\">" + (c + 1) + "</font>,");
+ 		}
+ 		output.innerHTML = html;
+ 	}
+ }
+
+/**
+ * Updates the side information.
+ */
+ function updateScore() {
+ 	if (draw) {
+ 		var scoreDetails = document.getElementById("score");
+ 		var html = "<br /><br /><h2>&nbsp;</h2><h2>Score: " + score + "</h2>";
+ 		html += "<br /><b>--Upcoming--</b>";
+ 		for (var i = 0; i < upcomingShape.length; i++) {
+ 			var next =replaceAll((upcomingShape[i] + ""), "0", "&nbsp;");
+ 			html += "<br />&nbsp;&nbsp;&nbsp;&nbsp;" + next;
+ 		}
+ 		for (var l = 0; l < 4 - upcomingShape.length; l++) {
+ 			html += "<br />";
+ 		}
+ 		for (var c = 0; c < colors.length; c++) {
+ 			html = replaceAll(html, "," + (c + 1), ",<font color=\"" + colors[c] + "\">" + (c + 1) + "</font>");
+ 			html = replaceAll(html, (c + 1) + ",", "<font color=\"" + colors[c] + "\">" + (c + 1) + "</font>,");
+ 		}
+ 		html += "<br />Speed: " + speed;
+ 		if (ai) {
+ 			html += "<br />Moves: " + movesTaken + "/" + moveLimit;
+ 			html += "<br />Generation: " + generation;
+ 			html += "<br />Individual: " + (currentGenome + 1)  + "/" + populationSize;
+ 			html += "<br /><pre style=\"font-size:12px\">" + JSON.stringify(genomes[currentGenome], null, 2) + "</pre>";
+ 			if (inspectMoveSelection) {
+ 				html += "<br /><pre style=\"font-size:12px\">" + JSON.stringify(moveAlgorithm, null, 2) + "</pre>";
+ 			}
+ 		}
+ 		html = replaceAll(replaceAll(replaceAll(html, "&nbsp;,", "&nbsp;&nbsp;"), ",&nbsp;", "&nbsp;&nbsp;"), ",", "&nbsp;");
+ 		scoreDetails.innerHTML = html;
+ 	}
+ }
+
+/**
+ * Returns the current game state in an object.
+ * @return {State} The current game state.
+ */
+ function getState() {
+ 	var state = {
+ 		grid: clone(grid),
+ 		currentShape: clone(currentShape),
+ 		upcomingShape: clone(upcomingShape),
+ 		bag: clone(bag),
+ 		bagIndex: clone(bagIndex),
+ 		rndSeed: clone(rndSeed),
+ 		score: clone(score)
+ 	};
+ 	return state;
+ }
+
+/**
+ * Loads the game state from the given state object.
+ * @param  {State} state The state to load.
+ */
+ function loadState(state) {
+ 	grid = clone(state.grid);
+ 	currentShape = clone(state.currentShape);
+ 	upcomingShape = clone(state.upcomingShape);
+ 	bag = clone(state.bag);
+ 	bagIndex = clone(state.bagIndex);
+ 	rndSeed = clone(state.rndSeed);
+ 	score = clone(state.score);
+ 	output();
+ 	updateScore();
+ }
+
+/**
+ * Returns the cumulative height of all the columns.
+ * @return {Number} The cumulative height.
+ */
+ function getCumulativeHeight() {
+ 	removeShape();
+ 	var peaks = [20,20,20,20,20,20,20,20,20,20];
+ 	for (var row = 0; row < grid.length; row++) {
+ 		for (var col = 0; col < grid[row].length; col++) {
+ 			if (grid[row][col] !== 0 && peaks[col] === 20) {
+ 				peaks[col] = row;
+ 			}
+ 		}
+ 	}
+ 	var totalHeight = 0;
+ 	for (var i = 0; i < peaks.length; i++) {
+ 		totalHeight += 20 - peaks[i];
+ 	}
+ 	applyShape();
+ 	return totalHeight;
+ }
+
+/**
+ * Returns the number of holes in the grid.
+ * @return {Number} The number of holes.
+ */
+ function getHoles() {
+ 	removeShape();
+ 	var peaks = [20,20,20,20,20,20,20,20,20,20];
+ 	for (var row = 0; row < grid.length; row++) {
+ 		for (var col = 0; col < grid[row].length; col++) {
+ 			if (grid[row][col] !== 0 && peaks[col] === 20) {
+ 				peaks[col] = row;
+ 			}
+ 		}
+ 	}
+ 	var holes = 0;
+ 	for (var x = 0; x < peaks.length; x++) {
+ 		for (var y = peaks[x]; y < grid.length; y++) {
+ 			if (grid[y][x] === 0) {
+ 				holes++;
+ 			}
+ 		}
+ 	}
+ 	applyShape();
+ 	return holes;
+ }
+
+/**
+ * Returns an array that replaces all the holes in the grid with -1.
+ * @return {Array} The modified grid array.
+ */
+ function getHolesArray() {
+ 	var array = clone(grid);
+ 	removeShape();
+ 	var peaks = [20,20,20,20,20,20,20,20,20,20];
+ 	for (var row = 0; row < grid.length; row++) {
+ 		for (var col = 0; col < grid[row].length; col++) {
+ 			if (grid[row][col] !== 0 && peaks[col] === 20) {
+ 				peaks[col] = row;
+ 			}
+ 		}
+ 	}
+ 	for (var x = 0; x < peaks.length; x++) {
+ 		for (var y = peaks[x]; y < grid.length; y++) {
+ 			if (grid[y][x] === 0) {
+ 				array[y][x] = -1;
+ 			}
+ 		}
+ 	}
+ 	applyShape();
+ 	return array;
+ }
+
+/**
+ * Returns the roughness of the grid.
+ * @return {Number} The roughness of the grid.
+ */
+ function getRoughness() {
+ 	removeShape();
+ 	var peaks = [20,20,20,20,20,20,20,20,20,20];
+ 	for (var row = 0; row < grid.length; row++) {
+ 		for (var col = 0; col < grid[row].length; col++) {
+ 			if (grid[row][col] !== 0 && peaks[col] === 20) {
+ 				peaks[col] = row;
+ 			}
+ 		}
+ 	}
+ 	var roughness = 0;
+ 	var differences = [];
+ 	for (var i = 0; i < peaks.length - 1; i++) {
+ 		roughness += Math.abs(peaks[i] - peaks[i + 1]);
+ 		differences[i] = Math.abs(peaks[i] - peaks[i + 1]);
+ 	}
+ 	applyShape();
+ 	return roughness;
+ }
+
+/**
+ * Returns the range of heights of the columns on the grid.
+ * @return {Number} The relative height.
+ */
+ function getRelativeHeight() {
+ 	removeShape();
+ 	var peaks = [20,20,20,20,20,20,20,20,20,20];
+ 	for (var row = 0; row < grid.length; row++) {
+ 		for (var col = 0; col < grid[row].length; col++) {
+ 			if (grid[row][col] !== 0 && peaks[col] === 20) {
+ 				peaks[col] = row;
+ 			}
+ 		}
+ 	}
+ 	applyShape();
+ 	return Math.max.apply(Math, peaks) - Math.min.apply(Math, peaks);
+ }
+
+/**
+ * Returns the height of the biggest column on the grid.
+ * @return {Number} The absolute height.
+ */
+ function getHeight() {
+ 	removeShape();
+ 	var peaks = [20,20,20,20,20,20,20,20,20,20];
+ 	for (var row = 0; row < grid.length; row++) {
+ 		for (var col = 0; col < grid[row].length; col++) {
+ 			if (grid[row][col] !== 0 && peaks[col] === 20) {
+ 				peaks[col] = row;
+ 			}
+ 		}
+ 	}
+ 	applyShape();
+ 	return 20 - Math.min.apply(Math, peaks);
+ }
+
+/**
+ * Loads the archive given.
+ * @param  {String} archiveString The stringified archive.
+ */
+ function loadArchive(archiveString) {
+ 	archive = JSON.parse(archiveString);
+ 	genomes = clone(archive.genomes);
+ 	populationSize = archive.populationSize;
+ 	generation = archive.currentGeneration;
+ 	currentGenome = 0;
+ 	reset();
+ 	roundState = getState();
+ 	console.log("Archive loaded!");
+ }
+
+/**
+ * Clones an object.
+ * @param  {Object} obj The object to clone.
+ * @return {Object}     The cloned object.
+ */
+ function clone(obj) {
+ 	return JSON.parse(JSON.stringify(obj));
+ }
+
+/**
+ * Returns a random property from the given object.
+ * @param  {Object} obj The object to select a property from.
+ * @return {Property}     A random property.
+ */
+ function randomProperty(obj) {
+ 	return(obj[randomKey(obj)]);
+ }
+
+/**
+ * Returns a random property key from the given object.
+ * @param  {Object} obj The object to select a property key from.
+ * @return {Property}     A random property key.
+ */
+ function randomKey(obj) {
+ 	var keys = Object.keys(obj);
+ 	var i = seededRandom(0, keys.length);
+ 	return keys[i];
+ }
+
+ function replaceAll(target, search, replacement) {
+ 	return target.replace(new RegExp(search, 'g'), replacement);
+ }
+
+/**
+ * Returns a random number that is determined from a seeded random number generator.
+ * @param  {Number} min The minimum number, inclusive.
+ * @param  {Number} max The maximum number, exclusive.
+ * @return {Number}     The generated random number.
+ */
+ function seededRandom(min, max) {
+ 	max = max || 1;
+ 	min = min || 0;
+
+ 	rndSeed = (rndSeed * 9301 + 49297) % 233280;
+ 	var rnd = rndSeed / 233280;
+
+ 	return Math.floor(min + rnd * (max - min));
+ }
+
+ function randomNumBetween(min, max) {
+ 	return Math.floor(Math.random() * (max - min + 1) + min);
+ }
+
+ function randomWeightedNumBetween(min, max) {
+ 	return Math.floor(Math.pow(Math.random(), 2) * (max - min + 1) + min);
+ }
+
+ function randomChoice(propOne, propTwo) {
+ 	if (Math.round(Math.random()) === 0) {
+ 		return clone(propOne);
+ 	} else {
+ 		return clone(propTwo);
+ 	}
+ }
+
+ function contains(a, obj) {
+ 	var i = a.length;
+ 	while (i--) {
+ 		if (a[i] === obj) {
+ 			return true;
+ 		}
+ 	}
+ 	return false;
+ }
+
+/**
+ * A node, representing a biological neuron.
+ * @param {Number} ID  The ID of the node.
+ * @param {Number} val The value of the node.
+ */
+ function Node(ID, val) {
+ 	this.id = ID;
+ 	this.incomingConnections = [];
+ 	this.outgoingConnections = [];
+ 	if (val === undefined) {
+ 		val = 0;
+ 	}
+ 	this.value = val;
+ 	this.bias = 0;
+ }
+
+/**
+ * A connection, representing a biological synapse.
+ * @param {String} inID   The ID of the incoming node.
+ * @param {String} outID  The ID of the outgoing node.
+ * @param {Number} weight The weight of the connection.
+ */
+ function Connection(inID, outID, weight) {
+ 	this.in = inID;
+ 	this.out = outID;
+ 	if (weight === undefined) {
+ 		weight = 1;
+ 	}
+ 	this.id = inID + ":" + outID;
+ 	this.weight = weight;
+ }
+
+/**
+ * The neural network, containing nodes and connections.
+ * @param {Object} config The configuration to use.
+ */
+ function Network(config) {
+ 	this.nodes = {};
+ 	this.inputs = [];
+ 	this.hidden = [];
+ 	this.outputs = [];
+ 	this.connections = {};
+ 	this.nodes.BIAS = new Node("BIAS", 1);
+
+ 	if (config !== undefined) {
+ 		var inputNum = config.inputNodes || 0;
+ 		var hiddenNum = config.hiddenNodes || 0;
+ 		var outputNum = config.outputNodes || 0;
+ 		this.createNodes(inputNum, hiddenNum, outputNum);
+
+ 		if (config.createAllConnections) {
+ 			this.createAllConnections(true);
+ 		}
+ 	}
+ }
+
+/**
+ * Populates the network with the given number of nodes of each type.
+ * @param  {Number} inputNum The number of input nodes to create.
+ * @param  {Number} hiddenNum The number of hidden nodes to create.
+ * @param  {Number} outputNum The number of output nodes to create.
+ */
+ Network.prototype.createNodes = function(inputNum, hiddenNum, outputNum) {
+ 	for (var i = 0; i < inputNum; i++) {
+ 		this.addInput();
+ 	}
+ 	for (var j = 0; j < hiddenNum; j++) {
+ 		this.addHidden();
+ 	}
+ 	for (var k = 0; k < outputNum; k++) {
+ 		this.addOutput();
+ 	}
+ };
+
+/**
+ * @param {Number} [value] The value to set the node to [Default is 0].
+ */
+ Network.prototype.addInput = function(value) {
+ 	var nodeID = "INPUT:" + this.inputs.length;
+ 	if (value === undefined) {
+ 		value = 0;
+ 	}
+ 	this.nodes[nodeID] = new Node(nodeID, value);
+ 	this.inputs.push(nodeID);
+ };
+
+/**
+ * Creates a hidden node.
+ */
+ Network.prototype.addHidden = function() {
+ 	var nodeID = "HIDDEN:" + this.hidden.length;
+ 	this.nodes[nodeID] = new Node(nodeID);
+ 	this.hidden.push(nodeID);
+ };
+
+/**
+ * Creates an output node.
+ */
+ Network.prototype.addOutput = function() {
+ 	var nodeID = "OUTPUT:" + this.outputs.length;
+ 	this.nodes[nodeID] = new Node(nodeID);
+ 	this.outputs.push(nodeID);
+ };
+
+/**
+ * Returns the node with the given ID.
+ * @param  {String} nodeID The ID of the node to return.
+ * @return {Node} The node with the given ID.
+ */
+ Network.prototype.getNodeByID = function(nodeID) {
+ 	return this.nodes[nodeID];
+ };
+
+/**
+ * Returns the node of the given type at the given index.
+ * @param  {String} type  The type of node requested [Accepted arguments: "INPUT", "HIDDEN", "OUTPUT"].
+ * @param  {Number} index The index of the node (from the array containing nodes of the requested type).
+ * @return {Node} The node requested. Will return null if no node is found.
+ */
+ Network.prototype.getNode = function(type, index) {
+ 	if (type.toUpperCase() == "INPUT") {
+ 		return this.nodes[this.inputs[index]];
+ 	} else 	if (type.toUpperCase() == "HIDDEN") {
+ 		return this.nodes[this.hidden[index]];
+ 	} else 	if (type.toUpperCase() == "OUTPUT") {
+ 		return this.nodes[this.outputs[index]];
+ 	}
+ 	return null;
+ };
+
+/**
+ * Returns the connection with the given ID.
+ * @param  {String} connectionID The ID of the connection to return.
+ * @return {Connection} The connection with the given ID.
+ */
+ Network.prototype.getConnection = function(connectionID) {
+ 	return this.connections[connectionID];
+ };
+
+/**
+ * Calculates the values of the nodes in the neural network.
+ */
+ Network.prototype.calculate = function calculate() {
+ 	this.updateNodeConnections();
+ 	for (var i = 0; i < this.hidden.length; i++) {
+ 		this.calculateNodeValue(this.hidden[i]);
+ 	}
+ 	for (var j = 0; j < this.outputs.length; j++) {
+ 		this.calculateNodeValue(this.outputs[j]);
+ 	}
+ };
+
+/**
+ * Updates the node's to reference the current connections.
+ */
+ Network.prototype.updateNodeConnections = function() {
+ 	for (var nodeKey in this.nodes) {
+ 		this.nodes[nodeKey].incomingConnections = [];
+ 		this.nodes[nodeKey].outgoingConnections = [];
+ 	}
+ 	for (var connectionKey in this.connections) {
+ 		this.nodes[this.connections[connectionKey].in].outgoingConnections.push(connectionKey);
+ 		this.nodes[this.connections[connectionKey].out].incomingConnections.push(connectionKey);
+ 	}
+ };
+
+/**
+ * Calculates and updates the value of the node with the given ID. Node values are computed using a sigmoid function.
+ * @param  {String} nodeId The ID of the node to update.
+ */
+ Network.prototype.calculateNodeValue = function(nodeID) {
+ 	var sum = 0;
+ 	for (var incomingIndex = 0; incomingIndex < this.nodes[nodeID].incomingConnections.length; incomingIndex++) {
+ 		var connection = this.connections[this.nodes[nodeID].incomingConnections[incomingIndex]];
+ 		sum += this.nodes[connection.in].value * connection.weight;
+ 	}
+ 	this.nodes[nodeID].value = sigmoid(sum);
+ };
+
+/**
+ * Creates a connection with the given values.
+ * @param {String} inID The ID of the node that the connection comes from. 
+ * @param {String} outID The ID of the node that the connection enters.
+ * @param {Number} [weight] The weight of the connection [Default is 1].
+ */
+ Network.prototype.addConnection = function(inID, outID, weight) {
+ 	if (weight === undefined) {
+ 		weight = 1;
+ 	}
+ 	this.connections[inID + ":" + outID] = new Connection(inID, outID, weight);
+ };
+
+ /**
+ * Creates all possible connections between nodes, not including connections to the bias node.
+ * @param  {Boolean} randomWeights Whether to choose a random weight between -1 and 1, or to default to 1.
+ */
+ Network.prototype.createAllConnections = function(randomWeights) {
+ 	if (randomWeights === undefined) {
+ 		randomWeights = false;
+ 	}
+ 	var weight = 1;
+ 	for (var i = 0; i < this.inputs.length; i++) {
+ 		for (var j = 0; j < this.hidden.length; j++) {
+ 			if (randomWeights) {
+ 				weight = Math.random() * 4 - 2;
+ 			}
+ 			this.addConnection(this.inputs[i], this.hidden[j], weight);
+ 		}
+ 		if (randomWeights) {
+ 			weight = Math.random() * 4 - 2;
+ 		}
+ 		this.addConnection("BIAS", this.inputs[i], weight);
+ 	}
+ 	for (var k = 0; k < this.hidden.length; k++) {
+ 		for (var l = 0; l < this.outputs.length; l++) {
+ 			if (randomWeights) {
+ 				weight = Math.random() * 4 - 2;
+ 			}
+ 			this.addConnection(this.hidden[k], this.outputs[l], weight);
+ 		}
+ 		if (randomWeights) {
+ 			weight = Math.random() * 4 - 2;
+ 		}
+ 		this.addConnection("BIAS", this.hidden[k], weight);
+ 	}
+ };
+
+/**
+ * Sets the value of the node with the given ID to the given value.
+ * @param {String} nodeID The ID of the node to modify.
+ * @param {Number} value The value to set the node to.
+ */
+ Network.prototype.setNodeValue = function(nodeID, value) {
+ 	this.nodes[nodeID].value = value;
+ };
+
+/**
+ * Sets the values of the input neurons to the given values.
+ * @param {Array} array An array of values to set the input node values to.
+ */
+ Network.prototype.setInputs = function(array) {
+ 	for (var i = 0; i < array.length; i++) {
+ 		this.nodes[this.inputs[i]].value = array[i];
+ 	}
+ };
+
+/**
+ * Sets the value of multiple nodes, given an object with node ID's as parameters and node values as values.
+ * @param {Object} valuesByID The values to set the nodes to.
+ */
+ Network.prototype.setMultipleNodeValues = function(valuesByID) {
+ 	for (var key in valuesByID) {
+ 		this.nodes[key].value = valuesByID[key];
+ 	}
+ };
+
+
+/**
+ * A visualization of the neural network, showing all connections and nodes.
+ * @param {Object} config The configuration to use.
+ */
+ function NetworkVisualizer(config) {
+ 	this.canvas = "NetworkVisualizer";
+ 	this.backgroundColor = "#FFFFFF";
+ 	this.nodeRadius = -1;
+ 	this.nodeColor = "grey";
+ 	this.positiveConnectionColor = "green";
+ 	this.negativeConnectionColor = "red";
+ 	this.connectionStrokeModifier = 1;
+ 	if (config !== undefined) {
+ 		if (config.canvas !== undefined) {
+ 			this.canvas = config.canvas;
+ 		}
+ 		if (config.backgroundColor !== undefined) {
+ 			this.backgroundColor = config.backgroundColor;
+ 		}
+ 		if (config.nodeRadius !== undefined) {
+ 			this.nodeRadius = config.nodeRadius;
+ 		}
+ 		if (config.nodeColor !== undefined) {
+ 			this.nodeColor = config.nodeColor;
+ 		}
+ 		if (config.positiveConnectionColor !== undefined) {
+ 			this.positiveConnectionColor = config.positiveConnectionColor;
+ 		}
+ 		if (config.negativeConnectionColor !== undefined) {
+ 			this.negativeConnectionColor = config.negativeConnectionColor;
+ 		}
+ 		if (config.connectionStrokeModifier !== undefined) {
+ 			this.connectionStrokeModifier = config.connectionStrokeModifier;
+ 		}
+ 	}
+ }
+
+/**
+ * Draws the visualized network upon the canvas.
+ * @param  {Network} network The network to visualize.
+ */
+ NetworkVisualizer.prototype.drawNetwork = function(network) {
+ 	var canv = document.getElementById(this.canvas); 
+ 	var ctx = canv.getContext("2d");
+ 	var radius;
+ 	ctx.fillStyle = this.backgroundColor;
+ 	ctx.fillRect(0, 0, canv.width, canv.height);
+ 	if (this.nodeRadius != -1) {
+ 		radius = this.nodeRadius;
+ 	} else {
+ 		radius = Math.min(canv.width, canv.height) / (Math.max(network.inputs.length, network.hidden.length, network.outputs.length, 3)) / 2.5;
+ 	}
+ 	var nodeLocations = {};
+ 	var inputX = canv.width / 5;
+ 	for (var inputIndex = 0; inputIndex < network.inputs.length; inputIndex++) {
+ 		nodeLocations[network.inputs[inputIndex]] = {x: inputX, y: canv.height / (network.inputs.length) * (inputIndex + 0.5)};
+ 	}
+ 	var hiddenX = canv.width / 2;
+ 	for (var hiddenIndex = 0; hiddenIndex < network.hidden.length; hiddenIndex++) {
+ 		nodeLocations[network.hidden[hiddenIndex]] = {x: hiddenX, y: canv.height / (network.hidden.length) * (hiddenIndex + 0.5)};
+ 	}
+ 	var outputX = canv.width / 5 * 4;
+ 	for (var outputIndex = 0; outputIndex < network.outputs.length; outputIndex++) {
+ 		nodeLocations[network.outputs[outputIndex]] = {x: outputX, y: canv.height / (network.outputs.length) * (outputIndex + 0.5)};
+ 	}
+ 	nodeLocations.BIAS = {x: canv.width / 3, y: radius / 2};
+ 	for (var connectionKey in network.connections) {
+ 		var connection = network.connections[connectionKey];
+ 		//if (connection.in != "BIAS" && connection.out != "BIAS") {
+ 			ctx.beginPath();
+ 			ctx.moveTo(nodeLocations[connection.in].x, nodeLocations[connection.in].y);
+ 			ctx.lineTo(nodeLocations[connection.out].x, nodeLocations[connection.out].y);
+ 			if (connection.weight > 0) {
+ 				ctx.strokeStyle = this.positiveConnectionColor;
+ 			} else {
+ 				ctx.strokeStyle = this.negativeConnectionColor;
+ 			}
+ 			ctx.lineWidth = connection.weight * this.connectionStrokeModifier;
+ 			ctx.lineCap = "round";
+ 			ctx.stroke();
+ 		//}
+ 	}
+ 	for (var nodeKey in nodeLocations) {
+ 		var node = network.getNodeByID(nodeKey);
+ 		ctx.beginPath();
+ 		if (nodeKey == "BIAS") {
+ 			ctx.arc(nodeLocations[nodeKey].x, nodeLocations[nodeKey].y, radius / 2.2, 0, 2 * Math.PI);
+ 		} else {
+ 			ctx.arc(nodeLocations[nodeKey].x, nodeLocations[nodeKey].y, radius, 0, 2 * Math.PI);
+ 		}
+ 		ctx.fillStyle = this.backgroundColor;
+ 		ctx.fill();
+ 		ctx.strokeStyle = this.nodeColor;
+ 		ctx.lineWidth = 3;
+ 		ctx.stroke();
+ 		ctx.globalAlpha = node.value;
+ 		ctx.fillStyle = this.nodeColor;
+ 		ctx.fill();
+ 		ctx.globalAlpha = 1; 	
+ 	}
+ };
+
+
+ BackpropNetwork.prototype = new Network();
+ BackpropNetwork.prototype.constructor = BackpropNetwork;
+
+/**
+ * Neural network that is optimized via backpropagation.
+ * @param {Object} config The configuration to use.
+ */
+ function BackpropNetwork(config) {
+ 	Network.call(this, config);
+ 	this.inputData = {};
+ 	this.targetData = {};
+ 	this.learningRate = 0.5;
+ 	this.step = 0;
+ 	this.totalErrorSum = 0;
+ 	this.averageError = [];
+
+ 	if (config !== undefined) {
+ 		if (config.learningRate !== undefined) {
+ 			this.learningRate = config.learningRate;
+ 		}
+ 		if (config.inputData !== undefined) {
+ 			this.setInputData(config.inputData);
+ 		}
+ 		if (config.targetData !== undefined) {
+ 			this.setTargetData(config.targetData);
+ 		}
+ 	}
+ }
+
+/**
+ * Backpropagates the neural network, using the input and training data given. Currently does not affect connections to the bias node.
+ */
+ BackpropNetwork.prototype.backpropagate = function() {
+ 	this.step++;
+ 	if (this.inputData[this.step] === undefined) {
+ 		this.averageError.push(this.totalErrorSum / this.step);
+ 		this.totalErrorSum = 0;
+ 		this.step = 0;
+ 	}
+ 	for (var inputKey in this.inputData[this.step]) {
+ 		this.nodes[inputKey].value = this.inputData[this.step][inputKey];
+ 	}
+ 	this.calculate();
+ 	var currentTargetData = this.targetData[this.step];
+ 	var totalError = this.getTotalError();
+ 	this.totalErrorSum += totalError;
+ 	var newWeights = {};
+ 	for (var i = 0; i < this.outputs.length; i++) {
+ 		var outputNode = this.nodes[this.outputs[i]];
+ 		for (var j = 0; j < outputNode.incomingConnections.length; j++) {
+ 			var hiddenToOutput = this.connections[outputNode.incomingConnections[j]];
+ 			var deltaRuleResult = -(currentTargetData[this.outputs[i]] - outputNode.value) * outputNode.value * (1 - outputNode.value) * this.nodes[hiddenToOutput.in].value;
+ 			newWeights[hiddenToOutput.id] = hiddenToOutput.weight - this.learningRate * deltaRuleResult;
+ 		}
+ 	}
+ 	for (var k = 0; k < this.hidden.length; k++) {
+ 		var hiddenNode = this.nodes[this.hidden[k]];
+ 		for (var l = 0; l < hiddenNode.incomingConnections.length; l++) {
+ 			var inputToHidden = this.connections[hiddenNode.incomingConnections[l]];
+ 			var total = 0;
+ 			for (var m = 0; m < hiddenNode.outgoingConnections.length; m++) {
+ 				var outgoing = this.connections[hiddenNode.outgoingConnections[m]];
+ 				var outgoingNode = this.nodes[outgoing.out];
+ 				total += ((-(currentTargetData[outgoing.out] - outgoingNode.value)) * (outgoingNode.value * (1 - outgoingNode.value))) * outgoing.weight;
+ 			}
+ 			var outOverNet = hiddenNode.value * (1 - hiddenNode.value);
+ 			var netOverWeight = this.nodes[inputToHidden.in].value;
+ 			var result = total * outOverNet * netOverWeight;
+ 			newWeights[inputToHidden.id] = inputToHidden.weight - this.learningRate * result;
+ 		}
+ 	}
+ 	for (var key in newWeights) {
+ 		this.connections[key].weight = newWeights[key];
+ 	}
+ };
+
+/**
+ * Adds a target result to the target data. This will be compared to the output in order to determine error.
+ * @param {String} outputNodeID The ID of the output node whose value will be compared to the target.
+ * @param {Number} target The value to compare against the output when checking for errors.
+ */
+ BackpropNetwork.prototype.addTarget = function(outputNodeID, target) {
+ 	this.targetData[outputNodeID] = target;
+ };
+
+/**
+ * Sets the input data that will be compared to the target data.
+ * @param {Array} array An array containing the data to be inputted (ex. [0, 1] will set the first input node
+ * to have a value of 0 and the second to have a value of 1). Each array argument represents a single
+ * step, and will be compared against the parallel set in the target data.
+ */
+ BackpropNetwork.prototype.setInputData = function() {
+ 	var all = arguments;
+ 	if (arguments.length == 1 && arguments[0].constructor == Array) {
+ 		all = arguments[0];
+ 	} 
+ 	this.inputData = {};
+ 	for (var i = 0; i < all.length; i++) {
+ 		var data = all[i];
+ 		var instance = {};
+ 		for (var j = 0; j < data.length; j++) {
+ 			instance["INPUT:" + j] = data[j]; 
+ 		}
+ 		this.inputData[i] = instance;
+ 	}
+ };
+
+/**
+ * Sets the target data that will be used to check for total error.
+ * @param {Array} array An array containing the data to be compared against (ex. [0, 1] will compare the first
+ * output node against 0 and the second against 1). Each array argument represents a single step.
+ */
+ BackpropNetwork.prototype.setTargetData = function() {
+ 	var all = arguments;
+ 	if (arguments.length == 1 && arguments[0].constructor == Array) {
+ 		all = arguments[0];
+ 	} 
+ 	this.targetData = {};
+ 	for (var i = 0; i < all.length; i++) {
+ 		var data = all[i];
+ 		var instance = {};
+ 		for (var j = 0; j < data.length; j++) {
+ 			instance["OUTPUT:" + j] = data[j]; 
+ 		}
+ 		this.targetData[i] = instance;
+ 	}
+ };
+
+/**
+ * Calculates the total error of all the outputs' values compared to the target data.
+ * @return {Number} The total error.
+ */
+ BackpropNetwork.prototype.getTotalError = function() {
+ 	var sum = 0;
+ 	for (var i = 0; i < this.outputs.length; i++) {
+ 		sum += Math.pow(this.targetData[this.step][this.outputs[i]] - this.nodes[this.outputs[i]].value, 2) / 2;
+ 	}
+ 	return sum;
+ };
+
+/**
+ * A gene containing the data for a single connection in the neural network.
+ * @param {String} inID       The ID of the incoming node.
+ * @param {String} outID      The ID of the outgoing node.
+ * @param {Number} weight     The weight of the connection to create.
+ * @param {Number} innovation The innovation number of the gene.
+ * @param {Boolean} enabled   Whether the gene is expressed or not.
+ */	
+ function Gene(inID, outID, weight, innovation, enabled) {
+ 	if (innovation === undefined) {
+ 		innovation = 0;
+ 	}
+ 	this.innovation = innovation;
+ 	this.in = inID;
+ 	this.out = outID;
+ 	if (weight === undefined) {
+ 		weight = 1;
+ 	}
+ 	this.weight = weight;
+ 	if (enabled === undefined) {
+ 		enabled = true;
+ 	}
+ 	this.enabled = enabled;
+ }
+
+/**
+ * Returns the connection that the gene represents.
+ * @return {Connection} The generated connection.
+ */
+ Gene.prototype.getConnection = function() {
+ 	return new Connection(this.in, this.out, this.weight);
+ };
+
+/**
+ * A genome containing genes that will make up the neural network.
+ * @param {Number} inputNodes  The number of input nodes to create.
+ * @param {Number} outputNodes The number of output nodes to create.
+ */
+ function Genome(inputNodes, outputNodes) {
+ 	this.inputNodes = inputNodes;
+ 	this.outputNodes = outputNodes;
+ 	this.genes = [];
+ 	this.fitness = -Number.MAX_VALUE;
+ 	this.globalRank = 0;
+ 	this.randomIdentifier = Math.random();
+ }
+
+ Genome.prototype.containsGene = function(inID, outID) {
+ 	for (var i = 0; i < this.genes.length; i++) {
+ 		if (this.genes[i].inID == inID && this.genes[i].outID == outID) {
+ 			return true;
+ 		}
+ 	}
+ 	return false;
+ };
+
+/**
+ * A species of genomes that contains genomes which closely resemble one another, enough so that they are able to breed.
+ */
+ function Species() {
+ 	this.genomes = [];
+ 	this.averageFitness = 0;
+ }
+
+/**
+ * Culls the genomes to the given amount by removing less fit genomes.
+ * @param  {Number} [remaining] The number of genomes to cull to [Default is half the size of the species (rounded up)].
+ */
+ Species.prototype.cull = function(remaining) {
+ 	this.genomes.sort(compareGenomesDescending);
+ 	if (remaining === undefined) {
+ 		remaining = Math.ceil(this.genomes.length / 2);
+ 	}
+ 	while (this.genomes.length > remaining) {
+ 		this.genomes.pop();
+ 	}
+ };
+
+/**
+ * Calculates the average fitness of the species.
+ */
+ Species.prototype.calculateAverageFitness = function() {
+ 	var sum = 0;
+ 	for (var j = 0; j < this.genomes.length; j++) {
+ 		sum += this.genomes[j].fitness;
+ 	}
+ 	this.averageFitness = sum / this.genomes.length;
+ };
+
+/**
+ * Returns the network that the genome represents.
+ * @return {Network} The generated network.
+ */
+ Genome.prototype.getNetwork = function() {
+ 	var network = new Network();
+ 	network.createNodes(this.inputNodes, 0, this.outputNodes);
+ 	for (var i = 0; i < this.genes.length; i++) {
+ 		var gene = this.genes[i];
+ 		if (gene.enabled) {
+ 			if (network.nodes[gene.in] === undefined && gene.in.indexOf("HIDDEN") != -1) {
+ 				network.nodes[gene.in] = new Node(gene.in);
+ 				network.hidden.push(gene.in);
+ 			}
+ 			if (network.nodes[gene.out] === undefined && gene.out.indexOf("HIDDEN") != -1) {
+ 				network.nodes[gene.out] = new Node(gene.out);
+ 				network.hidden.push(gene.out);
+ 			}
+ 			network.addConnection(gene.in, gene.out, gene.weight);
+ 		}
+ 	}
+ 	return network;
+ };
+
+/**
+ * Creates and optimizes neural networks via neuroevolution, using the Neuroevolution of Augmenting Topologies method.
+ * @param {Object} config The configuration to use.
+ */
+ function Neuroevolution(config) {
+ 	this.genomes = [];
+ 	this.populationSize = 100;
+ 	this.mutationRates = {
+ 		createConnection: 0.05,
+ 		createNode: 0.02,
+ 		modifyWeight: 0.15,
+ 		enableGene: 0.05,
+ 		disableGene: 0.1,
+ 		createBias: 0.1,
+ 		weightMutationStep: 2
+ 	};
+ 	this.inputNodes = 0;
+ 	this.outputNodes = 0;
+ 	this.elitism = true;
+ 	this.deltaDisjoint = 2;
+ 	this.deltaWeights = 0.4;
+ 	this.deltaThreshold = 2;
+ 	this.hiddenNodeCap = 10;
+ 	this.fitnessFunction = function (network) {log("ERROR: Fitness function not set"); return -1;};
+ 	this.globalInnovationCounter = 1;
+ 	this.currentGeneration = 0;
+ 	this.species = [];
+ 	this.newInnovations = {};
+ 	if (config !== undefined) {
+ 		if (config.populationSize !== undefined) {
+ 			this.populationSize = config.populationSize;
+ 		}
+ 		if (config.inputNodes !== undefined) {
+ 			this.inputNodes = config.inputNodes;
+ 		}
+ 		if (config.outputNodes !== undefined) {
+ 			this.outputNodes = config.outputNodes;
+ 		}
+ 		if (config.mutationRates !== undefined) {
+ 			var configRates = config.mutationRates;
+ 			if (configRates.createConnection !== undefined) {
+ 				this.mutationRates.createConnection = configRates.createConnection;
+ 			}
+ 			if (configRates.createNode !== undefined) {
+ 				this.mutationRates.createNode = configRates.createNode;
+ 			}
+ 			if (configRates.modifyWeight !== undefined) {
+ 				this.mutationRates.modifyWeight = configRates.modifyWeight;
+ 			}
+ 			if (configRates.enableGene !== undefined) {
+ 				this.mutationRates.enableGene = configRates.enableGene;
+ 			}
+ 			if (configRates.disableGene !== undefined) {
+ 				this.mutationRates.disableGene = configRates.disableGene;
+ 			}
+ 			if (configRates.createBias !== undefined) {
+ 				this.mutationRates.createBias = configRates.createBias;
+ 			}
+ 			if (configRates.weightMutationStep !== undefined) {
+ 				this.mutationRates.weightMutationStep = configRates.weightMutationStep;
+ 			}
+ 		}
+ 		if (config.elitism !== undefined) {
+ 			this.elitism = config.elitism;
+ 		}
+ 		if (config.deltaDisjoint !== undefined) {
+ 			this.deltaDisjoint = config.deltaDisjoint;
+ 		}
+ 		if (config.deltaWeights !== undefined) {
+ 			this.deltaWeights = config.deltaWeights;
+ 		}
+ 		if (config.deltaThreshold !== undefined) {
+ 			this.deltaThreshold = config.deltaThreshold;
+ 		}
+ 		if (config.hiddenNodeCap !== undefined) {
+ 			this.hiddenNodeCap = config.hiddenNodeCap;
+ 		}
+ 	}
+ }
+
+/**
+ * Populates the population with empty genomes, and then mutates the genomes.
+ */
+ Neuroevolution.prototype.createInitialPopulation = function() {
+ 	this.genomes = [];
+ 	for (var i = 0; i < this.populationSize; i++) {
+ 		var genome = this.linkMutate(new Genome(this.inputNodes, this.outputNodes));
+ 		this.genomes.push(genome);
+ 	}
+ 	this.mutate();
+ };
+
+/**
+ * Mutates the entire population based on the mutation rates.
+ */
+ Neuroevolution.prototype.mutate = function() {
+ 	for (var i = 0; i < this.genomes.length; i++) {
+ 		var network = this.genomes[i].getNetwork();
+ 		if (Math.random() < this.mutationRates.createConnection) {
+ 			this.genomes[i] = this.linkMutate(this.genomes[i]);
+ 		}
+ 		if (Math.random() < this.mutationRates.createNode && this.genomes[i].genes.length > 0 && network.hidden.length < this.hiddenNodeCap) {
+ 			var geneIndex = randomNumBetween(0, this.genomes[i].genes.length - 1);
+ 			var gene = this.genomes[i].genes[geneIndex];
+ 			if (gene.enabled && gene.in.indexOf("INPUT") != -1 && gene.out.indexOf("OUTPUT") != -1) {
+ 				var newNum = -1;
+ 				var found = true;
+ 				while (found) {
+ 					newNum++;
+ 					found = false;
+ 					for (var j = 0; j < this.genomes[i].genes.length; j++) {
+ 						if (this.genomes[i].genes[j].in.indexOf("HIDDEN:" + newNum) != -1 || this.genomes[i].genes[j].out.indexOf("HIDDEN:" + newNum) != -1) {
+ 							found = true;
+ 						}
+ 					}
+ 				}
+ 				if (newNum < this.hiddenNodeCap) {
+ 					var nodeName = "HIDDEN:" + newNum;
+ 					this.genomes[i].genes[geneIndex].enabled = false;
+ 					this.genomes[i].genes.push(new Gene(gene.in, nodeName, 1, this.globalInnovationCounter));
+ 					this.globalInnovationCounter++;
+ 					this.genomes[i].genes.push(new Gene(nodeName, gene.out, gene.weight, this.globalInnovationCounter));
+ 					this.globalInnovationCounter++;
+ 					network = this.genomes[i].getNetwork();
+ 				}
+ 			}
+ 		}
+ 		if (Math.random() < this.mutationRates.createBias) {
+ 			if (Math.random() > 0.5 && network.inputs.length > 0) {
+ 				var inputIndex = randomNumBetween(0, network.inputs.length - 1);
+ 				if (network.getConnection("BIAS:" + network.inputs[inputIndex]) === undefined) {
+ 					this.genomes[i].genes.push(new Gene("BIAS", network.inputs[inputIndex]));
+ 				}
+ 			} else if (network.hidden.length > 0) {
+ 				var hiddenIndex = randomNumBetween(0, network.hidden.length - 1);
+ 				if (network.getConnection("BIAS:" + network.hidden[hiddenIndex]) === undefined) {
+ 					this.genomes[i].genes.push(new Gene("BIAS", network.hidden[hiddenIndex]));
+ 				}
+ 			}
+ 		}
+ 		for (var k = 0; k < this.genomes[i].genes.length; k++) {
+ 			this.genomes[i].genes[k] = this.pointMutate(this.genomes[i].genes[k]);
+ 		}
+
+ 	}
+ };
+
+/**
+ * Attempts to create a new connection gene in the given genome.
+ * @param  {Genome} genome The genome to mutate.
+ * @return {Genome} The mutated genome.
+ */
+ Neuroevolution.prototype.linkMutate = function(genome) {
+ 	var network = genome.getNetwork();
+ 	var inNode = "";
+ 	var outNode = "";
+ 	if (Math.random() < 1/3 || network.hidden.length <= 0) {
+ 		inNode = network.inputs[randomNumBetween(0, this.inputNodes - 1)];
+ 		outNode = network.outputs[randomNumBetween(0, this.outputNodes - 1)];
+ 	} else if (Math.random() < 2/3) {
+ 		inNode = network.inputs[randomNumBetween(0, this.inputNodes - 1)];
+ 		outNode = network.hidden[randomNumBetween(0, network.hidden.length - 1)];
+ 	} else {
+ 		inNode = network.hidden[randomNumBetween(0, network.hidden.length - 1)];
+ 		outNode = network.outputs[randomNumBetween(0, this.outputNodes - 1)];
+ 	}
+ 	if (!genome.containsGene(inNode, outNode)) {
+ 		var newGene = new Gene(inNode, outNode, Math.random() * 2 - 1);
+ 		if (this.newInnovations[newGene.in + ":" + newGene.out] === undefined) {
+ 			this.newInnovations[newGene.in + ":" + newGene.out] = this.globalInnovationCounter;
+ 			newGene.innovation = this.globalInnovationCounter;
+ 			this.globalInnovationCounter++;
+ 		} else {
+ 			newGene.innovation = this.newInnovations[newGene.in + ":" + newGene.out];
+ 		}
+ 		genome.genes.push(newGene);
+ 	}
+ 	return genome;
+ };
+
+ /**
+ * Mutates the given gene based on the mutation rates.
+ * @param  {Gene} gene The gene to mutate.
+ * @return {Gene} The mutated gene.
+ */
+ Neuroevolution.prototype.pointMutate = function(gene) {
+ 	if (Math.random() < this.mutationRates.modifyWeight) {
+ 		gene.weight = gene.weight + Math.random() * this.mutationRates.weightMutationStep * 2 - this.mutationRates.weightMutationStep; 
+ 	}
+ 	if (Math.random() < this.mutationRates.enableGene) {
+ 		gene.enabled = true;
+ 	}
+ 	if (Math.random() < this.mutationRates.disableGene) {
+ 		gene.enabled = false;
+ 	}
+ 	return gene;
+ };
+
+/**
+ * Crosses two parent genomes with one another, forming a child genome.
+ * @param  {Genome} firstGenome  The first genome to mate.
+ * @param  {Genome} secondGenome The second genome to mate.
+ * @return {Genome} The resultant child genome.
+ */
+ Neuroevolution.prototype.crossover = function(firstGenome, secondGenome) {
+ 	var child = new Genome(firstGenome.inputNodes, firstGenome.outputNodes);
+ 	var firstInnovationNumbers = {};
+ 	for (var h = 0; h < firstGenome.genes.length; h++) {
+ 		firstInnovationNumbers[firstGenome.genes[h].innovation] = h;
+ 	}
+ 	var secondInnovationNumbers = {};
+ 	for (var j = 0; j < secondGenome.genes.length; j++) {
+ 		secondInnovationNumbers[secondGenome.genes[j].innovation] = j;
+ 	}
+ 	for (var i = 0; i < firstGenome.genes.length; i++) {
+ 		var geneToClone;
+ 		if (secondInnovationNumbers[firstGenome.genes[i].innovation] !== undefined) {
+ 			if (Math.random() < 0.5) {
+ 				geneToClone = firstGenome.genes[i];
+ 			} else {
+ 				geneToClone = secondGenome.genes[secondInnovationNumbers[firstGenome.genes[i].innovation]];
+ 			}
+ 		} else {
+ 			geneToClone = firstGenome.genes[i];
+ 		}
+ 		child.genes.push(new Gene(geneToClone.in, geneToClone.out, geneToClone.weight, geneToClone.innovation, geneToClone.enabled)); 		
+ 	}
+ 	for (var k = 0; k < secondGenome.genes.length; k++) {
+ 		if (firstInnovationNumbers[secondGenome.genes[k].innovation] === undefined) {
+ 			var secondDisjoint = secondGenome.genes[k];
+ 			child.genes.push(new Gene(secondDisjoint.in, secondDisjoint.out, secondDisjoint.weight, secondDisjoint.innovation, secondDisjoint.enabled)); 		
+ 		}
+ 	}
+ 	return child;
+ };
+
+/**
+ * Evolves the population by creating a new generation and mutating the children.
+ */
+ Neuroevolution.prototype.evolve = function() {
+ 	this.currentGeneration++;
+ 	this.newInnovations = {};
+ 	this.genomes.sort(compareGenomesDescending);
+ 	var children = [];
+ 	this.speciate();
+ 	this.cullSpecies();
+ 	this.calculateSpeciesAvgFitness();
+
+ 	var totalAvgFitness = 0;
+ 	var avgFitnesses = [];
+ 	for (var s = 0; s < this.species.length; s++) {
+ 		totalAvgFitness += this.species[s].averageFitness;
+ 		avgFitnesses.push(this.species[s].averageFitness);
+ 	}
+ 	var arr = [];
+ 	for (var j = 0; j < this.species.length; j++) {
+ 		var childrenToMake = Math.floor(this.species[j].averageFitness / totalAvgFitness * this.populationSize);
+ 		arr.push(childrenToMake);
+ 		if (childrenToMake > 0) {
+ 			children.push(this.species[j].genomes[0]);
+ 		}
+ 		for (var c = 0; c < childrenToMake - 1; c++) {
+ 			children.push(this.makeBaby(this.species[j]));
+ 		}
+ 	}
+ 	while (children.length < this.populationSize) {
+ 		children.push(this.makeBaby(this.species[randomNumBetween(0, this.species.length - 1)]));
+ 	}
+ 	this.genomes = [];
+ 	this.genomes = this.genomes.concat(children);
+ 	this.mutate();
+ 	this.speciate();
+ 	log(this.species.length);
+ };
+
+/**
+ * Sorts the genomes into different species.
+ */
+ Neuroevolution.prototype.speciate = function() {
+ 	this.species = [];
+ 	for (var i = 0; i < this.genomes.length; i++) {
+ 		var placed = false;
+ 		for (var j = 0; j < this.species.length; j++) {
+ 			if (!placed && this.species[j].genomes.length > 0 && this.isSameSpecies(this.genomes[i], this.species[j].genomes[0])) {
+ 				this.species[j].genomes.push(this.genomes[i]);
+ 				placed = true;
+ 			}
+ 		}
+ 		if (!placed) {
+ 			var newSpecies = new Species();
+ 			newSpecies.genomes.push(this.genomes[i]);
+ 			this.species.push(newSpecies);
+ 		}
+ 	}
+ };
+
+/**
+ * Culls all the species to the given amount by removing less fit members of each species.
+ * @param  {Number} [remaining] The number of genomes to cull all the species to [Default is half the size of the species].
+ */
+ Neuroevolution.prototype.cullSpecies = function(remaining) {
+ 	var toRemove = [];
+ 	for (var i = 0; i < this.species.length; i++) {
+ 		this.species[i].cull(remaining);
+ 		if (this.species[i].genomes.length < 1) {
+ 			toRemove.push(this.species[i]);
+ 		}
+ 	}
+ 	for (var r = 0; r < toRemove.length; r++) {
+ 		this.species.remove(toRemove[r]);
+ 	}
+ };
+
+/**
+ * Calculates the average fitness of all the species.
+ */
+ Neuroevolution.prototype.calculateSpeciesAvgFitness = function() {
+ 	for (var i = 0; i < this.species.length; i++) {
+ 		this.species[i].calculateAverageFitness();
+ 	}
+ };
+
+/**
+ * Creates a baby in the given species, with fitter genomes having a higher chance to reproduce.
+ * @param  {Species} species The species to create a baby in.
+ * @return {Genome} The resultant baby.
+ */
+ Neuroevolution.prototype.makeBaby = function(species) {
+ 	var mum = species.genomes[randomWeightedNumBetween(0, species.genomes.length - 1)];
+ 	var dad = species.genomes[randomWeightedNumBetween(0, species.genomes.length - 1)];
+ 	return this.crossover(mum, dad);
+ };
+
+/**
+ * Calculates the fitness of all the genomes in the population.
+ */
+ Neuroevolution.prototype.calculateFitnesses = function() {
+ 	for (var i = 0; i < this.genomes.length; i++) {
+ 		this.genomes[i].fitness = this.fitnessFunction(this.genomes[i].getNetwork());
+ 	}
+ };
+
+/**
+ * Returns the relative compatibility metric for the given genomes.
+ * @param  {Genome} genomeA The first genome to compare.
+ * @param  {Genome} genomeB The second genome to compare.
+ * @return {Number} The relative compatibility metric. 
+ */
+ Neuroevolution.prototype.getCompatibility = function(genomeA, genomeB) {
+ 	var disjoint = 0;
+ 	var totalWeight = 0;
+ 	var aInnovationNums = {};
+ 	for (var i = 0; i < genomeA.genes.length; i++) {
+ 		aInnovationNums[genomeA.genes[i].innovation] = i;
+ 	}
+ 	var bInnovationNums = [];
+ 	for (var j = 0; j < genomeB.genes.length; j++) {
+ 		bInnovationNums[genomeB.genes[j].innovation] = j;
+ 	}
+ 	for (var k = 0; k < genomeA.genes.length; k++) {
+ 		if (bInnovationNums[genomeA.genes[k].innovation] === undefined) {
+ 			disjoint++;
+ 		} else {
+ 			totalWeight += Math.abs(genomeA.genes[k].weight - genomeB.genes[bInnovationNums[genomeA.genes[k].innovation]].weight);
+ 		}
+ 	}
+ 	for (var l = 0; l < genomeB.genes.length; l++) {
+ 		if (aInnovationNums[genomeB.genes[l].innovation] === undefined) {
+ 			disjoint++;
+ 		}
+ 	}
+ 	var n = Math.max(genomeA.genes.length, genomeB.genes.length);
+ 	return this.deltaDisjoint * (disjoint / n) + this.deltaWeights * (totalWeight / n);
+ };
+
+/**
+ * Determines whether the given genomes are from the same species.
+ * @param  {Genome}  genomeA The first genome to compare.
+ * @param  {Genome}  genomeB The second genome to compare.
+ * @return {Boolean} Whether the given genomes are from the same species.
+ */
+ Neuroevolution.prototype.isSameSpecies = function(genomeA, genomeB) {
+ 	return this.getCompatibility(genomeA, genomeB) < this.deltaThreshold;
+ };
+
+/**
+ * Returns the genome with the highest fitness in the population.
+ * @return {Genome} The elite genome.
+ */
+ Neuroevolution.prototype.getElite = function() {
+ 	this.genomes.sort(compareGenomesDescending);
+ 	return this.genomes[0];
+ };
+
+
+//Private static functions
+function sigmoid(t) {
+	return 1 / (1 + Math.exp(-t));
+}
+
+function randomNumBetween(min, max) {
+	return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function randomWeightedNumBetween(min, max) {
+	return Math.floor(Math.pow(Math.random(), 2) * (max - min + 1) + min);
+}
+
+function compareGenomesAscending(genomeA, genomeB) {
+	return genomeA.fitness - genomeB.fitness;
+}
+
+function compareGenomesDescending(genomeA, genomeB) {
+	return genomeB.fitness - genomeA.fitness;
+}
+
+Array.prototype.remove = function() {
+	var what, a = arguments, L = a.length, ax;
+	while (L && this.length) {
+		what = a[--L];
+		while ((ax = this.indexOf(what)) !== -1) {
+			this.splice(ax, 1);
+		}
+	}
+	return this;
+};
+
+
+function log(text) {
+	console.log(text);
+}
diff --git a/Backbone Tetris Game/style.css b/Backbone Tetris Game/style.css
new file mode 100644
index 000000000..e56fbd63b
--- /dev/null
+++ b/Backbone Tetris Game/style.css	
@@ -0,0 +1,34 @@
+body {
+    background-color: #272821;
+  }
+  .text {
+    color: #706C5A;
+    font-family: Inconsolata, Courier, monospace;
+    font-size: 20px;
+  }
+  #output {
+    float: left;
+    padding-left: 20%;
+  }
+  #score {
+    padding-left: 55%;
+  }
+  #instructions {
+    float: left;
+    position: absolute;
+    left: 1.5%;
+    bottom: 3%;
+    font-size: small;
+    line-height: 110%;
+  }
+  #signature {
+    float: right;
+    position: absolute;
+    right: 1.5%;
+    bottom: 3%;
+    font-size: small;
+    line-height: 110%;
+  }
+  a:link {
+    color: inherit;
+  }
diff --git a/Basic-Typing-Game/index.html b/Basic-Typing-Game/index.html
new file mode 100644
index 000000000..bdd760c58
--- /dev/null
+++ b/Basic-Typing-Game/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+    <!-- inside index.html -->
+<html>
+    <head>
+      <title>Typing game</title>
+      <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+      <h1>Typing game!</h1>
+      <p>Practice your typing skills with a quote from Sherlock Holmes. Click <b>start</b> to begin!</p>
+      <p id="best-score"></p>
+      <p id="least-score"></p>
+      <p id="quote"></p> <!-- This will display our quote -->
+      <p id="message"></p> <!-- This will display any status messages -->
+      
+      <div>
+        <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
+        <button type="button" id="start">Start</button> <!-- To start the game -->
+      </div>
+      <script src="script.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/Basic-Typing-Game/script.js b/Basic-Typing-Game/script.js
new file mode 100644
index 000000000..e00a94cee
--- /dev/null
+++ b/Basic-Typing-Game/script.js
@@ -0,0 +1,104 @@
+// all of our quotes
+const quotes = [
+  'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+  'There is nothing more deceptive than an obvious fact.',
+  'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+  'I never make exceptions. An exception disproves the rule.',
+  'What one man can invent another can discover.',
+  'Nothing clears up a case so much as stating it to another person.',
+  'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+typedValueElement.disabled = true;
+
+// Load scores from local storage
+let bestScore = localStorage.getItem("BestTime") || null;
+let leastScore = localStorage.getItem("LeastTime") || null;
+
+if (bestScore) {
+  document.getElementById('best-score').innerText = `Best Score: ${bestScore} seconds`;
+}
+if (leastScore) {
+  document.getElementById('least-score').innerText = `Least Time: ${leastScore} seconds`;
+}
+
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(word => `<span>${word} </span>`);
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  typedValueElement.value = '';
+  typedValueElement.disabled = false; // Activate input
+  typedValueElement.focus();
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+
+// at the end of script.js
+typedValueElement.addEventListener('input', () => {
+  // Get the current word
+  const currentWord = words[wordIndex];
+  // get the current value
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+      // end of sentence
+      const elapsedTime = (new Date().getTime() - startTime) / 1000;
+      const message = `CONGRATULATIONS! You finished in ${elapsedTime} seconds.`;
+      messageElement.innerText = message;
+      typedValueElement.disabled = true;
+
+      // Check and update least and best scores
+      if (!bestScore || elapsedTime < parseFloat(bestScore)) {
+          bestScore = elapsedTime;
+          localStorage.setItem("BestTime", bestScore);
+          document.getElementById('best-score').innerText = `Best Score: ${bestScore} seconds`;
+      }
+
+      if (!leastScore || elapsedTime > parseFloat(leastScore)) {
+          leastScore = elapsedTime;
+          localStorage.setItem("LeastTime", leastScore);
+          document.getElementById('least-score').innerText = `Least Time: ${leastScore} seconds`;
+      }
+
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+      // end of word
+      typedValueElement.value = '';
+      wordIndex++;
+      // reset the class name for all elements in quote
+      for (const wordElement of quoteElement.childNodes) {
+          wordElement.className = '';
+      }
+      // highlight the new word
+      quoteElement.childNodes[wordIndex].className = 'highlight';
+  } else if (currentWord.startsWith(typedValue)) {
+      typedValueElement.className = ''; // Correct typing
+  } else {
+      typedValueElement.className = 'error'; // Error state
+  }
+});
diff --git a/Basic-Typing-Game/style.css b/Basic-Typing-Game/style.css
new file mode 100644
index 000000000..744b6e738
--- /dev/null
+++ b/Basic-Typing-Game/style.css
@@ -0,0 +1,72 @@
+/* inside style.css */
+/* inside style.css */
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+h1 {
+  color: #4CAF50;
+  margin-bottom: 20px;
+}
+
+p {
+  font-size: 18px;
+  margin: 10px 0;
+}
+
+#quote {
+  font-size: 24px;
+  font-style: italic;
+  margin-bottom: 20px;
+}
+
+#message, #best-score {
+  font-size: 20px;
+  margin: 10px 0;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+input[type="text"] {
+  padding: 10px;
+  font-size: 18px;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  width: 300px;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 18px;
+  color: white;
+  background-color: #4CAF50;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+.highlight {
+    background-color: yellow;
+  }
+  
+.error {
+    background-color: lightcoral;
+    border: red;
+}
\ No newline at end of file
diff --git a/Beer Filling Game/index.html b/Beer Filling Game/index.html
index 07da72e96..eacd88827 100644
--- a/Beer Filling Game/index.html	
+++ b/Beer Filling Game/index.html	
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
     <title>Shoot Easter Bunny</title>
 </head>
 
diff --git a/Bloom filter visualizer/templates/index.html b/Bloom filter visualizer/templates/index.html
index e8b7c86ae..2a27b044c 100644
--- a/Bloom filter visualizer/templates/index.html	
+++ b/Bloom filter visualizer/templates/index.html	
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bloom Filter Animation</title>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
     <style>
         body {
             display: flex;
diff --git a/Bobble bubble [wip]/index.html b/Bobble bubble [wip]/index.html
new file mode 100644
index 000000000..ca028b79e
--- /dev/null
+++ b/Bobble bubble [wip]/index.html	
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="main.js"></script>
+</head>
+<body>
+    <canvas id="c" tabindex=0></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/Bobble bubble [wip]/main.js b/Bobble bubble [wip]/main.js
new file mode 100644
index 000000000..d9ac504a1
--- /dev/null
+++ b/Bobble bubble [wip]/main.js	
@@ -0,0 +1,1750 @@
+/*
+  to do
+  ✔ green pieces -> greener
+  ✔ score
+  ✔ falling pieces @ detached
+  ✔ screen blinks before row-advance
+  ✔ powerups/exploding-pieces
+  * load-piece animation
+  * multiplayer (?)
+*/
+c = document.querySelector('#c')
+c.width = 1920
+c.height = 1080
+x = c.getContext('2d')
+C = Math.cos
+S = Math.sin
+t = 0
+T = Math.tan
+
+rsz = window.onresize = () =>{
+  let b = document.body
+  let margin = 10
+  let n
+  let d = .5625
+  if(b.clientHeight/b.clientWidth > d){
+    c.style.width = `${(n=b.clientWidth) - margin*2}px`
+    c.style.height = `${n*d - margin*2}px`
+  }else{
+    c.style.height = `${(n=b.clientHeight) - margin*2}px`
+    c.style.width = `${n/d - margin*2}px`
+  }
+}
+
+rsz()
+
+async function Draw(){
+  if(!t){
+    oX = oY = oZ = 0
+    Rn = Math.random
+    R = (Rl,Pt,Yw,m) => {
+      let p
+      M = Math
+      A = M.atan2
+      H = M.hypot
+      X = S(p=A(X,Z)+Yw) * (d=H(X,Z))
+      Z = C(p)*d
+      X = S(p=A(X,Y)+Rl) * (d=H(X,Y))
+      Y = C(p) * d
+      Y = S(p=A(Y,Z)+Pt) * (d=H(Y,Z))
+      Z = C(p)*d
+      if(m){
+        X+=oX
+        Y+=oY
+        Z+=oZ
+      }
+    }
+    
+    R2=(Rl,Pt,Yw,m=false)=>{
+      M=Math
+      A=M.atan2
+      H=M.hypot
+      if(m){
+        X-=oX
+        Y-=oY
+        Z-=oZ
+      }
+      X=S(p=A(X,Y)+Rl)*(d=H(X,Y))
+      Y=C(p)*d
+      Y=S(p=A(Y,Z)+Pt)*(d=H(Y,Z))
+      Z=C(p)*d
+      X=S(p=A(X,Z)+Yw)*(d=H(X,Z))
+      Z=C(p)*d
+    }
+
+    Q = () => [c.width/2+X/Z*700, c.height/2+Y/Z*700]
+    I=(A,B,M,D,E,F,G,H)=>(K=((G-E)*(B-F)-(H-F)*(A-E))/(J=(H-F)*(M-A)-(G-E)*(D-B)))>=0&&K<=1&&(L=((M-A)*(B-F)-(D-B)*(A-E))/J)>=0&&L<=1?[A+K*(M-A),B+K*(D-B)]:0
+    
+    Normal = (facet, autoFlipNormals=false, X1=0, Y1=0, Z1=0) => {
+      let ax = 0, ay = 0, az = 0
+      facet.map(q_=>{ ax += q_[0], ay += q_[1], az += q_[2] })
+      ax /= facet.length, ay /= facet.length, az /= facet.length
+      let b1 = facet[2][0]-facet[1][0], b2 = facet[2][1]-facet[1][1], b3 = facet[2][2]-facet[1][2]
+      let c1 = facet[1][0]-facet[0][0], c2 = facet[1][1]-facet[0][1], c3 = facet[1][2]-facet[0][2]
+      crs = [b2*c3-b3*c2,b3*c1-b1*c3,b1*c2-b2*c1]
+      d = Math.hypot(...crs)+.001
+      let nls = 1 //normal line length
+      crs = crs.map(q=>q/d*nls)
+      let X1_ = ax, Y1_ = ay, Z1_ = az
+      let flip = 1
+      if(autoFlipNormals){
+        let d1_ = Math.hypot(X1_-X1,Y1_-Y1,Z1_-Z1)
+        let d2_ = Math.hypot(X1-(ax + crs[0]/99),Y1-(ay + crs[1]/99),Z1-(az + crs[2]/99))
+        flip = d2_>d1_?-1:1
+      }
+      let X2_ = ax + (crs[0]*=flip), Y2_ = ay + (crs[1]*=flip), Z2_ = az + (crs[2]*=flip)
+      return [X1_, Y1_, Z1_, X2_, Y2_, Z2_]
+    }
+      
+    async function loadOBJ(url, scale, tx, ty, tz, rl, pt, yw, recenter=true) {
+      let res
+      await fetch(url, res => res).then(data=>data.text()).then(data=>{
+        a=[]
+        data.split("\nv ").map(v=>{
+          a=[...a, v.split("\n")[0]]
+        })
+        a=a.filter((v,i)=>i).map(v=>[...v.split(' ').map(n=>(+n.replace("\n", '')))])
+        ax=ay=az=0
+        a.map(v=>{
+          v[1]*=-1
+          if(recenter){
+            ax+=v[0]
+            ay+=v[1]
+            az+=v[2]
+          }
+        })
+        ax/=a.length
+        ay/=a.length
+        az/=a.length
+        a.map(v=>{
+          X=(v[0]-ax)*scale
+          Y=(v[1]-ay)*scale
+          Z=(v[2]-az)*scale
+          R2(rl,pt,yw,0)
+          v[0]=X
+          v[1]=Y * (url.indexOf('bug')!=-1?2:1)
+          v[2]=Z
+        })
+        maxY=-6e6
+        a.map(v=>{
+          if(v[1]>maxY)maxY=v[1]
+        })
+        a.map(v=>{
+          v[1]-=maxY-oY
+          v[0]+=tx
+          v[1]+=ty
+          v[2]+=tz
+        })
+
+        b=[]
+        data.split("\nf ").map(v=>{
+          b=[...b, v.split("\n")[0]]
+        })
+        b.shift()
+        b=b.map(v=>v.split(' '))
+        b=b.map(v=>{
+          v=v.map(q=>{
+            return +q.split('/')[0]
+          })
+          v=v.filter(q=>q)
+          return v
+        })
+
+        res=[]
+        b.map(v=>{
+          e=[]
+          v.map(q=>{
+            e=[...e, a[q-1]]
+          })
+          e = e.filter(q=>q)
+          res=[...res, e]
+        })
+      })
+      return res
+    }
+
+    reflect = (a, n) => {
+      let d1 = Math.hypot(...a)+.0001
+      let d2 = Math.hypot(...n)+.0001
+      a[0]/=d1
+      a[1]/=d1
+      a[2]/=d1
+      n[0]/=d2
+      n[1]/=d2
+      n[2]/=d2
+      let dot = -a[0]*n[0] + -a[1]*n[1] + -a[2]*n[2]
+      let rx = -a[0] - 2 * n[0] * dot
+      let ry = -a[1] - 2 * n[1] * dot
+      let rz = -a[2] - 2 * n[2] * dot
+      return [-rx*d1, -ry*d1, -rz*d1]
+    }
+
+    geoSphere = (mx, my, mz, iBc, size) => {
+      let collapse=0
+      let B=Array(iBc).fill().map(v=>{
+        X = Rn()-.5
+        Y = Rn()-.5
+        Z = Rn()-.5
+        return  [X,Y,Z]
+      })
+      for(let m=99;m--;){
+        B.map((v,i)=>{
+          X = v[0]
+          Y = v[1]
+          Z = v[2]
+          B.map((q,j)=>{
+            if(j!=i){
+              X2=q[0]
+              Y2=q[1]
+              Z2=q[2]
+              d=1+(Math.hypot(X-X2,Y-Y2,Z-Z2)*(3+iBc/40)*3)**4
+              X+=(X-X2)*99/d
+              Y+=(Y-Y2)*99/d
+              Z+=(Z-Z2)*99/d
+            }
+          })
+          d=Math.hypot(X,Y,Z)
+          v[0]=X/d
+          v[1]=Y/d
+          v[2]=Z/d
+          if(collapse){
+            d=25+Math.hypot(X,Y,Z)
+            v[0]=(X-X/d)/1.1
+            v[1]=(Y-Y/d)/1.1         
+            v[2]=(Z-Z/d)/1.1
+          }
+        })
+      }
+      mind = 6e6
+      B.map((v,i)=>{
+        X1 = v[0]
+        Y1 = v[1]
+        Z1 = v[2]
+        B.map((q,j)=>{
+          X2 = q[0]
+          Y2 = q[1]
+          Z2 = q[2]
+          if(i!=j){
+            d = Math.hypot(a=X1-X2, b=Y1-Y2, e=Z1-Z2)
+            if(d<mind) mind = d
+          }
+        })
+      })
+      a = []
+      B.map((v,i)=>{
+        X1 = v[0]
+        Y1 = v[1]
+        Z1 = v[2]
+        B.map((q,j)=>{
+          X2 = q[0]
+          Y2 = q[1]
+          Z2 = q[2]
+          if(i!=j){
+            d = Math.hypot(X1-X2, Y1-Y2, Z1-Z2)
+            if(d<mind*2){
+              if(!a.filter(q=>q[0]==X2&&q[1]==Y2&&q[2]==Z2&&q[3]==X1&&q[4]==Y1&&q[5]==Z1).length) a = [...a, [X1*size,Y1*size,Z1*size,X2*size,Y2*size,Z2*size]]
+            }
+          }
+        })
+      })
+      B.map(v=>{
+        v[0]*=size
+        v[1]*=size
+        v[2]*=size
+        v[0]+=mx
+        v[1]+=my
+        v[2]+=mz
+      })
+      return [mx, my, mz, size, B, a]
+    }
+
+    burst = new Image()
+    burst.src = "https://srmcgann.github.io/temp/burst.png"
+
+    starsLoaded = false, starImgs = [{loaded: false}]
+    starImgs = Array(9).fill().map((v,i) => {
+      let a = {img: new Image(), loaded: false}
+      a.img.onload = () => {
+        a.loaded = true
+        setTimeout(()=>{
+          if(starImgs.filter(v=>v.loaded).length == 9) starsLoaded = true
+        }, 0)
+      }
+      a.img.src = `https://srmcgann.github.io/stars/star${i+1}.png`
+      return a
+    })
+
+    lineFaceI = (X1, Y1, Z1, X2, Y2, Z2, facet, autoFlipNormals=false, showNormals=false) => {
+      let X_, Y_, Z_, d, m, l_,K,J,L,p
+      let I_=(A,B,M,D,E,F,G,H)=>(K=((G-E)*(B-F)-(H-F)*(A-E))/(J=(H-F)*(M-A)-(G-E)*(D-B)))>=0&&K<=1&&(L=((M-A)*(B-F)-(D-B)*(A-E))/J)>=0&&L<=1?[A+K*(M-A),B+K*(D-B)]:0
+      let Q_=()=>[c.width/2+X_/Z_*900,c.height/2+Y_/Z_*900]
+      let R_ = (Rl,Pt,Yw,m)=>{
+        let M=Math, A=M.atan2, H=M.hypot
+        X_=S(p=A(X_,Y_)+Rl)*(d=H(X_,Y_)),Y_=C(p)*d,X_=S(p=A(X_,Z_)+Yw)*(d=H(X_,Z_)),Z_=C(p)*d,Y_=S(p=A(Y_,Z_)+Pt)*(d=H(Y_,Z_)),Z_=C(p)*d
+        if(m){ X_+=oX,Y_+=oY,Z_+=oZ }
+      }
+      let rotSwitch = m =>{
+        switch(m){
+          case 0: R_(0,0,Math.PI/2); break
+          case 1: R_(0,Math.PI/2,0); break
+          case 2: R_(Math.PI/2,0,Math.PI/2); break
+        }        
+      }
+      let ax = 0, ay = 0, az = 0
+      facet.map(q_=>{ ax += q_[0], ay += q_[1], az += q_[2] })
+      ax /= facet.length, ay /= facet.length, az /= facet.length
+      let b1 = facet[2][0]-facet[1][0], b2 = facet[2][1]-facet[1][1], b3 = facet[2][2]-facet[1][2]
+      let c1 = facet[1][0]-facet[0][0], c2 = facet[1][1]-facet[0][1], c3 = facet[1][2]-facet[0][2]
+      let crs = [b2*c3-b3*c2,b3*c1-b1*c3,b1*c2-b2*c1]
+      d = Math.hypot(...crs)+.001
+      let nls = 1 //normal line length
+      crs = crs.map(q=>q/d*nls)
+      let X1_ = ax, Y1_ = ay, Z1_ = az
+      let flip = 1
+      if(autoFlipNormals){
+        let d1_ = Math.hypot(X1_-X1,Y1_-Y1,Z1_-Z1)
+        let d2_ = Math.hypot(X1-(ax + crs[0]/99),Y1-(ay + crs[1]/99),Z1-(az + crs[2]/99))
+        flip = d2_>d1_?-1:1
+      }
+      let X2_ = ax + (crs[0]*=flip), Y2_ = ay + (crs[1]*=flip), Z2_ = az + (crs[2]*=flip)
+      if(showNormals){
+        x.beginPath()
+        X_ = X1_, Y_ = Y1_, Z_ = Z1_
+        R_(Rl,Pt,Yw,1)
+        if(Z_>0) x.lineTo(...Q_())
+        X_ = X2_, Y_ = Y2_, Z_ = Z2_
+        R_(Rl,Pt,Yw,1)
+        if(Z_>0) x.lineTo(...Q_())
+        x.lineWidth = 5
+        x.strokeStyle='#f004'
+        x.stroke()
+      }
+
+      let p1_ = Math.atan2(X2_-X1_,Z2_-Z1_)
+      let p2_ = -(Math.acos((Y2_-Y1_)/(Math.hypot(X2_-X1_,Y2_-Y1_,Z2_-Z1_)+.001))+Math.PI/2)
+      let isc = false, iscs = [false,false,false]
+      X_ = X1, Y_ = Y1, Z_ = Z1
+      R_(0,-p2_,-p1_)
+      let rx_ = X_, ry_ = Y_, rz_ = Z_
+      for(let m=3;m--;){
+        if(isc === false){
+          X_ = rx_, Y_ = ry_, Z_ = rz_
+          rotSwitch(m)
+          X1_ = X_, Y1_ = Y_, Z1_ = Z_ = 5, X_ = X2, Y_ = Y2, Z_ = Z2
+          R_(0,-p2_,-p1_)
+          rotSwitch(m)
+          X2_ = X_, Y2_ = Y_, Z2_ = Z_
+          facet.map((q_,j_)=>{
+            if(isc === false){
+              let l = j_
+              X_ = facet[l][0], Y_ = facet[l][1], Z_ = facet[l][2]
+              R_(0,-p2_,-p1_)
+              rotSwitch(m)
+              let X3_=X_, Y3_=Y_, Z3_=Z_
+              l = (j_+1)%facet.length
+              X_ = facet[l][0], Y_ = facet[l][1], Z_ = facet[l][2]
+              R_(0,-p2_,-p1_)
+              rotSwitch(m)
+              let X4_ = X_, Y4_ = Y_, Z4_ = Z_
+              if(l_=I_(X1_,Y1_,X2_,Y2_,X3_,Y3_,X4_,Y4_)) iscs[m] = l_
+            }
+          })
+        }
+      }
+      if(iscs.filter(v=>v!==false).length==3){
+        let iscx = iscs[1][0], iscy = iscs[0][1], iscz = iscs[0][0]
+        let pointInPoly = true
+        ax=0, ay=0, az=0
+        facet.map((q_, j_)=>{ ax+=q_[0], ay+=q_[1], az+=q_[2] })
+        ax/=facet.length, ay/=facet.length, az/=facet.length
+        X_ = ax, Y_ = ay, Z_ = az
+        R_(0,-p2_,-p1_)
+        X1_ = X_, Y1_ = Y_, Z1_ = Z_
+        X2_ = iscx, Y2_ = iscy, Z2_ = iscz
+        facet.map((q_,j_)=>{
+          if(pointInPoly){
+            let l = j_
+            X_ = facet[l][0], Y_ = facet[l][1], Z_ = facet[l][2]
+            R_(0,-p2_,-p1_)
+            let X3_ = X_, Y3_ = Y_, Z3_ = Z_
+            l = (j_+1)%facet.length
+            X_ = facet[l][0], Y_ = facet[l][1], Z_ = facet[l][2]
+            R_(0,-p2_,-p1_)
+            let X4_ = X_, Y4_ = Y_, Z4_ = Z_
+            if(I_(X1_,Y1_,X2_,Y2_,X3_,Y3_,X4_,Y4_)) pointInPoly = false
+          }
+        })
+        if(pointInPoly){
+          X_ = iscx, Y_ = iscy, Z_ = iscz
+          R_(0,p2_,0)
+          R_(0,0,p1_)
+          isc = [[X_,Y_,Z_], [crs[0],crs[1],crs[2]]]
+        }
+      }
+      return isc
+    }
+
+    TruncatedOctahedron = ls => {
+      let shp = [], a = []
+      mind = 6e6
+      for(let i=6;i--;){
+        X = S(p=Math.PI*2/6*i+Math.PI/6)*ls
+        Y = C(p)*ls
+        Z = 0
+        if(Y<mind) mind = Y
+        a = [...a, [X, Y, Z]]
+      }
+      let theta = .6154797086703867
+      a.map(v=>{
+        X = v[0]
+        Y = v[1] - mind
+        Z = v[2]
+        R(0,theta,0)
+        v[0] = X
+        v[1] = Y
+        v[2] = Z+1.5
+      })
+      b = JSON.parse(JSON.stringify(a)).map(v=>{
+        v[1] *= -1
+        return v
+      })
+      shp = [...shp, a, b]
+      e = JSON.parse(JSON.stringify(shp)).map(v=>{
+        v.map(q=>{
+          X = q[0]
+          Y = q[1]
+          Z = q[2]
+          R(0,0,Math.PI)
+          q[0] = X
+          q[1] = Y
+          q[2] = Z
+        })
+        return v
+      })
+      shp = [...shp, ...e]
+      e = JSON.parse(JSON.stringify(shp)).map(v=>{
+        v.map(q=>{
+          X = q[0]
+          Y = q[1]
+          Z = q[2]
+          R(0,0,Math.PI/2)
+          q[0] = X
+          q[1] = Y
+          q[2] = Z
+        })
+        return v
+      })
+      shp = [...shp, ...e]
+
+      coords = [
+        [[3,1],[4,3],[4,4],[3,2]],
+        [[3,4],[3,3],[2,4],[6,2]],
+        [[1,4],[0,3],[0,4],[4,2]],
+        [[1,1],[1,2],[6,4],[7,3]],
+        [[3,5],[7,5],[1,5],[3,0]],
+        [[2,5],[6,5],[0,5],[4,5]]
+      ]
+      a = []
+      coords.map(v=>{
+        b = []
+        v.map(q=>{
+          X = shp[q[0]][q[1]][0]
+          Y = shp[q[0]][q[1]][1]
+          Z = shp[q[0]][q[1]][2]
+          b = [...b, [X,Y,Z]]
+        })
+        a = [...a, b]
+      })
+      shp = [...shp, ...a]
+      return shp.map(v=>{
+        v.map(q=>{
+          q[0]/=3
+          q[1]/=3
+          q[2]/=3
+          q[0]*=ls
+          q[1]*=ls
+          q[2]*=ls
+        })
+        return v
+      })
+    }
+
+    Torus = (rw, cl, ls1, ls2, parts=1, twists=0, part_spacing=1.5) => {
+     t_ = C(t)*8
+     let ret = [], tx=0, ty=0, tz=0, prl1 = 0, p2a = 0, prl2=0, p2b = 0
+      tx1=ty1=tz1=tx2=ty2=tz2=0
+      for(let m=parts;m--;){
+        avgs = Array(rw).fill().map(v=>[0,0,0])
+        for(j=rw;j--;)for(let i = cl;i--;){
+          if(parts>1){
+            ls3 = ls1*part_spacing
+            X = S(p=Math.PI*2/parts*m) * ls3
+            Y = C(p) * ls3
+            Z = 0
+            R(prl1 = Math.PI*2/rw*(j-1)*twists+t_,0,0)
+            tx1 = X
+            ty1 = Y 
+            tz1 = Z
+            R(0, 0, Math.PI*2/rw*(j-1))
+            ax1 = X
+            ay1 = Y
+            az1 = Z
+            X = S(p=Math.PI*2/parts*m) * ls3
+            Y = C(p) * ls3
+            Z = 0
+            R(prl2 = Math.PI*2/rw*(j)*twists+t_,0,0)
+            tx2 = X
+            ty2 = Y
+            tz2 = Z
+            R(0, 0, Math.PI*2/rw*j)
+            ax2 = X
+            ay2 = Y
+            az2 = Z
+            p1a = Math.atan2(ax2-ax1,az2-az1)
+            p2a = Math.PI/2+Math.acos((ay2-ay1)/(Math.hypot(ax2-ax1,ay2-ay1,az2-az1)+.001))
+
+            X = S(p=Math.PI*2/parts*m) * ls3
+            Y = C(p) * ls3
+            Z = 0
+            R(Math.PI*2/rw*(j)*twists+t_,0,0)
+            tx1b = X
+            ty1b = Y
+            tz1b = Z
+            R(0, 0, Math.PI*2/rw*j)
+            ax1b = X
+            ay1b = Y
+            az1b = Z
+            X = S(p=Math.PI*2/parts*m) * ls3
+            Y = C(p) * ls3
+            Z = 0
+            R(Math.PI*2/rw*(j+1)*twists+t_,0,0)
+            tx2b = X
+            ty2b = Y
+            tz2b = Z
+            R(0, 0, Math.PI*2/rw*(j+1))
+            ax2b = X
+            ay2b = Y
+            az2b = Z
+            p1b = Math.atan2(ax2b-ax1b,az2b-az1b)
+            p2b = Math.PI/2+Math.acos((ay2b-ay1b)/(Math.hypot(ax2b-ax1b,ay2b-ay1b,az2b-az1b)+.001))
+          }
+          a = []
+          X = S(p=Math.PI*2/cl*i) * ls1
+          Y = C(p) * ls1
+          Z = 0
+          //R(0,0,-p1a)
+          R(prl1,p2a,0)
+          X += ls2 + tx1, Y += ty1, Z += tz1
+          R(0, 0, Math.PI*2/rw*j)
+          a = [...a, [X,Y,Z]]
+          X = S(p=Math.PI*2/cl*(i+1)) * ls1
+          Y = C(p) * ls1
+          Z = 0
+          //R(0,0,-p1a)
+          R(prl1,p2a,0)
+          X += ls2 + tx1, Y += ty1, Z += tz1
+          R(0, 0, Math.PI*2/rw*j)
+          a = [...a, [X,Y,Z]]
+          X = S(p=Math.PI*2/cl*(i+1)) * ls1
+          Y = C(p) * ls1
+          Z = 0
+          //R(0,0,-p1b)
+          R(prl2,p2b,0)
+          X += ls2 + tx2, Y += ty2, Z += tz2
+          R(0, 0, Math.PI*2/rw*(j+1))
+          a = [...a, [X,Y,Z]]
+          X = S(p=Math.PI*2/cl*i) * ls1
+          Y = C(p) * ls1
+          Z = 0
+          //R(0,0,-p1b)
+          R(prl2,p2b,0)
+          X += ls2 + tx2, Y += ty2, Z += tz2
+          R(0, 0, Math.PI*2/rw*(j+1))
+          a = [...a, [X,Y,Z]]
+          ret = [...ret, a]
+        }
+      }
+      return ret
+    }
+
+    Cylinder = (rw, cl, ls1, ls2, caps=false) => {
+      let a = []
+      for(let i=rw;i--;){
+        let b = []
+        for(let j=cl;j--;){
+          X = S(p=Math.PI*2/cl*j) * ls1
+          Y = (1/rw*i-.5)*ls2
+          Z = C(p) * ls1
+          b = [...b, [X,Y,Z]]
+        }
+        if(caps) a = [...a, b]
+        for(let j=cl;j--;){
+          b = []
+          X = S(p=Math.PI*2/cl*j) * ls1
+          Y = (1/rw*i-.5)*ls2
+          Z = C(p) * ls1
+          b = [...b, [X,Y,Z]]
+          X = S(p=Math.PI*2/cl*(j+1)) * ls1
+          Y = (1/rw*i-.5)*ls2
+          Z = C(p) * ls1
+          b = [...b, [X,Y,Z]]
+          X = S(p=Math.PI*2/cl*(j+1)) * ls1
+          Y = (1/rw*(i+1)-.5)*ls2
+          Z = C(p) * ls1
+          b = [...b, [X,Y,Z]]
+          X = S(p=Math.PI*2/cl*j) * ls1
+          Y = (1/rw*(i+1)-.5)*ls2
+          Z = C(p) * ls1
+          b = [...b, [X,Y,Z]]
+          a = [...a, b]
+        }
+      }
+      b = []
+      for(let j=cl;j--;){
+        X = S(p=Math.PI*2/cl*j) * ls1
+        Y = ls2/2
+        Z = C(p) * ls1
+        //b = [...b, [X,Y,Z]]
+      }
+      if(caps) a = [...a, b]
+      return a
+    }
+
+    Tetrahedron = size => {
+      ret = []
+      a = []
+      let h = size/1.4142/1.25
+      for(i=3;i--;){
+        X = S(p=Math.PI*2/3*i) * size/1.25
+        Y = C(p) * size/1.25
+        Z = h
+        a = [...a, [X,Y,Z]]
+      }
+      ret = [...ret, a]
+      for(j=3;j--;){
+        a = []
+        X = 0
+        Y = 0
+        Z = -h
+        a = [...a, [X,Y,Z]]
+        X = S(p=Math.PI*2/3*j) * size/1.25
+        Y = C(p) * size/1.25
+        Z = h
+        a = [...a, [X,Y,Z]]
+        X = S(p=Math.PI*2/3*(j+1)) * size/1.25
+        Y = C(p) * size/1.25
+        Z = h
+        a = [...a, [X,Y,Z]]
+        ret = [...ret, a]
+      }
+      ax=ay=az=ct=0
+      ret.map(v=>{
+        v.map(q=>{
+          ax+=q[0]
+          ay+=q[1]
+          az+=q[2]
+          ct++
+        })
+      })
+      ax/=ct
+      ay/=ct
+      az/=ct
+      ret.map(v=>{
+        v.map(q=>{
+          q[0]-=ax
+          q[1]-=ay
+          q[2]-=az
+        })
+      })
+      return ret
+    }
+
+    Cube = size => {
+      for(CB=[],j=6;j--;CB=[...CB,b])for(b=[],i=4;i--;)b=[...b,[(a=[S(p=Math.PI*2/4*i+Math.PI/4),C(p),2**.5/2])[j%3]*(l=j<3?size/2**.5:-size/2**.5),a[(j+1)%3]*l,a[(j+2)%3]*l]]
+      return CB
+    }
+
+    Octahedron = size => {
+      ret = []
+      let h = size/1.25
+      for(j=8;j--;){
+        a = []
+        X = 0
+        Y = 0
+        Z = h * (j<4?-1:1)
+        a = [...a, [X,Y,Z]]
+        X = S(p=Math.PI*2/4*j) * size/1.25
+        Y = C(p) * size/1.25
+        Z = 0
+        a = [...a, [X,Y,Z]]
+        X = S(p=Math.PI*2/4*(j+1)) * size/1.25
+        Y = C(p) * size/1.25
+        Z = 0
+        a = [...a, [X,Y,Z]]
+        ret = [...ret, a]
+      }
+      return ret      
+    }
+
+    Dodecahedron = size => {
+      ret = []
+      a = []
+      mind = -6e6
+      for(i=5;i--;){
+        X=S(p=Math.PI*2/5*i + Math.PI/5)
+        Y=C(p)
+        Z=0
+        if(Y>mind) mind=Y
+        a = [...a, [X,Y,Z]]
+      }
+      a.map(v=>{
+        X = v[0]
+        Y = v[1]-=mind
+        Z = v[2]
+        R(0, .553573, 0)
+        v[0] = X
+        v[1] = Y
+        v[2] = Z
+      })
+      b = JSON.parse(JSON.stringify(a))
+      b.map(v=>{
+        v[1] *= -1
+      })
+      ret = [...ret, a, b]
+      mind = -6e6
+      ret.map(v=>{
+        v.map(q=>{
+          X = q[0]
+          Y = q[1]
+          Z = q[2]
+          if(Z>mind)mind = Z
+        })
+      })
+      d1=Math.hypot(ret[0][0][0]-ret[0][1][0],ret[0][0][1]-ret[0][1][1],ret[0][0][2]-ret[0][1][2])
+      ret.map(v=>{
+        v.map(q=>{
+          q[2]-=mind+d1/2
+        })
+      })
+      b = JSON.parse(JSON.stringify(ret))
+      b.map(v=>{
+        v.map(q=>{
+          q[2]*=-1
+        })
+      })
+      ret = [...ret, ...b]
+      b = JSON.parse(JSON.stringify(ret))
+      b.map(v=>{
+        v.map(q=>{
+          X = q[0]
+          Y = q[1]
+          Z = q[2]
+          R(0,0,Math.PI/2)
+          R(0,Math.PI/2,0)
+          q[0] = X
+          q[1] = Y
+          q[2] = Z
+        })
+      })
+      e = JSON.parse(JSON.stringify(ret))
+      e.map(v=>{
+        v.map(q=>{
+          X = q[0]
+          Y = q[1]
+          Z = q[2]
+          R(0,0,Math.PI/2)
+          R(Math.PI/2,0,0)
+          q[0] = X
+          q[1] = Y
+          q[2] = Z
+        })
+      })
+      ret = [...ret, ...b, ...e]
+      ret.map(v=>{
+        v.map(q=>{
+          q[0] *= size/2
+          q[1] *= size/2
+          q[2] *= size/2
+        })
+      })
+      return ret
+    }
+
+    Icosahedron = size => {
+      ret = []
+      let B = [
+        [[0,3],[1,0],[2,2]],
+        [[0,3],[1,0],[1,3]],
+        [[0,3],[2,3],[1,3]],
+        [[0,2],[2,1],[1,0]],
+        [[0,2],[1,3],[1,0]],
+        [[0,2],[1,3],[2,0]],
+        [[0,3],[2,2],[0,0]],
+        [[1,0],[2,2],[2,1]],
+        [[1,1],[2,2],[2,1]],
+        [[1,1],[2,2],[0,0]],
+        [[1,1],[2,1],[0,1]],
+        [[0,2],[2,1],[0,1]],
+        [[2,0],[1,2],[2,3]],
+        [[0,0],[0,3],[2,3]],
+        [[1,3],[2,0],[2,3]],
+        [[2,3],[0,0],[1,2]],
+        [[1,2],[2,0],[0,1]],
+        [[0,0],[1,2],[1,1]],
+        [[0,1],[1,2],[1,1]],
+        [[0,2],[2,0],[0,1]],
+      ]
+      for(p=[1,1],i=38;i--;)p=[...p,p[l=p.length-1]+p[l-1]]
+      phi = p[l]/p[l-1]
+      a = [
+        [-phi,-1,0],
+        [phi,-1,0],
+        [phi,1,0],
+        [-phi,1,0],
+      ]
+      for(j=3;j--;ret=[...ret, b])for(b=[],i=4;i--;) b = [...b, [a[i][j],a[i][(j+1)%3],a[i][(j+2)%3]]]
+      ret.map(v=>{
+        v.map(q=>{
+          q[0]*=size/2.25
+          q[1]*=size/2.25
+          q[2]*=size/2.25
+        })
+      })
+      cp = JSON.parse(JSON.stringify(ret))
+      out=[]
+      a = []
+      B.map(v=>{
+        idx1a = v[0][0]
+        idx2a = v[1][0]
+        idx3a = v[2][0]
+        idx1b = v[0][1]
+        idx2b = v[1][1]
+        idx3b = v[2][1]
+        a = [...a, [cp[idx1a][idx1b],cp[idx2a][idx2b],cp[idx3a][idx3b]]]
+      })
+      out = [...out, ...a]
+      return out
+    }
+
+    subbed = (subs, size, sphereize, shape) => {
+      for(let m=subs; m--;){
+        base = shape
+        shape = []
+        base.map(v=>{
+          l = 0
+          X1 = v[l][0]
+          Y1 = v[l][1]
+          Z1 = v[l][2]
+          l = 1
+          X2 = v[l][0]
+          Y2 = v[l][1]
+          Z2 = v[l][2]
+          l = 2
+          X3 = v[l][0]
+          Y3 = v[l][1]
+          Z3 = v[l][2]
+          if(v.length > 3){
+            l = 3
+            X4 = v[l][0]
+            Y4 = v[l][1]
+            Z4 = v[l][2]
+            if(v.length > 4){
+              l = 4
+              X5 = v[l][0]
+              Y5 = v[l][1]
+              Z5 = v[l][2]
+            }
+          }
+          mx1 = (X1+X2)/2
+          my1 = (Y1+Y2)/2
+          mz1 = (Z1+Z2)/2
+          mx2 = (X2+X3)/2
+          my2 = (Y2+Y3)/2
+          mz2 = (Z2+Z3)/2
+          a = []
+          switch(v.length){
+            case 3:
+              mx3 = (X3+X1)/2
+              my3 = (Y3+Y1)/2
+              mz3 = (Z3+Z1)/2
+              X = X1, Y = Y1, Z = Z1, a = [...a, [X,Y,Z]]
+              X = mx1, Y = my1, Z = mz1, a = [...a, [X,Y,Z]]
+              X = mx3, Y = my3, Z = mz3, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = mx1, Y = my1, Z = mz1, a = [...a, [X,Y,Z]]
+              X = X2, Y = Y2, Z = Z2, a = [...a, [X,Y,Z]]
+              X = mx2, Y = my2, Z = mz2, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = mx3, Y = my3, Z = mz3, a = [...a, [X,Y,Z]]
+              X = mx2, Y = my2, Z = mz2, a = [...a, [X,Y,Z]]
+              X = X3, Y = Y3, Z = Z3, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = mx1, Y = my1, Z = mz1, a = [...a, [X,Y,Z]]
+              X = mx2, Y = my2, Z = mz2, a = [...a, [X,Y,Z]]
+              X = mx3, Y = my3, Z = mz3, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              break
+            case 4:
+              mx3 = (X3+X4)/2
+              my3 = (Y3+Y4)/2
+              mz3 = (Z3+Z4)/2
+              mx4 = (X4+X1)/2
+              my4 = (Y4+Y1)/2
+              mz4 = (Z4+Z1)/2
+              cx = (X1+X2+X3+X4)/4
+              cy = (Y1+Y2+Y3+Y4)/4
+              cz = (Z1+Z2+Z3+Z4)/4
+              X = X1, Y = Y1, Z = Z1, a = [...a, [X,Y,Z]]
+              X = mx1, Y = my1, Z = mz1, a = [...a, [X,Y,Z]]
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              X = mx4, Y = my4, Z = mz4, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = mx1, Y = my1, Z = mz1, a = [...a, [X,Y,Z]]
+              X = X2, Y = Y2, Z = Z2, a = [...a, [X,Y,Z]]
+              X = mx2, Y = my2, Z = mz2, a = [...a, [X,Y,Z]]
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              X = mx2, Y = my2, Z = mz2, a = [...a, [X,Y,Z]]
+              X = X3, Y = Y3, Z = Z3, a = [...a, [X,Y,Z]]
+              X = mx3, Y = my3, Z = mz3, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = mx4, Y = my4, Z = mz4, a = [...a, [X,Y,Z]]
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              X = mx3, Y = my3, Z = mz3, a = [...a, [X,Y,Z]]
+              X = X4, Y = Y4, Z = Z4, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              break
+            case 5:
+              cx = (X1+X2+X3+X4+X5)/5
+              cy = (Y1+Y2+Y3+Y4+Y5)/5
+              cz = (Z1+Z2+Z3+Z4+Z5)/5
+              mx3 = (X3+X4)/2
+              my3 = (Y3+Y4)/2
+              mz3 = (Z3+Z4)/2
+              mx4 = (X4+X5)/2
+              my4 = (Y4+Y5)/2
+              mz4 = (Z4+Z5)/2
+              mx5 = (X5+X1)/2
+              my5 = (Y5+Y1)/2
+              mz5 = (Z5+Z1)/2
+              X = X1, Y = Y1, Z = Z1, a = [...a, [X,Y,Z]]
+              X = X2, Y = Y2, Z = Z2, a = [...a, [X,Y,Z]]
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = X2, Y = Y2, Z = Z2, a = [...a, [X,Y,Z]]
+              X = X3, Y = Y3, Z = Z3, a = [...a, [X,Y,Z]]
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = X3, Y = Y3, Z = Z3, a = [...a, [X,Y,Z]]
+              X = X4, Y = Y4, Z = Z4, a = [...a, [X,Y,Z]]
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = X4, Y = Y4, Z = Z4, a = [...a, [X,Y,Z]]
+              X = X5, Y = Y5, Z = Z5, a = [...a, [X,Y,Z]]
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              X = X5, Y = Y5, Z = Z5, a = [...a, [X,Y,Z]]
+              X = X1, Y = Y1, Z = Z1, a = [...a, [X,Y,Z]]
+              X = cx, Y = cy, Z = cz, a = [...a, [X,Y,Z]]
+              shape = [...shape, a]
+              a = []
+              break
+          }
+        })
+      }
+      if(sphereize){
+        ip1 = sphereize
+        ip2 = 1-sphereize
+        shape = shape.map(v=>{
+          v = v.map(q=>{
+            X = q[0]
+            Y = q[1]
+            Z = q[2]
+            d = Math.hypot(X,Y,Z)
+            X /= d
+            Y /= d
+            Z /= d
+            X *= size/2*ip1 + d*ip2
+            Y *= size/2*ip1 + d*ip2
+            Z *= size/2*ip1 + d*ip2
+            return [X,Y,Z]
+          })
+          return v
+        })
+      }
+      return shape
+    }
+
+    subDividedIcosahedron  = (size, subs, sphereize = 0) => subbed(subs, size, sphereize, Icosahedron(size))
+    subDividedTetrahedron  = (size, subs, sphereize = 0) => subbed(subs, size, sphereize, Tetrahedron(size))
+    subDividedOctahedron   = (size, subs, sphereize = 0) => subbed(subs, size, sphereize, Octahedron(size))
+    subDividedCube         = (size, subs, sphereize = 0) => subbed(subs, size, sphereize, Cube(size))
+    subDividedDodecahedron = (size, subs, sphereize = 0) => subbed(subs, size, sphereize, Dodecahedron(size))
+
+    stroke = (scol, fcol, lw, dl, oga=1, ocp=true) => {
+      if(scol){
+        x.strokeStyle = scol
+        if(ocp) x.closePath()
+        x.lineWidth = Math.min(100, 50/Z*lw)
+        if(dl){
+          x.globalAlpha = .25 * oga
+          x.stroke()
+          x.lineWidth/=3
+        }
+        x.globalAlpha = 1*oga
+        x.stroke()
+      }
+      if(fcol){
+        x.globalAlpha = 1*oga
+        x.fillStyle = fcol
+        x.fill()
+      }
+    }
+
+    drawSphere = (tx,ty,tz,rad) => {
+      if(1||Math.hypot(tx,ty,tz)<trad2){
+        X1 = X = tx * mls
+        Y1 = Y = ty * mls
+        Z1 = Z = tz * mls
+        R(Rl,Pt,Yw,1)
+        if(Z>0){
+          ls = rad/Z
+          forSort = [...forSort, [Q(), Z, forSort.length, X1, Y1, Z1, ls]]
+        }
+      }
+    }
+
+    sphereSrc = [
+    'https://srmcgann.github.io/temp13/red_ball.png',
+    //'https://srmcgann.github.io/temp13/orange_ball.png',
+    'https://srmcgann.github.io/temp13/yellow_ball.png',
+    //'https://srmcgann.github.io/temp13/green_ball.png',
+    'https://srmcgann.github.io/temp13/teal_ball.png',
+    'https://srmcgann.github.io/temp13/blue_ball.png',
+    //'https://srmcgann.github.io/temp13/purple_ball.png',
+    //'https://srmcgann.github.io/temp13/pink_ball.png',
+    ]
+    spheres = []
+    sphereSrc.map(v => {
+      let a = new Image()
+      a.src = v
+      spheres = [...spheres, a]
+    })
+    
+    loadB = () => {
+      cl  = 10
+      rw  = 10
+      sp  = 2
+      iBr = 1.66
+      rct = 0
+      ofy = 5.66
+      B = Array(cl*rw).fill().map((v, i) => {
+        X = ((i%cl)-cl/2 + .5) * sp * 1.5 + ((i/cl|0)%2?sp*1.5/2:0) - sp/2.66
+        Y = ((i/cl|0)-rw/2 + .5) * sp * (.75**.5/2) - sp * (.75**.5/2) * ofy
+        Z = 0
+        id = Rn()<sFreq ? -(1 + Rn()**2 * sNum | 0) : Rn() * sphereSrc.length | 0
+        vx = vy = vz = 0
+        return [X, Y, Z, vx, vy, vz, id, X, Y, Z]
+      })
+    }
+    
+    freq = 2e3
+    
+    advanceRows = () => {
+      B.map(v=>{
+        //v[1] += sp * (.75**.5/2)
+        v[8] += sp * (.75**.5/2)
+      })
+      for(j=0; j<cl; j++){
+        let i = j + (rct%2 ? 0 : cl)
+        ofy_ = i%cl != 0 || !(rct%2) ? 0 : sp * (.75**.5/2)
+        X = ((i%cl)-cl/2 + .5) * sp * 1.5 + ((i/cl|0)%2?sp*1.5/2:0) - sp/2.66
+        Y = (((i-cl)/cl|0)-rw/2 + .5) * sp * (.75**.5/2) - sp * (.75**.5/2) * ofy + ofy_
+        Z = 0
+        id = Rn()<sFreq ? -(1 + Rn()**2 * sNum | 0) : Rn() * sphereSrc.length | 0
+        vx = vy = vz = 0
+        B = [[X, Y, Z, vx, vy, vz, id, X, Y, Z, false], ...B]
+      }
+      rct++
+    }
+    
+    bg = new Image()
+    bg.src = 'https://srmcgann.github.io/temp14/bobble_board.png?5'
+    
+    
+    keys = Array(128).fill(false)
+    c.onkeydown = e => {
+      keys[e.keyCode] = true
+    }
+    c.onkeyup = e => {
+      keys[e.keyCode] = false
+    }
+    
+    shotTimer = 0
+    shotTimerInterval = .25
+    shotSpeed = .66
+    shoot = () => {
+      if(curShot.fired || shotTimer > t || roundover) return 
+      curShot.X_ = S(p=sTheta + Math.PI) * ls
+      curShot.Y_ = C(p) * ls + 11 -ls /2.5
+      curShot.Z_ = 0
+      curShot.vx2 = -S(p=sTheta) * shotSpeed
+      curShot.vy2 = -C(p) * shotSpeed
+      curShot.vz2 = 0
+      curShot.fired = true
+      shotTimer = t + shotTimerInterval
+    }
+    
+    sTv = -.0066
+    drag   = 1.4
+    drag2   = 10
+    gunLength = 1
+    sThetav = 0
+    sTheta = 0
+    doKeys = () => {
+      keys.map((v, i) => {
+        if(v){
+          switch(i){
+            case 37:
+              sThetav = Math.max(0, sThetav)
+              sThetav -= sTv - sThetav/3
+            break;
+            case 39:
+              sThetav = Math.min(0, sThetav)
+              sThetav += sTv + sThetav/3 
+            break;
+            case 40:
+            break;
+            case 17: case 32: case 38:
+              if(roundover){
+                init(victory)
+                shotTimer = t + shotTimerInterval
+              }else{
+                shoot()
+              }
+              
+            break;
+          }
+        }
+      })
+    }
+    
+    c.focus()
+    
+    loadShot = () => {
+      if(roundover) return
+      curShot = {
+        idx: queue.shift(),
+        X: 0,
+        Y: 11 - ls,
+        Z: 0,
+        X_: 0,
+        Y_: 11 - ls,
+        Z_: 0,
+        vx: 0,
+        vy: 0,
+        vz: 0,
+        vx2: 0,
+        vy2: 0,
+        vz2: 0,
+        fired: false
+      }
+      queue = [...queue, Rn()*sphereSrc.length|0]
+    }
+    
+    sparks = []
+    iSparkv = .05
+    spawnSparks = (X, Y, Z, id, mag=1) => {
+      for(let m = 50; m--;){
+        v = Rn()**.5 * iSparkv * mag
+        vx = S(p=Math.PI*2*Rn()) * S(q=Rn()<.5 ? Math.PI/2*Rn()**.5 : Math.PI - Math.PI/2*Rn()**.5) * v
+        vy = C(q) * v
+        vz = C(p) * S(q) * v
+        sparks = [...sparks, [X, Y, Z, vx, vy, vz, mag, id]]
+      }
+    }
+    
+    init = (victory=false) => {
+      if(typeof deathTimer !== 'undefined' && deathTimer >= t) return
+      score = victory ? score : 0
+      sFreq = .04
+      sNum  = 2
+      deathTimerInterval = .5
+      deathTimer = t + deathTimerInterval
+      ballValue = 100
+      victory = false
+      if(typeof highScore == 'undefined') highScore = 0
+      rct = 0
+      loadB()
+      roundover = false
+      gameinplay = true
+      iQueuec = 16
+      queue = Array(iQueuec).fill().map(v=>Rn()*sphereSrc.length|0)
+      grav = .1
+      ls = 3
+      loadShot()
+    }
+    init()
+
+    checkCompletions = (X, Y, Z, id) => {
+      if(!curShot.fired || id < 0) return
+      if(memo.filter(v=>Math.hypot(v[0]-X, v[1]-Y, v[2]-Z) < .1).length) return
+      memo = [...memo, [X, Y, Z]]
+      B.map((v, i) => {
+        if(id == v[6] || v[6] < 0){
+          tx = v[0]
+          ty = v[1]
+          tz = v[2]
+          if((d = Math.hypot(tx-X, ty-Y, tz-Z))<iBr * 1.1 && d>.9){
+            if(v[6] < 0){
+              if(!memo.filter(q=>q==i).length){
+                memo = [...memo, [tx, ty, tz]]
+                cull = [...cull, i]
+                switch(v[6]){
+                  case -2:
+                    spawnSparks(v[0], v[1], v[2], 4, 4);
+                    B.map((q, j) => {
+                      if(q[1] > -6 && Math.hypot(tx-q[0], ty-q[1], tz-q[2]) < iBr * 4){
+                        cull = [...cull, j]
+                      }
+                    })
+                    break
+                  case -1:
+                    spawnSparks(v[0], v[1], v[2], 0, 2);
+                    B.map((q, j) => {
+                      if(q[1] > -6 && Math.hypot(tx-q[0], ty-q[1], tz-q[2]) < iBr * 2){
+                        cull = [...cull, j]
+                      }
+                    })
+                    break
+                }
+              }
+            }else{
+              cull = [...cull, i]
+            }
+            checkCompletions(tx, ty, tz, id)
+          }
+        }
+      })
+    }
+    
+    dropPieces = idx => {
+      if(memo.filter(v=>v==idx).length) return
+      memo = [...memo, idx]
+      B.map((v, i) => {
+        X1 = v[0]
+        Y1 = v[1]
+        Z1 = v[2]
+        ct = 0
+        if(i != idx){
+          X2 =B[idx][0]
+          Y2 =B[idx][1]
+          Z2 =B[idx][2]
+          if((d=Math.hypot(X2-X1, Y2-Y1, Z2-Z1)) < iBr * 1.5) dropPieces(i)
+        }
+      })
+    }
+    
+    drawRotatedImage = (img,tx,ty,w,h,theta,ofx=0,ofy=0)=>{
+      x.save()
+      x.translate(tx,ty)
+      x.rotate(theta)
+      x.drawImage(img,-w/2+ofx,-h/2+ofy,w,h)
+      x.restore()
+    }
+    
+    placeCurShot = () => {
+      if(roundover) return
+      mind = 1e6
+      rct_ = 0
+      ofy2_ = rct%2 ? 0 : sp * (.75**.5/2)
+      for(i=cl*(rw+1)*3;i--;){
+        X = ((i%cl)-cl/2 + .5) * sp * 1.5 + ((i/cl|0)%2?sp*1.5/2:0) - sp/2.66
+        Y = ((((i-cl)/cl|0)-rw/2 + .5) * sp * (.75**.5/2) - sp * (.75**.5/2) * ofy) + ofy2_
+        Z = 0
+        if((d = Math.hypot(X1-X,Y1-Y,Z1-Z))<mind && !B.filter(v=>{
+          return Math.hypot(v[0]-X,v[1]-Y,v[2]-Z) < .1
+        }).length){
+          mind = d
+          idx = i
+        }
+      }
+      i = idx
+      X = ((i%cl)-cl/2 + .5) * sp * 1.5 + ((i/cl|0)%2?sp*1.5/2:0) - sp/2.66
+      Y = ((((i-cl)/cl|0)-rw/2 + .5) * sp * (.75**.5/2) - sp * (.75**.5/2) * ofy) + ofy2_
+      Z = 0
+      vx = vy = vz = 0
+      id = curShot.idx
+      B = [...B, [X, Y, Z, vx, vy, vz, id, X, Y, Z]]
+      memo = []
+      cull = []
+      checkCompletions(X,Y,Z,id)
+      cull = Array.from(new Set(cull))
+      if(cull.length > 2){
+        score += cull.length * ballValue
+        highScore = Math.max(score, highScore)
+        B = B.filter((v, i) => {
+          ret = !cull.filter(q=>q==i).length
+          if(!ret){
+            spawnSparks(v[0], v[1], v[2], v[6])
+          }
+          return ret
+        })
+        memo = []
+        dropPieces(0)
+        B.map((v, i) => {
+          if(!memo.filter(v=>v==i).length) v[10]=true
+        })
+      }else{
+        X1 = curShot.X_ + curShot.vx2 * 2
+        Y1 = curShot.Y_ + curShot.vy2 * 2
+        Z1 = curShot.Z_ + curShot.vz2 * 2
+        X2 = 0
+        Y2 = 9.1
+        Z2 = 0
+        if((d=Math.hypot(X1-X2,Y1-Y2,Z1-Z2))<3){
+          console.log(1)
+          console.log(X1,Y1,Z1,X2,Y2,Z2)
+          if(d>2) {
+            roundover = true
+            deathTimer = t + deathTimerInterval
+          }else {
+            //B = [...B, [X, Y, Z, vx, vy, vz, id, X, Y, Z]]
+          }
+          return
+        }
+      }
+      loadShot()
+    }
+    
+    death = new Image()
+    death.src = 'https://srmcgann.github.io/temp13/gosper.jpg'
+    vicpic = new Image()
+    vicpic.src = 'https://srmcgann.github.io/temp13/vicpic.jpg'
+  }
+
+  delta = Math.max(0, ((freq-((t*60|0)%freq))/freq)**.1 + (.5+S(t*40)/2)/50)
+  x.globalAlpha = 1
+  x.fillStyle   = `hsla(${0},99%,${50-(delta*50)}%,.8)`
+  x.fillRect(0,0,c.width,c.height)
+  x.lineJoin    = x.lineCap = 'butt'
+  x.textAlign = 'center'
+
+  oX  = 0
+  oY  = 0
+  oZ  = 11.85
+  Rl  = 0
+  Pt  = 0
+  Yw  = 0
+  
+  if(0)for(i=cl*(rw+1)*3;i--;){
+    ofy2_ = rct%2 ? 0 : sp * (.75**.5/2)
+    X = ((i%cl)-cl/2 + .5) * sp * 1.5 + ((i/cl|0)%2?sp*1.5/2:0) - sp/2.66
+    Y = ((((i-cl)/cl|0)-rw/2 + .5) * sp * (.75**.5/2) - sp * (.75**.5/2) * ofy) + ofy2_
+    Z = 0
+    R(Rl,Pt,Yw,1)
+    if(Z>0){
+      l = Q()
+      s = Math.min(1e3, 1e3/Z)
+      x.fillStyle = '#ff000006'
+      x.fillRect(l[0]-s/2,l[1]-s/2,s,s)
+      s/=3
+      x.fillStyle = '#ff880012'
+      x.fillRect(l[0]-s/2,l[1]-s/2,s,s)
+      s/=3
+      x.fillStyle = '#ffffffff'
+      x.fillRect(l[0]-s/2,l[1]-s/2,s,s)
+    }
+  }
+  
+  sTheta += sThetav /= drag
+  
+  sTheta = Math.min(Math.PI/2.125, Math.max(-Math.PI/2.125, sTheta))
+  
+  if(sTheta == Math.PI/2.25 || sTheta == -Math.PI/2.25){
+    sThetav = 0
+  }
+  
+  doKeys()
+  
+  if(!roundover && !((t*60|0)%freq)) advanceRows()
+  
+  homing  = 20
+  homing2 = 2
+  B.map((v, i) => {
+    if(v[10]) {
+      v[4] += grav
+      v[8] += v[4]
+    }
+    v[3] /= drag
+    v[4] /= drag
+    v[5] /= drag
+    vx = v[3] += (v[7] - v[0]) / homing
+    vy = v[4] += (v[8] - v[1]) / homing
+    vz = v[5] += (v[9] - v[2]) / homing
+    tx = v[0] += vx
+    ty = v[1] += vy
+    tz = v[2] += vz
+    X = tx
+    Y = ty
+    Z = tz
+    R(Rl,Pt,Yw,1)
+    if(Z>0){
+      l = Q()
+      s = Math.min(1e4, 700/Z*iBr)
+      let img
+      switch(v[6]){
+        case -2:
+          img = starImgs[0].img
+          img2 = starImgs[4].img
+          s*=3
+          s2 = (1.5+C(t*40)/4) /2
+          ofx1 = 0
+          ofy1 = 0
+          ofx2 = s*.0175 * s2
+          ofy2 = s*.0175 * s2
+        break
+        case -1:
+          img = burst
+          img2 = starImgs[0].img
+          s*=2
+          s2 = (1.5+C(t*40)/4)
+          ofx1 = 0
+          ofy1 = 0
+          ofx2 = 0
+          ofy2 = 0
+        break
+        default:
+          img = spheres[v[6]]
+          ofx1 = 0
+          ofy1 = 0
+          ofx2 = 0
+          ofy2 = 0
+        break
+      }
+      x.drawImage(img, l[0]-s/2 + ofx1, l[1]-s/2 + ofy1, s, s)
+      if(v[6] < 0){
+        s *= s2
+        drawRotatedImage(img2, l[0], l[1], s, s, t*2, ofx2, ofy2)
+      }
+      //x.font = (fs = 50) + 'px Courier'
+      //x.fillStyle = x.strokeStyle = '#fff'
+      //x.fillText((i%cl),l[0], l[1] + fs/3)
+    }
+  })
+  if(0) B.map(v => {
+    tx = v[0]
+    ty = v[1]
+    tz = v[2]
+    x.beginPath()
+    for(j=6;j--;){
+      X = tx + S(p=Math.PI*2/6 * j + Math.PI/6) * 1
+      Y = ty + C(p) * 1
+      Z = tz
+      R(Rl,Pt,Yw,1)
+      if(Z>0) x.lineTo(...Q())
+    }
+    stroke('#f00','',.5,false)
+  })
+  
+  sd = 16
+  x.beginPath()
+  for(i=sd+1; i--;) {
+    X = S(p=Math.PI*1/sd*i+Math.PI/2) * ls
+    Y = C(p) * ls + 9.5
+    Z = 0
+    R(Rl,Pt,Yw,1)
+    if(Z>0){
+      x.lineTo(...Q())
+    }
+  }
+  col1 = '#f004'
+  col2 = '#40f2'
+  stroke(col1, col2, 10, true)
+  
+  x.beginPath()
+  X = S(p=sTheta + Math.PI) * ls
+  Y = C(p) * ls + 9.5
+  Z = 0
+  R(Rl,Pt,Yw,1)
+  if(Z>0) x.lineTo(...Q())
+  X = S(p=sTheta + Math.PI) * (ls + gunLength)
+  Y = C(p) * (ls + gunLength) + 9.5
+  Z = 0
+  R(Rl,Pt,Yw,1)
+  if(Z>0) x.lineTo(...Q())
+  stroke(col1, '', 10, true)
+  
+  // scaffolding
+  ofx = 15.125
+  //x.beginPath()
+  X1a = X = -ofx
+  Y1a = Y = -10
+  //Z = 0
+  //R(Rl,Pt,Yw,1)
+  //if(Z>0) x.lineTo(...Q())
+  X2a = X = -ofx
+  Y2a = Y = 10
+  //Z = 0
+  //R(Rl,Pt,Yw,1)
+  //if(Z>0) x.lineTo(...Q())
+  //stroke('#0f8','',1, false)
+
+  //x.beginPath()
+  X1b = X = ofx
+  Y1b = Y = -10
+  //Z = 0
+  //R(Rl,Pt,Yw,1)
+  //if(Z>0) x.lineTo(...Q())
+  X2b = X = ofx
+  Y2b = Y = 10
+  //Z = 0
+  //R(Rl,Pt,Yw,1)
+  //if(Z>0) x.lineTo(...Q())
+  //stroke('#0f8','',1, false)
+  // end scaffolding
+  
+  iTv = .05
+  tx = S(p=sTheta + Math.PI) * ls
+  ty = C(p) * ls + 9.5
+  vx = S(p) * iTv
+  vy = C(p) * iTv
+  cont = true
+  for(i=1; cont && i<1e3; i++) {
+    X3 = tx += vx
+    Y3 = ty += vy
+    X4 = X3 + vx
+    Y4 = Y3 + vy
+    
+    cont = true
+    B.map(v=>{
+      X = v[0]
+      Y = v[1]
+      Z = v[2]
+      if((d=Math.hypot(X-X4, Y-Y4)) < iBr/2){
+        cont = false
+      }
+    })
+    if(cont){
+      a = [
+        vx/iTv,
+        vy/iTv,
+        0
+      ]
+      if((l = I(e = X1a,Y1a, f = X2a,Y2a,X3,Y3,X4,Y4))){
+        n = [1, 0, 0]
+        b = reflect(a, n)
+        d = Math.hypot(...b)
+        vx = b[0] / d * iTv
+        vy = b[1] / d * iTv
+      }
+      if((l = I(X1b,Y1b,X2b,Y2b,X3,Y3,X4,Y4))){
+        p = Math.atan2(X2b-X1b, Y2b-Y1b) + Math.PI/2
+        n = [-1, 0, 0]
+        d = Math.hypot(X2b - X1b, Y2b - Y1b)
+        b = reflect(a, n)
+        d = Math.hypot(...b)
+        vx = b[0] / d * iTv
+        vy = b[1] / d * iTv
+        tx = l[0]
+        ty = l[1]
+      }
+      
+      /*X3 = tx
+      Y3 = ty
+      X4 = X3 + vx
+      Y4 = Y3 + vy*/
+      
+      if(!(i%10)){
+        x.beginPath()
+        X = X3
+        Y = Y3
+        Z = 0
+        R(Rl,Pt,Yw,1)
+        if(Z>0) x.lineTo(...Q())
+        X = X4 - vx*5
+        Y = Y4 - vy*5
+        Z = 0
+        R(Rl,Pt,Yw,1)
+        if(Z>0) x.lineTo(...Q())
+        stroke('#fff2', '', 5, true)
+      }
+    }
+  }
+  
+  X = X4
+  Y = Y4
+  Z = 0
+  R(Rl,Pt,Yw,1)
+  if(Z>0){
+    l = Q()
+    s = Math.min(1e4, 1e3/Z)
+    x.drawImage(starImgs[4].img,l[0]-s/2/1.06,l[1]-s/2/1.06,s,s)
+    s *= 1.75
+    x.drawImage(starImgs[0].img,l[0]-s/2,l[1]-s/2,s,s)
+  }
+  
+  queue.map((v, i) => {
+    prevLs = .5 / (.66+ i/40)
+    X = -i * prevLs * 1.5 - 4
+    Y = 9.1 - prevLs/2
+    Z = 0
+    R(Rl,Pt,Yw,1)
+    if(Z>0){
+      l = Q()
+      s = Math.min(1e3, 700 / Z * prevLs)
+      x.drawImage(spheres[v], l[0]-s/2, l[1]-s/2, s, s)
+    }
+  })
+
+  curShot.vx /= drag2
+  curShot.vy /= drag2
+  curShot.vz /= drag2
+  curShot.vx += (curShot.X_ - curShot.X) / homing2
+  curShot.vy += (curShot.Y_ - curShot.Y) / homing2
+  curShot.vz += (curShot.Z_ - curShot.Z) / homing2
+  curShot.X_ += curShot.vx2
+  curShot.Y_ += curShot.vy2
+  curShot.Z_ += curShot.vz2
+  X = curShot.X += curShot.vx
+  Y = curShot.Y += curShot.vy
+  Z = curShot.Z += curShot.vz
+  R(Rl,Pt,Yw,1)
+  if(Z>0){
+    l = Q()
+    s = Math.min(1e4, 700/Z*iBr)
+    x.drawImage(spheres[curShot.idx],l[0]-s/2,l[1]-s/2,s,s)
+  }
+  if(curShot.fired){
+    shotPlaced = false
+    X1 = curShot.X_ + curShot.vx2/2
+    Y1 = curShot.Y_ + curShot.vy2/2
+    Z1 = curShot.Z_ + curShot.vz2/2
+    B.map(v=>{
+      X2 = v[0]
+      Y2 = v[1]
+      Z2 = v[2]
+      if(!shotPlaced && (d = Math.hypot(X2-X1,Y2-Y1,Z2-Z1))<iBr*.9){
+        curShot.vx =0
+        curShot.vy =0
+        curShot.vz =0
+        curShot.vx2 =0
+        curShot.vy2 =0
+        curShot.vz2 =0
+        placeCurShot()
+        shotPlaced = true
+      }
+    })
+    if(curShot.fired){
+      if(X1-iBr/2<X1a || X1+iBr/2>X1b){
+        curShot.vx2 *= -1
+      }
+    }
+  }
+  
+  if(roundover){
+    x.globalAlpha = .66
+    x.drawImage(victory ? vicpic : death, 0, 0, c.width, c.height)
+    x.globalAlpha = 1
+    x.fillStyle = victory ? '#102b' : '#200b'
+    x.fillRect(0,0,c.width,c.height)
+    x.font = (fs = 150) + 'px Courier'
+    x.lineWidth = 20
+    if(victory){
+      x.fillStyle = '#0f8'
+      x.strokeStyle = '#1048'
+      x.strokeText('👍', c.width/2, c.height/2 - fs/2 - fs + fs/30)
+      x.fillText('👍', c.width/2, c.height/2 - fs/2 - fs + fs/30)
+      x.strokeText('victory!', c.width/2, c.height/2 - fs/2 + fs/30)
+      x.fillText('victory!', c.width/2, c.height/2 - fs/2 + fs/30)
+    }else{
+      x.fillStyle = '#f00'
+      x.strokeStyle = '#0008'
+      x.strokeText('☠️', c.width/2, c.height/2 - fs/2 - fs + fs/30)
+      x.fillText('☠️', c.width/2, c.height/2 - fs/2 - fs + fs/30)
+      x.strokeText('game over!', c.width/2, c.height/2 - fs/2 + fs/30)
+      x.fillText('game over!', c.width/2, c.height/2 - fs/2 + fs/30)
+    }
+    x.strokeText('hit space', c.width/2, c.height/2 + fs + fs/30)
+    x.fillText('hit space', c.width/2, c.height/2 + fs + fs/30)
+    x.strokeText('to continue', c.width/2, c.height/2 + fs * 2 + fs/30)
+    x.fillText('to continue', c.width/2, c.height/2 + fs * 2 + fs/30)
+  }else{
+    B.map((v, i) => {
+      if(v[0]<-3.5 || v[0]>3.5){
+        if(!v[10] && v[1] > ls + 5.5){
+          console.log(2)
+          roundover = true
+          deathTimer = t + deathTimerInterval
+        }
+      }else{
+        if(!v[10] && v[1] > ls + 3.5){
+          console.log(3)
+          roundover = true
+          deathTimer = t + deathTimerInterval
+        }
+      }
+    })
+  }
+  
+  sparks = sparks.filter(v=>v[6] > 0)
+  sparks.map(v => {
+    X = v[0] += v[3]
+    Y = v[1] += v[4]
+    Z = v[2] += v[5]
+    R(Rl,Pt,Yw,1)
+    if(Z>0){
+      l = Q()
+      s = Math.min(1e4, 1e3/Z*v[6])
+      x.fillStyle = `hsla(${360/8 * v[7]-40}, 99%, 50%, .04)`
+      x.fillRect(l[0]-s/2,l[1]-s/2,s,s)
+      s/=3
+      x.fillStyle = `hsla(${360/8*v[7]}, 99%, 50%, .1)`
+      x.fillRect(l[0]-s/2,l[1]-s/2,s,s)
+      s/=2.5
+      x.fillStyle = '#ffffffff'
+      x.fillRect(l[0]-s/2,l[1]-s/2,s,s)
+    }
+    v[6]-= .0125
+  })
+  
+  B = B.filter(v=> Math.hypot(v[0], v[1], v[2]) < 20)
+  if(Math.hypot(curShot.X_,curShot.Y_,curShot.Z_) > 20){
+    loadShot()
+  }
+  
+  if(!B.length) {
+    roundover = true
+    victory = true
+  }
+
+  x.textAlign = 'left'
+  x.font = (fs = 40) + 'px Courier'
+  x.fillStyle = '#fff'
+  x.strokeStyle = '#000'
+  x.lineWidth = 10
+  x.strokeText(`score      ${score}` ,c.width*.6, c.height - fs/3-fs)
+  x.fillText(`score      ${score}` ,c.width*.6, c.height - fs/3-fs)
+  x.strokeText(`high-score ${highScore}` ,c.width*.6, c.height - fs/3)
+  x.fillText(`high-score ${highScore}` ,c.width*.6, c.height - fs/3)
+  x.textAlign = 'center'
+
+  x.globalAlpha = .5
+  x.drawImage(bg, 0, 0, c.width, c.height)
+  x.globalAlpha = 1
+
+  t+=1/60
+  requestAnimationFrame(Draw)
+}
+Draw()
\ No newline at end of file
diff --git a/Bobble bubble [wip]/style.css b/Bobble bubble [wip]/style.css
new file mode 100644
index 000000000..b48ad7484
--- /dev/null
+++ b/Bobble bubble [wip]/style.css	
@@ -0,0 +1,22 @@
+/* author: https://codepen.io/cantelope/pen/yLdyNMp
+Scott R McGann
+ */
+
+body, html{
+    margin: 0;
+    height: 100vh;
+    background: linear-gradient(-45deg, #204, #000);
+    overflow: hidden;
+  }
+  #c:focus{
+    outline: none;
+  }
+  #c{
+    border: 3px solid #0Ff3;
+    position: absolute;
+    background: #04f1;
+    left: 50%;
+    top: 50%;
+    border-radius: 10px;
+    transform: translate(-50%, -50%);
+  }
\ No newline at end of file
diff --git a/Checkbox Carnival game/index.html b/Checkbox Carnival game/index.html
new file mode 100644
index 000000000..72fe3634d
--- /dev/null
+++ b/Checkbox Carnival game/index.html	
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
+
+    <h1>CSS Only Carnival: Target Practice</h1>
+    <h2>This game uses no JS at all (isn't CSS awesome?). You have 8 seconds to hit as many targets as you can!</h2>
+
+    <div class="game-over">
+        <h1>Game Over!</h1>
+        <a class="play-again" target="_parent" href="https://codepen.io/una/full/NxZaNr">Play Again</a>
+    </div>
+
+    <ul class="game-area">
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+        <li><input type="checkbox">
+            <div class="shield"></div>
+        </li>
+    </ul>
+
+    <h3 class="total-count">Targets Hit: &nbsp;</h3>
+
+</body>
+
+</html>
diff --git a/Checkbox Carnival game/style.css b/Checkbox Carnival game/style.css
new file mode 100644
index 000000000..2bef76bbe
--- /dev/null
+++ b/Checkbox Carnival game/style.css	
@@ -0,0 +1,194 @@
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 1.4em;
+}
+
+body {
+  counter-reset: game;
+  text-align: center;
+  background: #e9b58b;
+  font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
+  color: #333;
+}
+
+input:checked {
+  counter-increment: game;
+}
+
+.total-count::after {
+  content: counter(game);
+}
+
+h2 {
+  font-size: 1em;
+  margin: -.5em auto 3em;
+  font-weight: 400;
+}
+
+.total-count {
+  font-size: 1.75em;
+  position: absolute;
+  top: 1.75em;
+  width: 100%;
+  left: 0;
+  text-align: center;
+  z-index: 300;
+}
+
+.game-area {
+  display: flex;
+  flex-flow: wrap;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 600px;
+  min-height: 550px;
+  max-height: 700px;
+  margin: 0 auto;
+  padding-left: 0; //list reset
+}
+
+li {
+  width: calc(33% - .5em);
+  margin-bottom: 1em;
+  height: 10em;
+  list-style: none;
+  position: relative;
+  outline: 4px solid white;
+  background: #64ddf3;
+
+  @for $i from 1 through 9 {
+    $speed: random()*5 + 's';
+    $color-hue: random()*360 + 'deg';
+    $brightness: random() + 1;
+
+    &:nth-child(#{$i}) {
+      input {
+        filter: hue-rotate(#{$color-hue}) brightness(#{$brightness});
+        animation-duration: #{$speed};
+      }
+    }
+  }
+}
+
+input[type="checkbox"] {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  cursor: crosshair;
+  background: radial-gradient(red 10%, white 10%, white 30%, red 30%, red 50%, white 50%, white 80%, red 80%, red 100%);
+  border-radius: 50%;
+  display: block;
+  left: 0;
+  right: 0;
+  text-align: center;
+  margin: 0 auto;
+  appearance: none;
+  border: 6px solid red;
+  animation: hide-target infinite alternate ease-in-out;
+  z-index: 1;
+
+  &:before {
+    content: '';
+    display: block;
+    background-color: black;
+    height: 50%;
+    width: 6px;
+    position: absolute;
+    left: 0; right: 0;
+    top: calc(100% + 6px);
+    margin: 0 auto;
+    z-index: -1;
+  }
+
+  &:focus {
+    outline: none;
+    appearance: none;
+  }
+
+
+  &:checked {
+    pointer-events: none;
+    filter: grayscale(1) opacity(.75);
+    animation: none;
+
+    &:after {
+      content: '+1!';
+      padding: .5em;
+      margin: 1em 0 0 1.5em;
+      font-size: 2.5em;
+      font-weight: 600;
+    }
+  }
+}
+
+.shield {
+  background: #724c20;
+  width: 100%;
+  height: 60%;
+  margin: 0 auto;
+  bottom: 0;
+  left: 0; right: 0;
+  position: absolute;
+  pointer-events: all;
+  z-index: 100;
+}
+
+@keyframes hide-target {
+  0% {
+    top: 0
+  }
+  25% {
+    top: 50%
+  }
+  100% {
+    top: 0
+  }
+}
+
+.game-over {
+  height: 100%;
+  width: 100%;
+  display: block;
+  background: white;
+  pointer-events: all;
+  position: absolute;
+  top: -100%;
+  left: 0;
+  z-index: 200;
+  animation: appear .25s forwards;
+  animation-delay: 8s;
+  background: repeating-linear-gradient(-45deg, #c9ff00 0, #c9ff00 5em, #20c0ff 5em, #20c0ff 10em);
+
+  h1 {
+    padding: 1em 0 3.5em;
+    background: white;
+  }
+}
+
+@keyframes appear {
+  from {
+    top: -100vh;
+    opacity: 0;
+  }
+  to {
+    top: 0;
+    opacity: 1;
+  }
+}
+
+.play-again {
+  background: white;
+  color: #20c0ff;
+  padding: .5em 1em;
+  font-size: 2.5em;
+  font-weight: 700;
+}
+
+small a {
+  margin-bottom: 2em;
+  display: block;
+  color: #222;
+}
diff --git a/Code Snippet Gen/index.html b/Code Snippet Gen/index.html
index 57ab80223..c78b018d4 100644
--- a/Code Snippet Gen/index.html	
+++ b/Code Snippet Gen/index.html	
@@ -7,6 +7,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
     <style>
         * {
             margin: 0;
diff --git a/Color Blast game/index.html b/Color Blast game/index.html
new file mode 100644
index 000000000..ed7b99544
--- /dev/null
+++ b/Color Blast game/index.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="game-wrap">
+            <canvas width="960px" height="540" id="game"></canvas>
+            <article class="content">
+                <h1 class="title"><span>C</span><span>o</span><span>l</span><span>o</span><span>r</span><span>
+                    </span><span>B</span><span>l</span><span>a</span><span>s</span><span>t</span></h1>
+
+                <p>Use the <code>Left</code> and <code>Right</code> Arrows or <code>A</code> and <code>D</code> keys to
+                    move, <code>Spacebar</code> to shoot.</p>
+
+            </article>
+        </div>
+    </div>
+
+
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Color Blast game/script.js b/Color Blast game/script.js
new file mode 100644
index 000000000..903e36c17
--- /dev/null
+++ b/Color Blast game/script.js	
@@ -0,0 +1,409 @@
+(function (window) {
+    var Game = {
+        init: function () {
+            this.c = document.getElementById("game");
+            this.c.width = this.c.width;
+            this.c.height = this.c.height;
+            this.ctx = this.c.getContext("2d");
+            this.color = "rgba(20,20,20,.7)";
+            this.bullets = [];
+            this.enemyBullets = [];
+            this.enemies = [];
+            this.particles = [];
+            this.bulletIndex = 0;
+            this.enemyBulletIndex = 0;
+            this.enemyIndex = 0;
+            this.particleIndex = 0;
+            this.maxParticles = 10;
+            this.maxEnemies = 6;
+            this.enemiesAlive = 0;
+            this.currentFrame = 0;
+            this.maxLives = 3;
+            this.life = 0;
+            this.binding();
+            this.player = new Player();
+            this.score = 0;
+            this.paused = false;
+            this.shooting = false;
+            this.oneShot = false;
+            this.isGameOver = false;
+            this.requestAnimationFrame =
+                window.requestAnimationFrame ||
+                window.webkitRequestAnimationFrame ||
+                window.mozRequestAnimationFrame;
+            for (var i = 0; i < this.maxEnemies; i++) {
+                new Enemy();
+                this.enemiesAlive++;
+            }
+            this.invincibleMode(2000);
+
+            this.loop();
+        },
+
+        binding: function () {
+            window.addEventListener("keydown", this.buttonDown);
+            window.addEventListener("keyup", this.buttonUp);
+            window.addEventListener("keypress", this.keyPressed);
+            this.c.addEventListener("click", this.clicked);
+        },
+
+        clicked: function () {
+            if (!Game.paused) {
+                Game.pause();
+            } else {
+                if (Game.isGameOver) {
+                    Game.init();
+                } else {
+                    Game.unPause();
+                    Game.loop();
+                    Game.invincibleMode(1000);
+                }
+            }
+        },
+
+        keyPressed: function (e) {
+            if (e.keyCode === 32) {
+                if (!Game.player.invincible && !Game.oneShot) {
+                    Game.player.shoot();
+                    Game.oneShot = true;
+                }
+                if (Game.isGameOver) {
+                    Game.init();
+                }
+                e.preventDefault();
+            }
+        },
+
+        buttonUp: function (e) {
+            if (e.keyCode === 32) {
+                Game.shooting = false;
+                Game.oneShot = false;
+                e.preventDefault();
+            }
+            if (e.keyCode === 37 || e.keyCode === 65) {
+                Game.player.movingLeft = false;
+            }
+            if (e.keyCode === 39 || e.keyCode === 68) {
+                Game.player.movingRight = false;
+            }
+        },
+
+        buttonDown: function (e) {
+            if (e.keyCode === 32) {
+                Game.shooting = true;
+            }
+            if (e.keyCode === 37 || e.keyCode === 65) {
+                Game.player.movingLeft = true;
+            }
+            if (e.keyCode === 39 || e.keyCode === 68) {
+                Game.player.movingRight = true;
+            }
+        },
+
+        random: function (min, max) {
+            return Math.floor(Math.random() * (max - min) + min);
+        },
+
+        invincibleMode: function (s) {
+            this.player.invincible = true;
+            setTimeout(function () {
+                Game.player.invincible = false;
+            }, s);
+        },
+
+        collision: function (a, b) {
+            return !(
+                a.y + a.height < b.y ||
+                a.y > b.y + b.height ||
+                a.x + a.width < b.x ||
+                a.x > b.x + b.width
+            );
+        },
+
+        clear: function () {
+            this.ctx.fillStyle = Game.color;
+            this.ctx.fillRect(0, 0, this.c.width, this.c.height);
+        },
+
+        pause: function () {
+            this.paused = true;
+        },
+
+        unPause: function () {
+            this.paused = false;
+        },
+
+        gameOver: function () {
+            this.isGameOver = true;
+            this.clear();
+            var message = "Game Over";
+            var message2 = "Score: " + Game.score;
+            var message3 = "Click or press Spacebar to Play Again";
+            this.pause();
+            this.ctx.fillStyle = "white";
+            this.ctx.font = "bold 30px Lato, sans-serif";
+            this.ctx.fillText(
+                message,
+                this.c.width / 2 - this.ctx.measureText(message).width / 2,
+                this.c.height / 2 - 50
+            );
+            this.ctx.fillText(
+                message2,
+                this.c.width / 2 - this.ctx.measureText(message2).width / 2,
+                this.c.height / 2 - 5
+            );
+            this.ctx.font = "bold 16px Lato, sans-serif";
+            this.ctx.fillText(
+                message3,
+                this.c.width / 2 - this.ctx.measureText(message3).width / 2,
+                this.c.height / 2 + 30
+            );
+        },
+
+        updateScore: function () {
+            this.ctx.fillStyle = "white";
+            this.ctx.font = "16px Lato, sans-serif";
+            this.ctx.fillText("Score: " + this.score, 8, 20);
+            this.ctx.fillText("Lives: " + (this.maxLives - this.life), 8, 40);
+        },
+
+        loop: function () {
+            if (!Game.paused) {
+                Game.clear();
+                for (var i in Game.enemies) {
+                    var currentEnemy = Game.enemies[i];
+                    currentEnemy.draw();
+                    currentEnemy.update();
+                    if (Game.currentFrame % currentEnemy.shootingSpeed === 0) {
+                        currentEnemy.shoot();
+                    }
+                }
+                for (var x in Game.enemyBullets) {
+                    Game.enemyBullets[x].draw();
+                    Game.enemyBullets[x].update();
+                }
+                for (var z in Game.bullets) {
+                    Game.bullets[z].draw();
+                    Game.bullets[z].update();
+                }
+                if (Game.player.invincible) {
+                    if (Game.currentFrame % 20 === 0) {
+                        Game.player.draw();
+                    }
+                } else {
+                    Game.player.draw();
+                }
+
+                for (var i in Game.particles) {
+                    Game.particles[i].draw();
+                }
+                Game.player.update();
+                Game.updateScore();
+                Game.currentFrame = Game.requestAnimationFrame.call(
+                    window,
+                    Game.loop
+                );
+            }
+        },
+    };
+
+    var Player = function () {
+        this.width = 60;
+        this.height = 20;
+        this.x = Game.c.width / 2 - this.width / 2;
+        this.y = Game.c.height - this.height;
+        this.movingLeft = false;
+        this.movingRight = false;
+        this.speed = 8;
+        this.invincible = false;
+        this.color = "white";
+    };
+
+    Player.prototype.die = function () {
+        if (Game.life < Game.maxLives) {
+            Game.invincibleMode(2000);
+            Game.life++;
+        } else {
+            Game.pause();
+            Game.gameOver();
+        }
+    };
+
+    Player.prototype.draw = function () {
+        Game.ctx.fillStyle = this.color;
+        Game.ctx.fillRect(this.x, this.y, this.width, this.height);
+    };
+
+    Player.prototype.update = function () {
+        if (this.movingLeft && this.x > 0) {
+            this.x -= this.speed;
+        }
+        if (this.movingRight && this.x + this.width < Game.c.width) {
+            this.x += this.speed;
+        }
+        if (Game.shooting && Game.currentFrame % 10 === 0) {
+            this.shoot();
+        }
+        for (var i in Game.enemyBullets) {
+            var currentBullet = Game.enemyBullets[i];
+            if (
+                Game.collision(currentBullet, this) &&
+                !Game.player.invincible
+            ) {
+                this.die();
+                delete Game.enemyBullets[i];
+            }
+        }
+    };
+
+    Player.prototype.shoot = function () {
+        Game.bullets[Game.bulletIndex] = new Bullet(this.x + this.width / 2);
+        Game.bulletIndex++;
+    };
+
+    var Bullet = function (x) {
+        this.width = 8;
+        this.height = 20;
+        this.x = x;
+        this.y = Game.c.height - 10;
+        this.vy = 8;
+        this.index = Game.bulletIndex;
+        this.active = true;
+        this.color = "white";
+    };
+
+    Bullet.prototype.draw = function () {
+        Game.ctx.fillStyle = this.color;
+        Game.ctx.fillRect(this.x, this.y, this.width, this.height);
+    };
+
+    Bullet.prototype.update = function () {
+        this.y -= this.vy;
+        if (this.y < 0) {
+            delete Game.bullets[this.index];
+        }
+    };
+
+    var Enemy = function () {
+        this.width = 60;
+        this.height = 20;
+        this.x = Game.random(0, Game.c.width - this.width);
+        this.y = Game.random(10, 40);
+        this.vy = Game.random(1, 3) * 0.1;
+        this.index = Game.enemyIndex;
+        Game.enemies[Game.enemyIndex] = this;
+        Game.enemyIndex++;
+        this.speed = Game.random(2, 3);
+        this.shootingSpeed = Game.random(30, 80);
+        this.movingLeft = Math.random() < 0.5 ? true : false;
+        this.color = "hsl(" + Game.random(0, 360) + ", 60%, 50%)";
+    };
+
+    Enemy.prototype.draw = function () {
+        Game.ctx.fillStyle = this.color;
+        Game.ctx.fillRect(this.x, this.y, this.width, this.height);
+    };
+
+    Enemy.prototype.update = function () {
+        if (this.movingLeft) {
+            if (this.x > 0) {
+                this.x -= this.speed;
+                this.y += this.vy;
+            } else {
+                this.movingLeft = false;
+            }
+        } else {
+            if (this.x + this.width < Game.c.width) {
+                this.x += this.speed;
+                this.y += this.vy;
+            } else {
+                this.movingLeft = true;
+            }
+        }
+
+        for (var i in Game.bullets) {
+            var currentBullet = Game.bullets[i];
+            if (Game.collision(currentBullet, this)) {
+                this.die();
+                delete Game.bullets[i];
+            }
+        }
+    };
+
+    Enemy.prototype.die = function () {
+        this.explode();
+        delete Game.enemies[this.index];
+        Game.score += 15;
+        Game.enemiesAlive = Game.enemiesAlive > 1 ? Game.enemiesAlive - 1 : 0;
+        if (Game.enemiesAlive < Game.maxEnemies) {
+            Game.enemiesAlive++;
+            setTimeout(function () {
+                new Enemy();
+            }, 2000);
+        }
+    };
+
+    Enemy.prototype.explode = function () {
+        for (var i = 0; i < Game.maxParticles; i++) {
+            new Particle(this.x + this.width / 2, this.y, this.color);
+        }
+    };
+
+    Enemy.prototype.shoot = function () {
+        new EnemyBullet(this.x + this.width / 2, this.y, this.color);
+    };
+
+    var EnemyBullet = function (x, y, color) {
+        this.width = 8;
+        this.height = 20;
+        this.x = x;
+        this.y = y;
+        this.vy = 6;
+        this.color = color;
+        this.index = Game.enemyBulletIndex;
+        Game.enemyBullets[Game.enemyBulletIndex] = this;
+        Game.enemyBulletIndex++;
+    };
+
+    EnemyBullet.prototype.draw = function () {
+        Game.ctx.fillStyle = this.color;
+        Game.ctx.fillRect(this.x, this.y, this.width, this.height);
+    };
+
+    EnemyBullet.prototype.update = function () {
+        this.y += this.vy;
+        if (this.y > Game.c.height) {
+            delete Game.enemyBullets[this.index];
+        }
+    };
+
+    var Particle = function (x, y, color) {
+        this.x = x;
+        this.y = y;
+        this.vx = Game.random(-5, 5);
+        this.vy = Game.random(-5, 5);
+        this.color = color || "orange";
+        Game.particles[Game.particleIndex] = this;
+        this.id = Game.particleIndex;
+        Game.particleIndex++;
+        this.life = 0;
+        this.gravity = 0.05;
+        this.size = 40;
+        this.maxlife = 100;
+    };
+
+    Particle.prototype.draw = function () {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.vy += this.gravity;
+        this.size *= 0.89;
+        Game.ctx.fillStyle = this.color;
+        Game.ctx.fillRect(this.x, this.y, this.size, this.size);
+        this.life++;
+        if (this.life >= this.maxlife) {
+            delete Game.particles[this.id];
+        }
+    };
+
+    Game.init();
+})(window);
diff --git a/Color Blast game/style.css b/Color Blast game/style.css
new file mode 100644
index 000000000..7d389243b
--- /dev/null
+++ b/Color Blast game/style.css	
@@ -0,0 +1,72 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html, body {
+  height: 100%;
+}
+body {
+  min-height: 100%;
+  max-width: 100%;
+  background: #111;
+  font-family: Lato, sans-serif;
+}
+.container {
+  min-height: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+.game-wrap {
+  position: relative;
+  padding: 20px 0 0;
+}
+canvas {
+  position: relative;
+  max-width: 100%;
+  border: 2px solid black;
+  max-height: 100%;
+  display: block;
+  margin: 0 auto;
+}
+.content {
+  color: #ccc;
+  text-align: center;
+  padding: 0 20px;
+}
+p {
+  margin: 10px 0;
+  font-size: 18px;
+  line-height: 1.5em;
+}
+code {
+  background: #222;
+  background: linear-gradient(#222, #000);
+  line-height: 1.3em;
+  display: inline-block;
+  border-radius: 3px;
+  font-family: monospace;
+  padding: 1px 5px;
+  margin: 0 2px;
+}
+a {
+  color: skyblue;
+  text-decoration: none;
+  transition: .2s;
+  &:hover {
+    color: lighten(skyblue, 10%);
+    text-decoration: underline;
+  }
+}
+.title {
+  font-size: 40px;
+  font-weight: 900;
+  margin: 20px 0;
+  @for $i from 1 through 11 {
+    span:nth-child(#{$i}){
+      color: hsl($i * 30, 50%, 50%);
+    }
+  }
+}
diff --git a/Coloron 3D game/index.html b/Coloron 3D game/index.html
new file mode 100644
index 000000000..eb11c1476
--- /dev/null
+++ b/Coloron 3D game/index.html	
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.scss">
+    <title>Document</title>
+</head>
+
+<body>
+
+    <div class="splash"></div>
+    <div class="container">
+
+        <div class="start-game game-full-flex" id="start-game">
+
+            <div class="start-game-top"><a class="play-full-page" href="https://codepen.io/gregh/full/yVLOyO/"
+                    target="_blank">Full Page Mode</a></div>
+
+            <div class="logo-holder">
+                <p class="logo">
+                    <span>C</span>
+                    <span>o</span>
+                    <span>l</span>
+                    <span>o</span>
+                    <span>r</span>
+                    <span>o</span>
+                    <span>n</span>
+                </p>
+                <a class="play-button" href="#" onclick="game.start()">Play</a>
+                <h4 class="hint">hint: <span>red</span> color always comes first</h4>
+            </div>
+
+            <div class="how-to-play">
+                <div class="section section-1">
+                    <h4>Bouncing ball<br>changes color</h4>
+                    <div class="content">
+                        <div class="ball-demo" id="ball-demo"></div>
+                    </div>
+                </div>
+                <div class="section section-2">
+                    <h4>Tap on the bar to switch the colors<br>(Red, Yellow, Purple)</h4>
+                    <div class="content">
+                        <div class="bar bar-1" data-index="0"></div>
+                        <div class="bar bar-2"></div>
+                        <div class="bar bar-3"></div>
+                    </div>
+                </div>
+                <div class="section section-3">
+                    <h4>Always match the<br>ball and bar colors</h4>
+                    <div class="content">
+                        <div class="ball-demo" id="ball-demo"></div>
+                        <div class="bar bar-1"></div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="stop-game game-full-flex">
+
+            <div class="score-container">
+
+                <h1>Coloron</h1>
+
+                <div class="final-score"></div>
+                <div class="result"></div>
+
+                <h4>Tweet to challenge friends</h4>
+
+                <p>
+                    <a class="tweet" href="#" onclick="game.generateTweet()">
+                        <i class="fa fa-twitter" aria-hidden="true"></i> Tweet
+                    </a>
+                </p>
+
+                <div>
+                    <a class="play-again" href="#" onclick="game.start()">Play Again</a>
+                    <a class="main-menu" href="#" onclick="game.intro()">Menu</a>
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="small-glows"></div>
+
+        <div class="glow">
+            <div class="sun"></div>
+        </div>
+
+        <div class="waves">
+            <div class="top_wave"></div>
+            <div class="wave1"></div>
+            <div class="wave2"></div>
+            <div class="wave3"></div>
+            <div class="wave4"></div>
+        </div>
+
+        <div class="mounts">
+            <div class="mount1"></div>
+            <div class="mount2"></div>
+        </div>
+
+        <div class="clouds"></div>
+
+        <div class="scene">
+            <div class="learn-to-play">Click on the bars to change the color!</div>
+            <div class="score" id="score"></div>
+            <div class="ball-holder"></div>
+            <div class="sticks" id="sticks"></div>
+        </div>
+
+        <div class="noise"></div>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Coloron 3D game/script.js b/Coloron 3D game/script.js
new file mode 100644
index 000000000..d7f9708a5
--- /dev/null
+++ b/Coloron 3D game/script.js	
@@ -0,0 +1,588 @@
+class Game {
+
+    constructor() {
+        this.score = 0;
+        this.isRunning = 0; // game is not running
+
+        this.calculateScale();
+
+        this.timeline = new TimelineMax({smoothChildTiming: true});
+        this.time = 1.6; // initial speed
+        this.colors = ["#FF4571", "#FFD145", "#8260F6"]; // the 3 colors used in the game
+        this.colorsRGBA = ["rgba(255, 69, 113, 1)", "rgba(255, 69, 113, 1)", "rgba(255, 69, 113, 1)"];
+        this.color = this.colors[0]; // the intial color of the ball
+        this.prevColor = null; // used as a holder to prevent ball colors from repeating
+    }
+
+    /**
+     * The game screen is scalable. I took 1200x800px as the initial scale.
+     * In order to display the game an many screen sizes properly
+     * I have to compare the player's sreen size to the initial scale,
+     * then scale the game using CSS Transform to fit the screen properly
+     * The function is called in the controller and anywhere where I need
+     * to recalculate the scale on screen resize or device rotation
+     */
+    calculateScale() {
+        this.screen = $(window).width(); // screen width
+        this.screenHeight = $(window).height();
+        this.scale = (this.screen > this.screenHeight) ? this.screenHeight/800 : this.screen/1200;
+        this.stickWidth = 180*this.scale;
+        this.steps = this.screen/this.stickWidth; // how many steps (stick width + margin) it takes from one end to another
+    }
+
+    /**
+     * Creating as many sticks we need to fill the screen
+     * from start to end of the screen. The steps property is used for that
+     */
+    generateSticks() {
+        let numberOfSticks = Math.ceil(this.steps);
+        for(let i = 0; i <= numberOfSticks; i++)
+            new Stick();
+    }
+
+    generateBall() {
+        this.balltween = new TimelineMax({repeat: -1, paused: 1});
+        $('.scene .ball-holder').append('<div class="ball red" id="ball"></div>');
+        this.bounce();
+    }
+
+    generateTweet() {
+        let top = $(window).height() / 2 - 150;
+        let left = $(window).width() / 2 - 300;
+        window.open("https://twitter.com/intent/tweet?url=https://codepen.io/gregh/full/yVLOyO&amp;text=I scored "+ this.score +" points on Coloron! Can you beat my score?&amp;via=greghvns&amp;hashtags=coloron", "TweetWindow", "width=600px,height=300px,top=" + top + ",left=" + left);
+    }
+
+    /**
+     * The greeting when the game begins
+     */
+    intro() {
+
+        TweenMax.killAll();
+      
+        //TweenMax.to('.splash', 0.3, { opacity: 0, display: 'none', delay: 1 })
+
+        $('.stop-game').css('display', 'none');
+        $('.start-game').css('display', 'flex');
+
+        let introTl = new TimelineMax();
+        let ball = new TimelineMax({repeat: -1, delay: 3});
+        introTl
+            .fromTo('.start-game .logo-holder', 0.9, { opacity: 0 }, { opacity: 1 })
+            .staggerFromTo('.start-game .logo span', 0.5, { opacity: 0 }, { opacity: 1 }, 0.08)
+            .staggerFromTo('.start-game .bar', 1.6, { y: '+100%' }, { y: '0%', ease: Elastic.easeOut.config(1, 0.3) }, 0.08)
+            .staggerFromTo('.start-game .ball-demo', 1, { scale: 0 }, { scale: 1, ease: Elastic.easeOut.config(1, 0.3) }, 0.8, 2)
+
+
+        ball.fromTo('.start-game .section-1 .ball-demo', 0.5, { y: "0px" }, { y: "100px", scaleY: 1.1, transformOrigin: "bottom", ease: Power2.easeIn})
+            .to('.start-game .section-1 .ball-demo', 0.5, { y: "0px", scaleY: 1, transformOrigin: "bottom", ease: Power2.easeOut,  
+                    onStart: () => {
+                        while(this.prevColor==this.color) {
+                            this.color = (new Color).getRandomColor();
+                        }
+                        this.prevColor = this.color;
+                        TweenMax.to('.start-game .section-1 .ball-demo', 0.5, {backgroundColor: this.color});
+                    } 
+                });
+    }
+
+    /**
+    * Display score
+     */
+    showResult() {
+        let score = this.score;
+        $('.stop-game').css('display', 'flex');
+        $('.stop-game .final-score').text(score + '!');
+        $('.stop-game .result').text(this.showGrade(score));
+        $('.nominee').show();
+
+        let resultTimeline = new TimelineMax();
+        resultTimeline
+            .fromTo('.stop-game .score-container', 0.7, { opacity: 0, scale: 0.3 }, { opacity: 1, scale: 1, ease: Elastic.easeOut.config(1.25, 0.5)})
+            .fromTo('.stop-game .final-score', 2, { scale: 0.5 }, { scale: 1, ease: Elastic.easeOut.config(2, 0.5)}, 0)
+            .fromTo('.stop-game .result', 1, { scale: 0.5 }, { scale: 1, ease: Elastic.easeOut.config(1.5, 0.5)}, 0.3)
+            ;
+
+    }
+
+    /**
+     * Takes players score and generates the cheering copy
+     * @param  {int} score
+     * @return {string} grade
+     */
+    showGrade(score) {
+        if(score > 30) return "Chuck Norris?";
+        else if(score > 25) return "You're da man";
+        else if(score > 20) return "Awesome";
+        else if(score > 15) return "Great!";
+        else if(score > 13) return "Nice!";
+        else if(score > 10) return "Good Job!";
+        else if(score > 5) return "Really?";
+        else return "Poor...";
+    }
+
+    start() {
+
+        this.stop(); // stop the game
+
+        $('.start-game, .stop-game').css('display', 'none'); // hide all the popups
+        $('.nominee').hide();
+
+        new Game();
+        this.score = 0; // reset
+
+        this.isRunning = 1;
+
+        // Clean up the stick and ball holders
+        // and generate new ones
+        $('#sticks, .scene .ball-holder').html('');
+        $('#score').text(this.score);
+        this.generateSticks();
+        this.generateBall();
+
+        // disables scene animations for Phones
+        if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent) ) {
+            Animation.sceneAnimation();
+        }
+        this.moveToStart();
+        this.moveScene();
+
+        // reset timescale to normal as the game speeds up
+        this.timeline.timeScale(1);
+        this.balltween.timeScale(1);
+    }
+
+    stop() {
+
+        this.isRunning = 0;
+
+        $('.start-game, .stop-game').css('display', 'none');
+        $('#sticks, .scene .ball-holder, #score').html('');
+        TweenMax.killAll();
+        
+        this.showResult();
+    }
+
+    scaleScreen() {
+
+        TweenMax.killAll(); // prevent multiple calls on resize
+
+        let height = $(window).height();
+        let width = $(window).width();
+
+        this.calculateScale();
+
+        $('.container')
+                .css('transform', 'scale(' + this.scale + ')')
+                .css('height', height/this.scale)
+                .css('width', width/this.scale)
+                .css('transformOrigin', 'left top');
+
+        $('#sticks').width(this.screen/this.scale + 3 * this.stickWidth/this.scale);
+
+    }
+
+    /**
+     * Calls the above function
+     * If the game is running it stops and shows the score
+     * If the game has stops it takes player to the main menu
+     */
+    scaleScreenAndRun() {
+
+        this.scaleScreen();
+
+        if(this.isRunning) {
+            this.stop();
+        } else {
+            this.intro();
+        }
+
+    }
+
+    /**
+     * This is the initial animation
+     * where the sticks come to the starting position
+     * and the ball appears and falls down
+     */
+    moveToStart() {        
+
+        let tip = new TimelineMax({ delay: 2 });
+
+        tip
+            .fromTo('.learn-to-play', 1, { scale: 0 }, { scale: 1, opacity: 1, ease: Elastic.easeOut.config(1.25, 0.5) })
+            .to('.learn-to-play', 1, { scale: 0, opacity: 0, ease: Elastic.easeOut.config(1.25, 0.5) }, 3)
+
+        TweenMax.fromTo('#ball', this.time,
+                        { 
+                            scale: 0 
+                        },
+                        { 
+                            scale: 1,
+                            delay: this.time * ((this.steps - 3) - 1.5), 
+                            onComplete: () => {
+                                this.balltween.play();
+                            }
+                        });
+
+        this.timeline.add(
+            TweenMax.fromTo('#sticks', this.time * this.steps, { x: this.screen / this.scale }, { x: 0, ease: Power0.easeNone})
+        );
+    }
+
+    /**
+     * The animation that moves sticks
+     */
+    moveScene() {
+
+        this.timeline.add(
+            TweenMax.to('#sticks', this.time, { x: '-=180px', ease: Power0.easeNone, repeat: -1, onRepeat: () => { this.rearrange() } })
+        );
+
+    }  
+
+    /**
+     * removes the first stick and adds one the the end
+     * this gives the sticks an infinite movement
+     */
+    rearrange() {
+
+        let scale = this.speedUp();
+
+        this.timeline.timeScale(scale);
+        this.balltween.timeScale(scale);
+
+        $('#sticks .stick').first().remove();
+        new Stick();
+
+    }
+
+    /**
+     * The game speeds up based on score
+     * The GSAP timeScale() function is called on the timeline to speed up the game
+     * This calculates how much shall the game speed up
+     */
+    speedUp() {
+        if(this.score > 30) {
+            return 1.8;
+        }
+        if(this.score > 20) {
+            return 1.7;
+        }
+        if(this.score > 15) {
+            return 1.5;
+        }
+        else if(this.score > 12) {
+            return 1.4;
+        }
+        else if(this.score > 10) {
+            return 1.3;
+        }
+        else if(this.score > 8) {
+            return 1.2;
+        }
+        else if(this.score > 5) {
+            return 1.1;
+        }
+        return 1;
+    }
+
+    /**
+     * Ball bouncing animation
+     * It checks if the ball and stick colors match
+     * And changes the ball color
+     */
+    bounce() {
+
+        this.balltween
+                .to('#ball', this.time/2, {y: '+=250px', scaleY: 0.7, transformOrigin: "bottom", ease: Power2.easeIn,
+                    onComplete: () => {
+                        this.checkColor();
+                    }
+                }).to('#ball', this.time/2, {y: '-=250px', scaleY: 1.1, transformOrigin: "bottom", ease: Power2.easeOut, 
+                    onStart: () => {
+                        while(this.prevColor==this.color) {
+                            this.color = (new Color).getRandomColor();
+                        }
+                        this.prevColor = this.color;
+                        TweenMax.to('#ball', 0.5, {backgroundColor: this.color});
+                        $('#ball').removeClass('red')
+                                  .removeClass('yellow')
+                                  .removeClass('purple')
+                                  .addClass((new Color).colorcodeToName(this.color));
+                    }
+                })    
+    }    
+
+    checkColor() {
+
+        let ballPos = $('#ball').offset().left + $('#ball').width()/2;
+        let stickWidth = $('.stick').width();
+        let score = this.score;
+
+        $('#sticks .stick').each(function(){
+            if($(this).offset().left < ballPos && $(this).offset().left > (ballPos - stickWidth)) {
+                
+                if( Color.getColorFromClass($(this)) == Color.getColorFromClass('#ball') ) {
+                    // if matches increase the score
+                    score++;
+                    $('#score').text(score);
+                    TweenMax.fromTo('#score', 0.5, { scale: 1.5 }, { scale: 1, ease: Elastic.easeOut.config(1.5, 0.5) });
+                } else {
+
+                    // you loose
+                    game.stop();
+
+                }
+
+            }
+        })
+
+        this.score = score;
+    }
+
+}
+
+class Stick {
+
+    constructor() {
+        this.stick = this.addStick();
+    }
+
+    addStick() {
+        this.stick = $('#sticks').append('<div class="stick inactive"></div>');
+        return this.stick;
+    }
+
+}
+
+class Color {
+
+    constructor() {
+        this.colors = ["#FF4571", "#FFD145", "#8260F6"];
+        this.effects = ["bubble", "triangle", "block"];
+        this.prevEffect = null;
+    }
+
+    getRandomColor() {
+        let colorIndex = Math.random()*3;
+        let color = this.colors[Math.floor(colorIndex)];
+        return color;
+    } 
+
+    colorcodeToName(color) {
+        let colors = ["#FF4571", "#FFD145", "#8260F6"];
+        let names = ["red", "yellow", "purple"];
+        let index = colors.indexOf(color);
+        if(index == -1) return false;
+        return names[index];
+    }      
+
+    /**
+     * Changes the color of an element
+     * As we as adds verbal name of the color
+     */
+    changeColor(el) {
+        let index = el.data("index");
+        if(index===undefined) { index = 0; }
+        else { index += 1; }
+        if(index==3) index = 0;
+        el
+            .css('background-color', this.colors[index])
+            .data('index', index);
+
+        el.removeClass('red')
+          .removeClass('yellow')
+          .removeClass('purple')
+          .addClass(this.colorcodeToName(this.colors[index]));
+
+        if(el.hasClass('inactive')) {
+            this.setEffect(el);
+            el.addClass('no-effect');
+        }
+        
+        el.removeClass('inactive');
+    }
+
+    getRandomEffect() {
+        let effectIndex = null;
+        
+        effectIndex = Math.floor(Math.random()*3);
+        while(effectIndex == this.prevEffect) {
+            effectIndex = Math.floor(Math.random()*3);
+        }
+
+        this.prevEffect = effectIndex;
+        return this.effects[effectIndex];
+    }   
+
+    /**
+     * Adds the effect specific particles to the stick
+     */
+    setEffect(el) {
+        let effect = this.getRandomEffect();
+        el.addClass(effect + '-stick');
+        for(let i = 1; i <= 14; i++) {
+            if(effect=='block') {
+                el.append(`<div class="${effect} ${effect}-${i}"><div class="inner"></div><div class="inner inner-2"></div></div>`);
+            } else {
+                el.append(`<div class="${effect} ${effect}-${i}"></div>`);
+            }
+        }
+    }
+
+    /**
+     * Since the ball and sticks have several classes
+     * This method searches for the color class
+     * @param el [DOM element]
+     * @return {string} class name
+     */
+    static getColorFromClass(el) {
+        let classes = $(el).attr('class').split(/\s+/);
+        for (var i = 0, len = classes.length; i < len; i++) {          
+            if(classes[i] == 'red' || classes[i] == 'yellow' || classes[i] == 'purple') {
+                return classes[i];
+            }
+        }
+    }
+}
+
+class Animation {
+
+    /**
+     * Creates and positions the small glow elements on the screen
+     */
+    static generateSmallGlows(number) {
+        let h = $(window).height();
+        let w = $(window).width();
+        let scale = (w > h) ? h/800 : w/1200;
+
+        h = h/scale;
+        w = w/scale;
+
+        for(let i = 0; i < number; i++) {
+            let left = Math.floor(Math.random()*w);
+            let top = Math.floor(Math.random()*(h/2));
+            let size = Math.floor(Math.random()*8) + 4;
+            $('.small-glows').prepend('<div class="small-glow"></div>');
+            let noise = $('.small-glows .small-glow').first();
+            noise.css({left: left, top: top, height: size, width: size});
+        }
+    }
+
+    /**
+     * Creates the animations for sticks
+     * The effects is chosen by random
+     * And one of the three functions is
+     * Called accordingly
+     */
+    playBubble(el) {
+        let bubble = new TimelineMax();
+        bubble.staggerFromTo(el.find('.bubble'), 0.3, {scale: 0.1}, {scale: 1}, 0.03)
+        bubble.staggerTo(el.find('.bubble'), 0.5, {y: '-=60px', yoyo: true, repeat: -1}, 0.03);
+    }
+
+    playTriangle(el) {
+        let triangle = new TimelineMax();
+        triangle.staggerFromTo(el.find('.triangle'), 0.3, {scale: 0.1}, {scale: 1}, 0.03)
+                .staggerTo(el.find('.triangle'), 1.5, {
+                    cycle:{
+                        rotationY: [0, 360],
+                        rotationX: [360, 0],
+                    },
+                    repeat: -1,
+                    repeatDelay: 0.1
+                }, 0.1);
+    }
+
+    playBlock(el) {
+        let block = new TimelineMax();
+        let block2 = new TimelineMax({delay: 0.69});
+
+        block.staggerFromTo(el.find('.block'), 0.3, {scale: 0.1}, {scale: 1}, 0.03)
+             .staggerTo(el.find('.block .inner:not(.inner-2)'), 1, {
+                    cycle: {
+                        x: ["+200%", "-200%"]
+                    },
+                    repeat: -1,
+                    repeatDelay: 0.6,
+                }, 0.1);
+        block2.staggerTo(el.find('.block .inner-2'), 1, {
+                    cycle: {
+                        x: ["+200%", "-200%"]
+                    },
+                    repeat: -1,
+                    repeatDelay: 0.6,
+                }, 0.1);
+    }
+
+    static sceneAnimation() {
+
+        const speed = 15; // uses it's local speed
+
+        // animates the small glows in a circular motion
+        $('.small-glow').each(function(){
+            let speedDelta = Math.floor(Math.random()*8);
+            let radius = Math.floor(Math.random()*20)+20;
+            TweenMax.to($(this), speed+speedDelta, {rotation: 360, transformOrigin: "-"+radius+"px -"+radius+"px", repeat: -1, ease: Power0.easeNone});
+        })
+
+        var wavet = TweenMax.to('.top_wave', speed*1.7/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
+        var wave1 = TweenMax.to('.wave1', speed*1.9/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
+        var wave2 = TweenMax.to('.wave2', speed*2/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
+        var wave3 = TweenMax.to('.wave3', speed*2.2/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
+        var wave4 = TweenMax.to('.wave4', speed*2.4/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
+
+        var mount1 = TweenMax.to('.mount1', speed*8, {backgroundPositionX: '-=1760px', repeat: -1, ease: Power0.easeNone});
+        var mount2 = TweenMax.to('.mount2', speed*10, {backgroundPositionX: '-=1782px', repeat: -1, ease: Power0.easeNone});
+
+        var clouds = TweenMax.to('.clouds', speed*3, {backgroundPositionX: '-=1001px', repeat: -1, ease: Power0.easeNone});   
+
+    }
+
+}
+
+            var game = new Game();
+            var animation = new Animation();
+            var color = new Color();
+            var userAgent = window.navigator.userAgent;
+
+            Animation.generateSmallGlows(20);
+
+            $(document).ready(function(){
+                //game.showResult();
+                game.scaleScreen();
+                game.intro();
+                //game.start();
+                //game.bounce();
+                
+                if($(window).height() < 480) {
+                    $('.play-full-page').css('display', 'block');
+                }
+            })
+
+            $(document).on('click', '.stick', function(){
+                color.changeColor($(this));
+                if($(this).hasClass('no-effect')) {
+                    if($(this).hasClass('bubble-stick')) {
+                        animation.playBubble($(this));
+                    } else if($(this).hasClass('triangle-stick')) {
+                        animation.playTriangle($(this));
+                    } else if($(this).hasClass('block-stick')) {
+                        animation.playBlock($(this));
+                    }
+                    $(this).removeClass('no-effect');
+                }
+            });
+
+            $(document).on('click', '.section-2 .bar', function(){
+                color.changeColor($(this));
+            });
+
+            $(window).resize(function(){
+                if (!userAgent.match(/iPad/i) && !userAgent.match(/iPhone/i)) {
+                    game.scaleScreenAndRun();
+                }
+            });
+
+            $(window).on("orientationchange",function(){
+                game.scaleScreenAndRun();
+            });
diff --git a/Coloron 3D game/style.scss b/Coloron 3D game/style.scss
new file mode 100644
index 000000000..54797d44b
--- /dev/null
+++ b/Coloron 3D game/style.scss	
@@ -0,0 +1,738 @@
+@mixin bubble_shape ($width: 4px) {
+    border-radius: 50%;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.12);
+    border-color: rgba(0, 0, 0, 0.12);
+    border-width: $width;
+}
+
+@mixin bubble ($size, $top, $left) {
+    height: $size;
+    width: $size;
+    top: $top;
+    left: $left;
+}
+
+@mixin bubble_hollow ($size, $top, $left) {
+    @include bubble ($size, $top, $left);
+    background-color: transparent;
+    border-style: solid;
+}
+
+@mixin triangle ($height, $width, $top, $left) {
+    border-left: ($height/2) solid transparent;
+    border-right: ($height/2) solid transparent;
+    border-bottom: $width solid rgba(0, 0, 0, 0.12);
+    background-color: transparent;
+    left: $left;
+    top: $top;
+}
+
+@mixin triangle_hollow ($height, $width, $top, $left) {
+    @include triangle( $height, $width, $top, $left );
+    &:after {    
+        content: " ";
+        display: block;
+        position: absolute;
+        border-left: ($height/4-1) solid transparent;
+        border-right: ($height/4-1) solid transparent;
+        border-bottom: ($height/2-3) solid transparent;
+        top: 6px;
+        left: -($width/4);
+        transition: border-bottom-color 0.4s ease;
+
+        .red & {
+            border-bottom-color: #fc5c82;
+        }
+        .yellow & {
+            border-bottom-color: #fcd45c;
+        }
+        .purple & {
+            border-bottom-color: #9174f5;
+        }
+    }
+}
+
+@mixin block ($height, $width, $top, $left) {
+    height: $height;
+    width: $width;
+    top: $top;
+    left: $left;
+}
+
+@mixin block_hollow ($height, $width, $top, $left) {
+    @include block ($height, $width, $top, $left);
+    & .inner {
+        background-color: transparent !important;
+        border-style: solid;
+        box-sizing: border-box;
+    }
+}
+
+.bubble {
+    @include bubble_shape;
+}
+.bubble-1 {
+    @include bubble(15px, 21px, 59px);
+}
+.bubble-2 {
+    @include bubble(27px, 36px, 16px);
+}
+.bubble-3 {
+    @include bubble(21px, 63px, 49px);
+}
+.bubble-4 {
+    @include bubble(15px, 98px, 37px);
+}
+.bubble-5 {
+    @include bubble_hollow(5px, 116px, 20px);
+}
+.bubble-6 {
+    @include bubble(6px, 128px, 63px);
+}
+.bubble-7 {
+    @include bubble(27px, 150px, 52px);
+}
+.bubble-8 {
+    @include bubble(19px, 154px, 18px);
+}
+.bubble-9 {
+    @include bubble(10px, 189px, 13px);
+}
+.bubble-10 {
+    @include bubble_hollow(5px, 199px, 52px);
+}
+.bubble-11 {
+    @include bubble(21px, 220px, 29px);
+}
+.bubble-12 {
+    @include bubble(21px, 263px, 48px);
+}
+.bubble-13 {
+    @include bubble_hollow(5px, 275px, 16px);
+}
+.bubble-14 {
+    @include bubble(15px, 296px, 34px);
+}
+.triangle {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.12);
+    border-color: rgba(0, 0, 0, 0.12);
+}
+.triangle-1 {
+    @include bubble_shape;
+    @include bubble(10px, 22px, 55px);
+}
+.triangle-2 {
+    @include triangle_hollow(16px, 14px, 27px, 15px);
+}
+.triangle-3 {
+    @include triangle_hollow(24px, 19px, 60px, 43px);
+}
+.triangle-4 {
+    @include bubble_shape(3px);
+    @include bubble_hollow(8px, 61px, 17px);
+}
+.triangle-5 {
+    @include triangle(10px, 8px, 101px, 25px);
+    transform: rotate(180deg);
+}
+
+.triangle-6 {
+    @include triangle(8px, 6px, 103px, 60px);
+    transform: rotate(-90deg);
+}
+
+.triangle-7 {
+    @include triangle(25px, 19px, 126px, 17px);
+    transform: rotate(180deg);
+}
+
+.triangle-8 {
+    @include triangle(21px, 16px, 149px, 50px);
+}
+
+.triangle-9 {
+    @include triangle(11px, 8px, 177px, 21px);
+}
+
+.triangle-10 {
+    @include bubble_shape;
+    @include bubble(10px, 177px, 60px);
+}
+
+.triangle-11 {
+    @include triangle(18px, 13px, 213px, 33px);
+    transform: rotate(180deg);
+}
+
+.triangle-12 {
+    @include bubble_shape(2px);
+    @include bubble_hollow(10px, 233px, 65px);
+}
+
+.triangle-13 {
+    @include bubble_shape;
+    @include bubble(10px, 250px, 22px);
+}
+
+.triangle-14 {
+    @include triangle_hollow(16px, 14px, 270px, 45px);
+    transform: rotate(180deg);
+}
+
+.stick {
+    .block {
+        position: absolute;
+        overflow: hidden;
+        z-index: 999;
+        border-radius: 7px;
+        .inner {
+            border-radius: 7px;
+            background-color: rgba(0, 0, 0, 0.12);
+            border-color: rgba(0, 0, 0, 0.12);
+            border-width: 3px;
+            height: 100%;
+            width: 100%;
+            position: absolute;
+        }
+        &:nth-child(2n+1) .inner-2 {
+            left: -200%;
+        }
+        &:nth-child(2n+2) .inner-2 {
+            left: 200%;
+        }
+    }
+    .block-1 {
+        @include block_hollow(16px, 31px, 16px, 30px);
+    }
+    .block-2 {
+        @include block(14px, 42px, 50px, 15px);
+    }
+    .block-3 {
+        @include block(18px, 9px, 73px, 64px);
+    }
+    .block-4 {
+        @include block(9px, 14px, 84px, 26px);
+    }
+    .block-5 {
+        @include block(15px, 15px, 109px, 45px);
+        .inner { 
+            border-radius: 50%;
+        }
+    }
+    .block-6 {
+        @include block(9px, 27px, 135px, 19px);
+    }
+    .block-7 {
+        @include block(12px, 12px, 144px, 60px); 
+        .inner { 
+            border-radius: 50%;
+            border-style: solid;
+            box-sizing: border-box;
+            background-color: transparent;
+        }
+    }
+    .block-8 {
+        @include block(27px, 14px, 164px, 24px);
+    }
+    .block-9 {
+        @include block(8px, 8px, 188px, 64px);
+    }
+    .block-10 {
+        @include block_hollow(12px, 22px, 219px, 11px);
+    }
+    .block-11 {
+        @include block(22px, 22px, 226px, 50px);
+        .inner {
+            border-radius: 50%;
+        }
+    }
+    .block-12 {
+        @include block(18px, 9px, 248px, 26px);
+    }
+    .block-13 {
+        @include block(8px, 8px, 278px, 50px);
+        .inner {    
+            border-radius: 50%;
+        }
+    }
+    .block-14 {
+        @include block_hollow(12px, 22px, 297px, 18px);
+    }
+    .block-15 {
+        @include block(9px, 27px, 307px, 48px);
+    }
+}
+
+body {
+    background-color: #28DAD4;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    font-family: 'Roboto', sans-serif;
+}
+a {
+    cursor: url(https://greghub.github.io/coloron/public/svg/cursor.svg), pointer;
+    &:focus, &:active {
+    cursor: url(https://greghub.github.io/coloron/public/svg/cursor-tap.svg), pointer;
+    }
+}
+.container {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+}
+.waves, .mounts {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+}
+.waves div, .mounts div {
+    position: absolute;
+    width: 100%;
+}
+.clouds {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 77px;
+    height: 151px;
+    background: url(https://greghub.github.io/coloron/public/svg/clouds.svg) repeat-x;
+    background-position-x: 170px; 
+}
+.top_wave {
+    background: url(https://greghub.github.io/coloron/public/svg/top_wave.png) repeat-x 0 -1px;
+    height: 35px;
+    bottom: 0;
+    z-index: 10001;
+}
+.wave1 {
+    background: url(https://greghub.github.io/coloron/public/svg/wave1.svg) repeat-x;
+    height: 150px;
+    bottom: 0;
+    z-index: 23;
+}
+.wave2 {
+    background: url(https://greghub.github.io/coloron/public/svg/wave2.svg) repeat-x;
+    height: 180px;
+    bottom: 30px;
+    z-index: 22;
+}
+.wave3 {
+    background: url(https://greghub.github.io/coloron/public/svg/wave3.svg) repeat-x;
+    height: 180px;
+    bottom: 90px;
+    z-index: 21;
+}
+.wave4 {
+    background: url(https://greghub.github.io/coloron/public/svg/wave4.svg) repeat-x;
+    height: 180px;
+    bottom: 120px;
+    z-index: 20;
+}
+.mount1 {
+    background: url(https://greghub.github.io/coloron/public/svg/mount1.svg) repeat-x;
+    height: 150px;
+    bottom: 280px;
+    z-index: 11;
+}
+.mount2 {
+    background: url(https://greghub.github.io/coloron/public/svg/mount2.svg) repeat-x;
+    height: 150px;
+    bottom: 290px;
+    z-index: 10;
+}
+.noise {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1010;
+    background: url(https://greghub.github.io/coloron/public/svg/noise.png);
+}
+.glow {
+    position: absolute;
+    left: -350px;
+    top: -350px;
+    width: 800px;
+    height: 800px;
+    background-color: rgba(81, 237, 200, 0.34);
+    border-radius: 50%;
+    box-shadow: 0 0 100px 100px rgba(81, 237, 200, 0.34);
+    z-index: 1010;
+}
+.sun {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 1px;
+    height: 1px;
+    background-color: rgba(255, 227, 69, 1);
+    border-radius: 50%;
+    box-shadow: 0 0 32px 32px rgba(255, 227, 69, 1), 
+                0 0 150px 150px rgba(103, 244, 210, 0.4);
+}
+.small-glow {
+    z-index: 99;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.34);
+    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.34);
+}
+.small-glow.yellow {
+    background-color: rgba(255, 227, 69, 0.34);
+    box-shadow: 0 0 4px 4px rgba(255, 227, 69, 0.34);
+}
+.sticks {
+    z-index: 1011;
+    outline: none;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+.stick {
+    height: 362px;
+    width: 90px;
+    border-radius: 14px;
+    background-image: url(https://greghub.github.io/coloron/public/svg/noise.png);
+    position: relative;
+    overflow: hidden;
+    float: left;
+    margin-right: 90px;
+    transition: background-color 0.4s ease;
+    cursor: url(https://greghub.github.io/coloron/public/svg/cursor.svg), pointer;
+    &:focus, &:active {
+        cursor: url(https://greghub.github.io/coloron/public/svg/cursor-tap.svg), pointer;
+    }
+}
+.stick.red {
+    background-color: #FF4571;
+}
+.stick.yellow {
+    background-color: #FFD145;
+}
+.stick.purple {
+    background-color: #8260F6;
+}
+.stick.inactive {
+    background-color: #4C4660;
+}
+.ball, .ball-demo {
+    background: url(https://greghub.github.io/coloron/public/svg/ball.svg) right bottom;
+    background-size: 64px 64px;
+    width: 53px;
+    height: 53px;
+    z-index: 1011;
+    background-color: #FF4571;
+    border-radius: 50%;
+}
+.ball {
+    margin-bottom: 250px;
+}
+.controls {
+    z-index: 999999;
+    position: relative
+}
+.game-full-flex {
+    position: fixed;
+    display: none; // gets updated to flex with JS
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 9998;
+}
+.start-game {
+    .start-game-top {
+        min-height: 20%;
+        .play-full-page {
+            display: none;
+            border: 3px solid #fff;
+            border-radius: 100px;
+            color: #fff;
+            width: 260px;
+            height: 50px;
+            font-size: 28px;
+            text-align: center;
+            font-weight: 900;
+            letter-spacing: -1px;
+            line-height: 52px;
+            text-decoration: none;
+            text-transform: uppercase;
+            margin-top: 24px;
+            &:hover {
+                opacity: 0.7;
+            }
+        }
+    }
+    .logo-holder {
+        width: 513px;
+        height: 162px;
+        background-color: #4C4660;
+        border: 4px solid #FF4571;
+        border-radius: 68px;
+        text-align: center;
+        margin-top: -10%;
+        .logo {
+            color: #fff;
+            text-transform: uppercase;
+            font-weight: 900;
+            font-size: 100px;
+            letter-spacing: -0.1em;
+            margin-top: 10px;
+            margin-bottom: 4px;
+            text-align: center;
+            span {
+                margin-left: -8px;
+                margin-right: -8px;
+            }
+        }
+        .play-button {
+            display: inline-block;
+            background-color: #FF4571;
+            border: 4px solid #fff;
+            border-radius: 100px;
+            color: #fff;
+            width: 200px;
+            height: 56px;
+            font-size: 42px;
+            text-align: center;
+            font-weight: 900;
+            letter-spacing: -3px;
+            line-height: 56px;
+            text-decoration: none;
+            &:hover {
+                background-color: lighten(#FF4571, 5%);
+            }
+        }
+        .hint {
+            color: #fff;
+            font-size: 20px;
+            span {
+                color: #FF4571;
+            }
+        }
+    }
+    .how-to-play {
+        display: flex;
+        justify-content: space-around;
+        width: 100%;
+        .section-1, .section-3 {
+            flex: 1;
+            .content {
+                justify-content: center;
+            }
+        }
+        h4 {
+            color: #fff;
+            font-weight: 400;
+            font-size: 22px;
+            text-align: center;
+        }
+        .content {
+            height: 200px;
+            position: relative;
+            display: flex;
+            justify-content: space-around;
+        }
+        .bar {
+            width: 60px;
+            border-radius: 7px;
+            margin-top: auto;
+            transition: background-color 0.4s ease;
+            &.bar-1 {
+                height: 180px;
+                background: #FF4571;
+            }
+            &.bar-2 {
+                height: 120px;
+                background: #FFD145;
+            }
+            &.bar-3 {
+                height: 150px;
+                background: #4C4660;
+            }
+        }
+        .section-2 {
+            .bar {
+                cursor: url(https://greghub.github.io/coloron/public/svg/cursor.svg), pointer;
+                &:focus, &:active {
+                    cursor: url(https://greghub.github.io/coloron/public/svg/cursor-tap.svg), pointer;
+                }
+            }
+        }
+        .section-3 {
+            .ball-demo {
+                background-color: #815FF8;
+            }
+            .bar-1 {
+                height: 120px;
+                background-color: #815FF8;
+            }
+        }
+    }
+}
+.stop-game {
+    justify-content: center;
+    .score-container {
+        background-color: #4C4660;
+        width: 433px;
+        height: 386px;
+        border-radius: 38px;
+        text-align: center;
+        h1 {
+            color: #fff;
+            text-transform: uppercase;
+            letter-spacing: -0.1em;
+            margin-top: 20px;
+            margin-bottom: 4px;
+            font-size: 64px;
+        }
+        .final-score {
+            color: #FFE345;
+            font-weight: 900;
+            font-size: 130px;
+            letter-spacing: -6px;
+            line-height: 110px;
+        }
+        .result {
+            color: #FF4571;
+            text-transform: uppercase;
+            font-weight: 700;
+            font-size: 30px;
+        }
+        h4 {
+            color: #fff;
+            margin-top: 12px;
+        }
+        .tweet {
+            background: #fff;
+            padding: 8px 20px;
+            border-radius: 4px;
+            color: #55ACEE;
+            text-decoration: none;
+            font-size: 18px;
+            line-height: 24px;
+            display: inline-block;
+            &:hover {
+                background-color: #55ACEE;
+                color: #fff;
+            }
+            i {
+                font-size: 24px;
+                top: 2px;
+                right: 2px;
+                position: relative;
+            }
+        }
+        .play-again {
+            background-color: #FF4571;
+            border: 2px solid #fff;
+            color: #fff;
+            text-decoration: none;
+            text-transform: uppercase;
+            font-weight: 900;
+            letter-spacing: -1px;
+            font-size: 26px;
+            padding: 6px 24px;
+            border-radius: 22px;
+            margin: 6px 4px;
+            display: inline-block;
+            &:hover {
+                background-color: lighten(#FF4571, 5%);
+            }
+        }
+        .main-menu {
+            background-color: #44BFA3;
+            border: 2px solid #fff;
+            color: #fff;
+            text-decoration: none;
+            text-transform: uppercase;
+            font-weight: 900;
+            letter-spacing: -1px;
+            font-size: 26px;
+            padding: 6px 24px;
+            border-radius: 22px;
+            margin: 6px 4px;
+            display: inline-block;
+            &:hover {
+                background-color: lighten(#44BFA3, 5%);
+            }
+        }
+    }
+}
+.scene {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: fixed;
+    z-index: 9997;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    .ball-holder {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        padding-left: 558px;
+    }
+    .score {
+        position: fixed;
+        right: 54px;
+        top: 20px;
+        color: #33485F;
+        font-size: 90px;
+        font-weight: 900;
+        letter-spacing: -0.1em;
+    }
+    .learn-to-play {    
+        z-index: 9999;
+        display: inline-block;
+        text-align: center;
+        position: relative;
+        top: 20%;
+        font-size: 48px;
+        color: rgba(255,255,255,0.85);
+        font-weight: 700;
+        letter-spacing: -2px;
+        opacity: 0;
+    }
+}
+
+.splash {
+  display: none;
+}
+
+@media print {
+  .splash {
+    display: block;
+    position: fixed;
+    z-index: 99999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #28DAD4;
+    background-image: url(https://greghub.github.io/coloron/public/images/coloron-image.png);
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+  } 
+}
+
+.nominee {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9999;
+}
diff --git a/Cricket game/index.html b/Cricket game/index.html
new file mode 100644
index 000000000..75e8172ae
--- /dev/null
+++ b/Cricket game/index.html	
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Cricket Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game-container">
+        <h1>Simple Cricket Game</h1>
+        <div id="scoreboard">
+            <h2>Score: <span id="score">0</span></h2>
+        </div>
+        <button id="hitButton">Hit the Ball!</button>
+        <div id="message"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Cricket game/script.js b/Cricket game/script.js
new file mode 100644
index 000000000..88b9831e3
--- /dev/null
+++ b/Cricket game/script.js	
@@ -0,0 +1,16 @@
+let score = 0;
+
+document.getElementById('hitButton').addEventListener('click', function() {
+    let runs = Math.floor(Math.random() * 7); // Random runs between 0-6
+    score += runs;
+
+    document.getElementById('score').textContent = score;
+
+    let message = "";
+    if (runs === 0) {
+        message = "Out! You scored " + score + " runs.";
+    } else {
+        message = "You scored " + runs + " runs!";
+    }
+    document.getElementById('message').textContent = message;
+});
diff --git a/Cricket game/style.css b/Cricket game/style.css
new file mode 100644
index 000000000..1b03da603
--- /dev/null
+++ b/Cricket game/style.css	
@@ -0,0 +1,32 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    text-align: center;
+}
+
+.game-container {
+    margin: 50px auto;
+    padding: 20px;
+    border: 2px solid #333;
+    background-color: #fff;
+    border-radius: 10px;
+    width: 300px;
+}
+
+h1 {
+    color: #333;
+}
+
+#hitButton {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#hitButton:hover {
+    background-color: #45a049;
+}
diff --git a/Crossy Road with ThreeJS/index.html b/Crossy Road with ThreeJS/index.html
new file mode 100644
index 000000000..0225f601d
--- /dev/null
+++ b/Crossy Road with ThreeJS/index.html	
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
+    <script defer src="main.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <div id="counter">0</div>
+    
+<div id="controlls">
+  <div>
+    <button id="forward">
+      <svg width="30" height="30" viewBox="0 0 10 10">
+        <g transform="rotate(0, 5,5)">
+          <path d="M5,4 L7,6 L3,6 L5,4" />
+        </g>
+      </svg>
+    </button>
+    <button id="left">
+      <svg width="30" height="30" viewBox="0 0 10 10">
+        <g transform="rotate(-90, 5,5)">
+          <path d="M5,4 L7,6 L3,6 L5,4" />
+        </g>
+      </svg>
+    </button>
+    <button id="backward">
+      <svg width="30" height="30" viewBox="0 0 10 10">
+        <g transform="rotate(180, 5,5)">
+          <path d="M5,4 L7,6 L3,6 L5,4" />
+        </g>
+      </svg>
+    </button>
+    <button id="right">
+      <svg width="30" height="30" viewBox="0 0 10 10">
+        <g transform="rotate(90, 5,5)">
+          <path d="M5,4 L7,6 L3,6 L5,4" />
+        </g>
+      </svg>
+    </button>
+  </div>
+</div>
+
+<div id="end">
+  <button id="retry">Retry</button>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Crossy Road with ThreeJS/main.js b/Crossy Road with ThreeJS/main.js
new file mode 100644
index 000000000..5de9f370f
--- /dev/null
+++ b/Crossy Road with ThreeJS/main.js	
@@ -0,0 +1,598 @@
+const counterDOM = document.getElementById('counter');  
+const endDOM = document.getElementById('end');  
+
+const scene = new THREE.Scene();
+
+const distance = 500;
+const camera = new THREE.OrthographicCamera( window.innerWidth/-2, window.innerWidth/2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 10000 );
+
+camera.rotation.x = 50*Math.PI/180;
+camera.rotation.y = 20*Math.PI/180;
+camera.rotation.z = 10*Math.PI/180;
+
+const initialCameraPositionY = -Math.tan(camera.rotation.x)*distance;
+const initialCameraPositionX = Math.tan(camera.rotation.y)*Math.sqrt(distance**2 + initialCameraPositionY**2);
+camera.position.y = initialCameraPositionY;
+camera.position.x = initialCameraPositionX;
+camera.position.z = distance;
+
+const zoom = 2;
+
+const chickenSize = 15;
+
+const positionWidth = 42;
+const columns = 17;
+const boardWidth = positionWidth*columns;
+
+const stepTime = 200; // Miliseconds it takes for the chicken to take a step forward, backward, left or right
+
+let lanes;
+let currentLane;
+let currentColumn;
+
+let previousTimestamp;
+let startMoving;
+let moves;
+let stepStartTimestamp;
+
+const carFrontTexture = new Texture(40,80,[{x: 0, y: 10, w: 30, h: 60 }]);
+const carBackTexture = new Texture(40,80,[{x: 10, y: 10, w: 30, h: 60 }]);
+const carRightSideTexture = new Texture(110,40,[{x: 10, y: 0, w: 50, h: 30 }, {x: 70, y: 0, w: 30, h: 30 }]);
+const carLeftSideTexture = new Texture(110,40,[{x: 10, y: 10, w: 50, h: 30 }, {x: 70, y: 10, w: 30, h: 30 }]);
+
+const truckFrontTexture = new Texture(30,30,[{x: 15, y: 0, w: 10, h: 30 }]);
+const truckRightSideTexture = new Texture(25,30,[{x: 0, y: 15, w: 10, h: 10 }]);
+const truckLeftSideTexture = new Texture(25,30,[{x: 0, y: 5, w: 10, h: 10 }]);
+
+const generateLanes = () => [-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9].map((index) => {
+  const lane = new Lane(index);
+  lane.mesh.position.y = index*positionWidth*zoom;
+  scene.add( lane.mesh );
+  return lane;
+}).filter((lane) => lane.index >= 0);
+
+const addLane = () => {
+  const index = lanes.length;
+  const lane = new Lane(index);
+  lane.mesh.position.y = index*positionWidth*zoom;
+  scene.add(lane.mesh);
+  lanes.push(lane);
+}
+
+const chicken = new Chicken();
+scene.add( chicken );
+
+hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
+scene.add(hemiLight)
+
+const initialDirLightPositionX = -100;
+const initialDirLightPositionY = -100;
+dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
+dirLight.position.set(initialDirLightPositionX, initialDirLightPositionY, 200);
+dirLight.castShadow = true;
+dirLight.target = chicken;
+scene.add(dirLight);
+
+dirLight.shadow.mapSize.width = 2048;
+dirLight.shadow.mapSize.height = 2048;
+var d = 500;
+dirLight.shadow.camera.left = - d;
+dirLight.shadow.camera.right = d;
+dirLight.shadow.camera.top = d;
+dirLight.shadow.camera.bottom = - d;
+
+// var helper = new THREE.CameraHelper( dirLight.shadow.camera );
+// var helper = new THREE.CameraHelper( camera );
+// scene.add(helper)
+
+backLight = new THREE.DirectionalLight(0x000000, .4);
+backLight.position.set(200, 200, 50);
+backLight.castShadow = true;
+scene.add(backLight)
+
+const laneTypes = ['car', 'truck', 'forest'];
+const laneSpeeds = [2, 2.5, 3];
+const vechicleColors = [0xa52523, 0xbdb638, 0x78b14b];
+const threeHeights = [20,45,60];
+
+const initaliseValues = () => {
+  lanes = generateLanes()
+
+  currentLane = 0;
+  currentColumn = Math.floor(columns/2);
+
+  previousTimestamp = null;
+
+  startMoving = false;
+  moves = [];
+  stepStartTimestamp;
+
+  chicken.position.x = 0;
+  chicken.position.y = 0;
+
+  camera.position.y = initialCameraPositionY;
+  camera.position.x = initialCameraPositionX;
+
+  dirLight.position.x = initialDirLightPositionX;
+  dirLight.position.y = initialDirLightPositionY;
+}
+
+initaliseValues();
+
+const renderer = new THREE.WebGLRenderer({
+  alpha: true,
+  antialias: true
+});
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+renderer.setSize( window.innerWidth, window.innerHeight );
+document.body.appendChild( renderer.domElement );
+
+function Texture(width, height, rects) {
+  const canvas = document.createElement( "canvas" );
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext( "2d" );
+  context.fillStyle = "#ffffff";
+  context.fillRect( 0, 0, width, height );
+  context.fillStyle = "rgba(0,0,0,0.6)";  
+  rects.forEach(rect => {
+    context.fillRect(rect.x, rect.y, rect.w, rect.h);
+  });
+  return new THREE.CanvasTexture(canvas);
+}
+
+function Wheel() {
+  const wheel = new THREE.Mesh( 
+    new THREE.BoxBufferGeometry( 12*zoom, 33*zoom, 12*zoom ), 
+    new THREE.MeshLambertMaterial( { color: 0x333333, flatShading: true } ) 
+  );
+  wheel.position.z = 6*zoom;
+  return wheel;
+}
+
+function Car() {
+  const car = new THREE.Group();
+  const color = vechicleColors[Math.floor(Math.random() * vechicleColors.length)];
+  
+  const main = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( 60*zoom, 30*zoom, 15*zoom ), 
+    new THREE.MeshPhongMaterial( { color, flatShading: true } )
+  );
+  main.position.z = 12*zoom;
+  main.castShadow = true;
+  main.receiveShadow = true;
+  car.add(main)
+  
+  const cabin = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( 33*zoom, 24*zoom, 12*zoom ), 
+    [
+      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carBackTexture } ),
+      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carFrontTexture } ),
+      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carRightSideTexture } ),
+      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carLeftSideTexture } ),
+      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true } ), // top
+      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true } ) // bottom
+    ]
+  );
+  cabin.position.x = 6*zoom;
+  cabin.position.z = 25.5*zoom;
+  cabin.castShadow = true;
+  cabin.receiveShadow = true;
+  car.add( cabin );
+  
+  const frontWheel = new Wheel();
+  frontWheel.position.x = -18*zoom;
+  car.add( frontWheel );
+
+  const backWheel = new Wheel();
+  backWheel.position.x = 18*zoom;
+  car.add( backWheel );
+
+  car.castShadow = true;
+  car.receiveShadow = false;
+  
+  return car;  
+}
+
+function Truck() {
+  const truck = new THREE.Group();
+  const color = vechicleColors[Math.floor(Math.random() * vechicleColors.length)];
+
+
+  const base = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( 100*zoom, 25*zoom, 5*zoom ), 
+    new THREE.MeshLambertMaterial( { color: 0xb4c6fc, flatShading: true } )
+  );
+  base.position.z = 10*zoom;
+  truck.add(base)
+
+  const cargo = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( 75*zoom, 35*zoom, 40*zoom ), 
+    new THREE.MeshPhongMaterial( { color: 0xb4c6fc, flatShading: true } )
+  );
+  cargo.position.x = 15*zoom;
+  cargo.position.z = 30*zoom;
+  cargo.castShadow = true;
+  cargo.receiveShadow = true;
+  truck.add(cargo)
+
+  const cabin = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( 25*zoom, 30*zoom, 30*zoom ), 
+    [
+      new THREE.MeshPhongMaterial( { color, flatShading: true } ), // back
+      new THREE.MeshPhongMaterial( { color, flatShading: true, map: truckFrontTexture } ),
+      new THREE.MeshPhongMaterial( { color, flatShading: true, map: truckRightSideTexture } ),
+      new THREE.MeshPhongMaterial( { color, flatShading: true, map: truckLeftSideTexture } ),
+      new THREE.MeshPhongMaterial( { color, flatShading: true } ), // top
+      new THREE.MeshPhongMaterial( { color, flatShading: true } ) // bottom
+    ]
+  );
+  cabin.position.x = -40*zoom;
+  cabin.position.z = 20*zoom;
+  cabin.castShadow = true;
+  cabin.receiveShadow = true;
+  truck.add( cabin );
+
+  const frontWheel = new Wheel();
+  frontWheel.position.x = -38*zoom;
+  truck.add( frontWheel );
+
+  const middleWheel = new Wheel();
+  middleWheel.position.x = -10*zoom;
+  truck.add( middleWheel );
+
+  const backWheel = new Wheel();
+  backWheel.position.x = 30*zoom;
+  truck.add( backWheel );
+
+  return truck;  
+}
+
+function Three() {
+  const three = new THREE.Group();
+
+  const trunk = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( 15*zoom, 15*zoom, 20*zoom ), 
+    new THREE.MeshPhongMaterial( { color: 0x4d2926, flatShading: true } )
+  );
+  trunk.position.z = 10*zoom;
+  trunk.castShadow = true;
+  trunk.receiveShadow = true;
+  three.add(trunk);
+
+  height = threeHeights[Math.floor(Math.random()*threeHeights.length)];
+
+  const crown = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( 30*zoom, 30*zoom, height*zoom ), 
+    new THREE.MeshLambertMaterial( { color: 0x7aa21d, flatShading: true } )
+  );
+  crown.position.z = (height/2+20)*zoom;
+  crown.castShadow = true;
+  crown.receiveShadow = false;
+  three.add(crown);
+
+  return three;  
+}
+
+function Chicken() {
+  const chicken = new THREE.Group();
+
+  const body = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( chickenSize*zoom, chickenSize*zoom, 20*zoom ), 
+    new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } )
+  );
+  body.position.z = 10*zoom;
+  body.castShadow = true;
+  body.receiveShadow = true;
+  chicken.add(body);
+
+  const rowel = new THREE.Mesh(
+    new THREE.BoxBufferGeometry( 2*zoom, 4*zoom, 2*zoom ), 
+    new THREE.MeshLambertMaterial( { color: 0xF0619A, flatShading: true } )
+  );
+  rowel.position.z = 21*zoom;
+  rowel.castShadow = true;
+  rowel.receiveShadow = false;
+  chicken.add(rowel);
+
+  return chicken;  
+}
+
+function Road() {
+  const road = new THREE.Group();
+
+  const createSection = color => new THREE.Mesh(
+    new THREE.PlaneBufferGeometry( boardWidth*zoom, positionWidth*zoom ), 
+    new THREE.MeshPhongMaterial( { color } )
+  );
+
+  const middle = createSection(0x454A59);
+  middle.receiveShadow = true;
+  road.add(middle);
+
+  const left = createSection(0x393D49);
+  left.position.x = - boardWidth*zoom;
+  road.add(left);
+
+  const right = createSection(0x393D49);
+  right.position.x = boardWidth*zoom;
+  road.add(right);
+
+  return road;
+}
+
+function Grass() {
+  const grass = new THREE.Group();
+
+  const createSection = color => new THREE.Mesh(
+    new THREE.BoxBufferGeometry( boardWidth*zoom, positionWidth*zoom, 3*zoom ), 
+    new THREE.MeshPhongMaterial( { color } )
+  );
+
+  const middle = createSection(0xbaf455);
+  middle.receiveShadow = true;
+  grass.add(middle);
+
+  const left = createSection(0x99C846);
+  left.position.x = - boardWidth*zoom;
+  grass.add(left);
+
+  const right = createSection(0x99C846);
+  right.position.x = boardWidth*zoom;
+  grass.add(right);
+
+  grass.position.z = 1.5*zoom;
+  return grass;
+}
+
+function Lane(index) {
+  this.index = index;
+  this.type = index <= 0 ? 'field' : laneTypes[Math.floor(Math.random()*laneTypes.length)];
+
+  switch(this.type) {
+    case 'field': {
+      this.type = 'field';
+      this.mesh = new Grass();
+      break;
+    }
+    case 'forest': {
+      this.mesh = new Grass();
+
+      this.occupiedPositions = new Set();
+      this.threes = [1,2,3,4].map(() => {
+        const three = new Three();
+        let position;
+        do {
+          position = Math.floor(Math.random()*columns);
+        }while(this.occupiedPositions.has(position))
+          this.occupiedPositions.add(position);
+        three.position.x = (position*positionWidth+positionWidth/2)*zoom-boardWidth*zoom/2;
+        this.mesh.add( three );
+        return three;
+      })
+      break;
+    }
+    case 'car' : {
+      this.mesh = new Road();
+      this.direction = Math.random() >= 0.5;
+
+      const occupiedPositions = new Set();
+      this.vechicles = [1,2,3].map(() => {
+        const vechicle = new Car();
+        let position;
+        do {
+          position = Math.floor(Math.random()*columns/2);
+        }while(occupiedPositions.has(position))
+          occupiedPositions.add(position);
+        vechicle.position.x = (position*positionWidth*2+positionWidth/2)*zoom-boardWidth*zoom/2;
+        if(!this.direction) vechicle.rotation.z = Math.PI;
+        this.mesh.add( vechicle );
+        return vechicle;
+      })
+
+      this.speed = laneSpeeds[Math.floor(Math.random()*laneSpeeds.length)];
+      break;
+    }
+    case 'truck' : {
+      this.mesh = new Road();
+      this.direction = Math.random() >= 0.5;
+
+      const occupiedPositions = new Set();
+      this.vechicles = [1,2].map(() => {
+        const vechicle = new Truck();
+        let position;
+        do {
+          position = Math.floor(Math.random()*columns/3);
+        }while(occupiedPositions.has(position))
+          occupiedPositions.add(position);
+        vechicle.position.x = (position*positionWidth*3+positionWidth/2)*zoom-boardWidth*zoom/2;
+        if(!this.direction) vechicle.rotation.z = Math.PI;
+        this.mesh.add( vechicle );
+        return vechicle;
+      })
+
+      this.speed = laneSpeeds[Math.floor(Math.random()*laneSpeeds.length)];
+      break;
+    }
+  }
+}
+
+document.querySelector("#retry").addEventListener("click", () => {
+  lanes.forEach(lane => scene.remove( lane.mesh ));
+  initaliseValues();
+  endDOM.style.visibility = 'hidden';
+});
+
+document.getElementById('forward').addEventListener("click", () => move('forward'));
+
+document.getElementById('backward').addEventListener("click", () => move('backward'));
+
+document.getElementById('left').addEventListener("click", () => move('left'));
+
+document.getElementById('right').addEventListener("click", () => move('right'));
+
+window.addEventListener("keydown", event => {
+  if (event.keyCode == '38') {
+    // up arrow
+    move('forward');
+  }
+  else if (event.keyCode == '40') {
+    // down arrow
+    move('backward');
+  }
+  else if (event.keyCode == '37') {
+    // left arrow
+    move('left');
+  }
+  else if (event.keyCode == '39') {
+    // right arrow
+    move('right');
+  }
+});
+
+function move(direction) {
+  const finalPositions = moves.reduce((position,move) => {
+    if(move === 'forward') return {lane: position.lane+1, column: position.column};
+    if(move === 'backward') return {lane: position.lane-1, column: position.column};
+    if(move === 'left') return {lane: position.lane, column: position.column-1};
+    if(move === 'right') return {lane: position.lane, column: position.column+1};
+  }, {lane: currentLane, column: currentColumn})
+
+  if (direction === 'forward') {
+    if(lanes[finalPositions.lane+1].type === 'forest' && lanes[finalPositions.lane+1].occupiedPositions.has(finalPositions.column)) return;
+    if(!stepStartTimestamp) startMoving = true;
+    addLane();
+  }
+  else if (direction === 'backward') {
+    if(finalPositions.lane === 0) return;
+    if(lanes[finalPositions.lane-1].type === 'forest' && lanes[finalPositions.lane-1].occupiedPositions.has(finalPositions.column)) return;
+    if(!stepStartTimestamp) startMoving = true;
+  }
+  else if (direction === 'left') {
+    if(finalPositions.column === 0) return;
+    if(lanes[finalPositions.lane].type === 'forest' && lanes[finalPositions.lane].occupiedPositions.has(finalPositions.column-1)) return;
+    if(!stepStartTimestamp) startMoving = true;
+  }
+  else if (direction === 'right') {
+    if(finalPositions.column === columns - 1 ) return;
+    if(lanes[finalPositions.lane].type === 'forest' && lanes[finalPositions.lane].occupiedPositions.has(finalPositions.column+1)) return;
+    if(!stepStartTimestamp) startMoving = true;
+  }
+  moves.push(direction);
+}
+
+function animate(timestamp) {
+  requestAnimationFrame( animate );
+
+  if(!previousTimestamp) previousTimestamp = timestamp;
+  const delta = timestamp - previousTimestamp;
+  previousTimestamp = timestamp;
+
+  // Animate cars and trucks moving on the lane
+  lanes.forEach(lane => {
+    if(lane.type === 'car' || lane.type === 'truck') {
+      const aBitBeforeTheBeginingOfLane = -boardWidth*zoom/2 - positionWidth*2*zoom;
+      const aBitAfterTheEndOFLane = boardWidth*zoom/2 + positionWidth*2*zoom;
+      lane.vechicles.forEach(vechicle => {
+        if(lane.direction) {
+          vechicle.position.x = vechicle.position.x < aBitBeforeTheBeginingOfLane ? aBitAfterTheEndOFLane : vechicle.position.x -= lane.speed/16*delta;
+        }else{
+          vechicle.position.x = vechicle.position.x > aBitAfterTheEndOFLane ? aBitBeforeTheBeginingOfLane : vechicle.position.x += lane.speed/16*delta;
+        }
+      });
+    }
+  });
+
+  if(startMoving) {
+    stepStartTimestamp = timestamp;
+    startMoving = false;
+  }
+
+  if(stepStartTimestamp) {
+    const moveDeltaTime = timestamp - stepStartTimestamp;
+    const moveDeltaDistance = Math.min(moveDeltaTime/stepTime,1)*positionWidth*zoom;
+    const jumpDeltaDistance = Math.sin(Math.min(moveDeltaTime/stepTime,1)*Math.PI)*8*zoom;
+    switch(moves[0]) {
+      case 'forward': {
+        const positionY = currentLane*positionWidth*zoom + moveDeltaDistance;
+        camera.position.y = initialCameraPositionY + positionY; 
+        dirLight.position.y = initialDirLightPositionY + positionY; 
+        chicken.position.y = positionY; // initial chicken position is 0
+
+        chicken.position.z = jumpDeltaDistance;
+        break;
+      }
+      case 'backward': {
+        positionY = currentLane*positionWidth*zoom - moveDeltaDistance
+        camera.position.y = initialCameraPositionY + positionY;
+        dirLight.position.y = initialDirLightPositionY + positionY; 
+        chicken.position.y = positionY;
+
+        chicken.position.z = jumpDeltaDistance;
+        break;
+      }
+      case 'left': {
+        const positionX = (currentColumn*positionWidth+positionWidth/2)*zoom -boardWidth*zoom/2 - moveDeltaDistance;
+        camera.position.x = initialCameraPositionX + positionX;     
+        dirLight.position.x = initialDirLightPositionX + positionX; 
+        chicken.position.x = positionX; // initial chicken position is 0
+        chicken.position.z = jumpDeltaDistance;
+        break;
+      }
+      case 'right': {
+        const positionX = (currentColumn*positionWidth+positionWidth/2)*zoom -boardWidth*zoom/2 + moveDeltaDistance;
+        camera.position.x = initialCameraPositionX + positionX;       
+        dirLight.position.x = initialDirLightPositionX + positionX;
+        chicken.position.x = positionX; 
+
+        chicken.position.z = jumpDeltaDistance;
+        break;
+      }
+    }
+    // Once a step has ended
+    if(moveDeltaTime > stepTime) {
+      switch(moves[0]) {
+        case 'forward': {
+          currentLane++;
+          counterDOM.innerHTML = currentLane;    
+          break;
+        }
+        case 'backward': {
+          currentLane--;
+          counterDOM.innerHTML = currentLane;    
+          break;
+        }
+        case 'left': {
+          currentColumn--;
+          break;
+        }
+        case 'right': {
+          currentColumn++;
+          break;
+        }
+      }
+      moves.shift();
+      // If more steps are to be taken then restart counter otherwise stop stepping
+      stepStartTimestamp = moves.length === 0 ? null : timestamp;
+    }
+  }
+
+  // Hit test
+  if(lanes[currentLane].type === 'car' || lanes[currentLane].type === 'truck') {
+    const chickenMinX = chicken.position.x - chickenSize*zoom/2;
+    const chickenMaxX = chicken.position.x + chickenSize*zoom/2;
+    const vechicleLength = { car: 60, truck: 105}[lanes[currentLane].type]; 
+    lanes[currentLane].vechicles.forEach(vechicle => {
+      const carMinX = vechicle.position.x - vechicleLength*zoom/2;
+      const carMaxX = vechicle.position.x + vechicleLength*zoom/2;
+      if(chickenMaxX > carMinX && chickenMinX < carMaxX) {
+        endDOM.style.visibility = 'visible';
+      }
+    });
+
+  }
+  renderer.render( scene, camera );	
+}
+
+requestAnimationFrame( animate );
\ No newline at end of file
diff --git a/Crossy Road with ThreeJS/style.css b/Crossy Road with ThreeJS/style.css
new file mode 100644
index 000000000..7a49e2938
--- /dev/null
+++ b/Crossy Road with ThreeJS/style.css	
@@ -0,0 +1,61 @@
+/* Copyright (c) 2024 by Hunor Marton Borbely (https://codepen.io/HunorMarton/pen/JwWLJo)
+
+ */
+@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
+
+body {
+  margin: 0;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 2em;
+  color: white;
+}
+button {
+  outline: none;
+  cursor: pointer;
+  border: none;
+  box-shadow: 3px 5px 0px 0px rgba(0,0,0,0.75);
+}
+#counter {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+#end {
+  position: absolute;
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+}
+#end button {
+  background-color: red;
+  padding: 20px 50px 20px 50px;
+  font-family: inherit;
+  font-size: inherit;
+}
+#controlls {
+  position: absolute;
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+#controlls div {
+  display: grid;
+  grid-template-columns: 50px 50px 50px;
+  grid-template-rows: auto auto;
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  margin-bottom: 20px;
+}
+#controlls button {
+  width: 100%;
+  background-color: white;
+  border: 1px solid lightgray;
+}
+#controlls button:first-of-type {
+  grid-column: 1/-1;
+}
\ No newline at end of file
diff --git a/CurrencyConverter/index.html b/CurrencyConverter/index.html
new file mode 100644
index 000000000..2517ffa4c
--- /dev/null
+++ b/CurrencyConverter/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Currency Converter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Currency <br>Converter💸</h1>
+
+    <div class="container">
+        <div class="converter">
+            <input type="number" id="amount" placeholder="Amount" />
+            <select id="fromCurrency"></select>
+            <select id="toCurrency"></select>
+            <button id="convertBtn">Convert</button>
+            <button id="swapBtn">Swap</button>
+        </div>
+        <div class="result">
+            <h2>Converted Amount</h2>
+            <p id="resultDisplay"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/CurrencyConverter/script.js b/CurrencyConverter/script.js
new file mode 100644
index 000000000..c619d30e1
--- /dev/null
+++ b/CurrencyConverter/script.js
@@ -0,0 +1,77 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const amountInput = document.getElementById('amount');
+    const fromCurrencySelect = document.getElementById('fromCurrency');
+    const toCurrencySelect = document.getElementById('toCurrency');
+    const convertBtn = document.getElementById('convertBtn');
+    const swapBtn = document.getElementById('swapBtn');
+    const resultDisplay = document.getElementById('resultDisplay');
+
+    const apiKey = 'YOUR_API_KEY'; // Replace with your API key
+    const apiUrl = `https://api.exchangerate-api.com/v4/latest/USD`; // You can change the base currency
+
+    // Fetch currency data
+    async function fetchCurrencyData() {
+        try {
+            const response = await fetch(apiUrl);
+            const data = await response.json();
+            populateCurrencyDropdowns(data.rates);
+        } catch (error) {
+            console.error('Error fetching currency data:', error);
+        }
+    }
+
+    // Populate dropdowns with currency options
+    function populateCurrencyDropdowns(rates) {
+        const currencyCodes = Object.keys(rates);
+        currencyCodes.forEach(code => {
+            const option1 = document.createElement('option');
+            option1.value = code;
+            option1.textContent = code;
+            fromCurrencySelect.appendChild(option1);
+
+            const option2 = document.createElement('option');
+            option2.value = code;
+            option2.textContent = code;
+            toCurrencySelect.appendChild(option2);
+        });
+    }
+
+    // Convert currency
+    async function convertCurrency() {
+        const amount = parseFloat(amountInput.value);
+        const fromCurrency = fromCurrencySelect.value;
+        const toCurrency = toCurrencySelect.value;
+
+        if (isNaN(amount)) {
+            resultDisplay.textContent = 'Please enter a valid amount.';
+            resultDisplay.classList.remove('show'); // Hide result if input is invalid
+            return;
+        }
+
+        try {
+            const response = await fetch(apiUrl);
+            const data = await response.json();
+            const rate = data.rates[toCurrency] / data.rates[fromCurrency];
+            const convertedAmount = (amount * rate).toFixed(2);
+            resultDisplay.textContent = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
+            resultDisplay.classList.add('show'); // Show result with effect
+        } catch (error) {
+            console.error('Error during conversion:', error);
+            resultDisplay.textContent = 'Error fetching conversion rate.';
+            resultDisplay.classList.remove('show'); // Hide result on error
+        }
+    }
+
+    // Swap currencies
+    function swapCurrencies() {
+        const temp = fromCurrencySelect.value;
+        fromCurrencySelect.value = toCurrencySelect.value;
+        toCurrencySelect.value = temp;
+    }
+
+    convertBtn.addEventListener('click', convertCurrency);
+    swapBtn.addEventListener('click', swapCurrencies);
+
+    // Initial fetch of currency data
+    fetchCurrencyData();
+});
\ No newline at end of file
diff --git a/CurrencyConverter/style.css b/CurrencyConverter/style.css
new file mode 100644
index 000000000..d59df46dc
--- /dev/null
+++ b/CurrencyConverter/style.css
@@ -0,0 +1,88 @@
+body {
+    font-family:'Courier New', Courier, monospace;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+h1
+{
+    display: flex;
+    font-size: 50px;
+    margin-bottom: 400px;
+    margin-left: 200px;
+}
+
+.container {
+    text-align: center;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    padding: 70px;
+    width: 300px;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.container:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+}
+
+input
+{
+    width: 260px;
+    padding: 20px;
+    margin: 10px 0;
+    background-color: rgb(241, 239, 239);
+    border: none;
+    
+}
+ select, button {
+    width: 300px;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+input:focus, select:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+    outline: none;
+}
+
+button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+}
+
+.result {
+    margin-top: 20px;
+    transition: opacity 0.3s;
+}
+
+.result h2 {
+    margin: 0;
+}
+
+.result p {
+    font-size: 1.2em;
+    font-weight: bold;
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.result p.show {
+    opacity: 1;
+}
diff --git a/Custom Emoji Creator/index.html b/Custom Emoji Creator/index.html
new file mode 100644
index 000000000..d212b2845
--- /dev/null
+++ b/Custom Emoji Creator/index.html	
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Gerador de Emoji</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+</head>
+
+<body>
+    <div class="main-content">
+        <div class="emoji-name"></div>
+        <div class="emoji-preview">
+            <div class="emoji__wrapper">
+                <div class="emoji-face">
+                    <div class="hat no-hat"></div>
+                    <div class="eyebrows">
+                        <div class="eyebrow left no-eyebrows"></div>
+                        <div class="eyebrow right no-eyebrows"></div>
+                    </div>
+                    <div class="eyes">
+                        <div class="eye left default"></div>
+                        <div class="eye right default"></div>
+                    </div>
+                    <div class="mouth default"></div>
+                    <div class="face-extras"></div>
+                    <div class="item default"></div>
+                </div>
+            </div>
+        </div>
+        <div class="emoji-choices">
+            <div class="emoji-choices__header">Cor da carinha</div>
+            <div class="emoji-choices__group emoji-choices__group--skin">
+                <div class="emoji-choice__skin selected js-choice selected" data-type="skin" data-multiple="no"
+                    data-name="skin-1"></div>
+                <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-2"></div>
+                <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-3"></div>
+                <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-4"></div>
+                <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-5"></div>
+                <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-6"></div>
+            </div>
+            <div class="emoji-choices__header">Olhos</div>
+            <div class="emoji-choices__group">
+                <div class="emoji-choice__item js-choice selected" data-type="eyes" data-multiple="no"
+                    data-name="default"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="startled">
+                </div>
+                <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="heart"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="star"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="fire"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="squeeze"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="closed-up"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="closed-down"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="lined"></div>
+            </div>
+            <div class="emoji-choices__header">Boca</div>
+            <div class="emoji-choices__group">
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="no-mouth"></div>
+                <div class="emoji-choice__item js-choice selected" data-type="mouth" data-multiple="no"
+                    data-name="default"></div>
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="upside"></div>
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="open"></div>
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="tongue"></div>
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="lined"></div>
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="frown"></div>
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="smile"></div>
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="curse"></div>
+                <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="grimace"></div>
+            </div>
+            <div class="emoji-choices__header">Sobrancelhas</div>
+            <div class="emoji-choices__group">
+                <div class="emoji-choice__item js-choice selected" data-type="eyebrows" data-multiple="no"
+                    data-name="no-eyebrows"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="downwards"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="furrow"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="furrow-far"></div>
+                <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="up-far"></div>
+            </div>
+            <div class="emoji-choices__header">Chapéus</div>
+            <div class="emoji-choices__group">
+                <div class="emoji-choice__item js-choice selected" data-type="hat" data-multiple="no"
+                    data-name="no-hat"></div>
+                <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="round-hat"></div>
+                <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="wizard-hat"></div>
+                <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="sorting-hat"></div>
+                <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="top-hat"></div>
+                <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="traffic-cone"></div>
+                <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="cactus"></div>
+                <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="mickey"></div>
+            </div>
+            <div class="emoji-choices__header">
+                Extras <small>(pode escolher vários)</small></div>
+            <div class="emoji-choices__group">
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes"
+                    data-name="sweat"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="tears"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="geek-glasses"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="sunglasses"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="crescent-glasses"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="blush"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="bandage"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-gryf"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-huff"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-rave"></div>
+                <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-slyt"></div>
+            </div>
+            <div class="emoji-choices__header">item</div>
+            <div class="emoji-choices__group">
+                <div class="emoji-choice__item js-choice selected" data-type="item" data-multiple="no" data-name="default"></div>
+                <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="shield"></div>
+                <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="dango"></div>
+                <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="wand"></div>
+                <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="coffee"></div>
+
+            </div>
+            <div class="emoji-choice__item-custom" data-type="item" data-multiple="no" data-name="custom">
+                <span>Digite uma frase aqui:</span>
+                <br>
+                <input class="js-custom-item" maxlength="10" />
+            </div>
+
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
+        integridade="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"> </script>
+    <script src='main.js'></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Custom Emoji Creator/main.css b/Custom Emoji Creator/main.css
new file mode 100644
index 000000000..dd9725782
--- /dev/null
+++ b/Custom Emoji Creator/main.css	
@@ -0,0 +1,1186 @@
+body {
+    font-family: "Lucida sans", sans-serif;
+    background: #f3f3f3;
+}
+.main-content {
+    margin: auto auto;
+    background: #f3f3f3;
+    border-radius: 10px;
+    overflow: hidden;
+}
+.main-content *:before, .main-content *:after {
+    content: "";
+    position: absolute;
+}
+
+.emoji-preview {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #f3f3f3;
+    margin-bottom: 80px;
+    margin-top: 70px;
+}
+
+.emoji-face {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background: #fcc21b;
+    margin: auto;
+    position: relative;
+    display: inline-block;
+    font-size: 5px;
+}
+.emoji-face.skin-1 {
+    background: #fcc21b;
+}
+.emoji-face.skin-2 {
+    background: #ffd2b1;
+}
+.emoji-face.skin-3 {
+    background: #daae91;
+}
+.emoji-face.skin-4 {
+    background: #dca86e;
+}
+.emoji-face.skin-5 {
+    background: #8b4a22;
+}
+.emoji-face.skin-6 {
+    background: #452308;
+}
+.eyes {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    width: 100%;
+}
+.eyes .eye {
+    position: absolute;
+    border-radius: 50%;
+    background: #111;
+    top: 0;
+}
+.eyes .eye.left {
+    left: 50%;
+    margin-left: -40px;
+}
+.eyes .eye.right {
+    right: 50%;
+    margin-right: -40px;
+}
+.eyes .eye.default {
+    width: 25px;
+    height: 30px;
+}
+.eyes .eye.startled {
+    width: 40px;
+    height: 40px;
+    background: #fff;
+    top: -5px;
+}
+.eyes .eye.startled.left {
+    margin-left: -45px;
+}
+.eyes .eye.startled.right {
+    margin-right: -48px;
+}
+.eyes .eye.startled:before {
+    content: "";
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    background: #111;
+    border-radius: 50%;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 25%;
+}
+.eyes .eye.heart, .eyes .eye.star, .eyes .eye.fire, .eyes .eye.squeeze {
+    background: transparent;
+}
+.eyes .eye.heart:before, .eyes .eye.star:before, .eyes .eye.fire:before, .eyes .eye.squeeze:before {
+    content: "\2764";
+    color: #e10c0c;
+    font-size: 50px;
+    top: 0;
+}
+.eyes .eye.heart.left {
+    margin-left: -55px;
+    transform: rotate(-15deg);
+}
+.eyes .eye.heart.right {
+    margin-right: -10px;
+    transform: rotate(15deg);
+    margin-top: -12px;
+}
+.eyes .eye.star {
+    margin-top: -15px;
+}
+.eyes .eye.star:before {
+    content: "\2605";
+    font-size: 60px;
+}
+.eyes .eye.star.left {
+    margin-left: -50px;
+}
+.eyes .eye.star.right {
+    margin-right: -2px;
+}
+.eyes .eye.fire:before {
+    content: "\1F525";
+    font-size: 45px;
+}
+.eyes .eye.fire.left {
+    transform: rotate(-15deg) scaleX(-1);
+    margin-left: -8px;
+    margin-top: -20px;
+}
+.eyes .eye.fire.right {
+    transform: rotate(15deg);
+    margin-top: -20px;
+    margin-right: -10px;
+}
+.eyes .eye.squeeze:before {
+    content: ">";
+    color: #111;
+    font-size: 60px;
+    margin-top: -10px;
+    font-weight: 700;
+}
+.eyes .eye.squeeze.right {
+    transform: scaleX(-1);
+}
+.eyes .eye.closed-up, .eyes .eye.closed-down {
+    background: transparent;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    transform: rotate(-135deg);
+    top: 20px;
+}
+.eyes .eye.closed-down {
+    transform: rotate(45deg);
+    top: -8px;
+}
+.eyes .eye.lined {
+    width: 30px;
+    height: 6px;
+    top: 20px;
+    border-radius: 6px;
+}
+.mouth {
+    height: 25%;
+    width: 58%;
+    background: #111;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+    bottom: 14%;
+    z-index: 4;
+}
+.mouth.default, .mouth.upside, .mouth.open, .mouth.tongue {
+    overflow: hidden;
+    border: 3px solid #111;
+    border-radius: 0 0 250px 250px;
+}
+.mouth.default:before, .mouth.upside:before, .mouth.open:before, .mouth.tongue:before {
+    height: 10px;
+    width: 100%;
+    background: #fff;
+    top: 0;
+    left: 0;
+}
+.mouth.upside {
+    width: 45%;
+    border-radius: 250px 250px 120px 120px;
+}
+
+.mouth.lined {
+    height: 10px;
+    width: 30%;
+    border-radius: 20px;
+    bottom: 25%;
+}
+.mouth.open {
+    border-radius: 40px;
+    width: 20%;
+    height: 20%;
+}
+.mouth.tongue {
+    overflow: visible;
+}
+.mouth.tongue:before {
+    background: #f55020;
+    height: 52px;
+    width: 45%;
+    margin: auto;
+    left: 0;
+    right: 0;
+    border-radius: 0 0 20px 20px;
+}
+.mouth.tongue:after {
+    background: #e13b08;
+    width: 6px;
+    height: 80%;
+    border-radius: 6px;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin-top: 5px;
+}
+.mouth.frown, .mouth.smile {
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    border-radius: 50%;
+    transform: rotate(-135deg);
+}
+.mouth.smile {
+    transform: rotate(45deg);
+    margin-bottom: 20px;
+}
+.mouth.curse:before {
+    content: "#@%!";
+    color: #fff;
+    font-size: 20px;
+    padding: 8px 10px;
+    letter-spacing: 3px;
+    font-weight: 700;
+}
+.mouth.grimace {
+    border-radius: 40px;
+    background: #fff;
+    height: 30px;
+    bottom: 30px;
+    border: 2px solid;
+    background-image: linear-gradient(to bottom, transparent 14px, #111 14px, #111 16px, transparent 16px), repeating-linear-gradient(to right, transparent, transparent 14px, #111 14px, #111 16px, transparent 16px);
+}
+.mouth.no-mouth {
+    background: transparent;
+}
+.hat {
+    position: absolute;
+    z-index: 8;
+}
+.hat.round-hat, .hat.wizard-hat, .hat.sorting-hat {
+    width: 180px;
+    height: 30px;
+    border-radius: 50%;
+    background: #ffaec9;
+    top: 0px;
+    left: -15px;
+}
+
+.hat.round-hat:before, .hat.wizard-hat:before, .hat.sorting-hat:before {
+    width: 70%;
+    height: 50px;
+    border-radius: 180px 180px 60px 60px;
+    background: #ffaec9;
+    border-bottom: 10px solid #f55020;
+    right: 30px;
+    top: -40px;
+}
+.hat.wizard-hat, .hat.sorting-hat {
+    background: #444;
+}
+.hat.wizard-hat:before, .hat.sorting-hat:before {
+    background: #444;
+    border-bottom-color: #000;
+}
+.hat.wizard-hat:after, .hat.sorting-hat:after {
+    width: 0;
+    height: 0;
+    margin-top: -110px;
+    margin-left: 25px;
+    border-left: 70px solid transparent;
+    border-right: 53px solid transparent;
+    border-bottom: 100px solid #444;
+    border-radius: 20px;
+}
+.hat.sorting-hat {
+    background: #400000;
+}
+.hat.sorting-hat:before {
+    content: ":|";
+    color: #c27814;
+    padding: 36px 20px;
+    border-bottom: 0;
+    width: 10px;
+    font-size: 40px;
+    top: -75px;
+    right: 63px;
+    background: #400000;
+    border-radius: 180px 60px 60px 180px;
+    border-right: 10px solid #c27814;
+    transform: rotate(90deg);
+    z-index: 1;
+}
+.hat.sorting-hat:after {
+    border-bottom: 100px solid #400000;
+}
+.hat.top-hat {
+    width: 80%;
+    height: 15px;
+    margin: auto;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    top: -110px;
+    border-radius: 6px;
+    background: #006daf;
+}
+.hat.top-hat:before {
+    width: 80%;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 80px;
+    border-radius: 10px 10px 0 0;
+    margin-top: -80px;
+    background: linear-gradient(to bottom, #006daf 0%, #006daf 80%, #0061a0 80%);
+}
+.hat.traffic-cone {
+    width: 70%;
+    height: 100px;
+    margin: auto;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    top: -222px;
+    background: linear-gradient(to right, transparent 40%, #f79003 40%, #f79003 60%, transparent 60%);
+    border-bottom: 15px solid #f79003;
+}
+.hat.traffic-cone:before {
+    bottom: -12px;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-image: linear-gradient(100deg, transparent 20%, #f79003 20%, #f79003 50%, transparent 50%), linear-gradient(260deg, transparent 20%, #f79003 20%, #f79003 50%, transparent 50%);
+    width: 70%;
+    height: 112px;
+}
+.hat.traffic-cone:after {
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-bottom: 40px solid #fff;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    margin-top: 35px;
+    height: 0;
+    width: 47%;
+}
+.hat.cactus {
+    width: 80%;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    top: -120px;
+    height: 15px;
+    border-radius: 8px;
+    background: #c27814;
+}
+.hat.cactus:before {
+    width: 40%;
+    background: linear-gradient(to top right, #8cbd18, #419e0b);
+    height: 100px;
+    border-radius: 100px 100px 0 0;
+    top: -99px;
+    right: 22px;
+}
+.hat.cactus:after {
+    width: 35%;
+    background: linear-gradient(to top right, #8cbd18, #c2f056);
+    height: 75px;
+    border-radius: 80px 80px 0 0;
+    top: -74px;
+    left: 20px;
+}
+.hat.mickey {
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 95%;
+    height: 80px;
+    top: -70px;
+    background: transparent;
+    border-top: 30px solid #111;
+    border-radius: 150px 150px 0 0;
+}
+.hat.mickey:before, .hat.mickey:after {
+    width: 80px;
+    height: 70px;
+    top: -75px;
+    left: -20px;
+    background: #111;
+    border-radius: 50%;
+}
+.hat.mickey:before {
+    transform: rotate(-25deg);
+}
+.hat.mickey:after {
+    transform: rotate(25deg);
+    right: -20px;
+    left: auto;
+}
+.eyebrow {
+    position: absolute;
+    top: 15px;
+    display: inline-block;
+}
+.eyebrow:before {
+    content: "(";
+    color: #d58c00;
+    font: 700 30px "Lucida sans", sans-serif;
+    text-shadow: 2px 0 0 #d58c00;
+    transform: rotate(90deg);
+    left: 0;
+}
+.eyebrow.left {
+    left: 42px;
+}
+.eyebrow.right {
+    right: 50px;
+}
+.eyebrow.downwards:before, .eyebrow.furrow:before, .eyebrow.furrow-far:before {
+    transform: rotate(270deg);
+}
+.eyebrow.furrow.left {
+    transform: rotate(40deg);
+    left: 60px;
+}
+.eyebrow.furrow.right {
+    transform: rotate(-40deg) scaleX(-1);
+    right: 62px;
+}
+.eyebrow.up-far {
+    top: 20px;
+}
+.eyebrow.up-far.left {
+    transform: rotate(-40deg);
+    left: 20px;
+}
+.eyebrow.up-far.right {
+    transform: rotate(40deg) scaleX(-1);
+    right: 18px;
+}
+.eyebrow.furrow-far {
+    top: 25px;
+}
+.eyebrow.furrow-far.left {
+    transform: rotate(-35deg);
+    left: 20px;
+}
+.eyebrow.furrow-far.right {
+    transform: rotate(35deg) scaleX(-1);
+    right: 17px;
+}
+.eyebrow.no-eyebrows:before {
+    content: none;
+}
+.face-extras {
+    position: absolute;
+}
+.face-extras.sweat {
+    width: 35px;
+    height: 35px;
+    border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
+    background: #006daf;
+    transform: rotate(-45deg);
+    top: 20px;
+    right: -5px;
+}
+.face-extras.tears {
+    width: 30px;
+    height: 30px;
+    border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
+    background: #006daf;
+    top: 70px;
+    left: 5px;
+}
+.face-extras.tears:before {
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    background: #006daf;
+    transform: scaleX(-1);
+    margin-left: 110px;
+}
+.face-extras.geek-glasses {
+    width: 100%;
+    top: 50px;
+    height: 5px;
+    background: linear-gradient(to right, #111 15%, transparent 15%, transparent 85%, #111 85%);
+}
+.face-extras.geek-glasses:before, .face-extras.geek-glasses:after {
+    margin-top: -25px;
+    width: 50px;
+    height: 50px;
+    border: 3px solid #111;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.15);
+}
+.face-extras.geek-glasses:before {
+    left: 20px;
+}
+.face-extras.geek-glasses:after {
+    right: 20px;
+}
+.face-extras.sunglasses {
+    width: 95%;
+    height: 6px;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    top: -65px;
+    background: #111;
+}
+.face-extras.sunglasses:before, .face-extras.sunglasses:after {
+    background: inherit;
+    width: 70px;
+    height: 35px;
+    border-radius: 5px 5px 150px 150px;
+}
+.face-extras.sunglasses:before {
+    left: 5px;
+}
+.face-extras.sunglasses:after {
+    right: 5px;
+}
+.face-extras.crescent-glasses {
+    z-index: 4;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 3.5px;
+    width: 98%;
+    top: -25px;
+    background: linear-gradient(to right, #d4af37 20px, transparent 20px, transparent 60px, #d4af37 60px, #d4af37 80px, transparent 80px, transparent 130px, #d4af37 130px);
+}
+.face-extras.crescent-glasses:before, .face-extras.crescent-glasses:after {
+    width: 50px;
+    height: 24px;
+    border-radius: 4px 4px 50px 50px;
+    border: 2.5px solid #d4af37;
+    background: rgba(179, 219, 242, 0.9);
+    top: -8px;
+}
+.face-extras.crescent-glasses:before {
+    left: 15px;
+}
+.face-extras.crescent-glasses:after {
+    right: 15px;
+}
+.face-extras.blush {
+    width: 100%;
+}
+.face-extras.blush:before, .face-extras.blush:after {
+    width: 35px;
+    height: 35px;
+    background: rgba(245, 80, 32, 0.4);
+    border-radius: 50%;
+    top: 65px;
+}
+.face-extras.blush:before {
+    left: 10px;
+}
+.face-extras.blush:after {
+    right: 10px;
+}
+.face-extras.bandage {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    transform: rotate(-30deg);
+    background: linear-gradient(to bottom, #fff 20%, #ddd 20%, #ddd 30%, transparent 30%);
+}
+.face-extras.scarf-gryf, .face-extras.scarf-huff, .face-extras.scarf-rave, .face-extras.scarf-slyt {
+    z-index: 10;
+    width: 40px;
+    height: 60px;
+    background: linear-gradient(#006400 30%, #006400 80%, transparent 80%), repeating-linear-gradient(to right, #006400, #006400 4px, transparent 4px, transparent 7px);
+    transform: rotate(14deg);
+    bottom: -60px;
+    right: 30px;
+}
+.face-extras.scarf-gryf:before, .face-extras.scarf-huff:before, .face-extras.scarf-rave:before, .face-extras.scarf-slyt:before {
+    width: 40px;
+    height: 80px;
+    background: linear-gradient(#006400 0%, #008000 40%, #ccc 40%, #ccc 45%, #008000 45%, #008000 55%, #ccc 55%, #ccc 60%, #008000 60%, #008000 80%, transparent 80%), repeating-linear-gradient(to right, #008000, #008000 4px, transparent 4px, transparent 7px);
+    transform: rotate(-45deg);
+    top: -20px;
+    right: -20px;
+}
+.face-extras.scarf-gryf:after, .face-extras.scarf-huff:after, .face-extras.scarf-rave:after, .face-extras.scarf-slyt:after {
+    width: 132px;
+    height: 40px;
+    background: repeating-linear-gradient(to right, #008000 16px, #ccc 16px, #ccc 20px, #008000 20px, #008000 28px, #ccc 28px, #ccc 32px, #008000 32px, #008000 60px);
+    transform: rotate(-14deg);
+    top: -30px;
+    left: -80px;
+    border-radius: 10px;
+    border-bottom-left-radius: 40px 100px;
+    border-bottom-right-radius: 40px 100px;
+}
+.face-extras.scarf-gryf {
+    background: linear-gradient(#982730 30%, #982730 80%, transparent 80%), repeating-linear-gradient(to right, #982730, #982730 4px, transparent 4px, transparent 7px);
+}
+.face-extras.scarf-gryf:before {
+    background: linear-gradient(#982730 0%, #ad343e 40%, #ffbf00 40%, #ffbf00 45%, #ad343e 45%, #ad343e 55%, #ffbf00 55%, #ffbf00 60%, #ad343e 60%, #ad343e 80%, transparent 80%), repeating-linear-gradient(to right, #ad343e, #ad343e 4px, transparent 4px, transparent 7px);
+}
+.face-extras.scarf-gryf:after {
+    background: repeating-linear-gradient(to right, #ad343e 16px, #ffbf00 16px, #ffbf00 20px, #ad343e 20px, #ad343e 28px, #ffbf00 28px, #ffbf00 32px, #ad343e 32px, #ad343e 60px);
+}
+.face-extras.scarf-huff {
+    background: linear-gradient(#ce9c04 30%, #ce9c04 80%, transparent 80%), repeating-linear-gradient(to right, #ce9c04, #ce9c04 4px, transparent 4px, transparent 7px);
+}
+.face-extras.scarf-huff:before {
+    background: linear-gradient(#ce9c04 0%, #eab000 40%, #111 40%, #111 45%, #eab000 45%, #eab000 55%, #111 55%, #111 60%, #eab000 60%, #eab000 80%, transparent 80%), repeating-linear-gradient(to right, #eab000, #eab000 4px, transparent 4px, transparent 7px);
+}
+.face-extras.scarf-huff:after {
+    background: repeating-linear-gradient(to right, #eab000 16px, #111 16px, #111 20px, #eab000 20px, #eab000 28px, #111 28px, #111 32px, #eab000 32px, #eab000 60px);
+}
+.face-extras.scarf-rave {
+    background: linear-gradient(#0061a0 30%, #0061a0 80%, transparent 80%), repeating-linear-gradient(to right, #0061a0, #0061a0 4px, transparent 4px, transparent 7px);
+}
+.face-extras.scarf-rave:before {
+    background: linear-gradient(#0061a0 0%, #006daf 40%, #c0d8e0 40%, #c0d8e0 45%, #006daf 45%, #006daf 55%, #c0d8e0 55%, #c0d8e0 60%, #006daf 60%, #006daf 80%, transparent 80%), repeating-linear-gradient(to right, #006daf, #006daf 4px, transparent 4px, transparent 7px);
+}
+.face-extras.scarf-rave:after {
+    background: repeating-linear-gradient(to right, #006daf 16px, #c0d8e0 16px, #c0d8e0 20px, #006daf 20px, #006daf 28px, #c0d8e0 28px, #c0d8e0 32px, #006daf 32px, #006daf 60px);
+}
+.item {
+    position: absolute;
+    z-index: 20;
+}
+.item.custom {
+    font-size: 6em;
+    bottom: -15px;
+    right: -20px;
+}
+.item.coffee {
+    right: -20px;
+    border-top: 75px solid #fff;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    height: 0;
+    width: 40px;
+    bottom: -20px;
+}
+.item.coffee:before {
+    margin: -55px 0 0 -9px;
+    border-top: 30px solid #c27814;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    height: 0;
+    width: calc(100% + 8px);
+}
+.item.coffee:after {
+    background: #333;
+    width: 70px;
+    height: 20px;
+    margin: -90px 0 0 -15px;
+    border-radius: 10px 10px 3px 3px;
+    background: linear-gradient(to bottom, transparent 8px, #555 8px), linear-gradient(to right, transparent 10%, #666 10%, #666 90%, transparent 90%);
+}
+.item.shield {
+    right: -25px;
+    bottom: -10px;
+    width: 90px;
+    height: 90px;
+    background: radial-gradient(ellipse at center, #f55020 20%, #f55020 20%, #f55020 38%, #eee 38%, #eee 55%, #f55020 55%);
+    border-radius: 50%;
+}
+.item.shield:before {
+    content: "\2605";
+    color: #fff;
+    font-size: 30px;
+    border-radius: 50%;
+    background: #0061a0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin-top: 30px;
+}
+.item.dango {
+    background: #c27814;
+    width: 5px;
+    height: 125px;
+    border-radius: 6px;
+    right: -25px;
+    bottom: 0;
+}
+.item.dango:before {
+    top: 60px;
+    left: -13px;
+    background: #8cbd18;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+}
+.item.wand {
+    top: 0;
+    right: -20px;
+    background: #d58c00;
+    width: 8px;
+    height: 80px;
+    border-radius: 50% 20px 0 0;
+}
+.item.wand:before {
+    background: #c27814;
+    width: 12px;
+    height: 50px;
+    left: -2px;
+    top: 70px;
+    z-index: 0;
+    border-radius: 4px 4px 0 0;
+}
+.item.wand:after {
+    width: 22px;
+    height: 50px;
+    border-radius: 10px 50px 10px 14px;
+    background: linear-gradient(to bottom, #400000 20%, transparent 20%, transparent 60%, #400000 60%), linear-gradient(to right, transparent 15%, #400000 15%, #400000 90%, transparent 90%);
+    top: 100px;
+    left: -6px;
+}
+.emoji-choices {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100%);
+    margin: 0 5px 0 0;
+}
+.emoji-choices__header {
+    background: linear-gradient(to right, rgba(53, 206, 160, 0.4), #f7f7f7);
+    padding: 15px;
+    border-left: 5px solid #35c4ce;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+.emoji-choices__header small {
+    font-size: 70%;
+    margin-left: 5px;
+}
+.emoji-choices__group {
+    box-sizing: border-box;
+    padding: 10px 0 10px 0;
+    display: grid;
+    grid-row-gap: 8px;
+    grid-column-gap: 14px;
+    grid-template-columns: repeat(3, 75px);
+    justify-content: center;
+}
+.emoji-choice__item {
+    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 75px;
+    background: #ebebeb;
+    background-image: url(spriteEmoji.jpg);
+    border-radius: 4px;
+    cursor: pointer;
+    overflow: hidden;
+    border: 3px solid #ebebeb;
+    font-size: 12px;
+}
+.emoji-choice__item:after {
+    content: "aaa";
+    width: calc(100% - 4px);
+    left: -2px;
+    margin-top: 10px;
+    background: #fff;
+    height: auto;
+    opacity: 0;
+    bottom: -20px;
+    font: 700 10px "Lucida sans", sans-serif;
+    transition: 0.2s ease;
+    text-align: center;
+    padding: 5px 5px 3px;
+    word-wrap: break-all;
+    text-transform: uppercase;
+}
+.emoji-choice__item:hover:after {
+    opacity: 1;
+    bottom: 0;
+}
+.emoji-choices__group--skin {
+    grid-template-columns: repeat(6, 40px);
+    padding: 20px 20px;
+}
+.emoji-choice__skin {
+    width: 35px;
+    height: 35px;
+    background: #fcc21b;
+    border-radius: 50%;
+    border: 3px solid #fff;
+    cursor: pointer;
+}
+.emoji-choice__skin[data-name="skin-2"] {
+    background: #ffd2b1;
+}
+.emoji-choice__skin[data-name="skin-3"] {
+    background: #daae91;
+}
+.emoji-choice__skin[data-name="skin-4"] {
+    background: #dca86e;
+}
+.emoji-choice__skin[data-name="skin-5"] {
+    background: #8b4a22;
+}
+.emoji-choice__skin[data-name="skin-6"] {
+    background: #452308;
+}
+.emoji-choice__item[data-type="eyes"]:after {
+    content: "Normal";
+}
+.emoji-choice__item[data-type="eyes"][data-name="startled"] {
+    background-position: -75px 0;
+}
+.emoji-choice__item[data-type="eyes"][data-name="startled"]:after {
+    content: "Assustado";
+}
+.emoji-choice__item[data-type="eyes"][data-name="heart"] {
+    background-position: -150px 0;
+}
+.emoji-choice__item[data-type="eyes"][data-name="heart"]:after {
+    content: "Coração";
+}
+.emoji-choice__item[data-type="eyes"][data-name="star"] {
+    background-position: -225px 0;
+}
+.emoji-choice__item[data-type="eyes"][data-name="star"]:after {
+    content: "Estrela";
+}
+.emoji-choice__item[data-type="eyes"][data-name="fire"] {
+    background-position: -300px 0;
+}
+.emoji-choice__item[data-type="eyes"][data-name="fire"]:after {
+    content: "Fogo";
+}
+.emoji-choice__item[data-type="eyes"][data-name="squeeze"] {
+    background-position: -375px 0;
+}
+.emoji-choice__item[data-type="eyes"][data-name="squeeze"]:after {
+    content: "Oh não";
+}
+.emoji-choice__item[data-type="eyes"][data-name="closed-up"] {
+    background-position: -450px 0;
+}
+.emoji-choice__item[data-type="eyes"][data-name="closed-up"]:after {
+    content: "Alegre";
+}
+.emoji-choice__item[data-type="eyes"][data-name="closed-down"] {
+    background-position: -525px 0;
+}
+.emoji-choice__item[data-type="eyes"][data-name="closed-down"]:after {
+    content: "Contente";
+}
+.emoji-choice__item[data-type="eyes"][data-name="lined"] {
+    background-position: 0 -75px;
+}
+.emoji-choice__item[data-type="eyes"][data-name="lined"]:after {
+    content: "-__-";
+}
+.emoji-choice__item[data-type="mouth"][data-name="default"] {
+    background-position: -75px -75px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="default"]:after {
+    content: "Grande Sorriso";
+}
+.emoji-choice__item[data-type="mouth"][data-name="upside"] {
+    background-position: -150px -75px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="upside"]:after {
+    content: "O que?!";
+}
+.emoji-choice__item[data-type="mouth"][data-name="open"] {
+    background-position: -225px -75px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="open"]:after {
+    content: "Chocado";
+}
+.emoji-choice__item[data-type="mouth"][data-name="tongue"] {
+    background-position: -300px -75px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="tongue"]:after {
+    content: "Atrevido";
+}
+.emoji-choice__item[data-type="mouth"][data-name="lined"] {
+    background-position: -375px -75px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="lined"]:after {
+    content: "Mmm...";
+}
+.emoji-choice__item[data-type="mouth"][data-name="frown"] {
+    background-position: -450px -75px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="frown"]:after {
+    content: "Carranca";
+}
+.emoji-choice__item[data-type="mouth"][data-name="smile"] {
+    background-position: -525px -75px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="smile"]:after {
+    content: "Sorriso";
+}
+.emoji-choice__item[data-type="mouth"][data-name="curse"] {
+    background-position: 0 -150px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="curse"]:after {
+    content: "Wtf m8";
+}
+.emoji-choice__item[data-type="mouth"][data-name="grimace"] {
+    background-position: -75px -150px;
+}
+.emoji-choice__item[data-type="mouth"][data-name="grimace"]:after {
+    content: "Careta";
+}
+.emoji-choice__item[data-type="mouth"][data-name="no-mouth"]:after {
+    content: "Sem boca";
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="no-eyebrows"]:after {
+    content: "Sem sobrancelhas";
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="downwards"] {
+    background-position: -150px -150px;
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="downwards"]:after {
+    content: "Curioso";
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="furrow"] {
+    background-position: -225px -150px;
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="furrow"]:after {
+    content: "Bravo";
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="furrow-far"] {
+    background-position: -300px -150px;
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="furrow-far"]:after {
+    content: "Preocupado";
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="up-far"] {
+    background-position: -375px -150px;
+}
+.emoji-choice__item[data-type="eyebrows"][data-name="up-far"]:after {
+    content: "Feliz";
+}
+.emoji-choice__item[data-type="hat"][data-name="no-hat"]:after {
+    content: "Sem chapéu";
+}
+.emoji-choice__item[data-type="hat"][data-name="round-hat"] {
+    background-position: -450px -150px;
+}
+.emoji-choice__item[data-type="hat"][data-name="round-hat"]:after {
+    content: "Chapéu rosa";
+}
+.emoji-choice__item[data-type="hat"][data-name="wizard-hat"] {
+    background-position: -525px -150px;
+}
+.emoji-choice__item[data-type="hat"][data-name="wizard-hat"]:after {
+    content: "Chapéu de mago";
+}
+.emoji-choice__item[data-type="hat"][data-name="sorting-hat"] {
+    background-position: 0 -225px;
+}
+.emoji-choice__item[data-type="hat"][data-name="sorting-hat"]:after {
+    content: "Chapéu seletor";
+}
+.emoji-choice__item[data-type="hat"][data-name="top-hat"] {
+    background-position: -75px -225px;
+}
+.emoji-choice__item[data-type="hat"][data-name="top-hat"]:after {
+    content: "Cartola";
+}
+.emoji-choice__item[data-type="hat"][data-name="traffic-cone"] {
+    background-position: -150px -225px;
+}
+.emoji-choice__item[data-type="hat"][data-name="traffic-cone"]:after {
+    content: "Cone de tráfego";
+}
+.emoji-choice__item[data-type="hat"][data-name="cactus"] {
+    background-position: -225px -225px;
+}
+.emoji-choice__item[data-type="hat"][data-name="cactus"]:after {
+    content: "Chapéu de cacto";
+}
+.emoji-choice__item[data-type="hat"][data-name="mickey"] {
+    background-position: -300px -225px;
+}
+.emoji-choice__item[data-type="hat"][data-name="mickey"]:after {
+    content: "Chapéu de mickey";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="sweat"] {
+    background-position: -375px -225px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="sweat"]:after {
+    content: "Suor";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="tears"] {
+    background-position: -450px -225px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="tears"]:after {
+    content: "Lágrimas";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="geek-glasses"] {
+    background-position: -525px -225px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="geek-glasses"]:after {
+    content: "Óculos nerds";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="sunglasses"] {
+    background-position: 0 -300px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="sunglasses"]:after {
+    content: "Óculos de sol";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="crescent-glasses"] {
+    background-position: -75px -300px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="crescent-glasses"]:after {
+    content: "Óculos crescentes";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="blush"] {
+    background-position: -150px -300px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="blush"]:after {
+    content: "Blush";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="bandage"] {
+    background-position: -225px -300px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="bandage"]:after {
+    content: "Bandagem";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="scarf-gryf"] {
+    background-position: -300px -300px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="scarf-gryf"]:after {
+    content: "Cachecol Grifinória";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="scarf-huff"] {
+    background-position: -375px -300px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="scarf-huff"]:after {
+    content: "Cachecol da Lufa-Lufa";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="scarf-rave"] {
+    background-position: -450px -300px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="scarf-rave"]:after {
+    content: "Cachecol Corvinal";
+}
+.emoji-choice__item[data-type="face-extras"][data-name="scarf-slyt"] {
+    background-position: -525px -300px;
+}
+.emoji-choice__item[data-type="face-extras"][data-name="scarf-slyt"]:after {
+    content: "Cachecol da Sonserina";
+}
+.emoji-choice__item[data-type="item"][data-name="default"] {
+    background-image: none;
+}
+.emoji-choice__item[data-type="item"][data-name="default"]:after {
+    content: "Sem Item";
+}
+.emoji-choice__item[data-type="item"][data-name="coffee"] {
+    background-position: 0 -375px;
+}
+.emoji-choice__item[data-type="item"][data-name="coffee"]:after {
+    content: "Caffé";
+}
+.emoji-choice__item[data-type="item"][data-name="shield"] {
+    background-position: -75px -375px;
+}
+.emoji-choice__item[data-type="item"][data-name="shield"]:after {
+    content: "Escudo do Capitão América";
+}
+.emoji-choice__item[data-type="item"][data-name="dango"] {
+    background-position: -150px -375px;
+}
+.emoji-choice__item[data-type="item"][data-name="dango"]:after {
+    content: "Dango";
+}
+.emoji-choice__item[data-type="item"][data-name="wand"] {
+    background-position: -225px -375px;
+}
+.emoji-choice__item[data-type="item"][data-name="wand"]:after {
+    content: "Varinha";
+}
+.emoji-choice__item[data-name="no-mouth"], .emoji-choice__item[data-name="no-eyebrows"], .emoji-choice__item[data-name="no-hat"], .emoji-choice__item[data-type="item"][data-name="default"] {
+    background-image: none;
+}
+.emoji-choice__item[data-name="no-mouth"]:before, .emoji-choice__item[data-name="no-eyebrows"]:before, .emoji-choice__item[data-name="no-hat"]:before, .emoji-choice__item[data-type="item"][data-name="default"]:before {
+    content: "\29BB";
+    font-size: 40px;
+    color: #bbb;
+    margin: 15px 18px;
+}
+.emoji-choice__item-custom {
+    background: none;
+    grid-column: span 4;
+    margin: 10px 0;
+    text-transform: uppercase;
+    align-items: center;
+}
+
+.emoji-choice__item-custom input {
+    padding: 8px;
+    border-radius: 4px;
+    border: 2px solid #ebebeb;
+    margin-right: 20px;
+    width: 100%;
+    font-size: 20px;
+}
+.emoji-choice__item-custom input:focus {
+    border-color: #35c4ce;
+    outline: none;
+}
+.selected {
+    border-color: #35c4ce;
+}
+.main-content ::-webkit-scrollbar {
+    width: 10px;
+    border-radius: 10px;
+}
+.main-content ::-webkit-scrollbar-track {
+    background: #f6f6f6;
+    margin: 5px;
+}
+.main-content ::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, #1ca504, #64ea88);
+    border-radius: 10px;
+}
+.main-content ::-webkit-scrollbar-thumb:hover {
+    background: #35c4ce;
+    border-radius: 10px;
+}
diff --git a/Custom Emoji Creator/main.js b/Custom Emoji Creator/main.js
new file mode 100644
index 000000000..afc5c523d
--- /dev/null
+++ b/Custom Emoji Creator/main.js	
@@ -0,0 +1,61 @@
+$(".js-choice").on("click", function() {
+	var type = $(this).data("type");
+	var multiple = $(this).data("multiple");
+	var name = $(this).data("name");
+
+	if (multiple === "no") {
+		if (type === "eyebrows" || type === "eyes") {
+			var typeSingle = type.slice(0, -1);
+			var parentDiv = $("div." + type);
+			parentDiv.empty();
+			var newDiv =
+				'<div class="' +
+				typeSingle +
+				" left " +
+				name +
+				'"></div><div class="' +
+				typeSingle +
+				" right " +
+				name +
+				'"></div>';
+			$(parentDiv).append(newDiv);
+			$('.emoji-choices div[data-type="' + type + '"]').removeClass("selected");
+			$(this).addClass("selected");
+		} else if (type === "item") {
+			$(".item").text("");
+			$(".emoji-face")
+				.find("." + type)
+				.attr("class", type + " " + name);
+			$('.emoji-choices div[data-type="item"]').removeClass("selected");
+			$(this).addClass("selected");
+		} else if (type === "skin") {
+			$(".emoji-face").attr("class", "emoji-face " + " " + name);
+			$('.emoji-choices div[data-type="' + type + '"]').removeClass("selected");
+			$(this).addClass("selected");
+		} else {
+			$(".emoji-face")
+				.find("." + type)
+				.attr("class", type + " " + name);
+			$('.emoji-choices div[data-type="' + type + '"]').removeClass("selected");
+			$(this).addClass("selected");
+		}
+	} else {
+		$(this).toggleClass("selected");
+		var elementToCheck = $("div." + type + "." + name);
+		if (elementToCheck.length > 0) {
+			elementToCheck.remove();
+		} else {
+			var newDiv = '<div class="' + type + " " + name + '"></div>';
+			$(".emoji-face").append(newDiv);
+		}
+	}
+});
+
+$(".js-custom-item").on("keyup paste", function() {
+	var customItem = $(this).val();
+	$('.emoji-choices div[data-type="item"]').removeClass("selected");
+
+	$(".item").remove();
+	var newDiv = '<div class="item custom">' + customItem + "</div>";
+	$(".emoji-face").append(newDiv);
+});
diff --git a/Custom Emoji Creator/spriteEmoji.jpg b/Custom Emoji Creator/spriteEmoji.jpg
new file mode 100644
index 000000000..59ac592a6
Binary files /dev/null and b/Custom Emoji Creator/spriteEmoji.jpg differ
diff --git a/Dice_Rolling_Simulator/README.md b/Dice_Rolling_Simulator/README.md
new file mode 100644
index 000000000..ca77af0d7
--- /dev/null
+++ b/Dice_Rolling_Simulator/README.md
@@ -0,0 +1,65 @@
+### Description
+The dice rolling simulator is a simple application built using Python and the Tkinter library for the graphical user interface (GUI). The simulator mimics the action of rolling a dice, providing a random outcome between 1 and 6 each time the user interacts with the interface. This application is useful for games, educational purposes, or simply for fun.
+
+### Game_Logic
+
+- Initialization: When the program starts, it initializes the main window using Tkinter.
+- Dice Roll: A function generates a random number between 1 and 6 using Python's random module.
+- Display: The result of the dice roll is displayed on the GUI, typically as a number or a graphical representation of a dice face.
+- Interaction: The user can roll the dice by clicking a button on the GUI, which triggers the dice roll function.
+
+### FEATURES
+Random Dice Roll: Uses the random.randint(1, 6) function to generate a number between 1 and 6.
+Graphical Interface: A user-friendly interface built with Tkinter, making it easy to interact with the simulator.
+Roll Button: A button that the user clicks to roll the dice.
+Display Area: Shows the result of the dice roll, either as a numeric value or a visual representation.
+
+### Screenshot![Dice_Rolling_simulator_Game](https://github.com/priyashuu/GameZone/assets/150767072/46569298-3844-4240-a3c3-544fc47c524e)
+### Video 
+
+https://github.com/priyashuu/GameZone/assets/150767072/0d88b796-9125-4bf4-bb58-7178a456ecc8
+
+
+
+
+### Tech Stack Overview
+
+The dice rolling simulator utilizes a combination of technologies and libraries to create a functional and interactive application. Below is a breakdown of the tech stack used:
+
+#### **Programming Language:**
+- **Python**
+
+#### **Graphical User Interface (GUI):**
+- **Tkinter** 
+
+#### **Libraries and Modules:**
+- **Random**
+
+#### **Development Environment:**
+- **IDLE**
+- **VS Code**
+#### **Version Control:**
+- **Git**
+- **GitHub**
+### Example of Tech Stack in Action
+1. **Python**: The logic of the dice roll is implemented in Python using simple functions and conditional statements.
+2. **Tkinter**: Used to create the main window, buttons, and labels that make up the user interface.
+3. **Random Module**: Utilized within the dice roll function to generate a random number between 1 and 6 each time the user clicks the roll button.
+4. **Git and GitHub**: The code is version-controlled using Git and hosted on GitHub, making it easy to share and collaborate with others.
+
+### Installation Instructions
+1. **Install Python**: Download and install Python from [python.org](https://www.python.org/).
+2. **Install Tkinter**: Tkinter is included with Python, so no additional installation is required.
+3. **Clone the Repository**: If the project is hosted on GitHub, clone the repository using Git.
+   ```bash
+   git clone https://github.com/username/repository-name.git
+   ```
+4. **Run the Application**: Navigate to the project directory and run the Python script.
+   ```bash
+   cd repository-name
+   python dice_simulator.py
+   ```
+<<<<<<< HEAD
+
+=======
+>>>>>>> priyashuu-patch-1
diff --git a/Dice_Rolling_Simulator/Readme.md b/Dice_Rolling_Simulator/Readme.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/Dice_Rolling_Simulator/dice_1.png b/Dice_Rolling_Simulator/dice_1.png
new file mode 100644
index 000000000..7a2623ff0
Binary files /dev/null and b/Dice_Rolling_Simulator/dice_1.png differ
diff --git a/Dice_Rolling_Simulator/dice_2.png b/Dice_Rolling_Simulator/dice_2.png
new file mode 100644
index 000000000..6f04a93f1
Binary files /dev/null and b/Dice_Rolling_Simulator/dice_2.png differ
diff --git a/Dice_Rolling_Simulator/dice_3.png b/Dice_Rolling_Simulator/dice_3.png
new file mode 100644
index 000000000..cd4c14725
Binary files /dev/null and b/Dice_Rolling_Simulator/dice_3.png differ
diff --git a/Dice_Rolling_Simulator/dice_4.png b/Dice_Rolling_Simulator/dice_4.png
new file mode 100644
index 000000000..5cf0420bc
Binary files /dev/null and b/Dice_Rolling_Simulator/dice_4.png differ
diff --git a/Dice_Rolling_Simulator/dice_5.png b/Dice_Rolling_Simulator/dice_5.png
new file mode 100644
index 000000000..113ee44b6
Binary files /dev/null and b/Dice_Rolling_Simulator/dice_5.png differ
diff --git a/Dice_Rolling_Simulator/dice_6.png b/Dice_Rolling_Simulator/dice_6.png
new file mode 100644
index 000000000..0d6c378c0
Binary files /dev/null and b/Dice_Rolling_Simulator/dice_6.png differ
diff --git a/Dice_Rolling_Simulator/main3.py b/Dice_Rolling_Simulator/main3.py
new file mode 100644
index 000000000..07fd4a4e5
--- /dev/null
+++ b/Dice_Rolling_Simulator/main3.py
@@ -0,0 +1,60 @@
+import tkinter as tk
+from PIL import Image, ImageTk
+import random
+import time
+import os
+
+# Initialize the Tkinter window
+window = tk.Tk()
+window.geometry("500x360")
+window.title("Dice Roll")
+window.configure(bg='black')
+
+# Define a list of dice images
+dice = ["dice_1.png", "dice_2.png", "dice_3.png", "dice_4.png", "dice_5.png", "dice_6.png"]
+
+# Verify that all dice images exist
+for dice_image in dice:
+    if not os.path.exists(dice_image):
+        print(f"Error: {dice_image} not found.")
+        exit()
+
+# Define a list of colors for the animation
+colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink']
+
+# Choose a random image for each dice and display them initially on the window
+image1 = ImageTk.PhotoImage(Image.open(random.choice(dice)))
+image2 = ImageTk.PhotoImage(Image.open(random.choice(dice)))
+label1 = tk.Label(window, image=image1, bg='black')
+label2 = tk.Label(window, image=image2, bg='black')
+label1.image = image1
+label2.image = image2
+label1.place(x=40, y=100)
+label2.place(x=900, y=100)
+
+# Define a function named "dice_roll" with animation
+def dice_roll():
+    for _ in range(10):  # Number of frames in the animation
+        color = random.choice(colors)  # Choose a random color for the background
+        image1 = ImageTk.PhotoImage(Image.open(random.choice(dice)))
+        label1.configure(image=image1, bg=color)
+        label1.image = image1
+        image2 = ImageTk.PhotoImage(Image.open(random.choice(dice)))
+        label2.configure(image=image2, bg=color)
+        label2.image = image2
+        window.update()  # Update the window to show changes
+        time.sleep(0.1)  # Pause to create animation effect
+    # Set the final images and background to black after animation
+    image1 = ImageTk.PhotoImage(Image.open(random.choice(dice)))
+    label1.configure(image=image1, bg='black')
+    label1.image = image1
+    image2 = ImageTk.PhotoImage(Image.open(random.choice(dice)))
+    label2.configure(image=image2, bg='black')
+    label2.image = image2
+
+# Define a button widget labeled "ROLL" with green background and white text, positioned at the top of the window
+button = tk.Button(window, text="ROLL", bg="green", fg="white", font="Times 20 bold", command=dice_roll)
+button.place(x=660, y=10)
+
+# Display the Tkinter window and wait for user interaction
+window.mainloop()
diff --git a/Digital Clock with Alarms/alarm-clock-90867.mp3 b/Digital Clock with Alarms/alarm-clock-90867.mp3
new file mode 100644
index 000000000..b9ca5cfc4
Binary files /dev/null and b/Digital Clock with Alarms/alarm-clock-90867.mp3 differ
diff --git a/Digital Clock with Alarms/index.html b/Digital Clock with Alarms/index.html
new file mode 100644
index 000000000..797792465
--- /dev/null
+++ b/Digital Clock with Alarms/index.html	
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Digital Clock with Alarms</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="clock-container">
+            <h1>Digital Clock</h1>
+            <div class="clock" id="clock"></div>
+        </div>
+
+        <div class="alarm-section">
+            <h2>Set Alarm</h2>
+            <div class="input-container">
+                <label for="alarm-time">Alarm Time:</label>
+                <input type="time" id="alarm-time" />
+
+                <label for="alarm-note">Optional Note:</label>
+                <input type="text" id="alarm-note" placeholder="Enter an optional note" />
+
+                <button onclick="setAlarm()">Set Alarm</button>
+            </div>
+
+            <h3>Active Alarms:</h3>
+            <ul id="alarm-list"></ul>
+        </div>
+    </div>
+
+    <!-- Modal Popup -->
+    <div id="popup" class="popup">
+        <div class="popup-content">
+            <h3>Alarm Alert</h3>
+            <p id="popup-message"></p>
+        </div>
+    </div>
+
+    <audio id="alarm-sound" src="alarm-clock-90867.mp3" preload="auto"></audio>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Digital Clock with Alarms/script.js b/Digital Clock with Alarms/script.js
new file mode 100644
index 000000000..7cc8d11a0
--- /dev/null
+++ b/Digital Clock with Alarms/script.js	
@@ -0,0 +1,124 @@
+let alarms = JSON.parse(localStorage.getItem("alarms")) || [];
+const alarmSound = document.getElementById("alarm-sound");
+
+function updateClock() {
+  const clock = document.getElementById("clock");
+  const now = new Date();
+  const timeString = formatTime(now);
+  clock.innerText = timeString;
+
+  checkAlarms(now); // Pass the full Date object for comparison
+}
+
+function setAlarm() {
+  const alarmTime = document.getElementById("alarm-time").value;
+  const alarmNote = document.getElementById("alarm-note").value;
+  if (!alarmTime) return showPopup("Please select a time for the alarm!");
+
+  // Convert alarm time to 12-hour format (AM/PM)
+  const formattedAlarmTime = convertTo12HourFormat(alarmTime);
+
+  // Check if alarm already exists at the same time
+  if (alarms.some((alarm) => alarm.time === formattedAlarmTime)) {
+    return showPopup("An alarm is already set at this time!");
+  }
+
+  const alarm = {
+    time: formattedAlarmTime,
+    note: alarmNote || "No note",
+    id: Date.now(),
+  };
+
+  alarms.push(alarm);
+  localStorage.setItem("alarms", JSON.stringify(alarms));
+  renderAlarms();
+  showPopup("Alarm set successfully!");
+}
+
+function checkAlarms(currentTime) {
+  const currentTimeString = formatTime(currentTime);
+
+  // Tolerance range: check for 10 seconds buffer
+  alarms.forEach((alarm, index) => {
+    if (isTimeWithinRange(alarm.time, currentTimeString)) {
+      alarmSound.play();
+      showPopup(`Alarm ringing! Time: ${alarm.time} - ${alarm.note}`);
+
+      // Automatically delete the alarm after it rings
+      alarms.splice(index, 1); // Remove alarm after it rings
+      localStorage.setItem("alarms", JSON.stringify(alarms)); // Save to localStorage
+      renderAlarms(); // Re-render alarms
+    }
+  });
+}
+
+function isTimeWithinRange(alarmTime, currentTimeString) {
+  const alarmTimeParts = alarmTime.split(":");
+  const currentTimeParts = currentTimeString.split(":");
+
+  const alarmMinutes = parseInt(alarmTimeParts[1]);
+  const currentMinutes = parseInt(currentTimeParts[1]);
+
+  // Allow up to a 10-second difference to trigger the alarm
+  return (
+    alarmTimeParts[0] === currentTimeParts[0] && // Compare hours
+    Math.abs(alarmMinutes - currentMinutes) <= 1 // Allow a 1-minute difference for triggering
+  );
+}
+
+function renderAlarms() {
+  const alarmList = document.getElementById("alarm-list");
+  alarmList.innerHTML = ""; // Clear existing alarms
+
+  alarms.forEach((alarm, index) => {
+    const li = document.createElement("li");
+    li.innerHTML = `
+      <span>${alarm.time} - ${alarm.note}</span>
+      <button onclick="deleteAlarm(${index})">Delete</button>
+    `;
+    alarmList.appendChild(li);
+  });
+}
+
+function deleteAlarm(index) {
+  alarms.splice(index, 1);
+  localStorage.setItem("alarms", JSON.stringify(alarms));
+  renderAlarms();
+}
+
+function showPopup(message) {
+  const popup = document.getElementById("popup");
+  const popupMessage = document.getElementById("popup-message");
+  popupMessage.innerText = message;
+  popup.style.display = "block";
+
+  // Hide the popup after 2 seconds
+  setTimeout(() => {
+    popup.style.display = "none";
+  }, 2000);
+}
+
+// Function to format time to 12-hour format (with AM/PM) for display
+function formatTime(date) {
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  const period = hours >= 12 ? "PM" : "AM";
+  const formattedHours = hours % 12 || 12; // Convert 24-hour to 12-hour format
+  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+  const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
+  return `${formattedHours}:${formattedMinutes}:${formattedSeconds} ${period}`;
+}
+
+// Convert 24-hour format (HH:mm) to 12-hour format (hh:mm AM/PM)
+function convertTo12HourFormat(time) {
+  const [hours, minutes] = time.split(":").map((num) => parseInt(num));
+  const period = hours >= 12 ? "PM" : "AM";
+  const formattedHours = hours % 12 || 12;
+  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+  return `${formattedHours}:${formattedMinutes} ${period}`;
+}
+
+// Initial setup
+setInterval(updateClock, 1000);
+renderAlarms();
diff --git a/Digital Clock with Alarms/style.css b/Digital Clock with Alarms/style.css
new file mode 100644
index 000000000..9abfac0e1
--- /dev/null
+++ b/Digital Clock with Alarms/style.css	
@@ -0,0 +1,169 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: 'Arial', sans-serif;
+    background-color: #283747;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+  }
+  
+  .container {
+    max-width: 450px;
+    width: 100%;
+    padding: 30px;
+    border-radius: 10px;
+    background: #34495e;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+  }
+  
+  .clock-container {
+    text-align: center;
+  }
+  
+  h1 {
+    font-size: 2rem;
+    margin-bottom: 10px;
+    color: #ecf0f1;
+  }
+  
+  .clock {
+    font-size: 3.5rem;
+    font-weight: bold;
+    background-color: #222;
+    padding: 20px;
+    border-radius: 10px;
+    margin-bottom: 30px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+  }
+  
+  .alarm-section {
+    text-align: center;
+  }
+  
+  .input-container {
+    margin-bottom: 20px;
+  }
+  
+  label {
+    display: block;
+    font-size: 1.1rem;
+    margin-bottom: 5px;
+    color: #ecf0f1;
+  }
+  
+  input[type="time"], input[type="text"] {
+    font-size: 1.2rem;
+    padding: 12px;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    border-radius: 5px;
+    border: none;
+    background-color: #5f6a79;
+    color: #fff;
+    width: 100%;
+  }
+  
+  button {
+    padding: 12px 20px;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: background 0.3s;
+  }
+  
+  button:hover {
+    background-color: #45a049;
+  }
+  
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  li {
+    background-color: #5f6a79;
+    margin: 15px 0;
+    padding: 12px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  li span {
+    flex-grow: 1;
+  }
+  
+  li button {
+    padding: 8px 12px;
+    background-color: #e74c3c;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  li button:hover {
+    background-color: #c0392b;
+  }
+  
+  @media (max-width: 600px) {
+    .clock {
+      font-size: 3rem;
+    }
+    input[type="time"], input[type="text"] {
+      width: 100%;
+    }
+    button {
+      width: 100%;
+      padding: 10px 0;
+    }
+  }
+  
+  /* Popup Style */
+  .popup {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    min-width: 200px;
+    text-align: center;
+    animation: fadeIn 4s ease-in-out;
+  }
+  
+  .popup-content {
+    font-size: 1.1rem;
+  }
+  
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    
+    50% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+  }
+  
\ No newline at end of file
diff --git a/Drag and drop/index.html b/Drag and drop/index.html
new file mode 100644
index 000000000..46df9fe11
--- /dev/null
+++ b/Drag and drop/index.html	
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>drag & drop file</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="style.css">
+
+    <!-- <script src="newgame.js"></script> -->
+</head>
+
+<body>
+    <div class="drag-area">
+        <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
+        <header>Drag & Drop to Upload File</header>
+        <span>OR</span>
+        <button>Browse File</button>
+        <input type="file" hidden>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Drag and drop/script.js b/Drag and drop/script.js
new file mode 100644
index 000000000..a2b4e63b8
--- /dev/null
+++ b/Drag and drop/script.js	
@@ -0,0 +1,71 @@
+//selecting all required elements
+const dropArea = document.querySelector(".drag-area"),
+    dragText = dropArea.querySelector("header"),
+    button = dropArea.querySelector("button"),
+    input = dropArea.querySelector("input");
+let file; //this is a global variable and we'll use it inside multiple functions
+
+
+
+
+button.onclick = () => {
+    input.click(); //if user click on the button then the input also clicked
+}
+
+
+
+
+input.addEventListener("change", function() {
+    //getting user select file and [0] this means if user select multiple files then we'll select only the first one
+    file = this.files[0];
+    dropArea.classList.add("active");
+    showFile(); //calling function
+});
+//If user Drag File Over DropArea
+dropArea.addEventListener("dragover", (event) => {
+    event.preventDefault(); //preventing from default behaviour
+    dropArea.classList.add("active");
+    dragText.textContent = "Release to Upload File";
+});
+
+
+
+
+//If user leave dragged File from DropArea
+dropArea.addEventListener("dragleave", () => {
+    dropArea.classList.remove("active");
+    dragText.textContent = "Drag & Drop to Upload File";
+});
+
+
+
+
+//If user drop File on DropArea
+dropArea.addEventListener("drop", (event) => {
+    event.preventDefault(); //preventing from default behaviour
+    //getting user select file and [0] this means if user select multiple files then we'll select only the first one
+    file = event.dataTransfer.files[0];
+    showFile(); //calling function
+});
+
+
+
+
+function showFile() {
+    let fileType = file.type; //getting selected file type
+    let validExtensions = ["image/jpeg", "image/jpg", "image/png"]; //adding some valid image extensions in array
+    if (validExtensions.includes(fileType)) { //if user selected file is an image file
+        let fileReader = new FileReader(); //creating new FileReader object
+        fileReader.onload = () => {
+            let fileURL = fileReader.result; //passing user file source in fileURL variable
+            let imgTag = `<img src="${fileURL}" alt="image">`; //creating an img tag and passing user selected file source inside src 
+            attribute
+            dropArea.innerHTML = imgTag; //adding that created img tag inside dropArea container
+        }
+        fileReader.readAsDataURL(file);
+    } else {
+        alert("This is not an Image File!");
+        dropArea.classList.remove("active");
+        dragText.textContent = "Drag & Drop to Upload File";
+    }
+}
diff --git a/Drag and drop/style.css b/Drag and drop/style.css
new file mode 100644
index 000000000..ec8893320
--- /dev/null
+++ b/Drag and drop/style.css	
@@ -0,0 +1,67 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: #0fb8ac;
+}
+
+.drag-area {
+    border: 2px dashed #fff;
+    height: 500px;
+    width: 700px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.drag-area.active {
+    border: 2px solid #fff;
+}
+
+.drag-area .icon {
+    font-size: 100px;
+    color: #fff;
+}
+
+.drag-area header {
+    font-size: 30px;
+    font-weight: 500;
+    color: #fff;
+}
+
+.drag-area span {
+    font-size: 25px;
+    font-weight: 500;
+    color: #fff;
+    margin: 10px 0 15px 0;
+}
+
+.drag-area button {
+    padding: 10px 25px;
+    font-size: 20px;
+    font-weight: 500;
+    border: none;
+    outline: none;
+    background: #fff;
+    color: #0fb8ac;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.drag-area img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 5px;
+}
diff --git a/Dunk_hunt_game/duckhunt.css b/Dunk_hunt_game/duckhunt.css
new file mode 100644
index 000000000..d580deaf1
--- /dev/null
+++ b/Dunk_hunt_game/duckhunt.css
@@ -0,0 +1,45 @@
+body,
+html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-image: url(images/background.png);
+  background-size: cover;
+  background-position: center;
+  image-rendering: optimizeSpeed;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -o-crisp-edges;
+  image-rendering: crisp-edges;
+  -ms-interpolation-mode: bicubic;
+  overflow: hidden;
+}
+
+.duck {
+  position: absolute;
+  background-image: url(images/duckhunt.png);
+  background-position: -100px -160px;
+  width: 110px;
+  height: 115px;
+  top: 100px;
+  left: 100px;
+  transition: top 2s, left 2s;
+  transition-timing-function: linear;
+  background-repeat: no-repeat;
+}
+
+.duck.right {
+  background-position: -200px -160px;
+}
+.duck.right.flap {
+  background-position: -300px -160px;
+}
+.duck {
+  background-position: -100px -160px;
+}
+.duck.flap {
+  background-position: -430px -160px;
+}
+.duck.shot {
+  background-position: center;
+  background-image: url(images/shot.png);
+}
diff --git a/Dunk_hunt_game/duckhunt.js b/Dunk_hunt_game/duckhunt.js
new file mode 100644
index 000000000..9765955fd
--- /dev/null
+++ b/Dunk_hunt_game/duckhunt.js
@@ -0,0 +1,56 @@
+window.onload = function() {
+    var body = document.body;
+
+    console.log(body);
+
+    // Création d'une div de class "duck" dans le body
+
+    var duck = document.createElement('div');
+    duck.className = 'duck';
+    duck.style.top = Math.random() * window.innerWidth + 'px';
+    duck.style.left = Math.random() * window.innerHeight + 'px';
+    document.body.appendChild(duck);
+    setTimeout(function() { duck.remove() }, 1)
+
+    // Création d'un objet 'Duck' pour interpréter les Canards
+    function createDuck() {
+        var duck = document.createElement('div');
+        duck.className = 'duck';
+        duck.style.top = Math.random() * window.innerWidth + 'px';
+        duck.style.left = Math.random() * window.innerHeight + 'px';
+        document.body.appendChild(duck);
+        var flapper = setInterval(function flapDuck() {
+            duck.classList.toggle('flap');
+        }, 250);
+    // Création d'une function permettant de faire bouger aléatoirement les Canards
+        function moveDuck() {
+            var top = Math.random() * window.innerWidth;
+            var left = Math.random() * window.innerHeight;
+
+            duck.style.top = top + 'px';
+            duck.style.left = left + 'px';
+    // Création d'une function de tire
+            function addShot() {
+                duck.classList.add('shot');
+                setTimeout(function() { duck.remove(); checkForWinner() }, 1000)
+            }
+
+            duck.addEventListener('click', addShot);
+        }
+    // Un temps d'intervalle entre les mouvements des Canards
+        moveDuck()
+        var mover = setInterval(moveDuck, 1000);
+        return duck;
+    };
+
+    for (var i = 0; i < 5; i++) {
+        createDuck()
+    }
+    // Création d'une function pour vérifier si le joeueur a gagné
+    function checkForWinner() {
+    if (document.getElementsByClassName('duck').length == 0) {
+        alert('You win!')
+      }
+    }
+
+};
\ No newline at end of file
diff --git a/Dunk_hunt_game/images/background.png b/Dunk_hunt_game/images/background.png
new file mode 100644
index 000000000..fc6562a7e
Binary files /dev/null and b/Dunk_hunt_game/images/background.png differ
diff --git a/Dunk_hunt_game/images/duck-hunt-part-1.png b/Dunk_hunt_game/images/duck-hunt-part-1.png
new file mode 100644
index 000000000..680453ac4
Binary files /dev/null and b/Dunk_hunt_game/images/duck-hunt-part-1.png differ
diff --git a/Dunk_hunt_game/images/duck-hunt-part-2.png b/Dunk_hunt_game/images/duck-hunt-part-2.png
new file mode 100644
index 000000000..f5094813f
Binary files /dev/null and b/Dunk_hunt_game/images/duck-hunt-part-2.png differ
diff --git a/Dunk_hunt_game/images/duckhunt.png b/Dunk_hunt_game/images/duckhunt.png
new file mode 100644
index 000000000..6a6feea4d
Binary files /dev/null and b/Dunk_hunt_game/images/duckhunt.png differ
diff --git a/Dunk_hunt_game/images/shot.png b/Dunk_hunt_game/images/shot.png
new file mode 100644
index 000000000..fe836b958
Binary files /dev/null and b/Dunk_hunt_game/images/shot.png differ
diff --git a/Dunk_hunt_game/index.html b/Dunk_hunt_game/index.html
new file mode 100644
index 000000000..ae07056ac
--- /dev/null
+++ b/Dunk_hunt_game/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Duck Hunt</title>
+  <link rel="stylesheet" href="duckhunt.css" />
+
+</head>
+
+<body>
+
+  <script src="duckhunt.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/EndlessRunner/ReadMe.md b/EndlessRunner/ReadMe.md
new file mode 100644
index 000000000..381126bec
--- /dev/null
+++ b/EndlessRunner/ReadMe.md
@@ -0,0 +1,83 @@
+# Endless Runner Game
+
+Welcome to the **Endless Runner** game! This is a fun, simple game where you control a chicken navigating through obstacles. The game ends when the chicken collides with an obstacle. 
+
+## Table of Contents
+
+- [Features](#features)
+- [Demo](#demo)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+- [Acknowledgments](#acknowledgments)
+
+## Features
+
+- **Dynamic Gameplay**: Navigate a chicken through obstacles.
+- **Jump Mechanics**: Jump to avoid obstacles.
+- **Responsive Design**: Adapts to different screen sizes.
+- **Scoring System**: Displays score when the game ends.
+- **Background Animation**: Dynamic background for a better visual experience.
+
+## Demo
+
+![Endless Runner Demo](path_to_your_demo_image.gif)
+
+You can play the game live [here](link_to_your_live_demo).
+
+## Installation
+
+To set up and run the Endless Runner game locally:
+
+1. **Clone the repository**:
+    ```bash
+    git clone https://github.com/yourusername/endless-runner.git
+    ```
+
+2. **Navigate to the project directory**:
+    ```bash
+    cd endless-runner
+    ```
+
+3. **Open `index.html` in your web browser**:
+    Simply open the `index.html` file to start playing the game.
+
+## Usage
+
+- **Jump**: Click anywhere on the page to make the chicken jump and avoid obstacles.
+- **Score**: The game displays your score when the chicken collides with an obstacle.
+
+## Contributing
+
+We welcome contributions to improve the Endless Runner game. To contribute:
+
+1. **Fork the repository**.
+2. **Create a new branch**:
+    ```bash
+    git checkout -b feature-branch
+    ```
+3. **Commit your changes**:
+    ```bash
+    git commit -m 'Add new feature'
+    ```
+4. **Push to the branch**:
+    ```bash
+    git push origin feature-branch
+    ```
+5. **Create a Pull Request**.
+
+Please make sure to follow the existing coding style and write tests for any new features or fixes.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+.
+
+## Contact
+
+For any questions or feedback, feel free to contact me at [codewithpriyaa@gmail.com].
+
+---
+
+Happy coding and enjoy the game!
diff --git a/EndlessRunner/Readme.md b/EndlessRunner/Readme.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/EndlessRunner/images/images.jpeg b/EndlessRunner/images/images.jpeg
new file mode 100644
index 000000000..c6d821930
Binary files /dev/null and b/EndlessRunner/images/images.jpeg differ
diff --git a/EndlessRunner/images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg b/EndlessRunner/images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg
new file mode 100644
index 000000000..0dd190d5a
Binary files /dev/null and b/EndlessRunner/images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg differ
diff --git a/EndlessRunner/images/png-clipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png b/EndlessRunner/images/png-clipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png
new file mode 100644
index 000000000..087765f38
Binary files /dev/null and b/EndlessRunner/images/png-clipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png differ
diff --git a/EndlessRunner/images/pngtree-game-pixel-scene-with-stone-png-image_2952040.jpg b/EndlessRunner/images/pngtree-game-pixel-scene-with-stone-png-image_2952040.jpg
new file mode 100644
index 000000000..481d11843
Binary files /dev/null and b/EndlessRunner/images/pngtree-game-pixel-scene-with-stone-png-image_2952040.jpg differ
diff --git a/EndlessRunner/images/sky.jpg b/EndlessRunner/images/sky.jpg
new file mode 100644
index 000000000..807e2e3d4
Binary files /dev/null and b/EndlessRunner/images/sky.jpg differ
diff --git a/EndlessRunner/images/sky2.jpg b/EndlessRunner/images/sky2.jpg
new file mode 100644
index 000000000..6a33179c4
Binary files /dev/null and b/EndlessRunner/images/sky2.jpg differ
diff --git a/EndlessRunner/index.html b/EndlessRunner/index.html
new file mode 100644
index 000000000..c9bad52f7
--- /dev/null
+++ b/EndlessRunner/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" onclick="jump()">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EndlessRunner</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+     <h1>Endless Runner</h1>
+    <div id="container">
+       
+        <div id="game">
+            <img style="position: absolute;opacity: .6; width: 350px; height: 250px; "  src="images/sky2.jpg" alt="">
+            <img style="position: absolute; left:350px;opacity: .6; width: 350px; height: 270px; " src="images/sky.jpg"
+                alt="kop">
+            <div id="chicken">
+                <img src="images/png-clipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png"
+                    width="60px" height="60px">
+            </div>
+            <div id="obstacle">
+                <img src="images/images.jpeg" width="50px" height="50px" alt="">
+
+            </div>
+        </div>
+        <div id="ground">
+            <img src="images/pngtree-game-pixel-scene-with-stone-png-image_2952040.jpg" width="700px" height="50px" >
+        </div>
+    </div>
+    <p>© 2024 Priya Ashu.</p>
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="script.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/EndlessRunner/script.js b/EndlessRunner/script.js
new file mode 100644
index 000000000..8d5939e39
--- /dev/null
+++ b/EndlessRunner/script.js
@@ -0,0 +1,41 @@
+var chicken=document.getElementById("chicken");
+var obstacle=document.getElementById("obstacle");
+var counter=0;
+
+function jump(){
+    if (chicken.classList !="animate"){
+        chicken.classList.add("animate");
+    }
+    setTimeout(function(){
+        chicken.classList.remove("animate");
+    },500)
+    counter++;
+}
+var lose =setInterval(function(){
+    var chickenTop =
+    parseInt(window.getComputedStyle(chicken).
+        getPropertyValue("top"));
+    var blockLeft=
+    parseInt(window.getComputedStyle(obstacle).
+    getPropertyValue("left"));
+    if (blockLeft<20 && blockLeft>0 && chickenTop>=130){
+        obstacle.style.animation="none";
+        obstacle.style.display="none";
+        alert("SCORE:" + counter);
+        counter = 0;
+    }
+
+},10);
+var tl=gsap.timeline()
+tl.from("h1",{
+    y:-50,
+    opacity:0,
+    delay:0.4,
+    duration:0.8,
+})
+tl.from("p",{
+    y:60,
+    opacity:0,
+    duration:0.5,
+    stagger:0.5,
+})
\ No newline at end of file
diff --git a/EndlessRunner/style.css b/EndlessRunner/style.css
new file mode 100644
index 000000000..94bc97c04
--- /dev/null
+++ b/EndlessRunner/style.css
@@ -0,0 +1,99 @@
+body{
+    background: url(images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg);
+    margin: 0;
+            padding: 0;
+            
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+           /* Replace with your image path */
+            background-size: cover; /* Ensures the image covers the entire background */
+            background-position: center; /* Centers the image */
+            background-repeat: no-repeat;
+}
+#container{
+    display: flex;
+    flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            
+            background-color: #111;
+}
+h1{
+    text-align: center;
+            font-size: 50px;
+            color: #fff;
+            font-family: 'Arial', sans-serif;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+            letter-spacing: 2px;
+            line-height: 1.2;
+            margin-bottom: 20px;
+            padding: 10px 20px;
+            border-radius: 10px;
+            background: linear-gradient(45deg, #b7d605, #f09d03);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+#game{
+    width:700px;
+    height:250px;
+    background-color:#111;
+    position: relative;
+    top:50px;
+    
+   
+   
+
+
+}
+#chicken{
+    width:60px;
+    height:60px;
+    background: red;
+    position:relative;
+    top:190px;
+    left:100px;
+
+}
+.animate{
+    animation:jump .5s linear 0s;
+}
+@keyframes jump{
+    0%{top:150px};
+    30%{top: 100px;}
+    70%{top: 100px;}
+    100%{top:100px}
+
+}
+#obstacle{
+    width:50px;
+    height:50px;
+    background: green;
+    position: relative;
+  
+    top:150px;
+    left:100%;
+    animation:block 1.3s infinite linear;
+
+
+}
+@keyframes block{
+    0%{left:680px;}
+    100%{left:-50px;}
+
+}
+#ground{
+    width:700px;
+    height:50px;
+    background: brown;
+    position: relative;
+    top:50px;
+    
+}
+p{
+    color: aliceblue;
+    text-align: center;
+    font-size: larger;
+    margin-top: 100px;
+}
\ No newline at end of file
diff --git a/Expense Splitter/index.html b/Expense Splitter/index.html
new file mode 100644
index 000000000..abd504b46
--- /dev/null
+++ b/Expense Splitter/index.html	
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Expense Splitter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Expense Splitter</h1>
+
+        <label for="numPeople">Number of People:</label>
+        <input type="number" id="numPeople" placeholder="Enter number of people">
+
+        <h2>Add Expense</h2>
+        <div class="expense-input">
+            <label for="expenseDesc">Description</label>
+            <input type="text" id="expenseDesc" placeholder="E.g., Car Rental">
+
+            <label for="expenseAmount">Amount (₹)</label>
+            <input type="number" id="expenseAmount" placeholder="Amount in ₹">
+
+            <label for="expenseDate">Date</label>
+            <input type="date" id="expenseDate">
+
+            <label for="expenseNote">Note</label>
+            <textarea id="expenseNote" placeholder="Optional note..."></textarea>
+
+            <button onclick="addExpense()">Add Expense</button>
+        </div>
+
+        <h3 id="expenseTitle" style="display: none;">Expenses</h3>
+        <ul id="expenseList"></ul>
+
+        <button id="calculateBtn" style="display: none;" onclick="calculateSplit()">Calculate Split</button>
+
+        <div class="result" style="display: none;"></div>
+        <div id="result" class="result" style="display: none;"></div>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Expense Splitter/script.js b/Expense Splitter/script.js
new file mode 100644
index 000000000..d7adf962b
--- /dev/null
+++ b/Expense Splitter/script.js	
@@ -0,0 +1,138 @@
+let expenses = JSON.parse(localStorage.getItem("expenses")) || [];
+
+function addExpense() {
+  const desc = document.getElementById("expenseDesc").value;
+  const amount = parseFloat(document.getElementById("expenseAmount").value);
+  const date = document.getElementById("expenseDate").value;
+  const note = document.getElementById("expenseNote").value;
+
+  if (!desc || isNaN(amount) || amount <= 0 || !date) {
+    showPopup("Please fill in all fields with valid values.");
+    return;
+  }
+
+  const expense = { desc, amount, date, note };
+  expenses.push(expense);
+  localStorage.setItem("expenses", JSON.stringify(expenses));
+
+  renderExpenses();
+
+  document.getElementById("expenseDesc").value = "";
+  document.getElementById("expenseAmount").value = "";
+  document.getElementById("expenseDate").value = "";
+  document.getElementById("expenseNote").value = "";
+  showPopup("Expense added successfully!");
+}
+
+function renderExpenses() {
+  const expenseList = document.getElementById("expenseList");
+  const expenseTitle = document.getElementById("expenseTitle");
+  const calculateBtn = document.getElementById("calculateBtn");
+
+  expenseList.innerHTML = "";
+
+  if (expenses.length > 0) {
+    expenseTitle.style.display = "block";
+    calculateBtn.style.display = "block";
+  } else {
+    expenseTitle.style.display = "none";
+    calculateBtn.style.display = "none";
+  }
+
+  expenses.forEach((expense, index) => {
+    const listItem = document.createElement("li");
+    listItem.classList.add("expense-item");
+
+    const details = document.createElement("div");
+    details.classList.add("expense-details");
+    details.innerHTML = `
+      <strong>${expense.desc}</strong>
+      <span>${expense.date}</span>
+      <span>₹${expense.amount.toFixed(2)}</span>
+      ${expense.note ? `<p>Note: ${expense.note}</p>` : ""}
+    `;
+
+    const actions = document.createElement("div");
+    actions.classList.add("expense-actions");
+
+    const editButton = document.createElement("button");
+    editButton.textContent = "Edit";
+    editButton.onclick = () => editExpense(index);
+
+    const deleteButton = document.createElement("button");
+    deleteButton.textContent = "Delete";
+    deleteButton.onclick = () => deleteExpense(index);
+
+    actions.appendChild(editButton);
+    actions.appendChild(deleteButton);
+
+    listItem.appendChild(details);
+    listItem.appendChild(actions);
+    expenseList.appendChild(listItem);
+  });
+}
+
+function editExpense(index) {
+  const expense = expenses[index];
+
+  document.getElementById("expenseDesc").value = expense.desc;
+  document.getElementById("expenseAmount").value = expense.amount;
+  document.getElementById("expenseDate").value = expense.date;
+  document.getElementById("expenseNote").value = expense.note;
+
+  deleteExpense(index);
+  showPopup("Edit the expense details and add again to save.");
+}
+
+function deleteExpense(index) {
+  expenses.splice(index, 1);
+  localStorage.setItem("expenses", JSON.stringify(expenses));
+  renderExpenses();
+  showPopup("Expense deleted successfully.");
+}
+
+function calculateSplit() {
+  const numPeople = parseInt(document.getElementById("numPeople").value);
+  const resultDiv = document.getElementById("result");
+
+  if (isNaN(numPeople) || numPeople <= 0) {
+    showPopup("Please enter a valid number of people.");
+    return;
+  }
+
+  const totalAmount = expenses.reduce(
+    (total, expense) => total + expense.amount,
+    0
+  );
+
+  if (totalAmount === 0) {
+    resultDiv.textContent = "No expenses to split.";
+    resultDiv.style.display = "block";
+    return;
+  }
+
+  const splitAmount = totalAmount / numPeople;
+
+  resultDiv.textContent = `Total Expenses: ₹${totalAmount.toFixed(
+    2
+  )}\nEach person should pay: ₹${splitAmount.toFixed(2)}`;
+  resultDiv.style.display = "block";
+}
+
+function showPopup(message) {
+  const popup = document.createElement("div");
+  popup.className = "popup";
+  popup.textContent = message;
+
+  document.body.appendChild(popup);
+
+  setTimeout(() => {
+    popup.style.opacity = "0";
+  }, 2500);
+
+  setTimeout(() => {
+    popup.remove();
+  }, 3000);
+}
+
+document.addEventListener("DOMContentLoaded", renderExpenses);
diff --git a/Expense Splitter/style.css b/Expense Splitter/style.css
new file mode 100644
index 000000000..f1e053884
--- /dev/null
+++ b/Expense Splitter/style.css	
@@ -0,0 +1,227 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #4e54c8, #8f94fb);
+    color: #333;
+    overflow-x: hidden;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  
+  .container {
+    background: #fff;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    width: 480px;
+    max-width: 95%;
+    text-align: center;
+    color: #333;
+    transition: all 0.3s ease;
+  }
+  
+  h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    color: #4e54c8;
+    text-transform: uppercase;
+  }
+  
+  h2 {
+    font-size: 1.2em;
+    margin: 15px 0;
+    color: #8f94fb;
+  }
+  
+  h3 {
+    font-size: 1.1em;
+    margin-top: 20px;
+    color: #4e54c8;
+    display: none;
+  }
+  
+  label {
+    font-size: 0.9em;
+    font-weight: bold;
+    color: #555;
+    margin-top: 10px;
+    display: block;
+    text-align: left;
+  }
+  
+  input[type="text"],
+  input[type="number"],
+  input[type="date"],
+  textarea {
+    display: block;
+    width: 100%;
+    margin: 8px 0;
+    padding: 10px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    font-size: 1em;
+    outline: none;
+    transition: border 0.3s ease;
+    background: #f8f8ff;
+  }
+  
+  textarea {
+    resize: vertical;
+  }
+  
+  input:focus,
+  textarea:focus {
+    border-color: #4e54c8;
+  }
+  
+  button {
+    padding: 10px;
+    background-color: #4e54c8;
+    color: #fff;
+    border: none;
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 8px;
+    font-size: 1em;
+    transition: background-color 0.3s ease;
+    margin-top: 10px;
+    width: 100%;
+  }
+  
+  button:hover {
+    background-color: #8f94fb;
+  }
+  
+  #calculateBtn {
+    display: none;
+    margin-top: 20px;
+  }
+  
+  .expense-input {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  #expenseList {
+    list-style: none;
+    padding: 0;
+    margin-top: 15px;
+  }
+  
+  .expense-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-radius: 12px;
+    background-color: #f4f4f4;
+    margin-bottom: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+  }
+  
+  .expense-item:hover {
+    transform: scale(1.02);
+    background-color: #eaeaff;
+  }
+  
+  .expense-details {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .expense-details strong {
+    font-weight: bold;
+    color: #4e54c8;
+  }
+  
+  .expense-details span,
+  .expense-details p {
+    font-size: 0.9em;
+    color: #555;
+  }
+  
+  .expense-details .expense-amount {
+    font-weight: bold;
+    color: #4e54c8;
+  }
+  
+  .expense-actions button {
+    padding: 6px 10px;
+    background-color: #4e54c8;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: background-color 0.3s ease;
+  }
+  
+  .expense-actions button:hover {
+    background-color: #8f94fb;
+  }
+  
+  .expense-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .result {
+    margin-top: 20px;
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #333;
+    padding: 15px;
+    background-color: #f8f8ff;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+  }
+  
+  @media (max-width: 480px) {
+    .container {
+      padding: 20px;
+    }
+  }
+  
+
+  .popup {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #4e54c8;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-size: 1em;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    animation: fadeInOut 3s ease;
+    pointer-events: none;
+    z-index: 1000;
+  }
+  
+  @keyframes fadeInOut {
+    0%, 100% {
+      opacity: 0;
+      transform: translateX(-50%) translateY(10px);
+    }
+    10%, 90% {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+  
\ No newline at end of file
diff --git a/ExpenseTracker_App/src/index.html b/ExpenseTracker_App/src/index.html
index b42070337..08a19da2f 100644
--- a/ExpenseTracker_App/src/index.html
+++ b/ExpenseTracker_App/src/index.html
@@ -6,6 +6,7 @@
     <title>Expense Tracker</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
 </head>
 <body>
     <header>
diff --git a/Flames/flames.html b/Flames/flames.html
new file mode 100644
index 000000000..1f8f6cca3
--- /dev/null
+++ b/Flames/flames.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="description" content="Flames compatibility calculator">
+    <meta name="author" content="Vansh Garg">
+    <meta name="keywords" content="Flames, Flames calculator">
+    <meta name="robots" content="index">
+    <meta http-equiv="refresh" content="120">
+    <style>
+        *{
+        margin:0;
+        padding:0;
+    }
+
+    main{
+        height: 100vh;
+        width:100vw;
+        overflow: hidden;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+        background: rgb(227,100,216);
+        background: linear-gradient(205deg,rgb(191, 122, 191) 5%,   rgba(227,100,216,1) 7%, rgba(240,115,237,1) 16%, rgba(246,151,177,1) 37%, rgba(246,151,177,1) 54%, rgba(245,253,45,1) 100%);
+    }
+
+    .section{
+        width:500px;
+        z-index:10;
+        height:500px;
+        display:flex;
+        flex-direction:column;
+        justify-content: center;
+        gap:30px;
+        background-color:blanchedalmond;
+        box-shadow: 2px 2px 5px white,0px 0px white,2px 2px 5px grey,0px 0px white;
+        border-radius:20px;
+    }   
+
+    h1{
+        display:block;
+        font-size:35px;
+        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        color:crimson;
+        text-shadow:2px 2px 5px crimson;
+        text-align:center;
+    }
+
+    form{
+        height:400px;
+    }
+
+    label{
+        display:block;
+        text-align:center;
+        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-size:24px;
+        margin:10px;
+    }
+
+    .first-name,.second-name{
+        width:300px;
+        text-align:center;
+        font-size:18px;
+        margin:auto;
+        height:50px;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        display:block;
+    }
+
+    .check-button{
+        display:block;
+        width:300px;
+        height:50px;
+        font-size:25px;
+        margin:auto;
+        margin-top:50px;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        border-radius:10px;
+        background-color: rgb(172, 166, 166);
+        border:none;
+        color:white;
+        z-index:18;
+    }
+
+    i{
+        position:absolute;
+        inset:-2px;
+        display: block;
+        border-radius: 10px;
+        width:302px;
+        height:55px;
+        top:440px;
+        left:617px;
+        z-index:-1;
+    }
+
+    i,i:nth-child(2){
+        background:linear-gradient(45deg,#00ccff,#575859,#4c4c4e,#d400d4);
+    }
+
+    i:nth-child(2){
+        filter:blur(10px);
+    }
+
+
+    *{
+        margin:0;
+        padding:0;
+        box-sizing: border-box;
+    }
+
+    .main1{
+        height: 100vh;
+        width:100vw;
+        overflow: hidden;
+        display:none;
+        justify-content: center;
+        align-items: center;
+        background: rgb(227,100,216);
+        background: linear-gradient(205deg,rgb(191, 122, 191) 5%,   rgba(227,100,216,1) 7%, rgba(240,115,237,1) 16%, rgba(246,151,177,1) 37%, rgba(246,151,177,1) 54%, rgba(245,253,45,1) 100%);
+    }
+
+    .section1{
+        width:500px;
+        z-index:10;
+        height:500px;
+        display:flex;
+        flex-direction:column;
+        justify-content: center;
+        gap:30px;
+        background-color:blanchedalmond;
+        box-shadow: 2px 2px 5px white,0px 0px white,2px 2px 5px grey,0px 0px white;
+        border-radius:20px;
+    }   
+
+    h1{
+        display:block;
+        font-size:35px;
+        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        color:crimson;
+        text-shadow:2px 2px 5px crimson;
+        text-align:center;
+    }
+
+    p{
+        font-size:20px;
+        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-weight: bolder;
+        margin-left:200px;
+    }
+
+    .resultant{
+        font-size:28px;
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        text-shadow:1px 1px 3px black;
+        text-align:center;
+        margin:0;
+    }
+
+    .result-head{
+        text-align:center;
+        margin:0;
+    }
+    </style>
+    <title>Flames Calculator</title>
+</head>
+<body>
+    <main>
+        <div class="section">
+            <h1>FLAMES</h1>
+            <form action="" method="post" id="flames-form">
+                <label for="first-name">First Name:</label>
+                <input type="text" name="first-name" class="first-name" id="first-name" placeholder="Enter Your First Beloved Name" />
+                <label for="second-name">Second Name:</label>
+                <input type="text" name="second-name" class="second-name" id="second-name" placeholder="Enter Your Second Beloved Name" />
+
+                <button type="button" class="check-button" id="check-button">Check Compatibility</button><i></i>
+                
+            </form>
+        </div>
+    </main>
+
+    <div class="main1" id="main1">
+        <div class="section1">
+            <h1>Results</h1>
+            <p class="result-head" id="result-head">Your Relationship:</p>
+            <p class="resultant" id="resultant"></p>
+    
+            <p class="options">F - Friend</p>
+            <p class="options">L - Love</p>
+            <p class="options">A - Affection</p>
+            <p class="options">M - Marriage</p>
+            <p class="options">E - Enemy</p>
+            <p class="options">S - Sister</p>
+        </div>
+    </div>
+    <script>
+        var name1;
+var name2;
+const button = document.getElementById('check-button');
+if(button){
+    button.addEventListener('click',function(event){
+        event.preventDefault();
+        name1 = document.getElementById("first-name").value;
+        name2 = document.getElementById("second-name").value;
+        name1 = name1.trim();
+        name1 = name1.toLowerCase();
+        name2 = name2.trim();
+        name2 = name2.toLowerCase();
+        name1 = name1.replace(' ','');
+        name2 = name2.replace(' ','');
+        name1 = Array.from(new Set(name1)).join('');
+        name2 = Array.from(new Set(name2)).join('');
+        console.log(name1);
+        console.log(name2);
+        const flames = ['Sister','Friend','Love','Affection','Marriage','Enemy'];
+        if (name1 == '' || name2 == '') {
+            alert("Please enter both names.");
+            return;
+        }
+        var counter=0;
+        for(let i=0;i<name1.length;i++){
+
+            for(let j=0;j<name2.length;j++)
+            {
+                if(name1[i] == name2[j]){
+                    counter+=1;
+                }
+            }
+        }
+        const index = (counter+1)%6;
+        const result = flames[index];
+        document.getElementById("resultant").innerText = result;
+        document.getElementById("main1").style.display = "flex";
+    });
+}
+else{
+    console.error('Element not found');
+}
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Flames/flames_calculation.js b/Flames/flames_calculation.js
new file mode 100644
index 000000000..65373e565
--- /dev/null
+++ b/Flames/flames_calculation.js
@@ -0,0 +1,42 @@
+var name1;
+var name2;
+const button = document.getElementById('check-button');
+if(button){
+    button.addEventListener('click',function(event){
+        event.preventDefault();
+        name1 = document.getElementById("first-name").value;
+        name2 = document.getElementById("second-name").value;
+        name1 = name1.trim();
+        name1 = name1.toLowerCase();
+        name2 = name2.trim();
+        name2 = name2.toLowerCase();
+        name1 = name1.replace(' ','');
+        name2 = name2.replace(' ','');
+        name1 = Array.from(new Set(name1)).join('');
+        name2 = Array.from(new Set(name2)).join('');
+        console.log(name1);
+        console.log(name2);
+        const flames = ['Sister','Friend','Love','Affection','Marriage','Enemy'];
+        if (name1 == '' || name2 == '') {
+            alert("Please enter both names.");
+            return;
+        }
+        var counter=0;
+        for(let i=0;i<name1.length;i++){
+
+            for(let j=0;j<name2.length;j++)
+            {
+                if(name1[i] == name2[j]){
+                    counter+=1;
+                }
+            }
+        }
+        const index = (counter+1)%6;
+        const result = flames[index];
+        document.getElementById("resultant").innerText = result;
+        document.getElementById("main1").style.display = "flex";
+    });
+}
+else{
+    console.error('Element not found');
+}
\ No newline at end of file
diff --git a/Flames/styles.css b/Flames/styles.css
new file mode 100644
index 000000000..ddb79129e
--- /dev/null
+++ b/Flames/styles.css
@@ -0,0 +1,161 @@
+*{
+    margin:0;
+    padding:0;
+}
+
+main{
+    /* border:1px solid black; */
+    height: 100vh;
+    width:100vw;
+    overflow: hidden;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(227,100,216);
+    background: linear-gradient(205deg,rgb(191, 122, 191) 5%,   rgba(227,100,216,1) 7%, rgba(240,115,237,1) 16%, rgba(246,151,177,1) 37%, rgba(246,151,177,1) 54%, rgba(245,253,45,1) 100%);
+}
+
+.section{
+    /* border:1px solid black; */
+    width:500px;
+    z-index:10;
+    height:500px;
+    display:flex;
+    flex-direction:column;
+    justify-content: center;
+    gap:30px;
+    background-color:blanchedalmond;
+    box-shadow: 2px 2px 5px white,0px 0px white,2px 2px 5px grey,0px 0px white;
+    border-radius:20px;
+}   
+
+h1{
+    display:block;
+    font-size:35px;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    color:crimson;
+    text-shadow:2px 2px 5px crimson;
+    text-align:center;
+}
+
+form{
+    /* border:1px solid black; */
+    height:400px;
+}
+
+label{
+    display:block;
+    text-align:center;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size:24px;
+    margin:10px;
+}
+
+.first-name,.second-name{
+    width:300px;
+    text-align:center;
+    font-size:18px;
+    margin:auto;
+    height:50px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    display:block;
+}
+
+.check-button{
+    display:block;
+    width:300px;
+    height:50px;
+    font-size:25px;
+    margin:auto;
+    margin-top:50px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    border-radius:10px;
+    background-color: rgb(172, 166, 166);
+    border:none;
+    color:white;
+    z-index:18;
+}
+
+i{
+    position:absolute;
+    inset:-2px;
+    display: block;
+    border-radius: 10px;
+    width:302px;
+    height:55px;
+    top:440px;
+    left:617px;
+    z-index:-1;
+}
+
+i,i:nth-child(2){
+    background:linear-gradient(45deg,#00ccff,#575859,#4c4c4e,#d400d4);
+}
+
+i:nth-child(2){
+    filter:blur(10px);
+}
+
+
+*{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+}
+
+.main1{
+    /* border:1px solid black; */
+    height: 100vh;
+    width:100vw;
+    overflow: hidden;
+    display:none;
+    justify-content: center;
+    align-items: center;
+    background: rgb(227,100,216);
+    background: linear-gradient(205deg,rgb(191, 122, 191) 5%,   rgba(227,100,216,1) 7%, rgba(240,115,237,1) 16%, rgba(246,151,177,1) 37%, rgba(246,151,177,1) 54%, rgba(245,253,45,1) 100%);
+}
+
+.section1{
+    /* border:1px solid black; */
+    width:500px;
+    z-index:10;
+    height:500px;
+    display:flex;
+    flex-direction:column;
+    justify-content: center;
+    gap:30px;
+    background-color:blanchedalmond;
+    box-shadow: 2px 2px 5px white,0px 0px white,2px 2px 5px grey,0px 0px white;
+    border-radius:20px;
+}   
+
+h1{
+    display:block;
+    font-size:35px;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    color:crimson;
+    text-shadow:2px 2px 5px crimson;
+    text-align:center;
+}
+
+p{
+    /* text-align:center; */
+    font-size:20px;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    /* border:1px solid black; */
+    font-weight: bolder;
+    margin-left:200px;
+}
+
+.resultant{
+    font-size:28px;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    text-shadow:1px 1px 3px black;
+    text-align:center;
+    margin:0;
+}
+
+.result-head{
+    text-align:center;
+    margin:0;
+}
\ No newline at end of file
diff --git a/Flappy-Birds-Game/README.md b/Flappy-Birds-Game/README.md
new file mode 100644
index 000000000..82ede867c
--- /dev/null
+++ b/Flappy-Birds-Game/README.md
@@ -0,0 +1,5 @@
+## Flappy Bird Game 
+
+A simple Flappy Bird game created in html,js,css.
+
+live project link : https://niraj1608.github.io/Flappy-Birds/
diff --git a/Flappy-Birds-Game/img/bottompipe.png b/Flappy-Birds-Game/img/bottompipe.png
new file mode 100644
index 000000000..2c57b32ab
Binary files /dev/null and b/Flappy-Birds-Game/img/bottompipe.png differ
diff --git a/Flappy-Birds-Game/img/flappybird.png b/Flappy-Birds-Game/img/flappybird.png
new file mode 100644
index 000000000..7f1445904
Binary files /dev/null and b/Flappy-Birds-Game/img/flappybird.png differ
diff --git a/Flappy-Birds-Game/img/flappybirdbg.png b/Flappy-Birds-Game/img/flappybirdbg.png
new file mode 100644
index 000000000..885ee71bf
Binary files /dev/null and b/Flappy-Birds-Game/img/flappybirdbg.png differ
diff --git a/Flappy-Birds-Game/img/toppipe.png b/Flappy-Birds-Game/img/toppipe.png
new file mode 100644
index 000000000..8b0a96757
Binary files /dev/null and b/Flappy-Birds-Game/img/toppipe.png differ
diff --git a/Flappy-Birds-Game/index.html b/Flappy-Birds-Game/index.html
new file mode 100644
index 000000000..e293de542
--- /dev/null
+++ b/Flappy-Birds-Game/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flappy Bird</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    
+    <h1>Flappy Bird</h1>
+    <canvas id="board"></canvas>
+
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Flappy-Birds-Game/script.js b/Flappy-Birds-Game/script.js
new file mode 100644
index 000000000..0bdeb0362
--- /dev/null
+++ b/Flappy-Birds-Game/script.js
@@ -0,0 +1,167 @@
+let board;
+let boardWidth = 360;
+let boardHeight = 640;
+let context;
+
+let birdWidth = 34;
+let birdHeight = 24;
+let birdX = (boardWidth - birdWidth) / 8;
+let birdY = boardHeight / 2;
+let birdImage;
+
+let bird = {
+    x: birdX,
+    y: birdY,
+    width: birdWidth,
+    height: birdHeight
+}
+
+let pipeArray = [];
+let pipeWidth = 64   ;
+let pipeHeight = 512;
+let pipeX = boardWidth;
+let pipeY = 0;
+
+let topPipeImg;
+let bottomPipeImg;
+
+let velocityX = -2;
+let velocityY = 0;
+let gravity = 0.4;
+
+let gameOver = false;
+let score = 0;
+
+window.onload = function () {
+    board = document.getElementById("board");
+    board.height = boardHeight;
+    board.width = boardWidth;
+    context = board.getContext("2d");
+
+    birdImage = new Image();
+    birdImage.src = "./img/flappybird.png";
+    birdImage.onload = function () {
+        context.drawImage(birdImage, bird.x, bird.y, bird.width, bird.height);
+    }
+
+    topPipeImg = new Image();
+    topPipeImg.src = "./img/toppipe.png";
+
+    bottomPipeImg = new Image();
+    bottomPipeImg.src = "./img/bottompipe.png";
+
+    requestAnimationFrame(update);
+    setInterval(placePipes, 3000);
+
+    document.addEventListener("keydown", moveBird);
+    document.addEventListener("touchstart", moveBird);
+    document.addEventListener("click", moveBird);
+}
+
+function update() {
+    requestAnimationFrame(update);
+    if (gameOver) {
+        return;
+    }
+    context.clearRect(0, 0, board.width, board.height);
+
+    velocityY += gravity;
+    bird.y = Math.max(bird.y + velocityY, 0);
+    context.drawImage(birdImage, bird.x, bird.y, bird.width, bird.height);
+
+    if (bird.y > board.height) {
+        triggerGameOver();
+    }
+
+    for (let i = 0; i < pipeArray.length; i++) {
+        let pipe = pipeArray[i];
+        pipe.x += velocityX;
+        context.drawImage(pipe.img, pipe.x, pipe.y, pipe.width, pipe.height);
+
+        if (!pipe.passed && bird.x > pipe.x + pipe.width) {
+            score += 0.5;
+            pipe.passed = true;
+        }
+
+        if (detectCollision(bird, pipeArray[i])) {
+            triggerGameOver();
+        }
+    }
+
+    while (pipeArray.length > 0 && pipeArray[0].x < -pipeWidth) {
+        pipeArray.shift();
+    }
+
+    context.fillStyle = "white";
+    context.font = "45px sans-serif";
+    context.fillText(score, 5, 45);     
+}
+
+function resetGame() {
+    bird.y = birdY;
+    pipeArray = [];
+    score = 0;
+    velocityY = 0;
+    gameOver = false;
+}
+
+function placePipes() {
+
+    if (gameOver) {
+        return;
+    }
+
+    let randomPipeY = pipeY - pipeHeight / 4 - Math.random() * (pipeHeight / 2);
+    let openingSpace = board.height / 4;
+
+    let topPipe = {
+        img: topPipeImg,
+        x: pipeX,
+        y: randomPipeY,
+        width: pipeWidth,
+        height: pipeHeight,
+        passed: false
+    }
+    pipeArray.push(topPipe);
+
+    let bottomPipe = {
+        img: bottomPipeImg,
+        x: pipeX,
+        y: randomPipeY + pipeHeight + openingSpace,
+        width: pipeWidth,
+        height: pipeHeight,
+        passed: false
+    }
+    pipeArray.push(bottomPipe);
+}
+
+function triggerGameOver() {
+    gameOver = true;
+    Swal.fire({
+        title: 'Game Over!',
+        text: `Your Score: ${score}`,
+        icon: 'error',
+        confirmButtonText: 'Play Again'
+    }).then((result) => {
+        if (result.isConfirmed) {
+            resetGame();
+        }
+    });
+}
+
+function moveBird(e) {
+    if (e.type === "click" || e.type === "touchstart" || e.code === "Space" || e.code === "ArrowUp" || e.code === "KeyX") {
+        velocityY = -6;
+
+        if (gameOver) {
+            resetGame();
+        }
+    }
+}
+
+function detectCollision(a, b) {
+    return a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y;
+}
\ No newline at end of file
diff --git a/Flappy-Birds-Game/style.css b/Flappy-Birds-Game/style.css
new file mode 100644
index 000000000..1a578e605
--- /dev/null
+++ b/Flappy-Birds-Game/style.css
@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    font-family: 'Courier New', Courier, monospace;
+    text-align: center;
+    background: #71C5CF;
+    padding: 1rem 0;
+}
+
+h1{
+    font-size: 3rem;
+}
+
+#board{
+    background: url("./img/flappybirdbg.png");
+    box-shadow: 10px 10px 100px 10px rgb(255, 255, 255);
+}
\ No newline at end of file
diff --git a/Flattastic Pro Color Palette/index.html b/Flattastic Pro Color Palette/index.html
new file mode 100644
index 000000000..8c4ce1599
--- /dev/null
+++ b/Flattastic Pro Color Palette/index.html	
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.scss" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <hgroup>
+                <h1 class="page-title">Flattastic Pro Color Palette</h1>
+            </hgroup>
+        </header>
+        <ul class="list-palete">
+            <li class="palete">
+                <div class="palete-color palete-color--grapefruit">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Grapefruit</h1>
+                    <span class="palete-color__code">#ed5565</span>,
+                    <span class="palete-color__code">#da4453</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--bittersweet">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Bittersweet</h1>
+                    <span class="palete-color__code">#fc6e51</span>,
+                    <span class="palete-color__code">#e9573f</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--sunflower">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Sunflower</h1>
+                    <span class="palete-color__code">#ffce54</span>,
+                    <span class="palete-color__code">#fcbb42</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--grass">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Grass</h1>
+                    <span class="palete-color__code">#a0d468</span>,
+                    <span class="palete-color__code">#8cc152</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--mint">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Mint</h1>
+                    <span class="palete-color__code">#48cfad</span>,
+                    <span class="palete-color__code">#37bc9b</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--aqua">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Aqua</h1>
+                    <span class="palete-color__code">#4fc1e9</span>,
+                    <span class="palete-color__code">#3bafda</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--blue-jeans">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Blue Jeans</h1>
+                    <span class="palete-color__code">#5d9cec</span>,
+                    <span class="palete-color__code">#4a89dc</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--lavender">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Lavender</h1>
+                    <span class="palete-color__code">#ac92ec</span>,
+                    <span class="palete-color__code">#967adc</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--pink-rose">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Pink Rose</h1>
+                    <span class="palete-color__code">#ec87c0</span>,
+                    <span class="palete-color__code">#d770ad</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--light-gray">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Light Gray</h1>
+                    <span class="palete-color__code">#f5f7fa</span>,
+                    <span class="palete-color__code">#e6e9ed</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--medium-gray">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Medium Gray</h1>
+                    <span class="palete-color__code">#ccd1d9</span>,
+                    <span class="palete-color__code">#aab2bd</span>
+                </div>
+            </li>
+            <li class="palete">
+                <div class="palete-color palete-color--dark-gray">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Dark Gray</h1>
+                    <span class="palete-color__code">#656d78</span>,
+                    <span class="palete-color__code">#434a54</span>
+                </div>
+            </li>
+            <!-- Round -->
+            <li class="palete palete--round">
+                <div class="palete-color palete-color--sunflower">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Sunflower</h1>
+                    <span class="palete-color__code">#ffce54</span>,
+                    <span class="palete-color__code">#fcbb42</span>
+                </div>
+            </li>
+            <li class="palete palete--round">
+                <div class="palete-color palete-color--grass">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Grass</h1>
+                    <span class="palete-color__code">#a0d468</span>,
+                    <span class="palete-color__code">#8cc152</span>
+                </div>
+            </li>
+            <!-- Square -->
+            <li class="palete palete--square">
+                <div class="palete-color palete-color--mint">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Mint</h1>
+                    <span class="palete-color__code">#48cfad</span>,
+                    <span class="palete-color__code">#37bc9b</span>
+                </div>
+            </li>
+            <li class="palete palete--square">
+                <div class="palete-color palete-color--aqua">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Aqua</h1>
+                    <span class="palete-color__code">#4fc1e9</span>,
+                    <span class="palete-color__code">#3bafda</span>
+                </div>
+            </li>
+        </ul>
+
+        <ul class="list-palete">
+            <!-- Round -->
+            <li class="palete palete--round">
+                <div class="palete-color palete-color--sunflower">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Sunflower</h1>
+                    <span class="palete-color__code">#ffce54</span>,
+                    <span class="palete-color__code">#fcbb42</span>
+                </div>
+            </li>
+            <li class="palete palete--round">
+                <div class="palete-color palete-color--grass">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Grass</h1>
+                    <span class="palete-color__code">#a0d468</span>,
+                    <span class="palete-color__code">#8cc152</span>
+                </div>
+            </li>
+            <!-- Square -->
+            <li class="palete palete--square">
+                <div class="palete-color palete-color--mint">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Mint</h1>
+                    <span class="palete-color__code">#48cfad</span>,
+                    <span class="palete-color__code">#37bc9b</span>
+                </div>
+            </li>
+            <li class="palete palete--square">
+                <div class="palete-color palete-color--aqua">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Aqua</h1>
+                    <span class="palete-color__code">#4fc1e9</span>,
+                    <span class="palete-color__code">#3bafda</span>
+                </div>
+            </li>
+        </ul>
+
+
+        <div class="examples">
+            <div class="palete example example--rectangle">
+                <div class="palete-color palete-color--sunflower">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Sunflower</h1>
+                    <span class="palete-color__code">#ffce54</span>,
+                    <span class="palete-color__code">#fcbb42</span>
+                </div>
+            </div>
+            <div class="palete palete--round example example--round">
+                <div class="palete-color palete-color--sunflower">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Sunflower</h1>
+                    <span class="palete-color__code">#ffce54</span>,
+                    <span class="palete-color__code">#fcbb42</span>
+                </div>
+            </div>
+            <div class="palete palete--square example example--square">
+                <div class="palete-color palete-color--sunflower">
+                    <div class="palete-color__square palete-color__lighten"></div>
+                    <div class="palete-color__square palete-color__darken"></div>
+                </div>
+                <div class="palete-color__content">
+                    <h1 class="palete-color__name">Sunflower</h1>
+                    <span class="palete-color__code">#ffce54</span>,
+                    <span class="palete-color__code">#fcbb42</span>
+                </div>
+            </div>
+
+        </div> <!-- /.examples -->
+
+    </div>
+
+
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Flattastic Pro Color Palette/style.css b/Flattastic Pro Color Palette/style.css
new file mode 100644
index 000000000..96a401d4b
--- /dev/null
+++ b/Flattastic Pro Color Palette/style.css	
@@ -0,0 +1,341 @@
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
+
+*, 
+*::before,
+*::after {
+-webkit-box-sizing: border-box;
+   -moz-box-sizing: border-box;
+        box-sizing: border-box;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    line-height: 1em;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 2em;
+}
+
+body {
+    font-family: "Source Sans Pro";
+    background-color: #f0f2f5;
+}
+
+.page-title {
+    margin: 2em 0 .2em;
+    font-size: 20px;
+    text-transform: uppercase;
+    line-height: 1.4;
+    color: #434a54;
+}
+
+.page-description {
+    font-size: 13px;
+    font-weight: normal;
+    color: #aab2bd;
+}
+.page-description a {
+    color: #ec87c0;
+    text-decoration: none;
+}
+.page-description a:hover {
+    color: #d770ad;
+}
+
+
+.container {
+    width: 780px;
+    margin: 0 auto;
+}
+
+.palete {
+    border-radius: 5px;
+    background-color: #fff;
+    -webkit-box-shadow: 0px 3px 0px 0px rgba(226, 228, 231, 0.75);
+    -moz-box-shadow:    0px 3px 0px 0px rgba(226, 228, 231, 0.75);
+    box-shadow:         0px 3px 0px 0px rgba(226, 228, 231, 0.75);
+}
+
+.palete-color {
+  position: relative;
+}
+.palete-color,
+.palete-color__square {
+    height: 50px;
+}
+
+.palete-color__square {
+    width: 50%;
+    float: left;
+}
+.palete-color__square:hover {
+  width: 100%;
+  position: absolute;
+}
+
+.palete-color__lighten {
+    -webkit-border-top-left-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    border-top-left-radius: 5px;
+}
+.palete-color__square.palete-color__lighten:hover  {
+   -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    border-top-right-radius: 5px;
+}
+.palete-color__darken {
+    float: right;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    border-top-right-radius: 5px;
+}
+.palete-color__square.palete-color__darken:hover {
+    -webkit-border-top-left-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    border-top-left-radius: 5px;
+}
+.palete-color__content {
+    padding: 10px;
+    color: #a9abab;
+}
+.palete-color__name {
+    font-size: 12px;
+    font-weight: medium;
+    text-transform: uppercase;
+    color: #444545;
+}
+.palete-color__code {
+    font-size: 11px;
+    line-height: .8em;
+    text-transform: uppercase;
+}
+
+/* ############
+   STYLES
+   ############ */
+
+/* Round */
+.palete--round {
+  border-radius: 50%;
+  text-align: center;
+}
+.palete--round .palete-color {
+  height: 50%;
+}
+.palete--round .palete-color__square {
+  height: 100%;
+}
+.palete--round .palete-color__lighten {
+  border-top-left-radius: 100%;
+}
+.palete--round .palete-color__square.palete-color__lighten:hover {
+  -webkit-border-radius: 1000px 1000px 0 0;
+  -moz-border-radius: 1000px 1000px 0 0;
+  border-radius: 1000px 1000px 0 0;
+  /* Border-radius Greater or equal to width*/
+}
+.palete--round .palete-color__darken {
+  border-top-right-radius: 100%;
+}
+.palete--round .palete-color__square.palete-color__darken:hover {
+  -webkit-border-radius: 1000px 1000px 0 0;
+  -moz-border-radius: 1000px 1000px 0 0;
+  border-radius: 1000px 1000px 0 0;
+  /* Border-radius Greater or equal to width*/
+}
+
+/* Square */
+.palete--square {} /* must set a height */
+.palete--square .palete-color {
+  height: 50%;
+}
+.palete--square .palete-color__square {
+  height: 100%;
+}
+.palete--square .palete-color__content {
+  padding-top: 18px;
+}
+.palete--square .palete-color__code {
+  line-height: 1.4;
+}
+.palete--square .palete-color__code:last-child {
+  display: block;
+}
+
+
+
+.list-palete {
+width: 340px;
+margin: 0 20px;
+float: left;
+}
+.list-palete > .palete {
+width: 45%;
+margin: 2.5%;
+float: left;
+}
+
+.list-palete > .palete--round,
+.list-palete > .palete--square{
+height: 153px;
+}
+
+
+/*
+Examples
+*/
+.examples { 
+float: left;
+width: 340px;
+margin: 0 20px;
+}
+
+.example {
+margin: 40px auto;
+}
+
+.example--rectangle {
+width: 200px;
+}
+
+.example--round {
+width: 200px;
+height: 200px;
+}
+
+.example--square {
+width: 200px;
+height: 200px;
+}
+
+
+
+
+/* ###########
+   THEME
+   ########### */
+
+/* 
+ * Grapefruit  
+ */
+.palete-color--grapefruit > .palete-color__lighten {
+    background-color: #ed5565;
+}
+.palete-color--grapefruit > .palete-color__darken {
+    background-color: #da4453;
+}
+
+/* 
+ * Bittersweet  
+ */
+.palete-color--bittersweet > .palete-color__lighten {
+    background-color: #fc6e51;
+}
+.palete-color--bittersweet > .palete-color__darken {
+    background-color: #e9573f;
+}
+
+
+/* 
+ * Sunflower  
+ */
+.palete-color--sunflower > .palete-color__lighten {
+    background-color: #ffce54;
+}
+.palete-color--sunflower > .palete-color__darken {
+    background-color: #fcbb42;
+}
+
+/* 
+ * Grass  
+ */
+.palete-color--grass > .palete-color__lighten {
+    background-color: #a0d468;
+}
+.palete-color--grass > .palete-color__darken {
+    background-color: #8cc152;
+}
+
+/* 
+ * Mint  
+ */
+.palete-color--mint > .palete-color__lighten {
+    background-color: #48cfad;
+}
+.palete-color--mint > .palete-color__darken {
+    background-color: #37bc9b;
+}
+
+/* 
+ * Aqua  
+ */
+.palete-color--aqua > .palete-color__lighten {
+    background-color: #4fc1e9;
+}
+.palete-color--aqua > .palete-color__darken {
+    background-color: #3bafda;
+}
+
+/* 
+ * Blue Jeans 
+ */
+.palete-color--blue-jeans > .palete-color__lighten {
+    background-color: #5d9cec;
+}
+.palete-color--blue-jeans > .palete-color__darken {
+    background-color: #4a89dc;
+}
+
+/* 
+ * Lavender  
+ */
+.palete-color--lavender > .palete-color__lighten {
+    background-color: #ac92ec;
+}
+.palete-color--lavender > .palete-color__darken {
+    background-color: #967adc;
+}
+
+/* 
+ * Pink Rose  
+ */
+.palete-color--pink-rose > .palete-color__lighten {
+    background-color: #ec87c0;
+}
+.palete-color--pink-rose > .palete-color__darken {
+    background-color: #d770ad;
+}
+
+/* 
+ * Light Gray  
+ */
+.palete-color--light-gray > .palete-color__lighten {
+    background-color: #f5f7fa;
+}
+.palete-color--light-gray > .palete-color__darken {
+    background-color: #e6e9ed;
+}
+
+/* 
+ * Medium Gray  
+ */
+.palete-color--medium-gray > .palete-color__lighten {
+    background-color: #ccd1d9;
+}
+.palete-color--medium-gray > .palete-color__darken {
+    background-color: #aab2bd;
+}
+
+/* 
+ * Dark Gray  
+ */
+.palete-color--dark-gray > .palete-color__lighten {
+    background-color: #656d78;
+}
+.palete-color--dark-gray > .palete-color__darken {
+    background-color: #434a54;
+}
diff --git a/Glitch text effect/index.html b/Glitch text effect/index.html
new file mode 100644
index 000000000..da7362d7e
--- /dev/null
+++ b/Glitch text effect/index.html	
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.scss" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
+    <title>Document</title>
+</head>
+
+<body>
+    <section>
+
+        <h1 data-name="Scooby Doo">
+
+            <span>Hello World!</span>
+
+        </h1>
+
+    </section>
+
+
+
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Glitch text effect/style.scss b/Glitch text effect/style.scss
new file mode 100644
index 000000000..7dcffe46a
--- /dev/null
+++ b/Glitch text effect/style.scss	
@@ -0,0 +1,424 @@
+body
+  
+  background-color: black
+  
+section
+  
+  display: flex
+  width: 100vw
+  height: 100vh
+  
+  h1
+    
+    margin: auto
+
+    position: relative
+    z-index: 1
+
+    font-family: sans-serif
+    font-size: 10vmin
+    font-weight: 700
+
+    //
+
+    &:before, &:after
+
+      mix-blend-mode: screen
+
+    // Pseudo
+
+    &:before, &:after
+
+      content: attr(data-name)
+
+      position: absolute
+      z-index: 2
+
+      top: 0
+
+      width: 100%
+      height: 100%
+
+    &:before
+
+      left: -5%
+
+      color: #FF0000
+
+      clip: rect(0, 1350px, 140px, 0)
+
+      animation-name: glitchRed
+      animation-duration: 1s
+      animation-timing-function: linear
+      animation-iteration-count: infinite
+
+    &:after
+
+      left: 5%
+
+      color: #0000FF
+
+      clip: rect(0, 1350px, 50px, 0)
+
+      animation-name: glitchBlue
+      animation-duration: 1s
+      animation-timing-function: linear
+      animation-iteration-count: infinite
+
+    // Children
+
+    span
+
+      position: relative
+      z-index: 1
+
+      color: white
+
+      clip: rect(0, 900px, 722px, 56px)
+
+      animation-name: glitchGreen
+      animation-duration: 4s
+      animation-timing-function: linear
+      animation-iteration-count: infinite
+      
+@keyframes glitchRed
+  
+  0%
+
+    left: 0
+
+    clip-path: inset(0% 0 0% 0)
+
+  9%
+  
+    left: 0
+
+    clip-path: inset(0% 0 0% 0)
+
+  10%
+
+    left: 1%
+
+    clip-path: inset(21% 0 5% 0)
+
+  19%
+
+    left: 1%
+
+    clip-path: inset(21% 0 5% 0)
+
+  20%
+
+    left: 6%
+
+    clip-path: inset(72% 0 55% 0)
+
+  29%
+
+    left: 6%
+
+    clip-path: inset(72% 0 55% 0)
+
+  30%
+
+    left: 0
+
+    clip-path: inset(12% 0 -52% 0)
+
+  39%
+
+    left: 0
+
+    clip-path: inset(12% 0 -52% 0)
+
+  40%
+
+    left: -5%
+
+    clip-path: inset(-80% 0 12% 0)
+
+  49%
+
+    left: -5%
+
+    clip-path: inset(-80% 0 12% 0)
+
+  50%
+
+    left: 0
+
+    clip-path: inset(95% 0 32% 0)
+
+  59%
+
+    left: 0
+
+    clip-path: inset(95% 0 32% 0)
+
+  60%
+
+    left: 2%
+
+    clip-path: inset(4% 0 27% 0)
+
+  69%
+
+    left: 2%
+
+    clip-path: inset(4% 0 27% 0)
+
+  70%
+
+    left: 0
+
+    clip-path: inset(-64% 0 -77% 0)
+
+  79%
+
+    left: 0
+
+    clip-path: inset(-64% 0 -77% 0)
+
+  80%
+
+    left: -8%
+
+    clip-path: inset(75% 0 -4% 0)
+
+  89%
+
+    left: -8%
+
+    clip-path: inset(75% 0 -4% 0)
+
+  90%
+
+    left: 0
+
+    clip-path: inset(-33% 0 96% 0)
+
+  99%
+
+    left: 0
+
+    clip-path: inset(-33% 0 96% 0)
+
+  100%
+
+    left: 3%
+
+    clip-path: inset(48% 0 50% 0)
+  
+@keyframes glitchBlue
+  
+  0%
+  
+    left: 0
+
+    clip-path: inset(0% 0 0% 0)
+
+  9%
+  
+    left: 0
+
+    clip-path: inset(0% 0 0% 0)
+
+  10%
+
+      left: -2%
+
+      clip-path: inset(41% 0 -15% 0)
+
+  19%
+
+      left: -2%
+
+      clip-path: inset(41% 0 -15% 0)
+
+  20%
+
+      left: -4%
+
+      clip-path: inset(-72% 0 75% 0)
+
+  29%
+
+      left: -4%
+
+      clip-path: inset(-72% 0 75% 0)
+
+  30%
+
+      left: 0
+
+      clip-path: inset(62% 0 4% 0)
+
+  39%
+
+      left: 0
+
+      clip-path: inset(62% 0 4% 0)
+
+  40%
+
+      left: 7%
+
+      clip-path: inset(80% 0 -12% 0)
+
+  49%
+
+      left: 7%
+
+      clip-path: inset(80% 0 -12% 0)
+
+  50%
+
+      left: 0
+
+      clip-path: inset(5% 0 55% 0)
+
+  59%
+
+      left: 0
+
+      clip-path: inset(5% 0 55% 0)
+
+  60%
+
+      left: -5%
+
+      clip-path: inset(-47% 0 36% 0)
+
+  69%
+
+      left: -5%
+
+      clip-path: inset(-47% 0 36% 0)
+
+  70%
+
+      left: 0
+
+      clip-path: inset(24% 0 -7% 0)
+
+  79%
+
+      left: 0
+
+      clip-path: inset(24% 0 -7% 0)
+
+  80%
+
+      left: 5%
+
+      clip-path: inset(-75% 0 4% 0)
+
+  89%
+
+      left: 5%
+
+      clip-path: inset(-75% 0 4% 0)
+
+  90%
+
+      left: 0
+
+      clip-path: inset(3% 0 -96% 0)
+
+  99%
+
+      left: 0
+
+      clip-path: inset(3% 0 -96% 0)
+
+  100%
+
+      left: -3%
+
+      clip-path: inset(98% 0 -50% 0)
+  
+@keyframes glitchGreen
+  
+  0%
+
+    clip-path: inset(0% 0 0% 0)
+
+  9%
+
+    clip-path: inset(0% 0 0% 0)
+
+  10%
+
+    clip-path: inset(41% 0 -15% 0)
+
+  19%
+
+    clip-path: inset(41% 0 -15% 0)
+
+  20%
+
+    clip-path: inset(-72% 0 75% 0)
+
+  29%
+
+    clip-path: inset(-72% 0 75% 0)
+
+  30%
+
+    clip-path: inset(62% 0 4% 0)
+
+  39%
+
+    clip-path: inset(62% 0 4% 0)
+
+  40%
+
+    clip-path: inset(80% 0 -12% 0)
+
+  49%
+
+    clip-path: inset(80% 0 -12% 0)
+
+  50%
+
+    clip-path: inset(5% 0 55% 0)
+
+  59%
+
+    clip-path: inset(5% 0 55% 0)
+
+  60%
+
+    clip-path: inset(-47% 0 36% 0)
+
+  69%
+
+    clip-path: inset(-47% 0 36% 0)
+
+  70%
+
+    clip-path: inset(24% 0 -7% 0)
+
+  79%
+
+    clip-path: inset(24% 0 -7% 0)
+
+  80%
+
+    clip-path: inset(-75% 0 4% 0)
+
+  89%
+
+    clip-path: inset(-75% 0 4% 0)
+
+  90%
+
+    clip-path: inset(3% 0 -96% 0)
+
+  99%
+
+    clip-path: inset(3% 0 -96% 0)
+
+  100%
+
+    clip-path: inset(98% 0 -50% 0)
diff --git a/Goal game/index.html b/Goal game/index.html
new file mode 100644
index 000000000..2deb0135a
--- /dev/null
+++ b/Goal game/index.html	
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <script defer src="main.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <div id='game_field'>
+        <div id='goal'>
+          <div class='hitbox' box="0"></div>
+          <div class='hitbox' box="1"></div>
+          <div class='hitbox' box="2"></div>
+          <div class='hitbox' box="3"></div>
+          <div class='hitbox' box="4"></div>
+        </div>
+        <div id='ball'></div>
+        <svg viewBox="0 0 10 10" id="svg" xmlns="http://www.w3.org/2000/svg">
+          <path id="path" d="M 10 10 C 20 20, 40 20, 50 10" stroke="rgba(0,0,0,0)" fill="transparent"/>
+      
+          <circle id='circle' r="5" fill="rgba(255,0,0,0)">
+            <animateMotion
+                           id="bally"
+                           dur="1s"
+                           repeatCount="1"
+                           begin="goal.click"
+                           fill="freeze"
+                           path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+          </circle>
+        </svg>
+        
+        <h1 id='success'>GOAL!</h1>
+        <h1 id='failure'>FAIL</h1>
+      </div>
+      <p>Click inside the goal to kick, then move cursor to curve shot.</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/Goal game/main.js b/Goal game/main.js
new file mode 100644
index 000000000..e4d1c1d16
--- /dev/null
+++ b/Goal game/main.js	
@@ -0,0 +1,94 @@
+let offset = 20,
+    gf = game_field.getBoundingClientRect(),
+    b = ball.getBoundingClientRect(),
+    ooo = gf.x - offset,
+    gfcx = gf.x + (gf.width*.5) - ooo,
+    goalie = ['https://contentservice.mc.reyrey.net/image_v1.0.0/?id=4d2c276a-53d1-5d61-973a-43e438e4d242&638600308304985475','https://contentservice.mc.reyrey.net/image_v1.0.0/?id=50c68e89-78aa-5583-b9fb-a6b7088a2795&638600308421269575','https://contentservice.mc.reyrey.net/image_v1.0.0/?id=c82054e5-0c08-5936-8b3a-da9c3803a430&638600308520821680','https://contentservice.mc.reyrey.net/image_v1.0.0/?id=72578b00-ecdb-5e3d-824e-cdd981720b04&638600308646914584','https://contentservice.mc.reyrey.net/image_v1.0.0/?id=9effa62d-7e3d-5638-9ea2-a02ab3508dfc&638600308768788828']
+
+svg.setAttribute('viewBox','0 0 ' + gf.width + ' ' + gf.height)
+
+function grabClick(e) {
+  let x = e.clientX,
+      y = e.clientY,
+      el = document.elementFromPoint(x,y),
+      el_num = el.getAttribute('box'),
+      g = Math.floor(Math.random()*5),
+      o = game_field.getBoundingClientRect(),
+      hit = true  
+
+  // console.log(g,el,hit)
+  if(hit){
+    if(el.getAttribute('box') == 0) {
+      g = 'https://contentservice.mc.reyrey.net/image_v1.0.0/?id=4d2c276a-53d1-5d61-973a-43e438e4d242&638600308304985475'
+    }
+    if(el.getAttribute('box') == 1) {
+      g = 'https://contentservice.mc.reyrey.net/image_v1.0.0/?id=50c68e89-78aa-5583-b9fb-a6b7088a2795&638600308421269575'
+    }
+    if(el.getAttribute('box') == 2) {
+      g = 'https://contentservice.mc.reyrey.net/image_v1.0.0/?id=c82054e5-0c08-5936-8b3a-da9c3803a430&638600308520821680'
+    }
+    if(el.getAttribute('box') == 3) {
+      g = 'https://contentservice.mc.reyrey.net/image_v1.0.0/?id=72578b00-ecdb-5e3d-824e-cdd981720b04&638600308646914584'
+    }
+    if(el.getAttribute('box') == 4) {
+      g = 'https://contentservice.mc.reyrey.net/image_v1.0.0/?id=9effa62d-7e3d-5638-9ea2-a02ab3508dfc&638600308768788828'
+    }
+    if(el.id == 'goal') {
+      g = 'https://contentservice.mc.reyrey.net/image_v1.0.0/?id=f4278541-20df-568f-baea-e387ee22937c&638600307412335028'
+    }
+  } else {
+    g = goalie[g]
+  }
+
+  ball.className = 'kicked'
+  let kick = setInterval(function(){
+    let c = circle.getBoundingClientRect(),
+        cx = c.x,
+        cy = c.y
+    ball.style.left = cx - ooo - offset + 'px'
+    ball.style.top = (cy - offset) + 'px'
+    setTimeout(function(){
+      clearInterval(kick)
+
+      let c = circle.getBoundingClientRect(),
+          cx = c.x,
+          cy = c.y
+
+      let score = document.elementFromPoint(cx, cy)
+      // console.log(score,el_num)
+      if(score.getAttribute('box') != el_num){
+        ball.className = 'goal'
+        success.className = 'show_result'
+      } else {
+        ball.className = 'fall'
+        failure.className = 'show_result'
+      }
+    }, 1000)
+  },1000/30)
+
+  setTimeout(function(){
+    goal.style.background = 'url('+g+')'
+    goal.style.animation = 'none'
+  }, 200)  
+
+  setTimeout(function(){
+    goal.style.background = ''
+    ball.style.left = ''
+    ball.style.top = ''
+    ball.style.setProperty('--ani', '')
+    ball.className = ''
+    success.className = ''
+    failure.className = ''
+    goal.style.animation = 'shake .25s linear infinite'
+  }, 4000)
+}
+
+goal.addEventListener('click', grabClick)
+
+goal.addEventListener('mousemove', function(e){
+  let x = e.clientX - ooo - offset,
+      y = e.clientY
+
+  path.setAttribute('d', 'M '+(b.x - ooo)+' '+(b.y+ offset)+' C '+gfcx+' 250, '+gfcx+' 150, ' + x + ' ' + y)
+  bally.setAttribute('path', 'M '+(b.x - ooo)+' '+(b.y+ offset)+' C '+gfcx+' 250, '+gfcx+' 150, ' + x + ' ' + y)
+})
diff --git a/Goal game/style.css b/Goal game/style.css
new file mode 100644
index 000000000..598d24ac0
--- /dev/null
+++ b/Goal game/style.css	
@@ -0,0 +1,191 @@
+/* author: https://codepen.io/kitjenson/pen/MWMGEaE
+Kit Jenson
+ */
+
+
+:root {
+    --green: #1fb24c;
+    --red: #be1e2d;
+  }
+  html {
+    min-height: 100vh;
+    display: grid;
+    background: black;
+    font-family: system-ui;
+    text-align: center;
+    font-size: .75rem;
+  }
+  
+  body {
+    max-width: 1200px;
+    background: 
+      linear-gradient(to right, black 57px, transparent 57px calc(100% - 57px), black calc(100% - 57px)),
+      linear-gradient(to bottom, black 450px, var(--green) 450px);
+    margin: 0 auto;
+  }
+  
+  h1 {
+    font-size: 10rem;
+    margin: 0;
+    position: absolute;
+    font-weight: 900;
+    color: gold;
+    text-shadow: 5px 5px black;
+    left: 50%;
+    top: 30%;
+    transform: translate(-50%,-50%);
+    opacity: 0;  
+    pointer-events: none;
+    user-select: none;
+  }
+  #failure {
+    color: var(--red) !important;
+  }
+  
+  .show_result {
+    transition: .75s;
+    transition-delay: 1s;
+    opacity: 1;
+  }
+  
+  #game_field {
+    width: 100vw;
+    max-width: 1200px;
+    height: 450px;
+    background: url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=26107e19-02ae-5a04-bc21-88b57bc22ced&638600304193604811');
+    position: relative;
+    background-position: 50% 0%;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+  }
+  #game_field:before {
+    content: '';
+    width: 100%;
+    height: 400px;
+  /*   background: var(--red); */
+    position: absolute;
+    left: 0;
+    top: -28px;
+    mix-blend-mode: multiply;
+  }
+  
+  #goal {
+    height: 250px;
+    aspect-ratio: 2/1;
+    margin: 0 auto;
+    background: url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=f4278541-20df-568f-baea-e387ee22937c&638600307412335028');
+    background-size: 100% 100% !important;
+    box-sizing: border-box;
+    cursor: crosshair;
+    position: absolute;
+    left: calc(50% - 250px);
+    top: 30px;
+    animation: shake .25s linear infinite;
+    transform-origin: 50% 100%;
+  /*   filter: brightness(15); */
+  }
+  @keyframes shake {
+    25% { transform: rotate(1deg); }
+    75% { transform: rotate(-1deg); }
+  }
+  
+  .hitbox {
+    /*   outline: 1px solid red; */
+  }
+  .hitbox[box="0"] {
+    width:175px;
+    height: 125px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+  .hitbox[box="1"] {
+    width:175px;
+    height: 125px;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  .hitbox[box="2"] {
+    width:140px;
+    height: 175px;
+    position: absolute;
+    left: calc(50% - 70px);
+    top: 0;
+  }
+  .hitbox[box="3"] {
+    width:175px;
+    height: 125px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .hitbox[box="4"] {
+    width:175px;
+    height: 125px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+  
+  #ball {
+    --ani: roll 1s linear infinite;
+    width: 40px;
+    aspect-ratio: 1/1;
+    background-size: 100% 100%;
+    border-radius: 50%;
+    position: absolute;
+    top: calc(100% - 50px);
+    left: calc(50% - 20px);    
+    pointer-events: none;
+  }
+  #ball:before{
+    content: '';
+    width: 40px;
+    aspect-ratio: 1/1;
+  /*   background: var(--red); */
+    background-size: 100% 100%;
+    border-radius: 50%;
+    position: absolute; 
+    left: 0%;
+    top: 50%;
+    mix-blend-mode: multiply;
+  }
+  #ball:after{
+    content: '';
+    width: 40px;
+    aspect-ratio: 1/1;
+    background:
+      url(http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg);
+    background-size: 100% 100%;
+    border-radius: 50%;
+    position: absolute; 
+    left: 0;
+    top: 0;
+  }
+  @keyframes roll {
+    100% {
+      transform: rotate(1080deg);
+    }
+  }
+  
+  .kicked:after {
+    animation: var(--ani);
+  }
+  
+  .fall {
+    animation: fall .5s linear .5s forwards;
+  }
+  @keyframes fall {
+    100% {
+      top: 250px;
+    }
+  }
+  .goal {
+    animation: score .5s linear .5s forwards
+  }
+  @keyframes score {
+    100% {
+      top: 200px;
+    }
+  }
\ No newline at end of file
diff --git a/Habit Tracker App/index.html b/Habit Tracker App/index.html
index a25e5b03d..03bec121f 100644
--- a/Habit Tracker App/index.html	
+++ b/Habit Tracker App/index.html	
@@ -1,20 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Habit Tracker</title>
+    <link rel="stylesheet" href="styles.css">
+
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Habit Tracker</title>
   <link rel="stylesheet" href="styles.css">
+  <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
+
 </head>
 <body>
-  <div class="container">
-    <h1>Habit Tracker</h1>
-    <input type="text" id="habitInput" placeholder="Enter a new habit..." />
-    <button id="addHabitBtn">Add Habit</button>
-
-    <ul id="habitList"></ul>
-  </div>
+    <div class="container">
+        <h1>Habit Tracker</h1>
+        <input type="text" id="habitInput" placeholder="Enter a new habit..." />
+        <input type="number" id="timeInput" placeholder="Duration (minutes)" min="1" />
+        <button id="addHabitBtn">Add Habit</button>
+        <p class="quote" id="quote"></p>
+        <ul id="habitList"></ul>
+    </div>
 
-  <script src="script.js"></script>
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/Habit Tracker App/script.js b/Habit Tracker App/script.js
index 37499d608..e425e34a6 100644
--- a/Habit Tracker App/script.js	
+++ b/Habit Tracker App/script.js	
@@ -1,69 +1,92 @@
 // Select elements
 const habitInput = document.getElementById('habitInput');
+const timeInput = document.getElementById('timeInput');
 const addHabitBtn = document.getElementById('addHabitBtn');
 const habitList = document.getElementById('habitList');
+const quoteDisplay = document.getElementById('quote');
+
+// Motivational quotes
+const quotes = [
+    "Consistency is key to success.",
+    "Small habits make a big difference.",
+    "Success is the sum of small efforts repeated day in and day out.",
+    "The journey of a thousand miles begins with one step.",
+    "It's not about having time, it's about making time."
+];
 
 // Load habits from local storage on page load
 window.onload = function() {
-  const savedHabits = JSON.parse(localStorage.getItem('habits')) || [];
-  savedHabits.forEach((habit) => {
-    addHabitToDOM(habit.text, habit.completed);
-  });
+    const savedHabits = JSON.parse(localStorage.getItem('habits')) || [];
+    savedHabits.forEach((habit) => {
+        addHabitToDOM(habit.text, habit.time, habit.completed);
+    });
+    displayRandomQuote();
 };
 
 // Add habit event listener
 addHabitBtn.addEventListener('click', () => {
-  const habitText = habitInput.value.trim();
-  if (habitText) {
-    addHabitToDOM(habitText);
-    saveHabit(habitText, false);
-    habitInput.value = '';
-  }
+    const habitText = habitInput.value.trim();
+    const habitTime = timeInput.value.trim();
+
+    if (habitText && habitTime) {
+        addHabitToDOM(habitText, habitTime);
+        saveHabit(habitText, habitTime, false);
+        habitInput.value = '';
+        timeInput.value = '';
+    }
 });
 
 // Function to add a habit to the DOM
-function addHabitToDOM(habitText, isCompleted = false) {
-  const li = document.createElement('li');
-  li.innerHTML = `
-    <span class="${isCompleted ? 'completed' : ''}">${habitText}</span>
-    <button class="delete-btn">Delete</button>
-  `;
+function addHabitToDOM(habitText, habitTime, isCompleted = false) {
+    const li = document.createElement('li');
+    li.innerHTML = `
+        <span class="${isCompleted ? 'completed' : ''}">${habitText} (${habitTime} min)</span>
+        <button class="delete-btn">Delete</button>
+    `;
 
-  // Toggle completion on habit click
-  li.querySelector('span').addEventListener('click', () => {
-    li.querySelector('span').classList.toggle('completed');
-    updateHabitStatus(habitText);
-  });
+    // Toggle completion on habit click
+    li.querySelector('span').addEventListener('click', () => {
+        li.querySelector('span').classList.toggle('completed');
+        updateHabitStatus(habitText);
+    });
 
-  // Delete habit on button click
-  li.querySelector('.delete-btn').addEventListener('click', () => {
-    li.remove();
-    deleteHabit(habitText);
-  });
+    // Delete habit on button click with confirmation
+    li.querySelector('.delete-btn').addEventListener('click', () => {
+        if (confirm("Are you sure you want to delete this habit?")) {
+            li.remove();
+            deleteHabit(habitText);
+        }
+    });
 
-  habitList.appendChild(li);
+    habitList.appendChild(li);
 }
 
 // Save habit to local storage
-function saveHabit(text, completed) {
-  const habits = JSON.parse(localStorage.getItem('habits')) || [];
-  habits.push({ text, completed });
-  localStorage.setItem('habits', JSON.stringify(habits));
+function saveHabit(text, time, completed) {
+    const habits = JSON.parse(localStorage.getItem('habits')) || [];
+    habits.push({ text, time, completed });
+    localStorage.setItem('habits', JSON.stringify(habits));
 }
 
 // Update habit status in local storage
 function updateHabitStatus(habitText) {
-  const habits = JSON.parse(localStorage.getItem('habits')) || [];
-  const habit = habits.find((h) => h.text === habitText);
-  if (habit) {
-    habit.completed = !habit.completed;
-    localStorage.setItem('habits', JSON.stringify(habits));
-  }
+    const habits = JSON.parse(localStorage.getItem('habits')) || [];
+    const habit = habits.find((h) => h.text === habitText);
+    if (habit) {
+        habit.completed = !habit.completed;
+        localStorage.setItem('habits', JSON.stringify(habits));
+    }
 }
 
 // Delete habit from local storage
 function deleteHabit(habitText) {
-  let habits = JSON.parse(localStorage.getItem('habits')) || [];
-  habits = habits.filter((h) => h.text !== habitText);
-  localStorage.setItem('habits', JSON.stringify(habits));
+    let habits = JSON.parse(localStorage.getItem('habits')) || [];
+    habits = habits.filter((h) => h.text !== habitText);
+    localStorage.setItem('habits', JSON.stringify(habits));
+}
+
+// Display a random quote
+function displayRandomQuote() {
+    const randomIndex = Math.floor(Math.random() * quotes.length);
+    quoteDisplay.textContent = quotes[randomIndex];
 }
diff --git a/Habit Tracker App/styles.css b/Habit Tracker App/styles.css
index d496ee709..f95fecda2 100644
--- a/Habit Tracker App/styles.css	
+++ b/Habit Tracker App/styles.css	
@@ -1,79 +1,106 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: Arial, sans-serif;
-  }
-  
-  body {
-    background-color: #f4f4f4;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-  }
-  
-  .container {
-    background-color: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    width: 300px;
-    text-align: center;
-  }
-  
-  input {
-    width: 80%;
-    padding: 8px;
-    margin-top: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-  
-  button {
-    padding: 8px 12px;
-    margin-top: 10px;
-    border: none;
-    background-color: #5cb85c;
-    color: white;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  
-  button:hover {
-    background-color: #4cae4c;
-  }
-  
-  ul {
-    list-style-type: none;
-    margin-top: 15px;
-  }
-  
-  li {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    background-color: #fafafa;
-    margin-bottom: 5px;
-    border-radius: 4px;
-  }
-  
-  .completed {
-    text-decoration: line-through;
-    color: #888;
-  }
-  
-  .delete-btn {
-    background-color: #d9534f;
-    border: none;
-    color: white;
-    padding: 5px;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  
-  .delete-btn:hover {
-    background-color: #c9302c;
-  }
-  
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+body {
+  background-color: #f4f4f4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  transition: background-color 0.5s ease;
+}
+
+.container {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  width: 350px;
+  text-align: center;
+  animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+input {
+  width: 80%;
+  padding: 10px;
+  margin-top: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  transition: border 0.3s;
+}
+
+input:focus {
+  border: 1px solid #5cb85c;
+  outline: none;
+}
+
+button {
+  padding: 10px 15px;
+  margin-top: 10px;
+  border: none;
+  background-color: #5cb85c;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+  background-color: #4cae4c;
+  transform: scale(1.05);
+}
+
+.quote {
+  margin: 15px 0;
+  font-style: italic;
+  color: #666;
+}
+
+ul {
+  list-style-type: none;
+  margin-top: 15px;
+  padding: 0;
+}
+
+li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #fafafa;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+li:hover {
+  background-color: #f0f0f0;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #888;
+}
+
+.delete-btn {
+  background-color: #d9534f;
+  border: none;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.delete-btn:hover {
+  background-color: #c9302c;
+}
diff --git a/Highway Race Game/index.html b/Highway Race Game/index.html
new file mode 100644
index 000000000..f19561198
--- /dev/null
+++ b/Highway Race Game/index.html	
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="style.scss" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
+        <title>Document</title>
+    </head>
+
+    <body>
+        <header>0</header>
+        <div class="difficulty-select">
+            <h1>Select Difficulty</h1>
+            <button type="button" data-difficulty="0" disabled>Easy</button>
+            <button type="button" data-difficulty="1" disabled>Medium</button>
+            <button type="button" data-difficulty="2" disabled>Hard</button>
+            <button type="button" data-difficulty="3" disabled>Brutal</button>
+        </div>
+        <div class="tutorial">
+            <p><strong>Steer:</strong></p>
+            <p>
+                <kbd>A</kbd> <kbd>D</kbd><br />or<br /><kbd>&#8592;</kbd>
+                <kbd>&#8594;</kbd><br />or<br />Drag left/right
+            </p>
+        </div>
+        <button type="button" class="replay" disabled>
+            <svg
+                class="btn-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                x="0px"
+                y="0px"
+                width="96px"
+                height="96px"
+                viewBox="0 0 96 96"
+                enable-background="new 0 0 96 96"
+            >
+                <path
+                    d="M96,88V60c0-1.083-0.396-2.021-1.188-2.812C94.02,56.396,93.083,56,92,56H64c-1.75,0-2.979,0.833-3.688,2.5
+c-0.709,1.625-0.418,3.062,0.875,4.312l8.625,8.625C63.645,77.145,56.374,79.999,48,79.999c-4.333,0-8.469-0.844-12.406-2.531
+c-3.937-1.687-7.344-3.969-10.219-6.844s-5.156-6.281-6.844-10.219C16.843,56.467,16,52.332,16,47.999
+c0-4.334,0.844-8.469,2.531-12.406c1.687-3.937,3.969-7.344,6.844-10.219s6.281-5.156,10.219-6.844
+c3.938-1.688,8.073-2.531,12.406-2.531c7.042,0,13.375,2.072,19,6.219c5.625,4.147,9.479,9.595,11.562,16.345
+C78.854,39.521,79.479,40,80.438,40h12.438c0.667,0,1.188-0.25,1.562-0.75c0.416-0.541,0.562-1.104,0.438-1.688
+c-1.625-7.291-4.698-13.791-9.219-19.5C81.135,12.354,75.594,7.916,69.031,4.75C62.468,1.584,55.458,0,48,0
+c-6.5,0-12.708,1.271-18.625,3.812s-11.021,5.959-15.312,10.25s-7.708,9.396-10.25,15.312S0,41.5,0,48s1.271,12.708,3.812,18.625
+s5.958,11.021,10.25,15.312s9.396,7.707,15.312,10.25C35.29,94.729,41.5,96,48,96c6.125,0,12.052-1.156,17.781-3.469
+c5.729-2.313,10.822-5.573,15.281-9.781l8.125,8.062c1.207,1.291,2.666,1.582,4.375,0.875C95.188,90.979,96,89.75,96,88z"
+                />
+            </svg>
+        </button>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/Highway Race Game/script.js b/Highway Race Game/script.js
new file mode 100644
index 000000000..3fd736edb
--- /dev/null
+++ b/Highway Race Game/script.js	
@@ -0,0 +1,1109 @@
+window.addEventListener("DOMContentLoaded",app);
+
+function app() {
+	var header = document.querySelector("header"),
+		difSelect = document.querySelector(".difficulty-select"),
+		difButtons = difSelect.querySelectorAll("button"),
+		tutorialBox = document.querySelector(".tutorial"),
+		replayButton = document.querySelector(".replay"),
+
+		scene,
+		camera,
+		renderer,
+		hemiLight,
+		pointLight,
+		touch = {hold: false, x: 0},
+
+		difSelectActive = false,
+		scoreCounterActive = false,
+		replayBtnActive = false,
+
+		game = null,
+		randomInt = (min,max) => Math.round(Math.random() * (max - min)) + min,
+		skyColor = 0x69c6d0,
+		pointLightZ = -60,
+		cameraY = 45,
+		cameraYMin = 7,
+		renderDistance = 8,
+		roadChunks = [];
+
+	class Game {
+		constructor(args) {
+			// 0: easy, 1: medium (default), 2: hard, 3: brutal
+			let d = args.difficulty;
+			this.difficulty = d >= 0 && d <= 3 ? d : 1;
+
+			this.tutorial = args.tutorial === true;
+			this.over = false;
+			this.preparingNew = false;
+			this.score = 0;
+			this.noScoreXZone = 15;
+			this.vehicles = [
+				new Vehicle({
+					color: 0xff1717,
+					x: 0,
+					z: 0,
+					modelID: 0,
+					speed: 1,
+					acceleration: 0.001 * 2**d,
+					name: "Vehicle 0"
+				})
+			];
+			this.vehicleSpawns = this.vehicles.length;
+			this.vehicleLimit = 9;
+			this.vehicleIDCtrld = 0;
+			this.spark = null;
+		}
+	}
+	class RoadChunk {
+		constructor(zSpaces) {
+			let chunkSize = 40,
+				lineWidth = 1,
+				lineHeight = 4,
+				dotLines = 3;
+
+			this.chunkSize = chunkSize;
+			// surface
+			this.surfaceGeo = new THREE.PlaneBufferGeometry(chunkSize,chunkSize);
+			this.surfaceMat = new THREE.MeshLambertMaterial({
+				color: 0x575757
+			});
+			this.surface = new THREE.Mesh(this.surfaceGeo,this.surfaceMat);
+			this.surface.name = "Road Chunk";
+			this.surface.rotation.x = -Math.PI/2;
+			this.surface.position.set(0,0,zSpaces*chunkSize);
+			this.surface.receiveShadow = true;
+			scene.add(this.surface);
+
+			// shoulder lines
+			let lineGeo = new THREE.PlaneBufferGeometry(lineWidth,chunkSize),
+				lineMat = new THREE.MeshLambertMaterial({
+					color: 0xffffff
+				}),
+				line = new THREE.Mesh(lineGeo,lineMat);
+			line.receiveShadow = true;
+
+			let leftShoulder = line.clone();
+			leftShoulder.position.set(-chunkSize*0.375,0,0.01);
+			this.surface.add(leftShoulder);
+
+			let rightShoulder = line.clone();
+			rightShoulder.position.set(chunkSize*0.375,0,0.01);
+			this.surface.add(rightShoulder);
+
+			// dotted lines
+			let dotLineGeo = new THREE.PlaneBufferGeometry(lineWidth,lineHeight),
+				dotLineMat = new THREE.MeshLambertMaterial({
+					color: 0xffffff
+				}),
+				dotLine = new THREE.Mesh(dotLineGeo,dotLineMat);
+
+			for (let l = 0; l < dotLines; ++l) {
+				let y = chunkSize/2 - (chunkSize / dotLines) * l - lineHeight/2;
+
+				let leftLine = dotLine.clone();
+				leftLine.position.set(-chunkSize*0.125,y,0.01);
+				this.surface.add(leftLine);
+
+				let rightLine = dotLine.clone();
+				rightLine.position.set(chunkSize*0.125,y,0.01);
+				this.surface.add(rightLine);
+			}
+		}
+	}
+	class Vehicle {
+		constructor(args) {
+			this.color = args.color || randomInt(0x171717,0xcccccc);
+			this.x = args.x || 0;
+			this.z = args.z || 0;
+			this.width = 1;
+			this.height = 1;
+			this.depth = 1;
+			this.speed = args.speed || 1;
+			this.acceleration = args.acceleration || 0;
+			this.model = null;
+			this.name = args.name || "";
+
+			this.maxSpeed = 4;
+			this.isSteering = false;
+			this.steerAngle = 0;
+			this.maxSteerAngle = 30;
+			this.steerSpeed = 0.15;
+			this.steerDir = "";
+			this.xLimit = 20;
+			this.crashed = false;
+			this.deceleration = 0.01;
+
+			// 0: car, 1: truck, 2: tractor trailer
+			let modelID = args.modelID;
+
+			if (modelID === undefined)
+				modelID = Math.round(Math.random() * 2)
+
+			// dimensions refer to hitbox
+			switch (modelID) {
+				case 1:
+					this.width = 5;
+					this.height = 5;
+					this.depth = 10;
+					this.model = new Truck(this.color,this.x,this.z,this.name); 
+					break;
+				case 2:
+					this.width = 5;
+					this.height = 8;
+					this.depth = 18;
+					this.model = new TractorTrailer(this.color,this.x,this.z,this.name);
+					break;
+				default:
+					this.width = 5;
+					this.height = 4;
+					this.depth = 10;
+					this.model = new Car(this.color,this.x,this.z,this.name);
+					break;
+			}
+		}
+		accelerate() {
+			if (this.speed < this.maxSpeed) {
+				this.speed += this.acceleration;
+				this.speed = +(this.speed).toFixed(3);
+			}
+		}
+		decelerate() {
+			if (this.speed > 0) {
+				this.speed -= this.deceleration;
+				this.speed = +(this.speed).toFixed(3);
+
+				if (this.speed < 0)
+					this.speed = 0;
+			}
+		}
+		move() {
+			let mesh = this.model.mesh;
+
+			// normal forward direction
+			this.z -= this.speed;
+			mesh.position.z = this.z;
+
+			// handle steering
+			if (this.isSteering && !this.crashed) {
+				if (this.steerDir == "left") {
+					this.x -= this.steerSpeed;
+
+					if (this.steerAngle < this.maxSteerAngle)
+						++this.steerAngle;
+				}
+				else if (this.steerDir == "right") {
+					this.x += this.steerSpeed;
+
+					if (this.steerAngle > -this.maxSteerAngle)
+						--this.steerAngle;
+				}
+
+			// undo steering
+			} else if (!this.crashed) {
+				if (this.steerAngle > 0) {
+					--this.steerAngle;
+					this.x -= this.steerSpeed;
+
+				} else if (this.steerAngle < 0) {
+					++this.steerAngle;
+					this.x += this.steerSpeed;
+				}
+			}
+
+			// auto crash if out of bounds
+			if (this.x < -this.xLimit || this.x > this.xLimit) {
+				this.crashed = true;
+				game.over = true;
+			}
+
+			mesh.position.x = this.x;
+			mesh.rotation.y = this.steerAngle * Math.PI/180;
+
+			if (!this.crashed) {
+				mesh.getObjectByName("FL").rotation.y = mesh.rotation.y;
+				mesh.getObjectByName("FR").rotation.y = mesh.rotation.y;
+			}
+		}
+		steer(dir) {
+			this.isSteering = true;
+			this.steerDir = dir;
+		}
+		straighten() {
+			this.isSteering = false;
+			this.steerDir = "";
+		}
+	}
+	class Car {
+		constructor(color,x,z,name) {
+			// I. Group
+			this.mass = 3;
+			this.mesh = new THREE.Object3D();
+			this.mesh.name = name;
+			this.mesh.position.set(x,2,z);
+			scene.add(this.mesh);
+
+			// II. Body
+			var carBodyBase = new THREE.Mesh(new THREE.BoxBufferGeometry(5,3,10)),
+				cutFront = new THREE.Mesh(new THREE.BoxBufferGeometry(5,1,3)),
+				cutBack = new THREE.Mesh(new THREE.BoxBufferGeometry(5,1,2)),
+				frontTireHoles = new THREE.Mesh(new THREE.CylinderBufferGeometry(1.2,1.2,5,16,16,false)),
+				backTireHoles = frontTireHoles.clone();
+
+			cutFront.position.set(0,1,-3.5);
+			cutBack.position.set(0,1,4);
+
+			frontTireHoles.position.set(0,-1.5,-3);
+			frontTireHoles.rotation.z = 90 * Math.PI/180;
+
+			backTireHoles.position.set(0,-1.5,3);
+			backTireHoles.rotation.z = frontTireHoles.rotation.z;
+
+			carBodyBase.updateMatrix();
+			cutFront.updateMatrix();
+			cutBack.updateMatrix();
+			frontTireHoles.updateMatrix();
+			backTireHoles.updateMatrix();
+
+			var carBodyBase_BSP = CSG.fromMesh(carBodyBase),
+				cutFront_BSP = CSG.fromMesh(cutFront),
+				cutBack_BSP = CSG.fromMesh(cutBack),
+				frontTireHoles_BSP = CSG.fromMesh(frontTireHoles),
+				backTireHoles_BSP = CSG.fromMesh(backTireHoles),
+				carBody_BSP = carBodyBase_BSP
+					.subtract(cutFront_BSP)
+					.subtract(cutBack_BSP)
+					.subtract(frontTireHoles_BSP)
+					.subtract(backTireHoles_BSP),
+				carBody = CSG.toMesh(carBody_BSP, carBodyBase.matrix);
+
+			carBody.material = new THREE.MeshLambertMaterial({
+				color: color
+			});
+			carBody.position.set(0,0.5,0);
+			carBody.castShadow = true;
+			this.mesh.add(carBody);
+
+			// III. Wheels
+			var wheelGeo = new THREE.CylinderBufferGeometry(1,1,0.5,24,24,false),
+				wheelMat = new THREE.MeshLambertMaterial({
+					color: 0x171717
+				}),
+				wheel = new THREE.Mesh(wheelGeo,wheelMat);
+			wheel.castShadow = true;
+			wheel.rotation.z = -0.5 * Math.PI;
+
+			var wheelPos = [
+				{x: -2.25, y: -1, z: 3, name: "BL"},
+				{x: 2.25, y: -1, z: 3, name: "BR"},
+				{x: -2.25, y: -1, z: -3, name: "FL"},
+				{x: 2.25, y: -1, z: -3, name: "FR"}
+			];
+			for (let p of wheelPos) {
+				var w = wheel.clone();
+				w.name = p.name;
+				w.position.set(p.x,p.y,p.z);
+				this.mesh.add(w);
+			}
+
+			// IV. Windows
+			var windowMat = new THREE.MeshLambertMaterial({
+					color: 0x171717
+				}),
+
+				horzWindowGeo = new THREE.PlaneBufferGeometry(4.4,0.8),
+				horzWindowMat = windowMat,
+				horzWindow = new THREE.Mesh(horzWindowGeo,horzWindowMat),
+
+				midFrontWindowGeo = new THREE.PlaneBufferGeometry(2.3,0.8),
+				midFrontWindowMat = windowMat,
+				midFrontWindow = new THREE.Mesh(midFrontWindowGeo,midFrontWindowMat),
+
+				midBackWindowGeo = new THREE.PlaneBufferGeometry(1.5,0.8),
+				midBackWindowMat = windowMat,
+				midBackWindow = new THREE.Mesh(midBackWindowGeo,midBackWindowMat);
+
+			horzWindow.receiveShadow = true;
+			midFrontWindow.receiveShadow = true;
+			midBackWindow.receiveShadow = true;
+
+			var leftMFWindow = midFrontWindow.clone();
+			leftMFWindow.position.set(-2.51,1.4,-0.4);
+			leftMFWindow.rotation.y = -0.5 * Math.PI;
+			this.mesh.add(leftMFWindow);
+
+			var rightMFWindow = midFrontWindow.clone();
+			rightMFWindow.position.set(2.51,1.4,-0.4);
+			rightMFWindow.rotation.y = 0.5 * Math.PI;
+			this.mesh.add(rightMFWindow);
+
+			var leftMBWindow = midBackWindow.clone();
+			leftMBWindow.position.set(-2.51,1.4,1.9);
+			leftMBWindow.rotation.y = -0.5 * Math.PI;
+			this.mesh.add(leftMBWindow);
+
+			var rightMBWindow = midBackWindow.clone();
+			rightMBWindow.position.set(2.51,1.4,1.9);
+			rightMBWindow.rotation.y = 0.5 * Math.PI;
+			this.mesh.add(rightMBWindow);
+
+			var frontWindow = horzWindow.clone();
+			frontWindow.position.set(0,1.4,-2.01);
+			frontWindow.rotation.y = Math.PI;
+			this.mesh.add(frontWindow);
+
+			var backWindow = horzWindow.clone();
+			backWindow.position.set(0,1.4,3.01);
+			this.mesh.add(backWindow);
+
+			// V. Lights
+			var lightGeo = new THREE.PlaneBufferGeometry(1,0.5),
+				frontLightMat = new THREE.MeshLambertMaterial({
+					color: 0xf1f1f1
+				}),
+				frontLight = new THREE.Mesh(lightGeo,frontLightMat),
+				backLightMat = new THREE.MeshLambertMaterial({
+					color: 0xf65555
+				}),
+				backLight = new THREE.Mesh(lightGeo,backLightMat);
+
+			frontLight.rotation.y = Math.PI;
+
+			var frontLeftLight = frontLight.clone();
+			frontLeftLight.position.set(-2,0.25,-5.01);
+			this.mesh.add(frontLeftLight);
+
+			var frontRightLight = frontLight.clone();
+			frontRightLight.position.set(2,0.25,-5.01);
+			this.mesh.add(frontRightLight);
+
+			var backLeftLight = backLight.clone();
+			backLeftLight.position.set(-2,0.25,5.01);
+			this.mesh.add(backLeftLight);
+
+			var backRightLight = backLight.clone();
+			backRightLight.position.set(2,0.25,5.01);
+			this.mesh.add(backRightLight);
+		}
+	}
+	class Truck {
+		constructor(color,x,z,name) {
+			// I. Group
+			this.mass = 4;
+			this.mesh = new THREE.Object3D();
+			this.mesh.name = name;
+			this.mesh.position.set(x,2.5,z);
+			scene.add(this.mesh);
+
+			// II. Body
+			var truckBodyBase = new THREE.Mesh(new THREE.BoxBufferGeometry(5,4,10)),
+				cutFront = new THREE.Mesh(new THREE.BoxBufferGeometry(5,1.5,2.5)),
+				cutBack = new THREE.Mesh(new THREE.BoxBufferGeometry(5,1.5,4.5)),
+				frontTireHoles = new THREE.Mesh(new THREE.CylinderBufferGeometry(1.2,1.2,5,16,16,false)),
+				backTireHoles = frontTireHoles.clone(),
+				trunk = new THREE.Mesh(new THREE.BoxBufferGeometry(4.4,1.5,4));
+
+			cutFront.position.set(0,1.25,-3.75);
+			cutBack.position.set(0,1.25,3);
+
+			frontTireHoles.position.set(0,-2,-3);
+			frontTireHoles.rotation.z = 90 * Math.PI/180;
+
+			backTireHoles.position.set(0,-2,3);
+			backTireHoles.rotation.z = frontTireHoles.rotation.z;
+
+			trunk.position.set(0,0.1,2.75);
+
+			truckBodyBase.updateMatrix();
+			cutFront.updateMatrix();
+			cutBack.updateMatrix();
+			frontTireHoles.updateMatrix();
+			backTireHoles.updateMatrix();
+			trunk.updateMatrix();
+
+			var truckBodyBase_BSP = CSG.fromMesh(truckBodyBase),
+				cutFront_BSP = CSG.fromMesh(cutFront),
+				cutBack_BSP = CSG.fromMesh(cutBack),
+				frontTireHoles_BSP = CSG.fromMesh(frontTireHoles),
+				backTireHoles_BSP = CSG.fromMesh(backTireHoles),
+				trunk_BSP = CSG.fromMesh(trunk),
+				truckBody_BSP = truckBodyBase_BSP
+					.subtract(cutFront_BSP)
+					.subtract(cutBack_BSP)
+					.subtract(frontTireHoles_BSP)
+					.subtract(backTireHoles_BSP)
+					.subtract(trunk_BSP),
+				truckBody = CSG.toMesh(truckBody_BSP, truckBodyBase.matrix);
+
+			truckBody.material = new THREE.MeshLambertMaterial({
+				color: color
+			});
+			truckBody.position.set(0,0.5,0);
+			truckBody.castShadow = true;
+			this.mesh.add(truckBody);
+
+			// III. Wheels
+			var wheelGeo = new THREE.CylinderBufferGeometry(1,1,0.5,24,24,false),
+				wheelMat = new THREE.MeshLambertMaterial({
+					color: 0x171717
+				}),
+				wheel = new THREE.Mesh(wheelGeo,wheelMat);
+			wheel.castShadow = true;
+			wheel.rotation.z = -0.5 * Math.PI;
+
+			var wheelPos = [
+				{x: -2.25, y: -1.5, z: 3, name: "BL"},
+				{x: 2.25, y: -1.5, z: 3, name: "BR"},
+				{x: -2.25, y: -1.5, z: -3, name: "FL"},
+				{x: 2.25, y: -1.5, z: -3, name: "FR"}
+			];
+			for (let p of wheelPos) {
+				var w = wheel.clone();
+				w.name = p.name;
+				w.position.set(p.x,p.y,p.z);
+				this.mesh.add(w);
+			}
+
+			// IV. Windows
+			var windowMat = new THREE.MeshLambertMaterial({
+					color: 0x171717
+				}),
+
+				horzWindowGeo = new THREE.PlaneBufferGeometry(4.4,1.2),
+				horzWindowMat = windowMat,
+				horzWindow = new THREE.Mesh(horzWindowGeo,horzWindowMat),
+
+				midFrontWindowGeo = new THREE.PlaneBufferGeometry(1.4,1.2),
+				midFrontWindowMat = windowMat,
+				midFrontWindow = new THREE.Mesh(midFrontWindowGeo,midFrontWindowMat),
+
+				midBackWindowGeo = new THREE.PlaneBufferGeometry(1,1.2),
+				midBackWindowMat = windowMat,
+				midBackWindow = new THREE.Mesh(midBackWindowGeo,midBackWindowMat);
+
+			horzWindow.receiveShadow = true;
+			midFrontWindow.receiveShadow = true;
+			midBackWindow.receiveShadow = true;
+
+			var leftMFWindow = midFrontWindow.clone();
+			leftMFWindow.position.set(-2.51,1.55,-1.55);
+			leftMFWindow.rotation.y = -0.5 * Math.PI;
+			this.mesh.add(leftMFWindow);
+
+			var rightMFWindow = midFrontWindow.clone();
+			rightMFWindow.position.set(2.51,1.55,-1.55);
+			rightMFWindow.rotation.y = 0.5 * Math.PI;
+			this.mesh.add(rightMFWindow);
+
+			var leftMBWindow = midBackWindow.clone();
+			leftMBWindow.position.set(-2.51,1.55,-0.05);
+			leftMBWindow.rotation.y = -0.5 * Math.PI;
+			this.mesh.add(leftMBWindow);
+
+			var rightMBWindow = midBackWindow.clone();
+			rightMBWindow.position.set(2.51,1.55,-0.05);
+			rightMBWindow.rotation.y = 0.5 * Math.PI;
+			this.mesh.add(rightMBWindow);
+
+			var frontWindow = horzWindow.clone();
+			frontWindow.position.set(0,1.55,-2.51);
+			frontWindow.rotation.y = Math.PI;
+			this.mesh.add(frontWindow);
+
+			var backWindow = horzWindow.clone();
+			backWindow.position.set(0,1.55,0.76);
+			this.mesh.add(backWindow);
+
+			/// V. Lights
+			var lightGeo = new THREE.PlaneBufferGeometry(0.75,1),
+				frontLightMat = new THREE.MeshLambertMaterial({
+					color: 0xf1f1f1
+				}),
+				frontLight = new THREE.Mesh(lightGeo,frontLightMat),
+				backLightMat = new THREE.MeshLambertMaterial({
+					color: 0xf65555
+				}),
+				backLight = new THREE.Mesh(lightGeo,backLightMat);
+
+			frontLight.rotation.y = Math.PI;
+
+			var frontLeftLight = frontLight.clone();
+			frontLeftLight.position.set(-2.125,0.25,-5.01);
+			this.mesh.add(frontLeftLight);
+
+			var frontRightLight = frontLight.clone();
+			frontRightLight.position.set(2.125,0.25,-5.01);
+			this.mesh.add(frontRightLight);
+
+			var backLeftLight = backLight.clone();
+			backLeftLight.position.set(-2.125,0.25,5.01);
+			this.mesh.add(backLeftLight);
+
+			var backRightLight = backLight.clone();
+			backRightLight.position.set(2.125,0.25,5.01);
+			this.mesh.add(backRightLight);
+		}
+	}
+	class TractorTrailer {
+		constructor(color,x,z,name) {
+			// I. Group
+			this.mass = 12;
+			this.mesh = new THREE.Object3D();
+			this.mesh.name = name;
+			this.mesh.position.set(x,4,z);
+			scene.add(this.mesh);
+
+			// II. Cab
+			var cabPt1Geo = new THREE.BoxBufferGeometry(5,4,5),
+				cabPt1Mat = new THREE.MeshLambertMaterial({
+					color: color
+				}),
+				cabPt1 = new THREE.Mesh(cabPt1Geo,cabPt1Mat);
+			cabPt1.position.set(0,1,-6.5);
+			cabPt1.castShadow = true;
+			this.mesh.add(cabPt1);
+
+			var cabPt2Geo = new THREE.BoxBufferGeometry(5,2,0.5),
+				cabPt2Mat = cabPt1Mat,
+				cabPt2 = new THREE.Mesh(cabPt2Geo,cabPt2Mat);
+			cabPt2.position.set(0,-2,-8.75);
+			cabPt2.castShadow = true;
+			this.mesh.add(cabPt2);
+
+			var cabPt3Geo = new THREE.BoxBufferGeometry(3,2,8.25),
+				cabPt3Mat = new THREE.MeshLambertMaterial({
+					color: 0x3f3f3f
+				}),
+				cabPt3 = new THREE.Mesh(cabPt3Geo,cabPt3Mat);
+			cabPt3.position.set(0,-2,-4.375);
+			cabPt3.castShadow = true;
+			this.mesh.add(cabPt3);
+
+			var cabLeftWindowGeo = new THREE.PlaneBufferGeometry(2.5,2),
+				cabLeftWindowMat = new THREE.MeshLambertMaterial({
+					color: 0x171717
+				}),
+	        	cabLeftWindow = new THREE.Mesh(cabLeftWindowGeo,cabLeftWindowMat);
+			cabLeftWindow.position.set(-2.51,1,-7.75);
+			cabLeftWindow.rotation.y = -0.5 * Math.PI;
+			cabLeftWindow.receiveShadow = true;
+			this.mesh.add(cabLeftWindow);
+
+			var cabRightWindow = cabLeftWindow.clone();
+			cabRightWindow.position.x = -cabLeftWindow.position.x;
+			cabRightWindow.rotation.y = -cabLeftWindow.rotation.y;
+			this.mesh.add(cabRightWindow);
+
+			var cabFrontWindowGeo = new THREE.PlaneBufferGeometry(5,2),
+				cabFrontWindowMat = cabLeftWindowMat,
+	        	cabFrontWindow = new THREE.Mesh(cabFrontWindowGeo,cabFrontWindowMat);
+			cabFrontWindow.position.set(0,1,-9.01);
+			cabFrontWindow.rotation.y = Math.PI;
+			cabFrontWindow.receiveShadow = true;
+			this.mesh.add(cabFrontWindow);
+
+			var lightGeo = new THREE.PlaneBufferGeometry(1,1),
+				lightMat = new THREE.MeshLambertMaterial({
+					color: 0xf1f1f1
+				}),
+				light = new THREE.Mesh(lightGeo,lightMat);
+
+			light.rotation.y = Math.PI;
+
+			var leftLight = light.clone();
+			leftLight.position.set(-1.5,-1.5,-9.01);
+			this.mesh.add(leftLight);
+
+			var rightLight = light.clone();
+			rightLight.position.set(1.5,-1.5,-9.01);
+			this.mesh.add(rightLight);
+
+			// III. Metal Cylinders
+			var cabLeftCylinderGeo = new THREE.CylinderBufferGeometry(0.75,0.75,2.25,16,16,false),
+				cabLeftCylinderMat = new THREE.MeshLambertMaterial({
+					color: 0x7f7f7f
+				}),
+				cabLeftCylinder = new THREE.Mesh(cabLeftCylinderGeo,cabLeftCylinderMat);
+			cabLeftCylinder.position.set(-2.25,-1.875,-3.875);
+			cabLeftCylinder.rotation.x = -0.5 * Math.PI;
+			cabLeftCylinder.castShadow = true;
+			this.mesh.add(cabLeftCylinder);
+
+			var cabRightCylinder = cabLeftCylinder.clone();
+			cabRightCylinder.position.x = -cabLeftCylinder.position.x;
+			this.mesh.add(cabRightCylinder);
+
+			// IV. Trailer
+			var trailerGeo = new THREE.BoxBufferGeometry(5,5,12),
+				trailerMat = new THREE.MeshLambertMaterial({
+					color: 0xffffff
+				}),
+				trailer = new THREE.Mesh(trailerGeo,trailerMat);
+			trailer.position.set(0,1.5,3);
+			trailer.castShadow = true;
+			this.mesh.add(trailer);
+
+			var trailerBottomGeo = new THREE.BoxBufferGeometry(3,2,2),
+				trailerBottomMat = cabPt3Mat,
+				trailerBottom = new THREE.Mesh(trailerBottomGeo,trailerBottomMat);
+			trailerBottom.position.set(0,-2,7);
+			trailerBottom.castShadow = true;
+			this.mesh.add(trailerBottom);
+
+			// V. Wheels
+			var wheelGeo = new THREE.CylinderBufferGeometry(1.5,1.5,1,24,24,false),
+				wheelMat = new THREE.MeshLambertMaterial({
+					color: 0x242424
+				}),
+				wheel = new THREE.Mesh(wheelGeo,wheelMat);
+			wheel.castShadow = true;
+			wheel.rotation.z = -0.5 * Math.PI;
+
+			var wheelPos = [
+				{x: -2, y: -2.5, z: 7, name: "BL"},
+				{x: 2, y: -2.5, z: 7, name: "BR"},
+				{x: -2, y: -2.5, z: -1, name: "ML"},
+				{x: 2, y: -2.5, z: -1, name: "MR"},
+				{x: -2, y: -2.5, z: -6.75, name: "FL"},
+				{x: 2, y: -2.5, z: -6.75, name: "FR"}
+			];
+			for (let p of wheelPos) {
+				var w = wheel.clone();
+				w.name = p.name;
+				w.position.set(p.x,p.y,p.z);
+				this.mesh.add(w);
+			}
+		}
+	}
+	class Spark {
+		constructor(x,y,z,isHorz = false) {
+			this.center = new THREE.Object3D();
+			this.center.name = "Spark";
+			this.center.position.set(x,y,z);
+			scene.add(this.center);
+
+			this.isHorz = isHorz;
+			this.particles = [];
+
+			// populate particles
+			let particleGeo = new THREE.SphereBufferGeometry(1,16,16),
+				particleMat = new THREE.MeshBasicMaterial({
+					color: 0xffff00
+				}),
+				particleMesh = new THREE.Mesh(particleGeo,particleMat);
+
+			for (var m = 0; m < randomInt(6,8); ++m) {
+				this.particles.push({
+					x: 0,
+					y: 0,
+					z: 0,
+					size: 1,
+					speed: 0.2,
+					decay: 0.04,
+					angle: randomInt(0,359),
+					mesh: particleMesh.clone()
+				});
+				this.center.add(this.particles[m].mesh);
+			}
+		}
+		moveParticles() {
+			// shrink particles as they move
+			for (let p of this.particles) {
+				if (p.size > 0) {
+					p.size -= p.decay;
+
+					if (this.isHorz === true) {
+						p.x += p.speed * Math.sin(p.angle * Math.PI/180);
+						p.mesh.position.x = p.x;
+					}
+					else {
+						p.z += p.speed * Math.sin(p.angle * Math.PI/180);
+						p.mesh.position.z = p.z;
+					}
+
+					p.y += p.speed * Math.cos(p.angle * Math.PI/180);
+					p.mesh.position.y = p.y;
+
+					p.mesh.scale.x = p.size;
+					p.mesh.scale.y = p.size;
+					p.mesh.scale.z = p.size;
+				}
+			}
+		}
+	}
+
+	var init = () => {
+			// I. Setting Up Scene
+			scene = new THREE.Scene();
+			camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,2000);
+			renderer = new THREE.WebGLRenderer({
+				logarithmicDepthBuffer: true
+			});
+			renderer.setClearColor(new THREE.Color(skyColor));
+			renderer.setSize(window.innerWidth, window.innerHeight);
+			renderer.shadowMap.enabled = true;
+
+			// II. Lighting
+			// A. Ambient
+			var ambientLight = new THREE.AmbientLight(0xffffff);
+			ambientLight.name = "Ambient Light";
+			scene.add(ambientLight);
+
+			// B. Hemisphere
+			hemiLight = new THREE.HemisphereLight(0x0044ff, 0xffffff, 0.5);
+			hemiLight.name = "Hemisphere Light";
+			hemiLight.position.set(0,5,0);
+			scene.add(hemiLight);
+			
+			// C. Point
+			pointLight = new THREE.PointLight(0xffffff,0.5);
+			pointLight.name = "Point Light";
+			pointLight.position.set(0,60,pointLightZ);
+			pointLight.castShadow = true;
+			pointLight.shadow.mapSize = new THREE.Vector2(1024,1024);
+			scene.add(pointLight);
+
+			// III. Scenery
+			// A. Road
+			for (let r = 1; r > -renderDistance; --r)
+				roadChunks.push(new RoadChunk(r));
+
+			// B. Grass
+			var firstChunkSize = roadChunks[0].chunkSize,
+				grassDepth = firstChunkSize * (renderDistance + 1),
+				grassGeo = new THREE.PlaneBufferGeometry(400,grassDepth),
+				grassMat = new THREE.MeshLambertMaterial({
+					color: 0xbbe868
+				}),
+				grass = new THREE.Mesh(grassGeo,grassMat);
+
+			grass.name = "Grass";
+			grass.rotation.x = -Math.PI/2;
+			grass.position.set(0,-0.05,-grassDepth/2 + firstChunkSize*1.5);
+			grass.receiveShadow = true;
+			scene.add(grass);
+
+			// C. Fog
+			scene.fog = new THREE.Fog(skyColor, 0.01, grassDepth - firstChunkSize*2);
+
+			// IV. Camera
+			camera.position.set(0,cameraYMin,30);
+			camera.lookAt(scene.position);
+			
+			// V. Rendering
+			document.body.appendChild(renderer.domElement);
+		},
+		checkCollision = (a,b) => {
+			if (!a.crashed && !b.crashed && (a.name != b.name)) {
+				let A_left = a.x - a.width/2,
+					A_right = a.x + a.width/2,
+					A_front = a.z - a.depth/2,
+					A_back = a.z + a.depth/2,
+					B_left = b.x - b.width/2,
+					B_right = b.x + b.width/2,
+					B_front = b.z - b.depth/2,
+					B_back = b.z + b.depth/2;
+
+				// right hits left, left hits right
+				let touchedX_RL = (A_left <= B_right && A_left >= B_left),
+					touchedX_LR = (A_right >= B_left && A_right <= B_right),
+				// front hits back, back hits front
+					touchedZ_FB = (A_front <= B_back && A_front >= B_front),
+					touchedZ_BF = (A_back >= B_front && A_back <= B_back);
+				
+				if ((touchedX_RL || touchedX_LR) && (touchedZ_FB || touchedZ_BF)) {
+					var newMomentum = (a.model.mass * a.speed + b.model.mass * b.speed)/(a.model.mass + b.model.mass);
+
+					a.speed = newMomentum;
+					b.speed = newMomentum;
+					
+					let sx = 0,
+						sz = 0;
+
+					// x-center the spark between crashing ends
+					if (A_left <= B_right)
+						sx = (A_left + B_right)/2;
+					else if (A_right >= B_left)
+						sx = (A_right + B_left)/2;
+
+					// then z-center it
+					if (A_front <= B_back)
+						sz = (A_front + B_back)/2;
+					else if (A_back >= B_front)
+						sz = (A_back + B_front)/2;
+
+					// trigger spark for player vehicle
+					if (a.name == "Vehicle 0") {
+						a.crashed = true;
+						game.over = true;
+						game.spark = new Spark(sx,a.height/2,sz,A_front - B_back < 1);
+					}
+				}
+			}
+		},
+		toggleDifBtnStates = () => {
+			for (let b of difButtons)
+				b.disabled = !b.disabled;
+		},
+		toggleDifMenu = () => {
+			difSelectActive = !difSelectActive;
+
+			let activeClass = "menu-active",
+				inactiveClass = "menu-inactive";
+
+			if (difSelectActive) {
+				difSelect.classList.remove(inactiveClass);
+				void difSelect.offsetWidth;
+				difSelect.classList.add(activeClass);
+				setTimeout(toggleDifBtnStates,1500);
+
+			} else {
+				difSelect.classList.remove(activeClass);
+				void difSelect.offsetWidth;
+				difSelect.classList.add(inactiveClass);
+				toggleDifBtnStates();
+			}
+		},
+		toggleScoreCounter = () => {
+			scoreCounterActive = !scoreCounterActive;
+
+			let activeClass = "score-active";
+
+			if (scoreCounterActive)
+				header.classList.add(activeClass);
+			else
+				header.classList.remove(activeClass);
+		},
+		toggleReplayBtn = () => {
+			replayBtnActive = !replayBtnActive;
+			replayButton.disabled = !replayBtnActive;
+
+			let activeClass = "replay-active";
+
+			if (replayBtnActive)
+				replayButton.classList.add(activeClass);
+			else
+				replayButton.classList.remove(activeClass);
+		},
+		showTutorial = () => {
+			if (game.tutorial)
+				tutorialBox.classList.add("tutorial-active");
+		},
+		hideTutorial = () => {
+			if (game.tutorial) {
+				game.tutorial = false;
+				tutorialBox.classList.remove("tutorial-active");
+			}
+		},
+		startGame = difficulty => {
+			if (game != null && game.over) {
+				// remove spark
+				if (game.spark != null) {
+					let sparkName = scene.getObjectByName(game.spark.name);
+					scene.remove(sparkName);
+				}
+				// remove all vehicles
+				for (let v of game.vehicles) {
+					let vehicleName = scene.getObjectByName(v.name);
+					scene.remove(vehicleName);
+				}
+			}
+
+			// first time or starting anew
+			if (game == null || game.over) {
+				game = new Game({
+					difficulty: difficulty,
+					tutorial: game == null
+				});
+				header.innerHTML = game.score;
+				toggleScoreCounter();
+				showTutorial();
+			}
+		},
+		update = () => {
+			// intro sequence
+			if (cameraY > cameraYMin) {
+				cameraY -= 0.5;
+				if (cameraY == cameraYMin)
+					toggleDifMenu();
+			}
+
+			// normal game function
+			if (game != null && cameraY == cameraYMin) {
+				let firstChunkSize = roadChunks[0].chunkSize,
+					vehicleCtrld = game.vehicles[game.vehicleIDCtrld];
+
+				// push all vehicles forward one chunk when player reaches that distance
+				if (vehicleCtrld.z <= -firstChunkSize) {
+					let vehiclesBehind = [];
+					game.vehicles.forEach((e,i) => {
+						e.z += firstChunkSize;
+
+						// mark for removal if no longer seen
+						if (e.z - e.depth/2 > vehicleCtrld.z + firstChunkSize/2) {
+							vehiclesBehind.push({
+								index: i,
+								name: e.name
+							});
+						}
+					});
+					// remove vehicles way behind, score
+					vehiclesBehind.sort((a,b) => b.index - a.index);
+					for (let v of vehiclesBehind) {
+						let objectName = scene.getObjectByName(v.name);
+						scene.remove(objectName);
+						game.vehicles.splice(v.index,1);
+
+						// score points for passing without using shoulder
+						if (Math.abs(vehicleCtrld.x) < game.noScoreXZone) {
+							++game.score;
+							header.innerHTML = game.score;
+						}
+					}
+
+					// and then spawn 0–3 new ones
+					if (game.vehicles.length < game.vehicleLimit && !game.tutorial) {
+						let spawnTries = 3;
+						while (spawnTries--) {
+							if (Math.random() < 0.05 + game.difficulty * 0.025) {
+								game.vehicles.push(new Vehicle({
+									x: (-1 + spawnTries) * 10,
+									z: -renderDistance * firstChunkSize - spawnTries * 15,
+									name: "Vehicle " + game.vehicleSpawns
+								}));
+								++game.vehicleSpawns;
+							}
+						}
+					}
+				}
+
+				// move vehicles
+				let vehiclesAhead = [];
+				game.vehicles.forEach((e,i) => {
+					e.move();
+
+					for (let v of game.vehicles)
+						checkCollision(e,v);
+
+					if (!game.tutorial) {
+						if (!e.crashed)
+							e.accelerate();
+						else {
+							e.decelerate();
+
+							// spinout if steering
+							if (e.steerAngle > 0)
+								e.steerAngle += e.speed * e.steerSpeed;
+							else if (e.steerAngle < 0)
+								e.steerAngle -= e.speed * e.steerSpeed;
+						}
+					}
+					
+					// mark for removal if no longer seen
+					if (e.z < (-renderDistance - 1.5) * firstChunkSize) {
+						vehiclesAhead.push({
+							index: i,
+							name: e.name
+						});
+					}
+				});
+				// remove vehicles way ahead
+				vehiclesAhead.sort((a,b) => b.index - a.index);
+				for (let v of vehiclesAhead) {
+					let objectName = scene.getObjectByName(v.name);
+					scene.remove(objectName);
+					game.vehicles.splice(v.index,1);
+				}
+
+				// spark from crash
+				if (game.spark != null) {
+					game.spark.moveParticles();
+					game.spark.center.position.z = vehicleCtrld.z - (game.spark.isHorz ? vehicleCtrld.depth/2 : 0);
+				}
+
+				// show difficulty menu on game over
+				if (vehicleCtrld.speed <= 0 && game.over && !game.preparingNew && !replayBtnActive)
+					toggleReplayBtn();
+
+				// center spotlight and camera on player vehicle
+				pointLight.position.z = vehicleCtrld.z + pointLightZ;
+				camera.position.set(0,cameraY,vehicleCtrld.z + 30);
+
+			} else {
+				pointLight.position.z = pointLightZ;
+				camera.position.set(0,cameraY,30);
+			}
+
+			renderer.render(scene,camera);
+			requestAnimationFrame(update);
+		},
+		adjustWindow = () => {
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+			renderer.setSize(window.innerWidth,window.innerHeight)
+		},
+		steerVehicle = e => {
+			if (game != null && !game.over && game.vehicles.length) {
+				let playerVehicle = game.vehicles[game.vehicleIDCtrld];
+
+				// left arrow, A, or drag left
+				if ((e.keyCode && (e.keyCode == 37 || e.keyCode == 65)) || 
+					(touch.hold && e.pageX < touch.x)) {
+					playerVehicle.steer("left");
+					hideTutorial();
+
+				// right arrow, D, or drag right
+				} else if ((e.keyCode && (e.keyCode == 39 || e.keyCode == 68)) || 
+					(touch.hold && e.pageX > touch.x)) {
+					playerVehicle.steer("right");
+					hideTutorial();
+				}
+			}
+		},
+		straightenVehicle = () => {
+			if (game != null && !game.over && game.vehicles.length) {
+				game.vehicles[game.vehicleIDCtrld].straighten();
+			}
+			touch.hold = false;
+		},
+		getTouchHold = e => {
+			touch.hold = true;
+			touch.x = e.pageX;
+		};
+
+	init();
+	update();
+	
+	window.addEventListener("resize",adjustWindow);
+
+	// steering
+	var downEvent = "ontouchstart" in document.documentElement ? "touchstart" : "mousedown",
+		moveEvent = "ontouchmove" in document.documentElement ? "touchmove" : "mousemove",
+		upEvent = "ontouchend" in document.documentElement ? "touchend" : "mouseup";
+
+	document.addEventListener("keydown",steerVehicle);
+	document.addEventListener("keyup",straightenVehicle);
+	document.addEventListener(downEvent,getTouchHold);
+	document.addEventListener(moveEvent,steerVehicle);
+	document.addEventListener(upEvent,straightenVehicle);
+
+	// difficulty buttons
+	for (let b of difButtons) {
+		b.addEventListener("click",function(){
+			toggleDifMenu();
+
+			let t = this;
+			setTimeout(() => {
+				startGame(t.getAttribute("data-difficulty"));
+			},1600);
+		});
+	}
+
+	// replay button
+	replayButton.addEventListener("click",function(){
+		game.preparingNew = true;
+		toggleScoreCounter();
+		toggleReplayBtn();
+		setTimeout(toggleDifMenu,250);
+	});
+}
diff --git a/Highway Race Game/style.css b/Highway Race Game/style.css
new file mode 100644
index 000000000..7cf81b498
--- /dev/null
+++ b/Highway Race Game/style.css	
@@ -0,0 +1,204 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	font-size: calc(16px + (20 - 16) * (100vw - 320px)/(1024 - 320));
+}
+body, button {
+	color: #fff;
+	font: 1em Muli, "Helvetica Neue", Helvetica, sans-serif;
+	line-height: 1.5;
+}
+body {
+	overflow: hidden;
+}
+button, canvas {
+	-webkit-tap-highlight-color: transparent;
+}
+button, .difficulty-select, .tutorial {
+	opacity: 0;
+}
+button {
+	background: #2762f3;
+	border-radius: 0.375em;
+	box-shadow: 0 0 0 0.25em inset, 0 -0.5em 0 #0003 inset;
+	cursor: pointer;
+	display: block;
+	font-weight: 700;
+	margin: 0 auto 0.75em auto;
+	padding: 0.75em 1.5em;
+	transition: background 0.15s linear;
+	transform: translateY(50%);
+	width: 100%;
+	max-width: 16em;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+button:hover {
+	background: #5785f6;
+}
+button:active {
+	background: #0c48db;
+}
+button:disabled {
+	cursor: default;
+}
+header, .difficulty-select, .tutorial, .replay {
+	position: absolute;
+	z-index: 1;
+}
+header, .difficulty-select {
+	left: 0;
+	width: 100%;
+}
+header, h1 {
+	line-height: 1;
+}
+header {
+	font-size: 4em;
+	font-weight: 900;
+	top: 0;
+	padding: 0.75rem;
+	-webkit-text-stroke: 4px #171717;
+	text-shadow: 0 4px 0 #171717;
+	transform: translateY(-100%);
+	transition: all 0.25s linear;
+}
+h1 {
+	font-size: 2em;
+	margin-bottom: 1em;
+	text-align: center;
+	transform: translateX(100%);
+}
+kbd {
+	background: #242424;
+	border-radius: 0.25em;
+	display: inline-block;
+	font-family: Helvetica, sans-serif;
+	height: 1.5em;
+	min-width: 1.5em;
+	padding: 0 0.25em;
+	text-align: center;
+	vertical-align: middle;
+}
+p {
+	margin-bottom: 1.5em;
+}
+
+/* UI */
+.difficulty-select, .tutorial, .replay {
+	top: 50%;
+}
+.difficulty-select, .tutorial {
+	background: #0000007f;
+}
+.difficulty-select {
+	padding: 1.5em 0;
+	transform: translateY(-50%);
+}
+.menu-active, .tutorial-active, .replay-active {
+	z-index: 9;
+}
+.menu-active {
+	animation: fadeIn 0.5s linear forwards;
+}
+.menu-active h1 {
+	animation: slideIn 0.5s 0.5s linear forwards;
+}
+.menu-active button:nth-of-type(1) {
+	animation: fadeSlide 0.15s 1s linear forwards;
+}
+.menu-active button:nth-of-type(2) {
+	animation: fadeSlide 0.15s 1.15s linear forwards;
+}
+.menu-active button:nth-of-type(3) {
+	animation: fadeSlide 0.15s 1.3s linear forwards;
+}
+.menu-active button:nth-of-type(4) {
+	animation: fadeSlide 0.15s 1.45s linear forwards;
+}
+.menu-inactive {
+	animation: fadeIn 0.5s 1.1s linear reverse forwards;
+	opacity: 1;
+}
+.menu-inactive h1 {
+	animation: slideOut 0.5s 0.6s linear forwards;
+	transform: translateX(0);
+}
+.menu-inactive button {
+	opacity: 1;
+	transform: translateY(0);
+}
+.menu-inactive button:nth-of-type(1) {
+	animation: fadeSlide 0.15s linear reverse forwards;
+}
+.menu-inactive button:nth-of-type(2) {
+	animation: fadeSlide 0.15s 0.15s linear reverse forwards;
+}
+.menu-inactive button:nth-of-type(3) {
+	animation: fadeSlide 0.15s 0.3s linear reverse forwards;
+}
+.menu-inactive button:nth-of-type(4) {
+	animation: fadeSlide 0.15s 0.45s linear reverse forwards;
+}
+.tutorial {
+	border-radius: 0.75em;
+	padding: 1.5em 1.5em 0 1.5em;
+	left: 50%;
+	text-align: center;
+	width: 12em;
+	transform: translate(-50%,-50%);
+	transition: opacity 0.25s linear;
+}
+.replay {
+	margin: 0;
+	padding: 1.5em;
+	left: 50%;
+	transform: translate(-50%,0);
+	transition: all 0.15s linear;
+	width: 6em;
+	height: 6em;
+}
+.btn-icon {
+	fill: #fff;
+	width: 3em;
+	height: 3em;
+}
+.score-active {
+	transform: translateY(0);
+}
+.tutorial-active, .replay-active {
+	opacity: 1;
+}
+.replay-active {
+	transform: translate(-50%,-50%);
+}
+
+/* Animations */
+@keyframes fadeIn {
+	from { opacity: 0 }
+	to { opacity: 1 }
+}
+@keyframes slideIn {
+	from { transform: translateX(100%) }
+	to { transform: translateX(0) }
+}
+@keyframes slideOut {
+	from { transform: translateX(0) }
+	to { transform: translateX(-100%) }
+}
+@keyframes fadeSlide {
+	from {
+		opacity: 0;
+		transform: translateY(50%);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
diff --git a/Joke creator/index.html b/Joke creator/index.html
new file mode 100644
index 000000000..ddf10582c
--- /dev/null
+++ b/Joke creator/index.html	
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Random Joke Generator</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="container">
+    <h1>Joke <span>Generator</span></h1>
+    <button id="jokeBtn">Get a joke</button>
+    <p id="displayJoke">Click the button to load a joke..</p>
+  </div>
+  <script src="./script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Joke creator/script.js b/Joke creator/script.js
new file mode 100644
index 000000000..44e2d6a00
--- /dev/null
+++ b/Joke creator/script.js	
@@ -0,0 +1,16 @@
+document.getElementById('jokeBtn').addEventListener('click',fetchJoke);
+function fetchJoke(){
+  const displayJoke = document.getElementById('displayJoke');
+  displayJoke.innerHTML = `Loading...`;
+  fetch('https://official-joke-api.appspot.com/random_joke').then((response) => {
+    if(!response.ok){
+      throw new error('Network response was not ok');     
+    }
+    return response.json();
+  }).then(data => {
+    displayJoke.innerHTML = `${data.setup} - ${data.punchline}`;
+  }).catch(error => {
+    displayJoke.innerHTML = `Failed to load joke. Try again!`;
+    console.log(error);   
+  })
+};
\ No newline at end of file
diff --git a/Joke creator/style.css b/Joke creator/style.css
new file mode 100644
index 000000000..207fe3e1a
--- /dev/null
+++ b/Joke creator/style.css	
@@ -0,0 +1,44 @@
+:root {
+  --color: #82fcf2a8;
+  --dark-color: #0ce4d2a8;
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  font-family: cursive;
+  background-color: var(--dark-color);
+  margin: 0;
+}
+
+#container {
+  text-align: center;
+  background: var(--color);
+  padding: 2em;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+span {
+  color: white;
+}
+button {
+  padding: 0.5em 1em;
+  font-size: 1em;
+  cursor: pointer;
+  margin-top: 1em;
+  background-color: black;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+}
+
+button:hover {
+  transform: scale(1.1);
+}
+
+#jokeDisplay {
+  margin-top: 1em;
+  font-size: 1.1em;
+}
diff --git a/JournalJar/index.html b/JournalJar/index.html
new file mode 100644
index 000000000..ccfd4e3f5
--- /dev/null
+++ b/JournalJar/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JournalJar - Your Personal Journal</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <div class="container-fluid">
+        <div class="row">
+            <!-- Sidebar -->
+            <div class="col-md-3 sidebar">
+                <div class="logo mb-4">
+                    <h1>JournalJar</h1>
+                </div>
+
+                <div class="mood-tracker mb-4">
+                    <h4>Mood Tracker</h4>
+                    <div class="mood-options">
+                        <button class="mood-btn" data-mood="happy">😊 Happy</button>
+                        <button class="mood-btn" data-mood="neutral">😐 Neutral</button>
+                        <button class="mood-btn" data-mood="sad">😔 Sad</button>
+                        <button class="mood-btn" data-mood="excited">🤩 Excited</button>
+                        <button class="mood-btn" data-mood="stressed">😫 Stressed</button>
+                    </div>
+                </div>
+
+                <div class="daily-prompt mb-4">
+                    <h4>Daily Prompt</h4>
+                    <p id="daily-prompt-text">Loading prompt...</p>
+                </div>
+
+                <div class="quote-section">
+                    <h4>Inspiration</h4>
+                    <blockquote id="daily-quote">
+                        Loading quote...
+                    </blockquote>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <div class="col-md-9 main-content">
+                <div class="journal-header">
+                    <input type="text" id="entry-title" placeholder="Entry Title">
+                    <div class="tag-section">
+                        <input type="text" id="tag-input" placeholder="Add Tags">
+                        <div id="tag-container"></div>
+                    </div>
+                </div>
+
+                <div class="journal-editor">
+                    <textarea id="journal-text" placeholder="Start writing your thoughts..."></textarea>
+                </div>
+
+                <div class="journal-actions">
+                    <button id="save-entry" class="btn btn-primary">Save Entry</button>
+                    <button id="view-entries" class="btn btn-secondary">View Entries</button>
+                </div>
+
+                <!-- Entries Modal -->
+                <div class="modal fade" id="entriesModal" tabindex="-1">
+                    <div class="modal-dialog modal-lg">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title">Your Entries</h5>
+                                <input type="text" id="search-entries" placeholder="Search entries...">
+                            </div>
+                            <div class="modal-body" id="entries-list">
+                                <!-- Entries will be dynamically populated here -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/JournalJar/quotes.json b/JournalJar/quotes.json
new file mode 100644
index 000000000..2b5ef898b
--- /dev/null
+++ b/JournalJar/quotes.json
@@ -0,0 +1,7 @@
+[
+   
+    {
+        "quote": "Believe you can and you're halfway there.",
+        "author": "Theodore Roosevelt"
+    }
+]
\ No newline at end of file
diff --git a/JournalJar/script.js b/JournalJar/script.js
new file mode 100644
index 000000000..327f4a9a0
--- /dev/null
+++ b/JournalJar/script.js
@@ -0,0 +1,140 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const dailyPrompts = [
+        "What are you grateful for today?",
+        "Describe a moment that made you smile.",
+        "What challenges are you currently facing?",
+        "Write about a goal you want to achieve.",
+        "Reflect on a recent learning experience."
+    ];
+
+    const quotes = [
+        {
+            "quote": "The journey of a thousand miles begins with one step.",
+            "author": "Lao Tzu"
+        },
+        {
+            "quote": "Believe you can and you're halfway there.",
+            "author": "Theodore Roosevelt"
+        }
+    ];
+
+    // Daily Prompt
+    function setDailyPrompt() {
+        const promptElement = document.getElementById('daily-prompt-text');
+        const randomPrompt = dailyPrompts[Math.floor(Math.random() * dailyPrompts.length)];
+        promptElement.textContent = randomPrompt;
+    }
+
+    // Daily Quote
+    function setDailyQuote() {
+        const quoteElement = document.getElementById('daily-quote');
+        const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
+        quoteElement.innerHTML = `"${randomQuote.quote}" - ${randomQuote.author}`;
+    }
+
+    // Mood Tracking
+    function setupMoodTracking() {
+        const moodButtons = document.querySelectorAll('.mood-btn');
+        moodButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                moodButtons.forEach(btn => btn.classList.remove('selected'));
+                button.classList.add('selected');
+                localStorage.setItem('currentMood', button.dataset.mood);
+            });
+        });
+    }
+
+    // Tag System
+    function setupTagSystem() {
+        const tagInput = document.getElementById('tag-input');
+        const tagContainer = document.getElementById('tag-container');
+
+        tagInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && tagInput .value.trim() !== '') {
+                const tag = document.createElement('div');
+                tag.className = 'tag';
+                tag.textContent = tagInput.value;
+                const closeBtn = document.createElement('span');
+                closeBtn.className = 'tag-close';
+                closeBtn.textContent = 'x';
+                closeBtn.onclick = () => tagContainer.removeChild(tag);
+                tag.appendChild(closeBtn);
+                tagContainer.appendChild(tag);
+                tagInput.value = '';
+            }
+        });
+    }
+
+    // Save Journal Entry
+    function saveEntry() {
+        const title = document.getElementById('entry-title').value;
+        const text = document.getElementById('journal-text').value;
+        const tags = Array.from(document.querySelectorAll('.tag')).map(tag => tag.textContent.replace('x', '').trim());
+        const mood = localStorage.getItem('currentMood') || 'neutral';
+
+        if (title && text) {
+            const entries = JSON.parse(localStorage.getItem('journalEntries')) || [];
+            entries.push({ title, text, tags, mood, date: new Date().toLocaleString() });
+            localStorage.setItem('journalEntries', JSON.stringify(entries));
+            alert('Entry saved!');
+            clearEntryFields();
+        } else {
+            alert('Please fill in both title and text.');
+        }
+    }
+
+    // Clear Entry Fields
+    function clearEntryFields() {
+        document.getElementById('entry-title').value = '';
+        document.getElementById('journal-text').value = '';
+        document.getElementById('tag-container').innerHTML = '';
+    }
+
+    // View Entries
+    function viewEntries() {
+        const entries = JSON.parse(localStorage.getItem('journalEntries')) || [];
+        const entriesList = document.getElementById('entries-list');
+        entriesList.innerHTML = '';
+
+        entries.forEach(entry => {
+            const entryItem = document.createElement('div');
+            entryItem.className = 'entries-item';
+            entryItem.innerHTML = `<strong>${entry.title}</strong> <br> ${entry.text} <br> <small>${entry.date} - Mood: ${entry.mood}</small>`;
+            entriesList.appendChild(entryItem);
+        });
+
+        const entriesModal = new bootstrap.Modal(document.getElementById('entriesModal'));
+        entriesModal.show();
+    }
+
+    // Search Functionality
+    function setupSearchFunctionality() {
+        const searchInput = document.getElementById('search-entries');
+        searchInput.addEventListener('input', () => {
+            const entries = JSON.parse(localStorage.getItem('journalEntries')) || [];
+            const searchTerm = searchInput.value.toLowerCase();
+            const entriesList = document.getElementById('entries-list');
+            entriesList.innerHTML = '';
+
+            entries.forEach(entry => {
+                if (entry.title.toLowerCase().includes(searchTerm) || entry.text.toLowerCase().includes(searchTerm)) {
+                    const entryItem = document.createElement('div');
+                    entryItem.className = 'entries-item';
+                    entryItem.innerHTML = `<strong>${entry.title}</strong> <br> ${entry.text} <br> <small>${entry.date} - Mood: ${entry.mood}</small>`;
+                    entriesList.appendChild(entryItem);
+                }
+            });
+        });
+    }
+
+    // Event Listeners
+    document.getElementById('save-entry').addEventListener('click', saveEntry);
+    document.getElementById('view-entries').addEventListener('click', viewEntries);
+
+    // Initialize App
+    setDailyPrompt();
+    setDailyQuote();
+    setupMoodTracking();
+    setupTagSystem();
+    setupSearchFunctionality();
+});
\ No newline at end of file
diff --git a/JournalJar/style.css b/JournalJar/style.css
new file mode 100644
index 000000000..d5293d3b9
--- /dev/null
+++ b/JournalJar/style.css
@@ -0,0 +1,259 @@
+:root {
+    --primary-color: #6a5acd;
+    --secondary-color: #f4f4f4;
+    --text-color: #333;
+    --accent-color: #4CAF50;
+    --transition-speed: 0.3s;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Poppins', Arial, sans-serif;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    line-height: 1.6;
+    color: var(--text-color);
+}
+
+.container-fluid {
+    max-width: 1600px;
+    margin: 0 auto;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+}
+
+/* Sidebar Styling */
+.sidebar {
+    background: linear-gradient(160deg, #ffffff 0%, #f0f4f8 100%);
+    border-radius: 15px 0 0 15px;
+    padding: 30px 20px;
+    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.05);
+    transition: all var(--transition-speed) ease;
+}
+
+.sidebar:hover {
+    box-shadow: -5px 0 40px rgba(0, 0, 0, 0.1);
+}
+
+.logo h1 {
+    font-weight: 700;
+    color: var(--primary-color);
+    text-align: center;
+    margin-bottom: 20px;
+    letter-spacing: 2px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Mood Tracker Styling */
+.mood-tracker {
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 10px;
+    padding: 15px;
+    backdrop-filter: blur(10px);
+}
+
+.mood-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+.mood-btn {
+    background-color: transparent;
+    border: 2px solid var(--secondary-color);
+    padding: 8px 15px;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: all var(--transition-speed) ease;
+    font-size: 16px;
+    transform: scale(1);
+}
+
+.mood-btn:hover {
+    transform: scale(1.1);
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.mood-btn.selected {
+    background-color: var(--primary-color);
+    color: white;
+    box-shadow: 0 5px 15px rgba(106, 90, 205, 0.4);
+}
+
+/* Main Content Styling */
+.main-content {
+    background: white;
+    border-radius: 0 15px 15px 0;
+    padding: 30px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+}
+
+.journal-header {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+#entry-title {
+    width: 100%;
+    padding: 12px 15px;
+    border: 2px solid var(--secondary-color);
+    border-radius: 8px;
+    font-size: 18px;
+    transition: all var(--transition-speed) ease;
+}
+
+#entry-title:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.2);
+}
+
+#journal-text {
+    width: 100%;
+    min-height: 300px;
+    border: 2px solid var(--secondary-color);
+    border-radius: 8px;
+    padding: 15px;
+    font-size: 16px;
+    resize: vertical;
+    transition: all var(--transition-speed) ease;
+}
+
+#journal-text:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.2);
+}
+
+/* Tag System */
+.tag-section {
+    position: relative;
+}
+
+#tag-input {
+    width: 100%;
+    padding: 10px 15px;
+    border: 2px solid var(--secondary-color);
+    border-radius: 8px;
+    transition: all var(--transition-speed) ease;
+}
+
+#tag-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+#tag-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.tag {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.tag-close {
+    margin-left: 5px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+/* Button Styling */
+.journal-actions {
+    display: flex;
+    gap: 15px;
+    margin-top: 20px;
+}
+
+#save-entry, #view-entries {
+    padding: 12px 25px;
+    border: none;
+    border-radius: 30px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all var(--transition-speed) ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#save-entry {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+#view-entries {
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+}
+
+#save-entry:hover, #view-entries:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Daily Prompt and Quote Styling */
+.daily-prompt, .quote-section {
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 10px;
+    padding: 15px;
+    margin-top: 15px;
+    backdrop-filter: blur(10px);
+}
+
+#daily-quote {
+    font-style: italic;
+    text-align: center;
+    color: var(--primary-color);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .sidebar, .main-content {
+        border-radius: 0;
+    }
+}
+
+/* Modal Styling */
+.modal-content {
+    border-radius: 15px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.entries-item {
+    background-color: #f9f9f9;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 15px;
+     border-radius: 8px;
+    transition: background-color var(--transition-speed) ease;
+}
+
+.entries-item:hover {
+    background-color: #e9ecef;
+}
\ No newline at end of file
diff --git a/Kill the birds game/index.html b/Kill the birds game/index.html
new file mode 100644
index 000000000..c51cfcb66
--- /dev/null
+++ b/Kill the birds game/index.html	
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.scss" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="timer">
+            <span></span>
+        </div>
+        <div class="gameover">GAME OVER</div>
+        <h1>KILL THE BIRDS <span>(shoot the birds)</span></h1>
+        <h2>PURE CSS GAME - NO JS!</h2>
+        <input class="input-circle input-circle1" type="radio" id="circle1">
+        <input class="input-circle input-circle2" type="radio" id="circle2">
+        <input class="input-circle input-circle3" type="radio" id="circle3">
+        <input class="input-circle input-circle4" type="radio" id="circle4">
+        <input class="input-circle input-circle5" type="radio" id="circle5">
+        <input class="input-circle input-circle6" type="radio" id="circle6">
+
+        <label for="circle1" class="pajaro pajaro1"><span></span></label>
+        <label for="circle2" class="pajaro pajaro2"><span></span></label>
+        <label for="circle3" class="pajaro pajaro3"><span></span></label>
+        <label for="circle4" class="pajaro pajaro4"><span></span></label>
+        <label for="circle5" class="pajaro pajaro5"><span></span></label>
+        <label for="circle6" class="pajaro pajaro6"><span></span></label>
+        <div class="sum">SCORE:</div>
+
+    </div>
+
+
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Kill the birds game/style.css b/Kill the birds game/style.css
new file mode 100644
index 000000000..d8822204e
--- /dev/null
+++ b/Kill the birds game/style.css	
@@ -0,0 +1,239 @@
+body{
+  counter-reset:birds;
+  -webkit-touch-callout: none;
+-webkit-user-select: none;
+-khtml-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+user-select: none;
+  overflow:hidden;
+}
+/*hide checkbox*/
+input{position:fixed; left:-10px; top:-10px;}
+
+h1{margin:0; text-align:center;}
+h2{position:fixed; right:20px; bottom:0; font-size:18px; color:red;}
+
+/*play area*/
+.wrapper{  
+  height:500px;
+  background: -webkit-linear-gradient(top, hsla(210,70%,80%,1) 0%,hsla(210,50%,100%,1) 100%);
+  position:relative;
+  cursor:crosshair;
+}
+/*count dead birds*/
+.input-circle:checked{
+  counter-increment:birds;
+}
+
+.sum{position:fixed; left:45%; top:60px; font-size:24px; fonot-weight:bold;}
+
+/*print to screen dead birds*/
+.sum:after{
+  content: counter(birds);
+}
+
+.input-circle ~ .pajaro{
+  opacity:0;
+  transition:0.3s  cubic-bezier(0,.43,1,0);
+  animation: move 8s infinite alternate;
+}
+.input-circle1:not(:checked) ~ .pajaro1,
+.input-circle2:not(:checked) ~ .pajaro2,
+.input-circle3:not(:checked) ~ .pajaro3,
+.input-circle4:not(:checked) ~ .pajaro4,
+.input-circle5:not(:checked) ~ .pajaro5,
+.input-circle6:not(:checked) ~ .pajaro6
+{
+  opacity:1; 
+}
+
+
+.input-circle1:checked ~ .pajaro1 span,
+.input-circle2:checked ~ .pajaro2 span,
+.input-circle3:checked ~ .pajaro3 span,
+.input-circle4:checked ~ .pajaro4 span,
+.input-circle5:checked ~ .pajaro5 span,
+.input-circle6:checked ~ .pajaro6 span
+{
+  display:block;
+  
+}
+
+.pajaro{   
+  position:absolute;
+  left:0;  
+  cursor:crosshair;
+}
+.pajaro>span{
+  display:none;position:absolute; z-index:2; left:-250%;bottom:-50%;  
+  background-color:white; border:solid 2px #000; width:80px; height:30px; padding:10px; border-radius:50%;
+}
+.pajaro>span:before{
+  content:"I'm Dead!"; color:red; font-weight:bold;
+}
+
+.pajaro1{top:50px;
+  animation-delay: -2s!important;
+  transform:scale(0.9);
+}
+.pajaro2{
+  top:100px;
+  animation-delay: -1s!important;
+  transform:scale(0.8); 
+}
+.pajaro3{
+  top:200px;
+  animation-delay: -3s!important;
+  transform:scale(1.4); 
+}
+
+.pajaro4{top:50px;
+  animation-delay: -12s!important;
+  transform:scale(0.9);
+}
+.pajaro5{
+  top:100px;
+  animation-delay: -16s!important;
+  transform:scale(0.5); 
+}
+.pajaro6{
+  top:200px;
+  animation-delay: -20s!important;
+  transform:scale(1.4); 
+}
+
+@keyframes move{
+0%{left:0%;}
+20%{left:20%;top:50%; }
+40%{top:30%; left:60%;}
+60%{top:80%;left:80%;}
+80%{top:10%; left:20%:}
+100%{top:30%; left:20%; }
+}
+
+
+.timer{
+  background-color:#333; width:300px;height:50px;
+  position:fixed;
+}
+
+
+.timer span{
+  display:block;
+  background:repeating-linear-gradient(-45deg, #000, rgba(0, 0, 0, 0) 25px, #FFF 25px, #FFF 50px);
+  width:300px; height:50px;
+  animation:timer 20s linear;
+}
+
+.timer span:before{  
+  content:"TIME LEFT";
+  display:block;
+  position:absolute; z-index:3;
+  left:0; 
+  right:0;
+  top:0;
+  bottom:0;
+  text-align:center;
+  line-height:50px;
+  font-size:25px;
+  color:red;
+}
+@keyframes timer{
+0%{width:10px;}
+100%{width:300px; display:block;}
+}
+
+
+.gameover{
+  position:fixed; z-index:100000; left:0; top:0; bottom:0; right:0; background-color:rgba(0,0,0,0.8);
+  animation:gameover 20s linear forwards;
+  font-size:80px; color:white; font-weight:bold; text-align:center; 
+  text-indent:0;  
+  line-height:500px;
+}
+
+@keyframes gameover{
+0%{left:-5000px;bottom:100%;}
+97%{left:-5000px;bottom:100%;}
+100%{ left:0px;}
+}
+
+footer{position:fixed; left:0; bottom:0; padding:10px 20px;}
+footer svg{vertical-align:middle;}
+footer a{text-decoration:none;  font-size:20px; color:rgba(29,161,242,1.00); vertical-align:middle;}
+
+
+
+
+/*------------------------------------------------------ body of the bird
+*/
+
+.pajaro{
+  background:black;
+  border-radius: 50% 50% 20% 20%;
+  color:white;
+  line-height:20px;
+  letter-spacing: 2px;
+  font-size:0.8em;
+  text-align:center;
+  position:absolute;
+ 
+  margin-top:-20px; margin-left:-10px;
+  width:15px; height:15px;
+  animation:planeo 0.8s linear infinite;
+  z-index:999;
+}
+
+.pajaro:after,
+.pajaro:before{
+  content:"";
+  position:absolute;
+  top:50%; left:50%;
+}
+
+/*------------------------------------------------------ bird wings
+*/
+
+.pajaro:after{
+  border-radius: 100% 100% 0 0;
+  box-shadow: inset 0px 5px 0 black;
+  width:100px; height:100px;
+  margin-top:-7px; margin-left:-50px;
+  transform-origin: 100% 0%;
+  animation:alas 3s linear infinite;
+}
+
+/*------------------------------------------------------ bird beak
+*/
+
+.pajaro:before{
+  background:#FFC37F;
+  border-radius: 100% 0% 20% 0%;
+  margin-top:3px; margin-left:-4px;
+  width:6px; height:6px;
+  transform:rotateZ(45deg);
+}
+
+/*------------------------------------------------------ wings animation
+*/
+
+@keyframes alas {
+  50%{
+    transform:rotateX(-1440deg);
+  }
+}
+
+/*------------------------------------------------------ bird animation
+*/
+
+@keyframes planeo {
+  40%{
+    transform:rotateZ(2deg) translateX(2px) translateY(10px) translateZ(0);
+    line-height:16px;
+    font-size:0.6em;
+  }
+  80%{
+    transform:rotateZ(-2deg) translateX(5px) translateY(8px) translateZ(0);
+  }
+}
diff --git a/Link Up Game/README.md b/Link Up Game/README.md
new file mode 100644
index 000000000..c5ea7293e
--- /dev/null
+++ b/Link Up Game/README.md	
@@ -0,0 +1,24 @@
+# animalmatch
+
+Animal Match is a simple pair-matching memory game where the player turns over pairs of cards and tries to find matching animals. This game is implemented in pure JavaScript using localStorage for leaderboards, so can easily be cheated using the console or modifying web elements, but short of a server-client implementation this is unavoidable. It's still fun to play!
+
+
+
+
+There are four single-player gamemodes:
+ - Classic (finding pairs of animals)
+ - 3-match (still 12 unique animals, but now there are 3 of each)
+ - 4-match (finding sets of 4 of each animal)
+ - 6-match (you guessed it: 6 of each animal to find)
+
+Naturally, these get progressively harder.
+
+For single-player modes, highscores are stored in a leaderboard for each gamemode. Names are limited to exactly 3 characters long, reminiscent of old-school videogame leaderboards.
+
+On the menu page there is the option to align cards in a grid. This generally makes playing the game easier, so a star is left by the player's name on the leaderboard to indicate this assistance was used.
+
+There is one 2-player gamemode:
+ - Competitive mode (play against a friend)
+
+When playing with two players, either the mouse or the appropriate keys on the keyboard can be used to turn over cards.
+The player who turns over a matching animal on their turn gets a point!
diff --git a/Link Up Game/assets/animals/beaver.png b/Link Up Game/assets/animals/beaver.png
new file mode 100644
index 000000000..722863932
Binary files /dev/null and b/Link Up Game/assets/animals/beaver.png differ
diff --git a/Link Up Game/assets/animals/cat.png b/Link Up Game/assets/animals/cat.png
new file mode 100644
index 000000000..926b7ebaa
Binary files /dev/null and b/Link Up Game/assets/animals/cat.png differ
diff --git a/Link Up Game/assets/animals/crab.png b/Link Up Game/assets/animals/crab.png
new file mode 100644
index 000000000..6be8fa202
Binary files /dev/null and b/Link Up Game/assets/animals/crab.png differ
diff --git a/Link Up Game/assets/animals/crocodile.png b/Link Up Game/assets/animals/crocodile.png
new file mode 100644
index 000000000..17baa8ed9
Binary files /dev/null and b/Link Up Game/assets/animals/crocodile.png differ
diff --git a/Link Up Game/assets/animals/dog.png b/Link Up Game/assets/animals/dog.png
new file mode 100644
index 000000000..4340d5b71
Binary files /dev/null and b/Link Up Game/assets/animals/dog.png differ
diff --git a/Link Up Game/assets/animals/dolphin.png b/Link Up Game/assets/animals/dolphin.png
new file mode 100644
index 000000000..f9c8d50a8
Binary files /dev/null and b/Link Up Game/assets/animals/dolphin.png differ
diff --git a/Link Up Game/assets/animals/duck.png b/Link Up Game/assets/animals/duck.png
new file mode 100644
index 000000000..700ed04ad
Binary files /dev/null and b/Link Up Game/assets/animals/duck.png differ
diff --git a/Link Up Game/assets/animals/flamingo.png b/Link Up Game/assets/animals/flamingo.png
new file mode 100644
index 000000000..c5d0b597b
Binary files /dev/null and b/Link Up Game/assets/animals/flamingo.png differ
diff --git a/Link Up Game/assets/animals/giraffe.png b/Link Up Game/assets/animals/giraffe.png
new file mode 100644
index 000000000..b78aba4fa
Binary files /dev/null and b/Link Up Game/assets/animals/giraffe.png differ
diff --git a/Link Up Game/assets/animals/horse.png b/Link Up Game/assets/animals/horse.png
new file mode 100644
index 000000000..523fdcef4
Binary files /dev/null and b/Link Up Game/assets/animals/horse.png differ
diff --git a/Link Up Game/assets/animals/koala.png b/Link Up Game/assets/animals/koala.png
new file mode 100644
index 000000000..f3b6cb7b6
Binary files /dev/null and b/Link Up Game/assets/animals/koala.png differ
diff --git a/Link Up Game/assets/animals/lizard.png b/Link Up Game/assets/animals/lizard.png
new file mode 100644
index 000000000..3112c6e41
Binary files /dev/null and b/Link Up Game/assets/animals/lizard.png differ
diff --git a/Link Up Game/assets/animals/octopus.png b/Link Up Game/assets/animals/octopus.png
new file mode 100644
index 000000000..01fb0995c
Binary files /dev/null and b/Link Up Game/assets/animals/octopus.png differ
diff --git a/Link Up Game/assets/animals/peacock.png b/Link Up Game/assets/animals/peacock.png
new file mode 100644
index 000000000..67eedb829
Binary files /dev/null and b/Link Up Game/assets/animals/peacock.png differ
diff --git a/Link Up Game/assets/animals/penguin.png b/Link Up Game/assets/animals/penguin.png
new file mode 100644
index 000000000..4672670bb
Binary files /dev/null and b/Link Up Game/assets/animals/penguin.png differ
diff --git a/Link Up Game/assets/animals/sheep.png b/Link Up Game/assets/animals/sheep.png
new file mode 100644
index 000000000..9c7154837
Binary files /dev/null and b/Link Up Game/assets/animals/sheep.png differ
diff --git a/Link Up Game/assets/animals/snail.png b/Link Up Game/assets/animals/snail.png
new file mode 100644
index 000000000..47c631a72
Binary files /dev/null and b/Link Up Game/assets/animals/snail.png differ
diff --git a/Link Up Game/assets/animals/snake.png b/Link Up Game/assets/animals/snake.png
new file mode 100644
index 000000000..d21f962ad
Binary files /dev/null and b/Link Up Game/assets/animals/snake.png differ
diff --git a/Link Up Game/assets/animals/squirrel.png b/Link Up Game/assets/animals/squirrel.png
new file mode 100644
index 000000000..76c63d902
Binary files /dev/null and b/Link Up Game/assets/animals/squirrel.png differ
diff --git a/Link Up Game/assets/animals/swan.png b/Link Up Game/assets/animals/swan.png
new file mode 100644
index 000000000..feb454320
Binary files /dev/null and b/Link Up Game/assets/animals/swan.png differ
diff --git a/Link Up Game/assets/animals/unicorn.png b/Link Up Game/assets/animals/unicorn.png
new file mode 100644
index 000000000..c9bf765c9
Binary files /dev/null and b/Link Up Game/assets/animals/unicorn.png differ
diff --git a/Link Up Game/assets/card.ico b/Link Up Game/assets/card.ico
new file mode 100644
index 000000000..13216fb99
Binary files /dev/null and b/Link Up Game/assets/card.ico differ
diff --git a/Link Up Game/assets/card.png b/Link Up Game/assets/card.png
new file mode 100644
index 000000000..25034e6ac
Binary files /dev/null and b/Link Up Game/assets/card.png differ
diff --git a/Link Up Game/assets/cards/card,.png b/Link Up Game/assets/cards/card,.png
new file mode 100644
index 000000000..aa7fca04a
Binary files /dev/null and b/Link Up Game/assets/cards/card,.png differ
diff --git a/Link Up Game/assets/cards/carda.png b/Link Up Game/assets/cards/carda.png
new file mode 100644
index 000000000..c50abd0af
Binary files /dev/null and b/Link Up Game/assets/cards/carda.png differ
diff --git a/Link Up Game/assets/cards/cardb.png b/Link Up Game/assets/cards/cardb.png
new file mode 100644
index 000000000..9be789ea6
Binary files /dev/null and b/Link Up Game/assets/cards/cardb.png differ
diff --git a/Link Up Game/assets/cards/cardc.png b/Link Up Game/assets/cards/cardc.png
new file mode 100644
index 000000000..925428552
Binary files /dev/null and b/Link Up Game/assets/cards/cardc.png differ
diff --git a/Link Up Game/assets/cards/cardd.png b/Link Up Game/assets/cards/cardd.png
new file mode 100644
index 000000000..6598d4c70
Binary files /dev/null and b/Link Up Game/assets/cards/cardd.png differ
diff --git a/Link Up Game/assets/cards/carde.png b/Link Up Game/assets/cards/carde.png
new file mode 100644
index 000000000..5e8cc715c
Binary files /dev/null and b/Link Up Game/assets/cards/carde.png differ
diff --git a/Link Up Game/assets/cards/cardf.png b/Link Up Game/assets/cards/cardf.png
new file mode 100644
index 000000000..b1b482052
Binary files /dev/null and b/Link Up Game/assets/cards/cardf.png differ
diff --git a/Link Up Game/assets/cards/cardh.png b/Link Up Game/assets/cards/cardh.png
new file mode 100644
index 000000000..5c7b4764b
Binary files /dev/null and b/Link Up Game/assets/cards/cardh.png differ
diff --git a/Link Up Game/assets/cards/cardi.png b/Link Up Game/assets/cards/cardi.png
new file mode 100644
index 000000000..f738f05cf
Binary files /dev/null and b/Link Up Game/assets/cards/cardi.png differ
diff --git a/Link Up Game/assets/cards/cardj.png b/Link Up Game/assets/cards/cardj.png
new file mode 100644
index 000000000..bcd356b9b
Binary files /dev/null and b/Link Up Game/assets/cards/cardj.png differ
diff --git a/Link Up Game/assets/cards/cardk.png b/Link Up Game/assets/cards/cardk.png
new file mode 100644
index 000000000..8138b8e04
Binary files /dev/null and b/Link Up Game/assets/cards/cardk.png differ
diff --git a/Link Up Game/assets/cards/cardl.png b/Link Up Game/assets/cards/cardl.png
new file mode 100644
index 000000000..adcf42dff
Binary files /dev/null and b/Link Up Game/assets/cards/cardl.png differ
diff --git a/Link Up Game/assets/cards/cardm.png b/Link Up Game/assets/cards/cardm.png
new file mode 100644
index 000000000..db1e40626
Binary files /dev/null and b/Link Up Game/assets/cards/cardm.png differ
diff --git a/Link Up Game/assets/cards/cardn.png b/Link Up Game/assets/cards/cardn.png
new file mode 100644
index 000000000..b2823e07e
Binary files /dev/null and b/Link Up Game/assets/cards/cardn.png differ
diff --git a/Link Up Game/assets/cards/cardo.png b/Link Up Game/assets/cards/cardo.png
new file mode 100644
index 000000000..444a421ea
Binary files /dev/null and b/Link Up Game/assets/cards/cardo.png differ
diff --git a/Link Up Game/assets/cards/cardp.png b/Link Up Game/assets/cards/cardp.png
new file mode 100644
index 000000000..9a238f8be
Binary files /dev/null and b/Link Up Game/assets/cards/cardp.png differ
diff --git a/Link Up Game/assets/cards/cardq.png b/Link Up Game/assets/cards/cardq.png
new file mode 100644
index 000000000..2d3b43298
Binary files /dev/null and b/Link Up Game/assets/cards/cardq.png differ
diff --git a/Link Up Game/assets/cards/cardr.png b/Link Up Game/assets/cards/cardr.png
new file mode 100644
index 000000000..4533dc1a4
Binary files /dev/null and b/Link Up Game/assets/cards/cardr.png differ
diff --git a/Link Up Game/assets/cards/cards.png b/Link Up Game/assets/cards/cards.png
new file mode 100644
index 000000000..461f36f1f
Binary files /dev/null and b/Link Up Game/assets/cards/cards.png differ
diff --git a/Link Up Game/assets/cards/cardu.png b/Link Up Game/assets/cards/cardu.png
new file mode 100644
index 000000000..9602938d4
Binary files /dev/null and b/Link Up Game/assets/cards/cardu.png differ
diff --git a/Link Up Game/assets/cards/cardv.png b/Link Up Game/assets/cards/cardv.png
new file mode 100644
index 000000000..e45fc4ddc
Binary files /dev/null and b/Link Up Game/assets/cards/cardv.png differ
diff --git a/Link Up Game/assets/cards/cardw.png b/Link Up Game/assets/cards/cardw.png
new file mode 100644
index 000000000..88f09bb6a
Binary files /dev/null and b/Link Up Game/assets/cards/cardw.png differ
diff --git a/Link Up Game/assets/cards/cardx.png b/Link Up Game/assets/cards/cardx.png
new file mode 100644
index 000000000..2da87a4b8
Binary files /dev/null and b/Link Up Game/assets/cards/cardx.png differ
diff --git a/Link Up Game/assets/cards/cardz.png b/Link Up Game/assets/cards/cardz.png
new file mode 100644
index 000000000..5021c7ff5
Binary files /dev/null and b/Link Up Game/assets/cards/cardz.png differ
diff --git a/Link Up Game/index.html b/Link Up Game/index.html
new file mode 100644
index 000000000..9d418d48f
--- /dev/null
+++ b/Link Up Game/index.html	
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>Pair Matching Game</title>
+        <link rel="stylesheet" href="styles.css">
+        <script src="scripts.js"></script>
+        <link rel="icon" type="image/x-icon" href="/assets/card.ico">
+        
+    </head>
+    <body onload="init()">
+        <h1 id="title">Animal Match</h1>
+        <h2 id="subtitle">Turn over sets of cards and try to find all the matching animals!</h2>
+        <p id="attempts"></p>
+        <label for="leaderboardname" id="label-leaderboardname" class="hidden">Enter a name for the leaderboard (3 letters, save with Enter)</label>
+        <input type="text" maxlength="3" id="leaderboardname" class="hidden">
+        <div id="leaderboard-div" hidden>
+            <p id="easymodelabel">Easy mode</p>
+            <table id="leaderboard">
+                <tr>
+                    <th>#</th>
+                    <th>Name</th>
+                    <th>Score</th>
+                </tr>
+                <tr class="gold">
+                    <td>1</td><td id="name1"></td><td id="score1"></td>
+                </tr>
+                <tr class="silver">
+                    <td>2</td><td id="name2"></td><td id="score2"></td>
+                </tr>
+                <tr class="bronze">
+                    <td>3</td><td id="name3"></td><td id="score3"></td>
+                </tr>
+                <tr>
+                    <td>4</td><td id="name4"></td><td id="score4"></td>
+                </tr>
+                <tr>
+                    <td>5</td><td id="name5"></td><td id="score5"></td>
+                </tr>
+            </table>
+        </div>
+        
+        <div class="startbuttons">
+            <button type="button" class="button start" id="start2" onclick="startGame(2)">Play Animal Match (Original)</button>
+            <button type="button" class="button start" id="start1v1" onclick="start1v1()">Play Competitive (2 player)</button>
+            
+            <button type="button" class="button start" id="start3" onclick="startGame(3)">Play 3-match</button>
+            <button type="button" class="button start" id="start4" onclick="startGame(4)">Play 4-match</button>
+            <button type="button" class="button start" id="start6" onclick="startGame(6)">Play 6-match</button>
+            
+            <div class="align">
+                <label for="snaptogrid">Align cards:</label>
+                <input type="checkbox" id="snaptogrid" onchange="flipAlignToGrid()">
+            </div>
+            <div class="easy">
+                <label for="easymode">Easy Mode:</label>
+                <input type="checkbox" id="easymode" onchange="flipEasyMode()">
+            </div>
+        </div>
+        
+        <button type="button" class="button hidden" id="playagain" onclick="resetGame()">Play Again</button>
+        <button type="button" class="button hidden" id="menu" onclick="showMenu()">Menu</button>
+        
+        <div id="animals"></div>
+        <div id="cards"></div>
+        <span id="progress"></span>
+
+        <div id="background" class="left"></div>
+        <div id="background" class="right"></div>
+    </body>
+    
+    </html>
+    
diff --git a/Link Up Game/scripts.js b/Link Up Game/scripts.js
new file mode 100644
index 000000000..1f8eca394
--- /dev/null
+++ b/Link Up Game/scripts.js	
@@ -0,0 +1,991 @@
+let gridSpaces = [];
+gridOffsetX = [];
+gridOffsetY = [];
+alignedGridXOffset = 0;
+alignedGridYOffset = 220;
+
+const GridSpace = {
+    Empty: 0,
+    Occupied: 1,
+    Adjacent: 2
+};
+
+const minXpercent = 10;
+const maxXpercent = 90;
+const minYpercent = 15;
+const maxYpercent = 95;
+
+// Grid is 30x16 with 2 padding on width & height
+const numberOfSquaresX = 32;
+const numberOfSquaresY = 16;
+
+allAnimals = ['beaver','cat','crab','dog','dolphin','duck','flamingo','lizard','peacock','sheep','snail','swan','squirrel','penguin','giraffe','crocodile','koala','snake','octopus'];
+animals = [];
+numAnimals = 12;
+copiesPerAnimal = 2;
+
+// Gameplay logic variables
+const GameState = {
+    Open: 0,    // No cards flipped this turn
+    Partial: 1, // At least one card flipped this turn
+    Fail: 2,    // 'copies' many cards flipped; not matching
+    Match: 3,   // 'copies' many cards flipped: all matching
+    End: 4,     // All matches found
+    Menu: 5     // Not in a game; menu screen
+}
+gameState = GameState.Menu;
+numAttempts = 0;
+
+waitingForNameEntry = false;
+turnovertimeout = 0;
+
+selectedCards = [];
+matchesFound = [];
+
+alignToGrid = false;
+easyMode = false;
+
+competitiveMode = false;
+isPlayerOneTurn = true;
+playerOneScore = 0;
+playerTwoScore = 0;
+p2Animals = [];
+
+const cardOrder = ['q','w','e','r','a','s','d','f','z','x','c','v','u','i','o','p','h','j','k','l','b','n','m',','];
+
+function init() {
+    document.addEventListener("click", (evt) => {handleBackgroundClick();});
+    document.addEventListener("keypress", (evt) => {handleKeyPress(evt);});
+    pickAnimals();
+    updateMessage();
+    console.log("Welcome to the console! You can easily use this to cheat because all of the JavaScript here is locally stored, but we trust you to behave.");
+    console.log("Type saveScoreboard() to get a create script for the leaderboards.");
+}
+
+function pickAnimals() {
+    animals = [];
+    while (animals.length < numAnimals) {
+        selected = selectRandomFromArray(allAnimals);
+        if (animals.indexOf(selected) == -1) {
+            animals.push(selected);
+        }
+    }
+}
+
+function pickP2Animals() {
+    p2Animals = [];
+    while (p2Animals.length < numAnimals) {
+        selected = selectRandomFromArray(animals);
+        if (p2Animals.indexOf(selected) == -1) {
+            p2Animals.push(selected);
+        }
+    }
+}
+
+function startGame(gamemode) {
+    numAnimals = easyMode ? 6 : 12;
+    hideMenu();
+    pickAnimals();
+    copiesPerAnimal = gamemode;
+    clearPageElements();
+    resetGameVariables();
+    updateMessage();
+    addPageElements();
+
+    initialiseGridSpaces();
+    placeItems();
+    updateProgressStepper();
+    displayLeaderboardForMode();
+}
+
+function start1v1() {
+    numAnimals = 12;
+    pickAnimals();
+    pickP2Animals();
+    hideMenu();
+    setPlayAgainButtonVisibility(false);
+    clearPageElements();
+    resetGameVariables();
+    competitiveMode = true;
+    updateMessage();
+
+    add1v1PageElements();
+    setBackgroundColours();
+}
+
+function resetGame() {
+    if (competitiveMode) {
+        hideAllElements();
+        start1v1();
+    }
+    else {
+        hideAllElements();
+        resetGameVariables();
+        updateProgressStepper();
+
+        setTimeout(() => {
+            initialiseGridSpaces();
+            placeItems();
+            setPlayAgainButtonVisibility(false);
+            displayLeaderboardForMode();
+            updateMessage();
+            document.getElementById("attempts").innerText = "";
+            showAllElements();
+        }, 700);
+    }
+}
+
+function resetGameVariables() {
+    gridSpaces = [];
+    gridOffsetX = [];
+    gridOffsetY = [];
+    gameState = GameState.Open;
+    numAttempts= 0;
+    isNewBest = false;
+    selectedCards = [];
+    matchesFound = [];
+
+    isCompetitiveMode = false;
+    isPlayerOneTurn = true;
+    playerOneScore = 0;
+    playerTwoScore = 0;
+}
+
+function hideMenu() {
+    setMenuVisibility(false);
+}
+
+function showMenu() {
+    hideAllElements();
+    document.getElementById("attempts").innerText = "";
+    document.getElementById("leaderboard-div").hidden = true;
+    setPlayAgainButtonVisibility(false);
+    setMenuVisibility(true);
+}
+
+function saveScoreboard() {
+    let result = "";
+    for (let e=0; e<2; e++) {
+        for (let m=2; m<7; m++) {
+            for (let i=0; i<5; i++) {
+                item = localStorage.getItem("scoreE" + e + "M" + m + "P" + i);
+                if (item) {
+                    result += "localStorage.setItem(\"scoreE" + e + "M" + m + "P" + i + "\", \"" + item + "\");\n";
+                }
+            }
+        }
+    }
+    console.log(result);
+}
+
+function setMenuVisibility(state) {
+    let buttons = document.getElementsByClassName("button start");
+    for (let b=0; b<buttons.length; b++) {
+        if (state) {
+            buttons[b].classList.add("visible");
+            buttons[b].classList.remove("hidden");
+        }
+        else {
+            buttons[b].classList.add("hidden");
+            buttons[b].classList.remove("visible");
+        }
+    };
+    let snaptogrid = document.getElementsByClassName("align")[0];
+    if (state) {
+        snaptogrid.classList.add("visible");
+        snaptogrid.classList.remove("hidden");
+    }
+    else {
+        snaptogrid.classList.add("hidden");
+        snaptogrid.classList.remove("visible");
+    }
+    let easy = document.getElementsByClassName("easy")[0];
+    if (state) {
+        easy.classList.add("visible");
+        easy.classList.remove("hidden");
+    }
+    else {
+        easy.classList.add("hidden");
+        easy.classList.remove("visible");
+    }
+}
+
+function addPageElements() {
+    addCardImgs();
+    addAnimalImgs();
+}
+
+function addAnimalImgs() {
+    for (let i=0; i<numAnimals*copiesPerAnimal; i++) {
+        let img = document.createElement("img");
+        img.src = "assets/animals/" + animals[Math.floor(i/copiesPerAnimal)] + ".png";
+        img.draggable = false;
+        img.classList.add("item");
+        img.classList.add("hidden");
+        img.classList.add(Math.floor(i/copiesPerAnimal));
+        if (i%2) {
+            img.classList.add("flip");
+        }
+        img.onload = unhideElement(img, 1200);
+        document.getElementById("animals").appendChild(img);
+    }
+}
+
+function addCardImgs() {
+    for (let i=0; i<numAnimals*copiesPerAnimal; i++) {
+        let img = document.createElement("img");
+        img.src = "assets/card.png";
+        img.draggable = false;
+        img.classList.add("card");
+        img.classList.add("hidden");
+        img.classList.add(i);
+        img.onclick = function() {revealCard(event, i)};
+        img.onload = unhideElement(img, 800);
+        document.getElementById("cards").appendChild(img);
+    }
+}
+
+function add1v1PageElements() {
+    add1v1Animals();
+    add1v1Cards();
+}
+
+function add1v1Cards() {
+    count = 0;
+    for (let player=-1; player<2; player += 2) {
+        for (let row = 0; row<3; row++) {
+            for (let column = 0; column<4; column++) {
+                let img = document.createElement("img");
+                let cardLetter = cardOrder[count];
+                img.src = "assets/cards/card" + cardLetter + ".png";
+                img.draggable = false;
+                img.classList.add("card");
+                img.classList.add("hidden");
+                img.classList.add(cardLetter);
+                
+                img.onclick = function() {revealCard1v1(event, cardLetter)}; // TODO
+                img.onload = unhideElement(img, 2500);
+
+                document.getElementById("cards").appendChild(img);
+
+                // (window.innerWidth/2) centers the tile layout on the middle of the screen
+                // (column*120) separates the tiles by their columns
+                // (player*350) puts the player 1 tiles on the left and the player 2 on the right
+                // ((row-1) * player * -55) offsets the tiles in each row so they are arranged diagonally (as on a real keyboard)
+                img.style.left = (window.innerWidth/2) + (column * 120) + (player * 350) + ((row-1) * player * -55) - 180 + "px";
+                img.style.top = 300 + (row*120) + "px";
+
+                count++;
+            }
+        }
+    }
+}
+
+function add1v1Animals() {
+    count = 0;
+    for (let player=-1; player<2; player += 2) {
+        for (let row = 0; row<3; row++) {
+            for (let column = 0; column<4; column++) {
+                let img = document.createElement("img");
+                img.src = "assets/animals/" + (player==-1 ? animals[count%numAnimals] : p2Animals[count%numAnimals]) + ".png";
+                img.draggable = false;
+                img.classList.add("item");
+                img.classList.add("hidden");
+                img.classList.add(player==-1 ? animals[count%numAnimals] : p2Animals[count%numAnimals]);
+                if (count%2) {
+                    img.classList.add("flip");
+                }
+                img.onload = unhideElement(img, 3500);
+
+                document.getElementById("animals").appendChild(img);
+                img.style.left = (window.innerWidth/2) + (column * 120) + (player * 350) + ((row-1) * player * -55) - 180 + "px";
+                img.style.top = 300 + (row*120) + "px";
+
+                count++;
+            }
+        }
+    }
+}
+
+function clearPageElements() {
+    let animalElems = document.getElementsByClassName("item");
+    while (animalElems.length) {
+        animalElems[0].remove();
+    }
+    let cardElems = document.getElementsByClassName("card");
+    while (cardElems.length) {
+        cardElems[0].remove();
+    }
+}
+
+function unhideElement(self, timeout) {
+    setTimeout(() => {
+        self.classList.remove("hidden");
+        self.classList.add("visible");
+    }, timeout);
+}
+
+function hideAllElements() {
+    let animalElems = document.getElementsByClassName("item");
+    let cardElems = document.getElementsByClassName("card");
+    for (let a=0; a<animalElems.length; a++) {
+        animalElems[a].classList.remove("visible");
+        animalElems[a].classList.add("hidden");
+    }
+    for (let c=0; c<cardElems.length; c++) {
+        cardElems[c].classList.remove("visible");
+        cardElems[c].classList.add("hidden");
+    }
+}
+function showAllElements() {
+    let animalElems = document.getElementsByClassName("item");
+    let cardElems = document.getElementsByClassName("card");
+    for (let c=0; c<cardElems.length; c++) {
+        cardElems[c].classList.remove("hidden");
+        cardElems[c].classList.add("visible");
+    }
+    for (let a=0; a<animalElems.length; a++) {
+        animalElems[a].classList.remove("hidden");
+        animalElems[a].classList.add("visible");
+    }
+}
+
+function extraWidth() {
+    widthExtra = 5;
+    if (easyMode) {
+        widthExtra = 2;
+    }
+    return widthExtra;
+}
+
+function initialiseGridSpaces() {
+    if (alignToGrid) {
+
+        for (let xc=0; xc<copiesPerAnimal+extraWidth(); xc++) {
+            gridOffsetX[xc] = xc * 120;
+            for (let yc=0; yc<Math.ceil((numAnimals*copiesPerAnimal)/(copiesPerAnimal+extraWidth())); yc++) {
+                gridOffsetY[yc] = yc * 120;
+            }
+        }
+        alignedGridXOffset = (window.innerWidth/2) - 105*((copiesPerAnimal+extraWidth())/2);
+    }
+    else {
+        for (let xc=0; xc<numberOfSquaresX; xc++) {
+            gridOffsetX[xc] = xc * ((maxXpercent - minXpercent) / numberOfSquaresX)
+            gridSpaces[xc] = [];
+            
+            for (let yc=0; yc<numberOfSquaresY; yc++) {
+                gridOffsetY[yc] = yc * ((maxYpercent - minYpercent) / numberOfSquaresY)
+                gridSpaces[xc][yc] = GridSpace.Empty;
+            }
+        }
+    
+        // Initialise the padding squares as adjacent
+        for (let xp=0; xp<numberOfSquaresX; xp++) {
+            gridSpaces[xp][0] = GridSpace.Adjacent;
+            gridSpaces[xp][numberOfSquaresY-1] = GridSpace.Adjacent;
+        }
+        for (let yp=0; yp<numberOfSquaresY; yp++) {
+            gridSpaces[0][yp] = GridSpace.Adjacent;
+            gridSpaces[numberOfSquaresX-1][yp] = GridSpace.Adjacent;
+        }
+    }
+}
+
+function placeItems() {
+
+    if (alignToGrid) {
+        // TODO: Organise cards in grid
+        // Grid width: x+4 cards
+        xcoord = 0;
+        ycoord = 0;
+        indices = [];
+        for (let a=0; a<numAnimals*copiesPerAnimal; a++) {
+            indices.push(a);
+        }
+        count = 0;
+        while (indices.length) {
+            let p = selectRandomFromArray(indices);
+            
+            thisitem = document.getElementsByClassName("item")[p];
+            thiscard = document.getElementsByClassName("card")[p];
+            x = alignedGridXOffset + gridOffsetX[count % (copiesPerAnimal+extraWidth())];
+            y = alignedGridYOffset + gridOffsetY[Math.floor(count/(copiesPerAnimal+extraWidth()))];
+            moveItemPX(thisitem, x, y);
+            moveItemPX(thiscard, x, y);
+
+            indices = removeItemOnce(indices, p);
+            count++;
+        }
+
+    }
+    else {
+        for (let a=0; a<numAnimals*copiesPerAnimal; a++) {
+            thisitem = document.getElementsByClassName("item")[a];
+            thiscard = document.getElementsByClassName("card")[a];
+            x = 0;
+            y = 0;
+            do {
+                coord = randomGridCoord();
+                x = coord.x;
+                y = coord.y;
+            } while (gridSpaces[x][y] != GridSpace.Empty);
+    
+            moveItem(thisitem, x, y);
+            moveItem(thiscard, x, y);
+    
+            for (let Xoffset=-1; Xoffset<2; Xoffset++) {
+                for (let Yoffset=-1; Yoffset<2; Yoffset++) {
+                    gridSpaces[x + Xoffset][y + Yoffset] = GridSpace.Adjacent;
+                }
+            }
+            gridSpaces[x][y] = GridSpace.Occupied;
+        }
+    }
+}
+
+function moveItem(item, gridX, gridY) {
+    item.style.left = (gridOffsetX[gridX] + minXpercent) + "%";
+    item.style.top = (gridOffsetY[gridY] + minYpercent) + "%";
+}
+
+function moveItemPX(item, gridX, gridY) {
+    item.style.left = gridX + "px";
+    item.style.top = gridY + "px";
+}
+
+function randomGridCoord() {
+    x = Math.floor(Math.random() * numberOfSquaresX);
+    y = Math.floor(Math.random() * numberOfSquaresY);
+    return {x, y};
+}
+
+function removeItemOnce(arr, value) {
+    var index = arr.indexOf(value);
+    if (index > -1) {
+      arr.splice(index, 1);
+    }
+    return arr;
+  }
+
+function revealCard(e, cardId) {
+    e.stopPropagation();
+    clearTimeout(turnovertimeout);
+
+    let animalID = Math.floor(cardId/copiesPerAnimal);
+
+    switch (gameState) {
+        case GameState.Match:
+        case GameState.Fail:
+            showUnsolvedCards();
+        case GameState.Open:
+            hideCard(cardId);
+            selectedCards = [animalID];
+            gameState = GameState.Partial;
+            updateProgressStepper();
+            break;
+
+        case GameState.Partial:
+            hideCard(cardId);
+            selectedCards.push(animalID);
+            
+            if (selectedCards.length == copiesPerAnimal) {
+                // This is the last card - check if all selected are matching
+                incrementAttempts();
+                if (Math.min(...selectedCards) === Math.max(...selectedCards)) {
+                    matchesFound[animalID] = 1;
+                    
+                    if (calculateSum(matchesFound) == numAnimals) {
+                        gameState = GameState.End;
+
+                        highestCurrentScore = getLeaderboardForMode()[4].score;
+                        if (highestCurrentScore == "" || numAttempts < highestCurrentScore) {
+                            updateBest();
+                        }
+                        else {
+                            setPlayAgainButtonVisibility(true);
+                        }
+                    }
+                    else {
+                        gameState = GameState.Match;
+                    }
+                }
+                else {
+                    gameState = GameState.Fail;
+                    turnovertimeout = setTimeout (() => {
+                        showUnsolvedCards();
+                        selectedCards = [];
+                        gameState = GameState.Open;
+                        updateProgressStepper();
+                    }, getTimeoutForMode());
+                }
+                setAttemptsColour();
+            }
+            updateProgressStepper();
+            break;
+    }
+
+    updateMessage();
+}
+
+function revealCard1v1(evt, cardKey) {
+    if (evt) {
+        evt.stopPropagation();
+    }
+    clearTimeout(turnovertimeout);
+    if (selectedCards.length == 0) {
+        showUnsolvedCards();
+    }
+    setBackgroundColours();
+
+    if ((isPlayerOneTurn && cardOrder.indexOf(cardKey) < numAnimals)
+        || (!isPlayerOneTurn && cardOrder.indexOf(cardKey) >= numAnimals)) {
+        // Player clicked one of their cards on their turn
+        if (document.getElementsByClassName("card " + cardKey)[0]
+                    .classList.contains("hidden")) {
+            return;
+        }
+
+        if (selectedCards.indexOf(cardOrder.indexOf(cardKey)) != -1) {
+            // This card has already been selected
+            return;
+        }
+    
+        selectedCards.push(cardOrder.indexOf(cardKey));
+        hideCard(cardKey);
+
+        if (selectedCards.length > 1) {
+            // This is the second card turned over
+            // Assign a point if they match
+            let match = false;
+
+            // Note to self: This code could well be shortened, but I have decided
+            // to leave it as it is for understanding's sake
+            if (isPlayerOneTurn) {
+                let playerOneAnimal = animals[selectedCards[1] % 12];
+                let playerTwoAnimal = p2Animals[selectedCards[0] % 12];
+                if (playerOneAnimal == playerTwoAnimal) {
+                    playerOneScore += 1;
+                    match = true;
+                    // What to put in matchesFound when animals are out of order on each side?
+                    // ==> Line them up according to the [animals] array
+                    matchesFound[animals.indexOf(playerOneAnimal)] = 1;
+                }
+            }
+            else {
+                let playerOneAnimal = animals[selectedCards[0] % 12];
+                let playerTwoAnimal = p2Animals[selectedCards[1] % 12];
+                if (playerOneAnimal == playerTwoAnimal) {
+                    playerTwoScore += 1;
+                    match = true;
+                    matchesFound[animals.indexOf(playerTwoAnimal)] = 1;
+                }
+            }
+            if (match && calculateSum(matchesFound) == numAnimals) {
+                gameState = GameState.End;
+                setPlayAgainButtonVisibility(true);
+            }
+            updateMessage();
+            // Show green/red background then back to active colour
+            showColouredBackground(match);
+            selectedCards = [];
+
+            // Show cards after x seconds
+            turnovertimeout = setTimeout(() => {
+                showUnsolvedCards();
+                setBackgroundColours();
+            }, getTimeoutForMode());
+        }
+        else {
+            flipPlayerTurn();
+        }
+    }
+}
+
+function getTimeoutForMode() {
+    return (easyMode ? 2 : 1)*(500*(copiesPerAnimal+1));
+}
+
+// TODO: Upgrade this to handle (or rather ignore) for 1v1
+function handleBackgroundClick() {
+    if (gameState == GameState.Fail || gameState == GameState.Match) {
+        showUnsolvedCards();
+        selectedCards = [];
+        gameState = GameState.Open;
+        updateMessage();
+        updateProgressStepper();
+    }
+}
+
+function showColouredBackground(isMatch) {
+    let matchColour = "#a1e597";
+    let noMatchColour = "#ffa8a8";
+    if (isPlayerOneTurn) {
+        document.getElementsByClassName("left")[0].style.backgroundColor =
+            isMatch ? matchColour : noMatchColour;
+    }
+    else {
+        document.getElementsByClassName("right")[0].style.backgroundColor =
+            isMatch ? matchColour : noMatchColour;
+    }
+}
+
+function updateProgressStepper() {
+    progressBar = document.getElementById("progress");
+    progressBar.style
+               .width = Math.min(95, Math.max((95/copiesPerAnimal)*selectedCards.length, 0)) + "%";
+    if (gameState == GameState.Match) {
+        progressBar.style["background-color"] = "#008000";
+    }
+    else if (gameState == GameState.Fail) {
+        progressBar.style["background-color"] = "#9b0000";
+    }
+    else if (gameState == GameState.End) {
+        progressBar.style.width = 0;
+    }
+    else {
+        progressBar.style["background-color"] = "#5a86d1";
+    }
+}
+
+function hideCard(id) {
+    card = document.getElementsByClassName("card " + id)[0];
+    card.classList.remove("visible");
+    card.classList.add("hidden");
+}
+
+function showUnsolvedCards() {
+    if (competitiveMode) {
+        for (let i = 0; i < numAnimals; i++) {
+            if (matchesFound[i] != 1) {
+                setElementVisibilityByClass("card " + cardOrder[i], true);
+                anml = animals[i];
+                p2index = p2Animals.indexOf(anml);
+                setElementVisibilityByClass("card " + cardOrder[p2index + 12], true);
+            }
+        }
+    }
+    else {
+        for (let i=0; i<numAnimals*copiesPerAnimal; i++) {
+            if (matchesFound[Math.floor(i / copiesPerAnimal)] != 1) {
+                setElementVisibilityByClass("card " + i, true);
+            }
+        }
+    }
+}
+
+function incrementAttempts() {
+    numAttempts += 1;
+    document.getElementById("attempts").innerText = "Attempts: " + numAttempts;
+}
+
+function setAttemptsColour() {
+    if (gameState == GameState.Match) {
+        document.getElementById("attempts").classList.add("green");
+        document.getElementById("attempts").classList.remove("red");
+    }
+    else if (gameState == GameState.Fail) {
+        document.getElementById("attempts").classList.add("red");
+        document.getElementById("attempts").classList.remove("green");
+    }
+    else {
+        document.getElementById("attempts").classList.remove("red");
+        document.getElementById("attempts").classList.remove("green");
+    }
+}
+
+const calculateSum = (arr) => {
+    return arr.reduce((total, current) => {
+        return total + current;
+    }, 0);
+}
+
+function selectRandomFromArray(array) {
+    return array[Math.floor(Math.random() * array.length)];
+}
+
+function setPlayAgainButtonVisibility(value) {
+    setElementVisibility("playagain", value);
+    setElementVisibility("menu", value);
+}
+
+function setElementVisibility(elementID, value) {
+    element = document.getElementById(elementID);
+    if (value) {
+        element.classList.add("visible");
+        element.classList.remove("hidden");
+    } else {
+        element.classList.add("hidden");
+        element.classList.remove("visible");
+    }
+}
+
+function setElementVisibilityByClass(elementClassName, value) {
+    element = document.getElementsByClassName(elementClassName)[0];
+    if (value) {
+        element.classList.add("visible");
+        element.classList.remove("hidden");
+    } else {
+        element.classList.add("hidden");
+        element.classList.remove("visible");
+    }
+}
+
+function updateBest() {
+    document.getElementById("leaderboardname").classList.remove("hidden");
+    document.getElementById("label-leaderboardname").classList.remove("hidden");
+    waitingForNameEntry = true;
+}
+
+function handleKeyPress(evt) {
+    if (waitingForNameEntry
+        && evt.key == "Enter"
+        && document.getElementById("leaderboardname").value.length == 3) {
+            setBest(document.getElementById("leaderboardname").value);
+            waitingForNameEntry = false;
+            document.getElementById("leaderboardname").classList.add("hidden");
+            document.getElementById("label-leaderboardname").classList.add("hidden");
+    }
+    else {
+        if (cardOrder.indexOf(evt.key) == -1) {
+            return;
+        }
+        revealCard1v1(null, evt.key);
+    }
+}
+
+function setBest(currentUserName) {
+    leaderboard = getLeaderboardForMode();
+    leaderboard.push({name: currentUserName, score: numAttempts, align: alignToGrid});
+    leaderboard.sort(ascending());
+    saveLeaderboard(leaderboard);
+
+    displayLeaderboardForMode();
+    setPlayAgainButtonVisibility(true);
+}
+
+function displayLeaderboardForMode() {
+    document.getElementById("leaderboard-div").hidden = false;
+    document.getElementById("easymodelabel").hidden = !easyMode;
+
+    leaderboard = getLeaderboardForMode();
+    for (let i=0; i<5; i++) {
+        nameField = document.getElementById("name" + (i+1));
+        scoreField = document.getElementById("score" + (i+1));
+        if (leaderboard[i].name != "") {
+            nameField.innerText = leaderboard[i].name + (leaderboard[i].align=='1' ? "*" : "");
+            scoreField.innerText = parseInt(leaderboard[i].score);
+        }
+        else {
+            nameField.innerText = "";
+            scoreField.innerText = "";
+        }
+    }
+}
+
+function getLeaderboardForMode() {
+    leaderboardForMode = [];
+    for (let i=0; i<5; i++) {
+        nameScoreString = localStorage.getItem("scoreE" + (easyMode ? 1 : 0) + "M" + copiesPerAnimal + "P" + i) ?? "";
+        leaderboardForMode[i] = {
+            name: nameScoreString.substring(0,3),
+            score: nameScoreString.substring(3,7),
+            align: nameScoreString.substring(7,8)
+        };
+    }
+    return leaderboardForMode;
+}
+
+function saveLeaderboard(lb) {
+    lb = lb.slice(0,5);
+    for (let i=0; i<5; i++) {
+        if (lb[i].name != "") {
+            localStorage.setItem(
+                "scoreE" + (easyMode ? 1 : 0) + "M" + copiesPerAnimal + "P" + i,
+                lb[i].name + lb[i].score.toString().padStart(4,'0') + (lb[i].align ? '1' : '0')
+            )
+        }
+    }
+}
+
+function ascending() {
+    return function(a, b) {
+        if (a.score === b.score) {return 0;}
+        if (a.score === "") {return 1;}
+        if (b.score === "") {return -1;}
+        return a.score-b.score;
+    }
+}
+
+function flipAlignToGrid() {
+    alignToGrid = !alignToGrid;
+}
+
+function flipEasyMode() {
+    easyMode = !easyMode;
+}
+
+function flipPlayerTurn() {
+    isPlayerOneTurn = !isPlayerOneTurn;
+    setBackgroundColours();
+}
+
+function setBackgroundColours() {
+    let activeColour = "#92b6f3";
+    let passiveColour = "#b4c7e7";
+    document.getElementsByClassName("left")[0].style.backgroundColor =
+        isPlayerOneTurn ? activeColour : passiveColour;
+    document.getElementsByClassName("right")[0].style.backgroundColor =
+        isPlayerOneTurn ? passiveColour : activeColour;
+}
+
+openMessageOptions = [
+    "Click to turn over cards at a time; try and find matching sets!",
+    "Click to reveal animals at a time; see if you can find the matches!",
+    "Click on cards to turn them over; try to uncover all the matching animals!"
+]
+
+partialMessageOptions = [
+    "Can you find the matches?",
+    "Do you know where the matching animals are?",
+    "Click again to search for matches!",
+    "See if you can turn over the matches!"
+]
+
+failMessageOptions = [
+    "Oops! Those don't match. Click anywhere to try again.",
+    "What a silly billy - those animals don't match. Give it another go.",
+    "Oh no! Those aren't the same animal. Try again.",
+    "Nope - not a match. Keep looking!"
+]
+
+matchMessageOptions = [
+    "Nice - that's a match! Only REMAINING left to find!",
+    "Good work, those are all the same! Keep it up to find the REMAINING still hiding!",
+    "Well done! Just REMAINING more sets to uncover!",
+    "Those are indeed all the same animal. Chop chop, there's REMAINING more to find."
+]
+
+newBestMessageOptions = [
+    "Congratulations - that's a new best score! Want to try again?",
+    "Woah! You've beaten your best score! Reckon you can do it again?",
+    "That's a new record! But I think you can do better..."
+]
+
+gameEndMessageOptions = [
+    "Congratulations - you did it! Click the button to try and beat your score!",
+    "I'm so proud of you for finding all the sets. Think you can do it again faster?",
+    "Nice work, that's the game! Click 'play again' to try and beat your score!"
+]
+
+menuMessageOptions = [
+    "Turn over sets of cards and try to find all the matching animals!",
+    "Match up the animal pairs and test your memory!"
+]
+
+openMessageOptions1v1 = [
+    "Player INFO, it's your turn!",
+    "It's Player INFO to turn a card first!",
+    "Whenever you're ready, Player INFO"
+]
+
+partialMessageOptions1v1 = [
+    "Player INFO, can you turn over the matching animal?",
+    "Let's see if Player INFO can find the match!",
+    "Time for Player INFO to turn over a card. Hope it's a match!"
+]
+
+failMessageOptions1v1 = [
+    "Oh no! That's not a match.",
+    "Oops! Those animals don't match!",
+    "Nope - not a match. Keep looking!"
+]
+
+matchMessageOptions1v1 = [
+    "Nice - that's a match! A point for Player INFO!",
+    "Good work Player INFO, those are the same!",
+    "You have an impressive memory, Player INFO.",
+    "One point to Player INFO for an impressive match!"
+]
+
+function updateMessage() {
+    newMessage = "";
+    if (competitiveMode) {
+        newMessage = "Player One " + playerOneScore + " - " + playerTwoScore + " Player Two";
+    }
+    else {
+        switch (gameState) {
+            case GameState.Open:
+                if (competitiveMode) {
+                    newMessage = selectRandomFromArray(openMessageOptions1v1);
+                    newMessage = newMessage.replace("INFO", isPlayerOneTurn ? "1 (left)" : "2 (right)");
+                }
+                else {
+                    newMessage = selectRandomFromArray(openMessageOptions);
+                }
+                break;
+            case GameState.Partial:
+                if (competitiveMode) {
+                    newMessage = selectRandomFromArray(partialMessageOptions1v1);
+                    newMessage = newMessage.replace("INFO", isPlayerOneTurn ? "1 (left)" : "2 (right)");
+                }
+                else {
+                    newMessage = selectRandomFromArray(partialMessageOptions);
+                }
+                break;
+            case GameState.Fail:
+                if (competitiveMode) {
+                    newMessage = selectRandomFromArray(failMessageOptions1v1);
+                }
+                else {
+                    newMessage = selectRandomFromArray(failMessageOptions);
+                }
+                break;
+            case GameState.Match:
+                if (competitiveMode) {
+                    newMessage = selectRandomFromArray(matchMessageOptions1v1);
+                    newMessage = newMessage.replace("INFO", isPlayerOneTurn ? "1" : "2");
+                }
+                else {
+                    newMessage = selectRandomFromArray(matchMessageOptions);
+                    newMessage = newMessage.replace("REMAINING", (numAnimals - calculateSum(matchesFound)));
+                }
+                break;
+            case GameState.End:
+                if (competitiveMode) {
+                    if (playerOneScore == playerTwoScore) {
+                        newMessage = "It's a tie! Play again to see who will be victorious!";
+                    }
+                    else if (playerTwoScore > playerOneScore) {
+                        if (playerTwoScore - playerOneScore < 3) {
+                            newMessage = "It was close, but Player 2 pulled the win!";
+                        }
+                        else {
+                            newMessage = "A decisive victory for Player 2. Fancy a rematch?";
+                        }
+                    }
+                    else {
+                        if (playerOneScore - playerTwoScore < 3) {
+                            newMessage = "A close game, but Player 1 snatched the win!";
+                        }
+                        else {
+                            newMessage = "Victory for Player 1! Fancy a rematch?"
+                        }
+                    }
+                }
+                else {
+                    if (isNewBest) {
+                        newMessage = selectRandomFromArray(newBestMessageOptions);
+                    }
+                    else {
+                        newMessage = selectRandomFromArray(gameEndMessageOptions);
+                    }
+                }
+                break;
+            case GameState.Menu:
+                newMessage = selectRandomFromArray(menuMessageOptions);
+                break;
+        }
+    }
+    document.getElementById("subtitle").innerText = newMessage;
+}
\ No newline at end of file
diff --git a/Link Up Game/styles.css b/Link Up Game/styles.css
new file mode 100644
index 000000000..3ed6e2156
--- /dev/null
+++ b/Link Up Game/styles.css	
@@ -0,0 +1,227 @@
+body {
+    background-color: #b4c7e7;
+    font-family: sans-serif;
+}
+
+#background {
+    position: fixed;
+    bottom: 0;
+    width: 50%;
+    height: 88%;
+    z-index: -1;
+}
+
+#background.left {
+    left: 0;
+    border-radius: 12px;
+    background-color: #b4c7e7; 
+    transition: all ease 300ms;
+}
+
+#background.right {
+    right: 0;
+    border-radius: 12px;
+    background-color: #b4c7e7;
+    transition: all ease 300ms;
+}
+
+#progress {
+    display: block;
+    position: absolute;
+    bottom: 30px;
+    left: 2.5%;
+    background-color: #5a86d1;
+    height: 20px;
+    transition: all 400ms ease;
+}
+
+h1, h2 {
+    text-align: center;
+}
+
+#attempts {
+    position: fixed;
+    top: 10px;
+    left: 50px;
+    font-size: 3em;
+}
+
+#best {
+    position: fixed;
+    top: 10px;
+    right: 50px;
+    font-size: 2em;
+}
+
+.red {
+    color: #9b0000;
+}
+
+.green {
+    color: #008000;
+}
+
+img {
+    width: 95px;
+    height: 95px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+}
+
+.flip {
+    -webkit-transform: scaleX(-1) translate(50%,-50%);
+    transform: scaleX(-1) translate(50%,-50%);
+}
+
+.card {
+    cursor: pointer;
+    transform: translate(-50%,-50%);
+}
+
+.visible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .2s linear;
+  }
+
+.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s .3s, opacity .3s linear;
+}
+
+.button {
+    display:inline-block;
+    padding: 15px 25px;
+    font-size: 24px;
+    cursor: pointer;
+    text-align: center;
+    color: #fff;
+    background-color: #70ad47;
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0 9px #999;
+}
+
+.button:hover {
+    background-color: #3e8e41
+}
+
+.button:active {
+    background-color: #3e8e41;
+    box-shadow: 0 5px #666;
+    transform: translateY(4px);
+}
+
+.align {
+    padding-top: 50px;
+}
+
+.easy {
+    padding-top: 20px;
+}
+
+.align label, .easy label {
+    font-family: monospace;
+    font-size: large;
+}
+
+#snaptogrid, #easymode {
+    height: 20px;
+    width: 20px;
+}
+
+#playagain {
+    position: fixed;
+    top: 25px;
+    right: 350px;
+    font-size: 2em;
+}
+
+#menu {
+    position: fixed;
+    top: 25px;
+    left: 400px;
+    font-size: 2em;
+}
+
+.startbuttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.start {
+    margin-top: 30px;
+}
+
+#start2 {
+    margin-bottom: 10px;
+    background-color: #c14444;
+}
+
+#start2:hover {
+    background-color: #9e2f2f;
+}
+
+#start2:active {
+    background-color: #9e2f2f;
+}
+
+#start1v1 {
+    margin-bottom: 20px;
+    background-color: #3e6dd3;
+}
+
+#start1v1:hover {
+    background-color: #3156a7;
+}
+
+#start1v1:active {
+    background-color: #3156a7;
+}
+
+#easymodelabel {
+    position: fixed;
+    top: 15px;
+    right: 72px;
+    font-style: italic;
+}
+
+table {
+    border-collapse: collapse;
+    position: fixed;
+    top: 55px;
+    right: 50px;
+}
+
+table, th, td {
+    border: solid 1px black;
+    padding: 5px;
+}
+
+.gold {
+    background-color: gold;
+}
+.silver {
+    background-color: rgb(218, 218, 218);
+}
+.bronze {
+    background-color: rgb(190, 139, 10);
+}
+
+#leaderboardname {
+    width: 3em;
+    font-weight: bold;
+    font-size: 2em;
+    margin-left: 50px;
+}
+
+#label-leaderboardname {
+    font-size: 1.2em;
+    margin-left: 50px;
+}
\ No newline at end of file
diff --git a/Link Up Game/todo.md b/Link Up Game/todo.md
new file mode 100644
index 000000000..ba1c2c63c
--- /dev/null
+++ b/Link Up Game/todo.md	
@@ -0,0 +1,3 @@
+# Animal match todo list
+- Add timer - Store total time taken with score
+- Make CSS scale appropriately for mobile or different resolution screens
diff --git a/Mario-game/README.md b/Mario-game/README.md
new file mode 100644
index 000000000..764d13bd8
--- /dev/null
+++ b/Mario-game/README.md
@@ -0,0 +1,21 @@
+### Game-Mario-Jump
+
+This Mario-inspired game requires you to press the spacebar to make Mario jump and avoid colliding with passing pipes.
+
+### Technologies Used:
+<div style="display: inline_block">
+  <img align="center" alt="JavaScript" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg">
+  <img align="center" alt="HTML" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg">
+  <img align="center" alt="CSS" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg">
+</div>
+
+### Project Images:
+<div>
+ <img width="300px" src="https://i.imgur.com/1bUH48J.png" alt="Game image" >
+ <img width="300px" src="https://i.imgur.com/a0xz4kI.png" alt="Game image" > 
+</div>
+
+<br>
+
+### Project Link:
+[https://niraj1608.github.io/Game-Mario/](https://niraj1608.github.io/Game-Mario/)
diff --git a/Mario-game/css/style.css b/Mario-game/css/style.css
new file mode 100644
index 000000000..7f39c2c2b
--- /dev/null
+++ b/Mario-game/css/style.css
@@ -0,0 +1,87 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.game-board{
+    width: 100%;
+    height: 500px;
+    border-bottom: 15px solid #049c18;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(#87ceeb, #e0f6ff);
+}
+
+.pipe{
+    position: absolute;
+    bottom: 0;
+    width: 80px;
+    animation: pipe-animation 2s infinite linear;
+}
+
+.mario{
+    width: 150px;
+    position: absolute;
+    bottom: 0;
+    
+}
+
+.jump{
+    animation: jump 500ms ease-out;
+}
+
+.clouds{
+    position: absolute;
+    width: 550px;
+    animation: clouds-animation 20s infinite linear;
+}
+
+@keyframes clouds-animation {
+    from{
+        right: -550px;
+    }
+
+    to{
+        right: 100%;
+    }
+}
+
+@keyframes pipe-animation {
+    from{
+        right: -80px;
+    }
+
+    to{
+        right: 100%;
+    }
+}
+
+@keyframes jump {
+
+    0%{
+        bottom: 0;
+    }
+
+    40%{
+        bottom: 180px;
+    }    
+
+    50%{
+        bottom: 180px;
+    }
+
+    60%{
+        bottom: 180px;
+    }
+
+    100%{
+        bottom: 0;
+    }
+}
+
+
+
+
+
diff --git a/Mario-game/images/clouds.png b/Mario-game/images/clouds.png
new file mode 100644
index 000000000..4ddc808f4
Binary files /dev/null and b/Mario-game/images/clouds.png differ
diff --git a/Mario-game/images/game-over.png b/Mario-game/images/game-over.png
new file mode 100644
index 000000000..3681da3b8
Binary files /dev/null and b/Mario-game/images/game-over.png differ
diff --git a/Mario-game/images/mario.gif b/Mario-game/images/mario.gif
new file mode 100644
index 000000000..9199d1ebf
Binary files /dev/null and b/Mario-game/images/mario.gif differ
diff --git a/Mario-game/images/pipe.png b/Mario-game/images/pipe.png
new file mode 100644
index 000000000..b20d387ef
Binary files /dev/null and b/Mario-game/images/pipe.png differ
diff --git a/Mario-game/index.html b/Mario-game/index.html
new file mode 100644
index 000000000..bef8cd99e
--- /dev/null
+++ b/Mario-game/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Mario jump</title>
+
+    <link rel="stylesheet" href="./css/style.css">
+    <script src="./js/script.js" defer></script>    
+</head>
+<body>
+    
+    <div class="game-board">
+        <img src="./images/clouds.png" class="clouds">
+        <img src="./images/mario.gif" class="mario">
+        <img src="./images/pipe.png" class="pipe">
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Mario-game/js/script.js b/Mario-game/js/script.js
new file mode 100644
index 000000000..f65ed99ad
--- /dev/null
+++ b/Mario-game/js/script.js
@@ -0,0 +1,46 @@
+const mario = document.querySelector('.mario');
+const pipe = document.querySelector('.pipe');
+const clouds = document.querySelector('.clouds');
+
+const jump = () => {
+    mario.classList.add('jump');
+
+    setTimeout(()=> {
+
+        mario.classList.remove('jump');
+
+    }, 500)
+}
+
+const loop = setInterval(() => {
+
+
+        const cloudsPosition = clouds.offsetLeft;
+        const pipePosition = pipe.offsetLeft;
+        const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', '');
+
+        if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
+
+            pipe.style.animation = 'none';
+            pipe.style.left = `${pipePosition}px`;
+
+            mario.style.animation = 'none';
+            mario.style.bottom = `${marioPosition}px`;
+
+            mario.src = './images/game-over.png';
+            mario.style.width = '75px';
+            mario.style.marginLeft = '50px';
+
+            clouds.style.animation = 'none';
+            clouds.style.left = `${cloudsPosition}px`;
+
+            clearInterval(loop);
+
+        }
+
+    }, 10);
+
+
+
+
+document.addEventListener('keydown', jump);
\ No newline at end of file
diff --git a/MatchingPair/Contact-us.html b/MatchingPair/Contact-us.html
new file mode 100644
index 000000000..42ed96458
--- /dev/null
+++ b/MatchingPair/Contact-us.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact-Me</title>
+    <link rel="stylesheet" href="Contact.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="#" class="navbar-brand">Contact-me</a>
+            <ul class="navbar-menu">
+                <li><a href="#">LinkdeIn</a></li>
+                <li><a href="#">Github</a></li>
+                <li><a href="#">Devfolio</a></li>
+            </ul>
+        </div>
+    </nav>
+    <div class="contact-container">
+    <h1>Contact-Us</h1>
+
+    <hr size="5px" noshade="none">
+    <form class="contactForm" action="#" method="post" enctype="text/plain">
+        <label  for="name">Name:</label>
+        <input type="text" id="name " name="name" placeholder="Enter Your Name " required>
+        
+         <label for="email">Email:</label>
+            <input type="email" id="email"name="email" placeholder="Enter Your Email" required>
+        
+            <label for="message" >Message:</label>
+            <textarea type="message" name="message" value=""placeholder="Enter Your Message" required></textarea>
+        <div class="form-group">
+        <button class="submit" type="submit">Submit</button>
+</div>
+        
+    </form>
+    <p id="formMessage"></p>
+    </div>  
+    <script src="contact.js"></script>
+</body>
+</html>
diff --git a/MatchingPair/Contact.css b/MatchingPair/Contact.css
new file mode 100644
index 000000000..e46c71739
--- /dev/null
+++ b/MatchingPair/Contact.css
@@ -0,0 +1,163 @@
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(45deg, #0d0812, #0a1a37,rgb(43, 5, 94),rgb(79, 3, 79),rgb(4, 4, 134),rgb(86, 86, 248)
+    );
+    background-size: 400% 400%;
+    animation: gradientAnimation 5s ease infinite;
+    color: #fff;
+    cursor: pointer;
+  }
+  #custom-cursor{
+   
+    width: 20px;
+    height: 20px;
+    border: 2px solid #e8dce4;
+    border-radius: 50%;
+    position: absolute;
+    pointer-events: none;
+    transition: transform 0.1s ease-out, background-color 0.2s ease;
+    z-index: 10000;
+    animation: cursorAnimation 0.3s infinite alternate;
+}
+@keyframes cursorAnimation {
+  0% { transform: scale(1); background-color: black,; }
+  100% { transform: scale(1.5); background-color: white; }
+}
+
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes backgroundAnimation {
+    0% { background-color: #f44336; }
+    20% { background-color: #e91e63; }
+    40% { background-color: #9c27b0; }
+    60% { background-color: #673ab7; }
+    80% { background-color: #3f51b5; }
+    100% { background-color: #2196f3; }
+}
+@keyframes cursorAnimation {
+    0% { transform: scale(1); background-color: black,; }
+    100% { transform: scale(1.5); background-color: white; }
+  }
+  h1 {
+    margin-top: 20px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    animation: titleAnimation 1s ease-out infinite alternate;
+  }
+.submit{
+    text-align: center;
+    margin-left:100px;
+    margin-top: 14px;
+}  
+/* Navbar styles */
+.navbar {
+    width: 100%;
+    background-color: #09000d;
+    padding: 1px ;
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+  }
+  
+  .navbar-container {
+    width: 90%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .navbar-brand {
+    color: #fff;
+    text-decoration: none;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  
+  .navbar-menu {
+    list-style: none;
+    display: flex;
+    gap: 15px;
+  }
+  
+  .navbar-menu li {
+    display: inline;
+  }
+  
+  .navbar-menu a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 18px;
+  }
+  
+  .navbar-menu a:hover {
+    text-decoration: underline;
+  }
+
+
+.contact-container {
+    background: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 500px;
+    width: 100%;
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #673ab7;
+}
+
+label {
+    display: block;
+    margin-top: 10px;
+}
+
+input, textarea {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+.form-group{
+    display:flex;
+
+ margin-left: 90px;
+}
+
+button {
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-top: 20px;
+    
+
+
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#formMessage {
+    margin-top: 20px;
+    color: red;
+    text-align: center;
+}
diff --git a/MatchingPair/README.md b/MatchingPair/README.md
new file mode 100644
index 000000000..13282e3b1
--- /dev/null
+++ b/MatchingPair/README.md
@@ -0,0 +1,89 @@
+# Matching Pairs Game
+## Description
+
+The Matching Pairs Game is a fun and engaging memory game developed using HTML, CSS, and JavaScript. The game challenges players to match pairs of cards with identical images within a limited time. It offers a simple yet addictive gameplay experience, a countdown timer, and a helpful chatbot for hints.
+
+## Features
+
+- **Interactive Gameplay:** Flip cards to reveal their images and try to find matching pairs.
+- **Scoring System:** Earn points for each successful match.
+- **Countdown Timer:** Complete the game within the allotted time to win.(FutureScope)
+- **Responsive Design:** The game is optimized for both desktop and mobile devices.
+- **Dark Theme:** The game features a modern dark theme for a comfortable playing experience.
+
+### Objective
+
+Match all pairs of cards .
+
+### How to Play
+
+1. **Starting the Game:** 
+   - All cards are placed face down on the game board.
+   - The score and timer are displayed at the top of the game area.
+
+2. **Flipping Cards:**
+   - Click on any card to flip it over and reveal the image on the front.
+   - Click on a second card to flip it over as well.
+
+3. **Matching Pairs:**
+   - If the images on the two flipped cards match, they will remain face up.
+   - If the images do not match, both cards will flip back face down after a short delay.
+
+
+5. **Timer:**
+   - The timer is displayed at the top of the game area.
+ .
+
+
+
+7. **Winning and Losing:**
+   - The game is won when all pairs of cards have been matched before the timer runs out.
+
+
+8. **Restarting the Game:**
+   - Refresh the page to start a new game.
+
+### Tips
+
+- Remember the positions of the cards you have already flipped.
+- Use hints strategically to maximize your chances of finding pairs quickly.
+
+## ScreeShots
+![Matching_Pair_Game](https://github.com/user-attachments/assets/0fc1bf7f-81b4-4124-97a2-9fa135479b66)
+## workingVideo:
+
+
+https://github.com/user-attachments/assets/cc6e7ac3-4057-47ad-b859-2aae2d4e31b9
+
+
+
+## Technologies Used
+
+- **HTML:** Structure of the game.
+- **CSS:** Styling and layout.
+- **JavaScript:** Game logic and interactivity.
+
+## Getting Started
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/yourusername/matching-pairs-game.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd matching-pairs-game
+   ```
+3. Open `index.html` in your web browser to play the game.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- Icons by [Favicon](https://favicon.io/)
+  
+
+---
+
+Replace `"https://github.com/yourusername/matching-pairs-game.git"` with the actual URL of your GitHub repository. This README file provides a detailed description of the game, instructions for playing, and information about the technologies used, making it easy for others to understand and contribute to your project.
diff --git a/MatchingPair/Readme.md b/MatchingPair/Readme.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/MatchingPair/about.css b/MatchingPair/about.css
new file mode 100644
index 000000000..d93f82c9f
--- /dev/null
+++ b/MatchingPair/about.css
@@ -0,0 +1,97 @@
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(45deg, #0d0812, #0a1a37,rgb(43, 5, 94),rgb(79, 3, 79),rgb(4, 4, 134),rgb(86, 86, 248)
+    );
+    background-size: 400% 400%;
+    animation: gradientAnimation 5s ease infinite;
+    color: #fff;
+    cursor: pointer;
+  }
+  #custom-cursor{
+   
+    width: 20px;
+    height: 20px;
+    border: 2px solid #e8dce4;
+    border-radius: 50%;
+    position: absolute;
+    pointer-events: none;
+    transition: transform 0.1s ease-out, background-color 0.2s ease;
+    z-index: 10000;
+    animation: cursorAnimation 0.3s infinite alternate;
+}
+@keyframes cursorAnimation {
+  0% { transform: scale(1); background-color: black,; }
+  100% { transform: scale(1.5); background-color: white; }
+}
+
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes backgroundAnimation {
+    0% { background-color: #f44336; }
+    20% { background-color: #e91e63; }
+    40% { background-color: #9c27b0; }
+    60% { background-color: #673ab7; }
+    80% { background-color: #3f51b5; }
+    100% { background-color: #2196f3; }
+}
+@keyframes cursorAnimation {
+    0% { transform: scale(1); background-color: black,; }
+    100% { transform: scale(1.5); background-color: white; }
+  }
+  h1 {
+    margin-top: 20px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    animation: titleAnimation 1s ease-out infinite alternate;
+  }
+    
+.content-container {
+    margin-top: 300px; /* Adjust based on the height of the navbar */
+    padding: 20px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #1e1e1e;
+    color: #ffffff;
+    border-radius: 10px;
+}
+
+header h1 {
+    font-size: 32px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    padding-top: 500px;
+    
+}
+h1{
+  animation: gradientAnimations 0.3 ease infinite;
+}
+.instructions h2 {
+    font-size: 24px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+}
+
+.instructions p, .instructions li {
+    font-size: 18px;
+    margin-bottom: 10px;
+   
+}
+p{
+  margin-top: 15px;
+}
+
+.instructions ul, .instructions ol {
+    margin-left: 20px;
+}
diff --git a/MatchingPair/about.html b/MatchingPair/about.html
new file mode 100644
index 000000000..6fd00c8a4
--- /dev/null
+++ b/MatchingPair/about.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Matching Pairs Game - Instructions</title>
+    <link rel="stylesheet" href="about.css">
+</head>
+<body>
+   
+        <header>
+            
+            <h1>How to Play the Matching Pairs Game</h1>
+        </header>
+        <section class="instructions">
+            <h2>Objective</h2>
+            <p>The goal of the game is to match all pairs of cards within the allotted time.</p>
+            <h2>How to Play</h2>
+            <ol>
+                <li><strong>Starting the Game:</strong>
+                    <p>When the game starts, all the cards will be placed face down on the game board. You will see the score and timer at the top of the game area.</p>
+                </li>
+                <li><strong>Flipping Cards:</strong>
+                    <p>Click on any card to flip it over and reveal the image on the front. Click on a second card to flip it over as well.</p>
+                </li>
+                <li><strong>Matching Pairs:</strong>
+                    <p>If the images on the two flipped cards match, they will remain face up, indicating a successful match. If the images do not match, both cards will be flipped back face down after a short delay.</p>
+                </li>
+                <li><strong>Scoring:</strong>
+                    <p>Each successful match will add 10 points to your score. The score is displayed at the top of the game area.</p>
+                </li>
+                <li><strong>Timer:</strong>
+                    <p>You have a limited amount of time (60 seconds) to match all the pairs. The timer is displayed at the top of the game area. The game ends when the timer runs out or when all pairs have been matched.</p>
+                </li>
+                <li><strong>Hints:</strong>
+                    <p>You can ask the chatbot for hints if you are having trouble finding pairs. To ask for a hint, type "hint" in the chat input box and press the send button. The chatbot will suggest which cards to flip.</p>
+                </li>
+                <li><strong>Winning the Game:</strong>
+                    <p>The game is won when all pairs of cards have been matched before the timer runs out. A message will appear congratulating you on your win.</p>
+                </li>
+                <li><strong>Losing the Game:</strong>
+                    <p>If the timer runs out before you have matched all the pairs, the game is over, and a message will appear informing you that the time is up.</p>
+                </li>
+                <li><strong>Restarting the Game:</strong>
+                    <p>Refresh the page to start a new game.</p>
+                </li>
+            </ol>
+            <h2>Tips</h2>
+            <ul>
+                <li>Try to remember the positions of the cards you have already flipped.</li>
+                <li>Use hints strategically to maximize your chances of finding pairs quickly.</li>
+            </ul>
+</section>
+        </section>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/MatchingPair/contact.js b/MatchingPair/contact.js
new file mode 100644
index 000000000..1c639700b
--- /dev/null
+++ b/MatchingPair/contact.js
@@ -0,0 +1,26 @@
+document.getElementById('contactForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+    
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const message = document.getElementById('message').value;
+    const formMessage = document.getElementById('formMessage');
+
+    if (name === '' || email === '' || message === '') {
+        formMessage.textContent = 'Please fill in all fields.';
+        return;
+    }
+
+    if (!validateEmail(email)) {
+        formMessage.textContent = 'Please enter a valid email address.';
+        return;
+    }
+
+    formMessage.textContent = 'Thank you for contacting us, ' + name + '! We will get back to you soon.';
+    formMessage.style.color = 'green';
+});
+
+function validateEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+}
diff --git a/MatchingPair/favicon_io (2)/android-chrome-192x192.png b/MatchingPair/favicon_io (2)/android-chrome-192x192.png
new file mode 100644
index 000000000..f45d58898
Binary files /dev/null and b/MatchingPair/favicon_io (2)/android-chrome-192x192.png differ
diff --git a/MatchingPair/favicon_io (2)/android-chrome-512x512.png b/MatchingPair/favicon_io (2)/android-chrome-512x512.png
new file mode 100644
index 000000000..7a67fed54
Binary files /dev/null and b/MatchingPair/favicon_io (2)/android-chrome-512x512.png differ
diff --git a/MatchingPair/favicon_io (2)/apple-touch-icon.png b/MatchingPair/favicon_io (2)/apple-touch-icon.png
new file mode 100644
index 000000000..8226a400a
Binary files /dev/null and b/MatchingPair/favicon_io (2)/apple-touch-icon.png differ
diff --git a/MatchingPair/favicon_io (2)/favicon-16x16.png b/MatchingPair/favicon_io (2)/favicon-16x16.png
new file mode 100644
index 000000000..2cfa18302
Binary files /dev/null and b/MatchingPair/favicon_io (2)/favicon-16x16.png differ
diff --git a/MatchingPair/favicon_io (2)/favicon-32x32.png b/MatchingPair/favicon_io (2)/favicon-32x32.png
new file mode 100644
index 000000000..bff7c9717
Binary files /dev/null and b/MatchingPair/favicon_io (2)/favicon-32x32.png differ
diff --git a/MatchingPair/favicon_io (2)/favicon.ico b/MatchingPair/favicon_io (2)/favicon.ico
new file mode 100644
index 000000000..cde73a67f
Binary files /dev/null and b/MatchingPair/favicon_io (2)/favicon.ico differ
diff --git a/MatchingPair/favicon_io (2)/site.webmanifest b/MatchingPair/favicon_io (2)/site.webmanifest
new file mode 100644
index 000000000..45dc8a206
--- /dev/null
+++ b/MatchingPair/favicon_io (2)/site.webmanifest	
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/MatchingPair/index.html b/MatchingPair/index.html
new file mode 100644
index 000000000..8b3c06bf3
--- /dev/null
+++ b/MatchingPair/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Matching Pairs Game</title>
+    <link rel="icon" href="favicon_io (2)/android-chrome-192x192.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="favicon_io (2)/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon_io (2)/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon_io (2)/favicon-16x16.png">
+    <link rel="manifest" href="favicon_io (2)/site.webmanifest">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="#" class="navbar-brand">Matching Pairs Game</a>
+            <ul class="navbar-menu">
+                <li><a href="#game-board">Play Game</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="Contact-us.html">Contact</a></li>
+            </ul>
+        </div>
+    </nav>
+    <div id="custom-cursor"></div>
+    <h1>Matching Pairs Game</h1>
+    <div id="game-container"></div>
+    <div id="game-info">
+        <p id="moves">Moves: 0</p>
+        <p id="timer">Time: 0 seconds</p>
+        <button onclick="initializeGame()">Restart Game</button>
+    </div>
+    <div class="chat-container">
+        <div class="chat-box" id="chat-box">
+            <div class="chat-message bot">Hello! Need any help?</div>
+        </div>
+        <input type="text" id="chat-input" placeholder="Type your message....">
+        <button id="send-btn">📩</button>
+    </div>
+</div>
+    <script src="script.js" charset="UTF-8"></script>
+</body>
+</html>
diff --git a/MatchingPair/script.js b/MatchingPair/script.js
new file mode 100644
index 000000000..78bbb37c3
--- /dev/null
+++ b/MatchingPair/script.js
@@ -0,0 +1,148 @@
+document.addEventListener('mousemove', function(e) {
+    const customCursor = document.getElementById('custom-cursor');
+    customCursor.style.left = e.pageX + 'px';
+    customCursor.style.top = e.pageY + 'px';
+})
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+    const gameContainer = document.getElementById("game-container");
+    let cards = generateCards();
+    let flippedCard = null;
+    let lockBoard = false;
+    let moves = 0;
+    let matchedPairs = 0;
+    let timerInterval;
+    let seconds = 0;
+
+    function generateCards() {
+        const symbols = ["😀", "😎", "🥳", "🎉", "🚀", "🌟", "🎈", "🎁"];
+        let cards = [...symbols, ...symbols];
+        cards.sort(() => Math.random() - 0.5);
+        return cards;
+    }
+
+
+    function createCard(symbol, index) {
+        const card = document.createElement("div");
+        card.classList.add("card");
+        card.dataset.symbol = symbol;
+        card.addEventListener("click", flipCard);
+        gameContainer.appendChild(card);
+    }
+
+    function flipCard() {
+        if (lockBoard) return;
+        if (this === flippedCard) return;
+        this.textContent = this.dataset.symbol;
+        this.classList.add("flipped");
+
+        if (!flippedCard) {
+            flippedCard = this;
+        } else {
+            moves++;
+            document.getElementById("moves").textContent = `Moves: ${moves}`;
+            if (flippedCard.dataset.symbol !== this.dataset.symbol) {
+                lockBoard = true;
+                setTimeout(() => {
+                    flippedCard.classList.remove("flipped");
+                    this.classList.remove("flipped");
+                    flippedCard.textContent = "";
+                    this.textContent = "";
+                    flippedCard = null;
+                    lockBoard = false;
+                }, 1000);
+            } else {
+                flippedCard = null;
+                matchedPairs++;
+                if (matchedPairs === cards.length / 2) {
+                    clearInterval(timerInterval);
+                    setTimeout(() => {
+                        alert(`Congratulations! You completed the game in ${seconds} seconds with ${moves} moves.`);
+                    }, 500);
+                }
+            }
+        }
+    }
+
+    function initializeGame() {
+        gameContainer.innerHTML = "";
+        cards.forEach((symbol, index) => {
+            createCard(symbol, index);
+        });
+        moves = 0;
+        matchedPairs = 0;
+        seconds = 0;
+        document.getElementById("moves").textContent = `Moves: ${moves}`;
+        startTimer();
+    }
+
+    function startTimer() {
+        timerInterval = setInterval(() => {
+            seconds++;
+            document.getElementById("timer").textContent = `Time: ${seconds} seconds`;
+        }, 1000);
+    }
+
+    initializeGame();
+});
+
+///added chat box functionality
+const chatBox = document.getElementById('chat-box');
+const chatInput = document.getElementById('chat-input');
+const sendBtn = document.getElementById('send-btn');
+sendBtn.addEventListener('click', sendMessage);
+function sendMessage() {
+    const message = chatInput.value.trim();
+    if (!message) return;
+
+    displayMessage(message, 'user');
+    chatInput.value = '';
+    respondToMessage(message);
+}
+
+function displayMessage(message, sender) {
+    const messageElement = document.createElement('div');
+    messageElement.classList.add('chat-message', sender);
+    messageElement.textContent = message;
+    chatBox.appendChild(messageElement);
+    chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+
+function respondToMessage(message) {
+    let response;
+    if (message.toLowerCase().includes('hint')) {
+        response = getHint();
+    } else {
+        response = "I'm here to help! Ask me for a hint or any other question.";
+    }
+    setTimeout(() => displayMessage(response, 'bot'), 1000);
+}
+
+function getHint() {
+    // Check for pairs of cards that are not yet matched
+    for (let i = 0; i < cards.length; i++) {
+        for (let j = i + 1; j < cards.length; j++) {
+            if (!cards[i].classList.contains('flipped') && !cards[j].classList.contains('flipped')) {
+                if (cards[i].querySelector('.card-front').style.backgroundImage === cards[j].querySelector('.card-front').style.backgroundImage) {
+                    return `Try flipping the cards at positions ${i + 1} and ${j + 1}.`;
+                }
+            }
+        }
+    }
+    // If no pairs found, suggest flipping a random unflipped card
+    for (let i = 0; i < cards.length; i++) {
+        if (!cards[i].classList.contains('flipped')) {
+            return `Try flipping the card at position ${i + 1}.`;
+        }
+    }
+    return "No hints available at the moment.";}
diff --git a/MatchingPair/styles.css b/MatchingPair/styles.css
new file mode 100644
index 000000000..53eabb2f8
--- /dev/null
+++ b/MatchingPair/styles.css
@@ -0,0 +1,251 @@
+body {
+  font-family: 'Arial', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+  background: linear-gradient(45deg, #0d0812, #0a1a37,rgb(43, 5, 94),rgb(79, 3, 79),rgb(4, 4, 134),rgb(86, 86, 248)
+  );
+  background-size: 400% 400%;
+  animation: gradientAnimation 5s ease infinite;
+  color: #fff;
+  cursor: none;
+}
+/* Navbar styles */
+.navbar {
+  width: 100%;
+  background-color: #29242b;
+  padding: 1px ;
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+}
+
+.navbar-container {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbar-brand {
+  color: #fff;
+  text-decoration: none;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.navbar-menu {
+  list-style: none;
+  display: flex;
+  gap: 15px;
+}
+
+.navbar-menu li {
+  display: inline;
+}
+
+.navbar-menu a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+.navbar-menu a:hover {
+  text-decoration: underline;
+}
+
+/* Adjust the game container to accommodate the navbar */
+.game-container {
+  margin-top: 60px; /* Adjust based on the height of the navbar */
+  text-align: center;
+}
+
+#custom-cursor{
+   
+    width: 20px;
+    height: 20px;
+    border: 2px solid #e8dce4;
+    border-radius: 50%;
+    position: absolute;
+    pointer-events: none;
+    transition: transform 0.1s ease-out, background-color 0.2s ease;
+    z-index: 10000;
+    animation: cursorAnimation 0.3s infinite alternate;
+}
+@keyframes cursorAnimation {
+  0% { transform: scale(1); background-color: black,; }
+  100% { transform: scale(1.5); background-color: white; }
+}
+
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes backgroundAnimation {
+    0% { background-color: #f44336; }
+    20% { background-color: #e91e63; }
+    40% { background-color: #9c27b0; }
+    60% { background-color: #673ab7; }
+    80% { background-color: #3f51b5; }
+    100% { background-color: #2196f3; }
+}
+
+h1 {
+  margin-top: 20px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  animation: titleAnimation 1s ease-out infinite alternate;
+}
+
+@keyframes titleAnimation {
+  0% { color: #fff; transform: scale(1); }
+  100% { color: #f3f3f3; transform: scale(1.1); }
+}
+
+#game-container {
+  display: grid;
+  grid-template-columns: repeat(4, 100px);
+  grid-template-rows: repeat(4, 100px);
+  gap: 10px;
+  margin-top: 20px;
+  perspective: 1000px;
+  animation: fadeIn 2s ease-out;
+}
+
+@keyframes fadeIn {
+  0% { opacity: 0; transform: translateY(20px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes backgroundAnimation {
+  0% { background-color: #f44336; }
+  20% { background-color: #e91e63; }
+  40% { background-color: #9c27b0; }
+  60% { background-color: #673ab7; }
+  80% { background-color: #3f51b5; }
+  100% { background-color: #2196f3; }
+}
+
+.card {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: pointer;
+  transform-style: preserve-3d;
+  transition: transform 0.5s ease, box-shadow 0.3s ease, transform 0.3s ease;
+  animation: backgroundAnimation 5s infinite alternate, cardEntry 0.5s ease;
+}
+
+@keyframes cardEntry {
+  0% { opacity: 0; transform: scale(0.5); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+.card:hover {
+  transform: scale(1.1) rotateZ(5deg);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.card.flipped {
+  transform: rotateY(180deg);
+  background-color: #fff; /* Fixed color for flipped cards */
+  color: #000;
+}
+
+#game-info {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+}
+
+#game-info p {
+  margin-right: 20px;
+  animation: fadeIn 1.5s ease-out;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #4caf50;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  animation: buttonBounce 2s infinite;
+}
+
+button:hover {
+  background-color: #45a049;
+  transform: scale(1.1);
+}
+
+@keyframes buttonBounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+.chat-container {
+  position: fixed;
+  bottom: 0;
+  right: 20px;
+  width: 300px;
+  background-color: #2c2c2c;
+  border: 1px solid #444;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.chat-box {
+  height: 200px;
+  overflow-y: auto;
+  padding: 10px;
+  color: #fff;
+}
+
+.chat-message {
+  margin-bottom: 10px;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+
+.chat-message.bot {
+  background-color: #444;
+  text-align: left;
+}
+
+.chat-message.user {
+  background-color: #0084ff;
+  text-align: right;
+}
+
+#chat-input {
+  width: 80%;
+  padding: 10px;
+  border: none;
+  border-radius: 0 0 0 10px;
+  background-color: #333;
+  color: #fff;
+}
+
+#send-btn {
+  width: 10%;
+  padding: 5px;
+  border: none;
+  border-radius: 0 0 10px 0;
+  background-color: #444;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+}
diff --git a/Mind_Walk_Game/index.html b/Mind_Walk_Game/index.html
new file mode 100644
index 000000000..99ba1edb0
--- /dev/null
+++ b/Mind_Walk_Game/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guess Number</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="wrapper">
+        <h1>MindMaze Challenge</h1>
+        <p>Try and guess a random number between 1 and 100 <br>
+            <span>You have 10 attempts to guess the right number.</span>
+        </p>
+    <form class="form">
+        <label for="guess-field" id="guess">Guess A Number</label> <br>
+        <input type="number" id="guess-field" class="guess-field"> <br>
+        <input type="submit" id="subt" class="guess-submit" value="Submit guess">
+    </form>
+
+    <div class="resultParas"> 
+        <p>Previous Guesses: <span class="guesses"></span></p> <!-- The number which was guess by an user store in array -->
+        <p>Guesses Remaining:<span class="lastResult">10</span></p>
+        <p class="lowOrHi"></p>  <!--This low or high value indicator -->
+    </div>
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Mind_Walk_Game/main.js b/Mind_Walk_Game/main.js
new file mode 100644
index 000000000..cae6e8560
--- /dev/null
+++ b/Mind_Walk_Game/main.js
@@ -0,0 +1,93 @@
+
+let randomNumber = parseInt(Math.random() * 100 + 1);
+
+const submit = document.querySelector('#subt');
+const userInput = document.querySelector('#guess-field');
+const guessSlot = document.querySelector('.guesses');
+const remaining = document.querySelector('.lastResult');
+const lowOrHi = document.querySelector('.lowOrHi');
+const startOver = document.querySelector('.resultParas');
+
+const p = document.createElement('p');
+
+let prevGuess = [];
+let numGuess = 1;
+
+/*Check if your are availabe or not */
+let playGame = true;
+if(playGame){
+    submit.addEventListener('click',function(e){
+        e.preventDefault(); /*This will help to prevent the form submit on a server */
+        const guess = parseInt(userInput.value)
+        console.log(guess);
+        validateGuess(guess);
+    });
+}
+
+function validateGuess(guess) {
+  if (isNaN(guess)) {
+    alert('PLease enter a valid number');
+  } else if (guess < 1) {
+    alert('PLease enter a number more than 1');
+  } else if (guess > 100) {
+    alert('PLease enter a  number less than 100');
+  } else {
+    prevGuess.push(guess);
+    if (numGuess === 11) {
+      displayGuess(guess);
+      displayMessage(`Game Over. Random number was ${randomNumber}`);
+      endGame();
+    } else {
+      displayGuess(guess);
+      checkGuess(guess);
+    }
+  }
+}
+
+function checkGuess(guess) {
+  if (guess === randomNumber) {
+    displayMessage(`You guessed it right`);
+    endGame();
+  } else if (guess < randomNumber) {
+    displayMessage(`Number is TOOO low`);
+  } else if (guess > randomNumber) {
+    displayMessage(`Number is TOOO High`);
+  }
+}
+
+function displayGuess(guess) {
+  userInput.value = '';
+  guessSlot.innerHTML += `${guess}, `;
+  numGuess++;
+  remaining.innerHTML = `${11 - numGuess} `;
+}
+
+function displayMessage(message) {
+  lowOrHi.innerHTML = `<h2>${message}</h2>`;
+}
+
+function endGame() {
+  userInput.value = '';
+  userInput.setAttribute('disabled', '');
+  p.classList.add('button');
+  p.innerHTML = `<h2 id="newGame">Start new Game</h2>`;
+  startOver.appendChild(p);
+  playGame = false;
+  newGame();
+}
+
+function newGame() {
+  const newGameButton = document.querySelector('#newGame');
+  newGameButton.addEventListener('click', function (e) {
+    randomNumber = parseInt(Math.random() * 100 + 1);
+    prevGuess = [];
+    numGuess = 1;
+    guessSlot.innerHTML = '';
+    remaining.innerHTML = `${11 - numGuess} `;
+    userInput.removeAttribute('disabled');
+    startOver.removeChild(p);
+
+    playGame = true;
+  });
+}
+
diff --git a/Mind_Walk_Game/readme.md b/Mind_Walk_Game/readme.md
new file mode 100644
index 000000000..edd68b331
--- /dev/null
+++ b/Mind_Walk_Game/readme.md
@@ -0,0 +1,27 @@
+# MindMaze Challenge - Guess Number Game
+
+
+Welcome to MindMaze Challenge, a simple web-based game where you can test your guessing skills! Try and guess a random number between 1 and 100 with only 10 attempts.
+
+# How to Play
+1. Open the MindMaze Challenge website.
+2. Enter your guess in the input field.
+3. Click the "Submit Guess" button.
+4. Receive feedback on your guess – whether it's too
+5. high, too low, or correct.
+6. Keep guessing until you either find the correct
+7. number or run out of attempts.
+
+# Features
+. Randomly generated number for each round
+
+. Track your previous guesses and the remaining attempts
+
+. Enjoy a simple and interactive interface
+
+# Technologies Used
+. HTML
+
+. CSS
+
+. JavaScript
diff --git a/Mind_Walk_Game/style.css b/Mind_Walk_Game/style.css
new file mode 100644
index 000000000..cb2b935e9
--- /dev/null
+++ b/Mind_Walk_Game/style.css
@@ -0,0 +1,6 @@
+body{color: #fff;}
+.wrapper{background-color: #212121;text-align: center; border: 1px solid black;}
+.form{line-height: 2rem;}
+#guess-field{width: 20%; text-align: center;}
+h1{color: chartreuse;}
+#subt{    background-color: chartreuse;padding: 10px 15px 10px 15px;border: 1px solid white;border-radius: 30px;}
\ No newline at end of file
diff --git a/MineSweeper_Game/index.html b/MineSweeper_Game/index.html
new file mode 100644
index 000000000..7ac5366c4
--- /dev/null
+++ b/MineSweeper_Game/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Minesweeper</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="game-container">
+        <header>
+            <h1>Minesweeper</h1>
+        </header>
+        <div id="game-info">
+            <div id="mine-count">Mines: 10</div>
+            <div id="timer">Time: 0s</div>
+        </div>
+        <div id="game-board"></div>
+        <button id="new-game-btn">New Game</button>
+    </div>
+    <div id="game-over-modal" class="modal">
+        <div class="modal-content">
+            <h2 id="game-over-message"></h2>
+            <p id="game-over-stats"></p>
+            <button id="play-again-btn">Play Again</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/MineSweeper_Game/script.js b/MineSweeper_Game/script.js
new file mode 100644
index 000000000..de07b805c
--- /dev/null
+++ b/MineSweeper_Game/script.js
@@ -0,0 +1,453 @@
+class Minesweeper {
+    constructor(rows, cols, mines) {
+        this.rows = rows;
+        this.cols = cols;
+        this.mines = mines;
+        this.board = [];
+        this.gameOver = false;
+        this.revealedCount = 0;
+        this.flaggedCount = 0;
+        this.startTime = null;
+        this.timerInterval = null;
+        this.firstClick = true;
+        this.difficulty = {
+            easy: { rows: 8, cols: 8, mines: 10 },
+            medium: { rows: 16, cols: 16, mines: 40 },
+            hard: { rows: 16, cols: 30, mines: 99 }
+        };
+
+        this.initializeDOM();
+        this.setupEventListeners();
+        this.startNewGame();
+    }
+
+    initializeDOM() {
+        this.gameBoard = document.getElementById('game-board');
+        this.mineCountDisplay = document.getElementById('mine-count');
+        this.timerDisplay = document.getElementById('timer');
+        this.newGameBtn = document.getElementById('new-game-btn');
+        this.modal = document.getElementById('game-over-modal');
+        this.modalMessage = document.getElementById('game-over-message');
+        this.modalStats = document.getElementById('game-over-stats');
+        this.playAgainBtn = document.getElementById('play-again-btn');
+        this.difficultySelect = document.getElementById('difficulty-select');
+    }
+
+    setupEventListeners() {
+        this.newGameBtn.addEventListener('click', () => this.startNewGame());
+        this.playAgainBtn.addEventListener('click', () => this.startNewGame());
+        this.difficultySelect?.addEventListener('change', (e) => this.changeDifficulty(e.target.value));
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'r' || e.key === 'R') {
+                this.startNewGame();
+            }
+        });
+    }
+
+    changeDifficulty(level) {
+        const config = this.difficulty[level];
+        if (config) {
+            this.rows = config.rows;
+            this.cols = config.cols;
+            this.mines = config.mines;
+            this.startNewGame();
+        }
+    }
+
+    startNewGame() {
+        this.gameOver = false;
+        this.revealedCount = 0;
+        this.flaggedCount = 0;
+        this.firstClick = true;
+        this.board = this.createBoard();
+        this.renderBoard();
+        this.updateMineCount();
+        this.stopTimer();
+        this.timerDisplay.textContent = 'Time: 0s';
+        this.modal.style.display = 'none';
+    }
+
+    createBoard() {
+        return Array.from({ length: this.rows }, () =>
+            Array.from({ length: this.cols }, () => ({
+                isMine: false,
+                isRevealed: false,
+                isFlagged: false,
+                adjacentMines: 0
+            }))
+        );
+    }
+
+    renderBoard() {
+        this.gameBoard.innerHTML = '';
+        this.gameBoard.style.gridTemplateColumns = `repeat(${this.cols}, 30px)`;
+
+        for (let row = 0; row < this.rows; row++) {
+            for (let col = 0; col < this.cols; col++) {
+                const cell = document.createElement('div');
+                cell.classList.add('cell');
+                cell.dataset.row = row;
+                cell.dataset.col = col;
+                cell.addEventListener('click', (e) => this.handleCellClick(e));
+                cell.addEventListener('contextmenu', (e) => this.handleRightClick(e));
+                cell.addEventListener('touchstart', (e) => this.handleTouchStart(e));
+                cell.addEventListener('touchend', (e) => this.handleTouchEnd(e));
+                this.gameBoard.appendChild(cell);
+            }
+        }
+    }
+
+    handleTouchStart(event) {
+        event.preventDefault();
+        this.touchStartTime = Date.now();
+        this.touchTimer = setTimeout(() => {
+            const cell = event.target;
+            const row = parseInt(cell.dataset.row);
+            const col = parseInt(cell.dataset.col);
+            this.toggleFlag(row, col);
+        }, 500);
+    }
+
+    handleTouchEnd(event) {
+        event.preventDefault();
+        clearTimeout(this.touchTimer);
+        if (Date.now() - this.touchStartTime < 500) {
+            const cell = event.target;
+            const row = parseInt(cell.dataset.row);
+            const col = parseInt(cell.dataset.col);
+            this.handleCellClick({ target: cell });
+        }
+    }
+
+    placeMines(excludeRow, excludeCol) {
+        let minesToPlace = this.mines;
+        while (minesToPlace > 0) {
+            const row = Math.floor(Math.random() * this.rows);
+            const col = Math.floor(Math.random() * this.cols);
+            if (!this.board[row][col].isMine && (row !== excludeRow || col !== excludeCol)) {
+                this.board[row][col].isMine = true;
+                minesToPlace--;
+            }
+        }
+    }
+
+    calculateAdjacentMines() {
+        for (let row = 0; row < this.rows; row++) {
+            for (let col = 0; col < this.cols; col++) {
+                if (!this.board[row][col].isMine) {
+                    this.board[row][col].adjacentMines = this.countAdjacentMines(row, col);
+                }
+            }
+        }
+    }
+
+    countAdjacentMines(row, col) {
+        let count = 0;
+        for (let r = row - 1; r <= row + 1; r++) {
+            for (let c = col - 1; c <= col + 1; c++) {
+                if (this.isValidCell(r, c) && this.board[r][c].isMine) {
+                    count++;
+                }
+            }
+        }
+        return count;
+    }
+
+    isValidCell(row, col) {
+        return row >= 0 && row < this.rows && col >= 0 && col < this.cols;
+    }
+
+    handleCellClick(event) {
+        if (this.gameOver) return;
+        const cell = event.target;
+        const row = parseInt(cell.dataset.row);
+        const col = parseInt(cell.dataset.col);
+
+        if (this.board[row][col].isFlagged) return;
+
+        if (this.firstClick) {
+            this.firstClick = false;
+            this.placeMines(row, col);
+            this.calculateAdjacentMines();
+            this.startTimer();
+        }
+
+        this.revealCell(row, col);
+    }
+
+    handleRightClick(event) {
+        event.preventDefault();
+        if (this.gameOver) return;
+        const cell = event.target;
+        const row = parseInt(cell.dataset.row);
+        const col = parseInt(cell.dataset.col);
+
+        this.toggleFlag(row, col);
+    }
+
+    toggleFlag(row, col) {
+        const cell = this.board[row][col];
+        if (cell.isRevealed) return;
+
+        cell.isFlagged = !cell.isFlagged;
+        this.flaggedCount += cell.isFlagged ? 1 : -1;
+        this.updateMineCount();
+        this.renderCell(row, col);
+
+        if (this.checkWinCondition()) {
+            this.endGame(true);
+        }
+    }
+
+    checkWinCondition() {
+        for (let row = 0; row < this.rows; row++) {
+            for (let col = 0; col < this.cols; col++) {
+                const cell = this.board[row][col];
+                if (cell.isMine && !cell. isFlagged) {
+                    return false;
+                }
+                if (!cell.isMine && !cell.isRevealed) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+
+    revealCell(row, col) {
+        const cell = this.board[row][col];
+        if (cell.isRevealed || cell.isFlagged) return;
+
+        cell.isRevealed = true;
+        this.revealedCount++;
+        this.renderCell(row, col);
+
+        if (cell.isMine) {
+            this.endGame(false);
+            return;
+        }
+
+        if (cell.adjacentMines === 0) {
+            this.revealAdjacentCells(row, col);
+        }
+
+        if (this.checkWinCondition()) {
+            this.endGame(true);
+        }
+    }
+
+    revealAdjacentCells(row, col) {
+        for (let r = row - 1; r <= row + 1; r++) {
+            for (let c = col - 1; c <= col + 1; c++) {
+                if (this.isValidCell(r, c)) {
+                    this.revealCell(r, c);
+                }
+            }
+        }
+    }
+
+    renderCell(row, col) {
+        const cellElement = this.gameBoard.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+        const cell = this.board[row][col];
+
+        if (cell.isRevealed) {
+            cellElement.classList.add('revealed');
+            if (cell.isMine) {
+                cellElement.textContent = '💣';
+            } else if (cell.adjacentMines > 0) {
+                cellElement.textContent = cell.adjacentMines;
+            }
+        } else if (cell.isFlagged) {
+            cellElement.textContent = '🚩';
+        }
+    }
+
+    updateMineCount() {
+        this.mineCountDisplay.textContent = `Mines: ${this.mines - this.flaggedCount}`;
+    }
+
+    startTimer() {
+        this.startTime = Date.now();
+        this.timerInterval = setInterval(() => {
+            const elapsedTime = Math.floor((Date.now() - this.startTime) / 1000);
+            this.timerDisplay.textContent = `Time: ${elapsedTime}s`;
+        }, 1000);
+    }
+
+    stopTimer() {
+        clearInterval(this.timerInterval);
+    }
+
+    endGame(won) {
+        this.gameOver = true;
+        this.stopTimer();
+        this.modal.style.display = 'block';
+        this.modalMessage.textContent = won ? 'You Win!' : 'Game Over!';
+        this.modalStats.textContent = `Time: ${this.timerDisplay.textContent} | Revealed: ${this.revealedCount}`;
+        this.revealAllCells();
+    }
+
+    revealAllCells() {
+        for (let row = 0; row < this.rows; row++) {
+            for (let col = 0; col < this.cols; col++) {
+                this.revealCell(row, col);
+            }
+        }
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const minesweeper = new Minesweeper(8, 8, 10);
+
+    // Add keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'n' || e.key === 'N') {
+            minesweeper.startNewGame();
+        }
+    });
+
+    // Add difficulty selector
+    const difficultySelect = document.getElementById('difficulty-select');
+    if (difficultySelect) {
+        difficultySelect.addEventListener('change', (e) => {
+            const difficulty = e.target.value;
+            switch (difficulty) {
+                case 'easy':
+                    minesweeper.setDifficulty(8, 8, 10);
+                    break;
+                case 'medium':
+                    minesweeper.setDifficulty(16, 16, 40);
+                    break;
+                case 'hard':
+                    minesweeper.setDifficulty(16, 30, 99);
+                    break;
+            }
+        });
+    }
+
+    // Add theme switcher
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+        themeToggle.addEventListener('click', () => {
+            document.body.classList.toggle('dark-theme');
+            themeToggle.textContent = document.body.classList.contains('dark-theme') ? '☀️' : '🌙';
+        });
+    }
+
+    // Add high scores
+    const highScores = JSON.parse(localStorage.getItem('minesweeperHighScores')) || [];
+
+    function updateHighScores(time, difficulty) {
+        highScores.push({ time, difficulty });
+        highScores.sort((a, b) => a.time - b.time);
+        highScores.splice(10); // Keep only top 10 scores
+        localStorage.setItem('minesweeperHighScores', JSON.stringify(highScores));
+        displayHighScores();
+    }
+
+    function displayHighScores() {
+        const highScoresList = document.getElementById('high-scores-list');
+        if (highScoresList) {
+            highScoresList.innerHTML = '';
+            highScores.forEach((score, index) => {
+                const li = document.createElement('li');
+                li.textContent = `${index + 1}. ${score.time}s (${score.difficulty})`;
+                highScoresList.appendChild(li);
+            });
+        }
+    }
+
+    displayHighScores();
+
+    // Extend Minesweeper class with new methods
+    Minesweeper.prototype.setDifficulty = function(rows, cols, mines) {
+        this.rows = rows;
+        this.cols = cols;
+        this.mines = mines;
+        this.startNewGame();
+    };
+
+    Minesweeper.prototype.endGame = function(won) {
+        this.gameOver = true;
+        this.stopTimer();
+        const elapsedTime = Math.floor((Date.now() - this.startTime) / 1000);
+        
+        if (won) {
+            const difficulty = this.getDifficulty();
+            updateHighScores(elapsedTime, difficulty);
+        }
+
+        this.modal.style.display = 'block';
+        this.modalMessage.textContent = won ? 'You Win!' : 'Game Over!';
+        this.modalStats.textContent = `Time: ${elapsedTime}s | Revealed: ${this.revealedCount}`;
+        this.revealAllCells();
+    };
+
+    Minesweeper.prototype.getDifficulty = function() {
+        if (this.rows === 8 && this.cols === 8 && this.mines === 10) return 'Easy';
+        if (this.rows === 16 && this.cols === 16 && this.mines === 40) return 'Medium';
+        if (this.rows === 16 && this.cols === 30 && this.mines === 99) return 'Hard';
+        return 'Custom';
+    };
+
+    // Add custom board size input
+    const customSizeForm = document.getElementById('custom-size-form');
+    if (customSizeForm) {
+        customSizeForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const rows = parseInt(document.getElementById('custom-rows').value);
+            const cols = parseInt(document.getElementById('custom-cols').value);
+            const mines = parseInt(document.getElementById('custom-mines').value);
+            if (rows > 0 && cols > 0 && mines > 0 && mines < rows * cols) {
+                minesweeper.setDifficulty(rows, cols, mines);
+            } else {
+                alert('Invalid board size or number of mines');
+            }
+        });
+    }
+
+    // Add sound effects
+    const soundToggle = document.getElementById('sound-toggle');
+    let soundEnabled = localStorage.getItem('minesweeperSound') !== 'false';
+
+    const sounds = {
+        click: new Audio('click.mp3'),
+        flag: new Audio('flag.mp3'),
+        win: new Audio('win.mp3'),
+        lose: new Audio('lose.mp3')
+    };
+
+    function playSound(sound) {
+        if (soundEnabled) {
+            sounds[sound].play();
+        }
+    }
+
+    if (soundToggle) {
+        soundToggle.textContent = soundEnabled ? '🔊' : '🔇';
+        soundToggle.addEventListener('click', () => {
+            soundEnabled = !soundEnabled;
+            localStorage.setItem('minesweeperSound', soundEnabled);
+            soundToggle.textContent = soundEnabled ? '🔊' : '🔇';
+        });
+    }
+
+    // Extend Minesweeper class to include sound effects
+    const originalHandleCellClick = Minesweeper.prototype.handleCellClick;
+    Minesweeper.prototype.handleCellClick = function(event) {
+        originalHandleCellClick.call(this, event);
+        playSound('click');
+    };
+
+    const originalToggleFlag = Minesweeper.prototype.toggleFlag;
+    Minesweeper.prototype.toggleFlag = function(row, col) {
+        originalToggleFlag.call(this, row, col);
+        playSound('flag');
+    };
+
+    const originalEndGame = Minesweeper.prototype.endGame;
+    Minesweeper.prototype.endGame = function(won) {
+        originalEndGame.call(this, won);
+        playSound(won ? 'win' : 'lose');
+    };
+});
\ No newline at end of file
diff --git a/MineSweeper_Game/style.css b/MineSweeper_Game/style.css
new file mode 100644
index 000000000..5abd3c585
--- /dev/null
+++ b/MineSweeper_Game/style.css
@@ -0,0 +1,111 @@
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2c3e50;
+    --cell-revealed: #ecf0f1;
+    --cell-unrevealed: #34495e;
+    --mine-color: #e74c3c;
+    --flag-color: #f1c40f;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: var(--secondary-color);
+}
+
+#game-container {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 80px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+header h1 {
+    text-align: center;
+    color: var(--primary-color);
+}
+
+#game-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+#game-board {
+    display: grid;
+    padding: 100px;
+    grid-template-columns: repeat(10, 30px);
+    grid-gap: 1px;
+    background-color: #bdc3c7;
+    border: 1px solid #95a5a6;
+}
+
+.cell {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    cursor: pointer;
+    background-color: var(--cell-unrevealed);
+    transition: background-color 0.3s;
+}
+
+.cell.revealed {
+    background-color: var(--cell-revealed);
+}
+
+.cell.mine {
+    background-color: var(--mine-color);
+}
+
+.cell.flagged::after {
+    content: '🚩';
+}
+
+#new-game-btn {
+    display: block;
+    margin: 20px auto 0;
+    padding: 10px 20px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 300px;
+    text-align: center;
+    border-radius: 10px;
+}
+
+#play-again-btn {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/Minion Eyes/index.html b/Minion Eyes/index.html
new file mode 100644
index 000000000..79e1ab84a
--- /dev/null
+++ b/Minion Eyes/index.html	
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.scss" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="eyes-wrapper">
+            <div class="eye">
+                <div class="eyeball"></div>
+            </div>
+            <div class="eye">
+                <div class="eyeball"></div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Minion Eyes/style.css b/Minion Eyes/style.css
new file mode 100644
index 000000000..9c07d3e84
--- /dev/null
+++ b/Minion Eyes/style.css	
@@ -0,0 +1,65 @@
+body {
+  padding: 0;
+  margin: 0;
+  background-color: #f5d60e;
+}
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.container:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 4em;
+  background-color: #231f1e;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+}
+.eyes-wrapper {
+  display: flex;
+}
+.eyes-wrapper:before {
+  content: "";
+  position: absolute;
+  width: 26em;
+  height: 6em;
+  background-color: #a8a7ac;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.eye {
+  width: 10em;
+  height: 10em;
+  border: 15px solid #a6a4ad;
+  background-color: #ffffff;
+  border-radius: 50%;
+}
+.eyeball {
+  height: 3.2em;
+  width: 3.2em;
+  background: radial-gradient(#271e1e 35%, #935a29 37%);
+  border-radius: 50%;
+  margin: 0.2em 3.5em;
+  position: relative;
+}
+.eyeball:before {
+  content: "";
+  position: absolute;
+  background-color: #ffffff;
+  height: 0.7em;
+  width: 0.5em;
+  border-radius: 50%;
+  top: 13px;
+  left: 13px;
+  transform: rotate(45deg);
+}
diff --git a/Minion Eyes/style.js b/Minion Eyes/style.js
new file mode 100644
index 000000000..972759411
--- /dev/null
+++ b/Minion Eyes/style.js	
@@ -0,0 +1,41 @@
+//Selecting the eye div
+let eye_ref = document.querySelectorAll(".eye");
+
+//mousemove for devices with mouse aand touchmove for touchcreen devices
+let events = ["mousemove", "touchmove"];
+
+//Check for touch screen
+function isTouchDevice() {
+  try {
+    document.createEvent("TouchEvent");
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+//Same function for both events
+events.forEach((eventType) => {
+  document.body.addEventListener(eventType, (event) => {
+    eye_ref.forEach((eye) => {
+      /* getBoundingClientRect() method returns the position relative to the viewport */
+      let eyeX = eye.getBoundingClientRect().left + eye.clientWidth / 2;
+      let eyeY = eye.getBoundingClientRect().top + eye.clientHeight / 2;
+
+      /* ClientX and ClientY return the position of clients cursor from top left of the screen*/
+      var x = !isTouchDevice() ? event.clientX : event.touches[0].clientX;
+      var y = !isTouchDevice() ? event.clientY : event.touches[0].clientY;
+
+      /* 
+    Subtract x position of mouse from x position of eye and y position of mouse from y position of eye.
+    Use atan2(returns angle in radians)
+    */
+
+      let radian = Math.atan2(x - eyeX, y - eyeY);
+      //Convert Radians to Degrees
+      let rotationDegrees = radian * (180 / Math.PI) * -1 + 180;
+      //Rotate the eye
+      eye.style.transform = "rotate(" + rotationDegrees + "deg)";
+    });
+  });
+});
diff --git a/Mood Board Generator/index.html b/Mood Board Generator/index.html
index 7dd3eb2a4..3b7755d56 100644
--- a/Mood Board Generator/index.html	
+++ b/Mood Board Generator/index.html	
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mood Board Generator</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
 </head>
 <body>
     <div class="container">
diff --git a/Pac-Man-Game/README.md b/Pac-Man-Game/README.md
new file mode 100644
index 000000000..c40f13463
--- /dev/null
+++ b/Pac-Man-Game/README.md
@@ -0,0 +1,4 @@
+# pac-man
+Vanilla javaScript Game with HTML and CSS
+
+A super simple walkthourgh to coding Pac-Man in vanilla JavaScript, HTML and CSS. 
diff --git a/Pac-Man-Game/app.js b/Pac-Man-Game/app.js
new file mode 100644
index 000000000..7b5ce4a84
--- /dev/null
+++ b/Pac-Man-Game/app.js
@@ -0,0 +1,249 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const scoreDisplay = document.getElementById("score")
+    const width = 28
+    let score = 0
+    const grid = document.querySelector(".grid")
+
+    const layout = [
+        1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+        1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+        1, 3, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 3, 1,
+        1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+        1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+        1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+        1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+        1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+        1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+        1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+        1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 2, 2, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+        1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+        4, 4, 4, 4, 4, 4, 0, 0, 0, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 0, 0, 0, 4, 4, 4, 4, 4, 4,
+        1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+        1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+        1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+        1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+        1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+        1, 3, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 3, 1,
+        1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,
+        1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,
+        1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1,
+        1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,
+        1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,
+        1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+        1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
+    ]
+
+    // 0 - pac-dots
+    // 1 - wall
+    // 2 - ghost-lair
+    // 3 - power-pellet
+    // 4 - empty
+
+    const squares = []
+
+    //create your board
+    function createBoard() {
+        for (let i = 0; i < layout.length; i++) {
+            const square = document.createElement("div")
+            square.id = i
+            grid.appendChild(square)
+            squares.push(square)
+
+            //add layout to the board
+            if (layout[i] === 0) {
+                squares[i].classList.add("pac-dot")
+            }
+            if (layout[i] === 1) {
+                squares[i].classList.add("wall")
+            }
+            if (layout[i] === 2) {
+                squares[i].classList.add("ghost-lair")
+            }
+            if (layout[i] === 3) {
+                squares[i].classList.add("power-pellet")
+            }
+        }
+    }
+    createBoard()
+
+    //create Characters
+    // draw pac-man onto the board
+    let pacmanCurrentIndex = 490
+    squares[pacmanCurrentIndex].classList.add("pac-man")
+
+    //move pacman
+    function movePacman(e) {
+        squares[pacmanCurrentIndex].classList.remove("pac-man")
+        // switch (e.keyCode) { deprecated
+        switch (e.key) {
+            // case 37:
+            case "ArrowLeft":
+                if (
+                    pacmanCurrentIndex % width !== 0 &&
+                    !squares[pacmanCurrentIndex - 1].classList.contains("wall") &&
+                    !squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair")
+                ) {
+                    pacmanCurrentIndex -= 1
+                }
+                if ((pacmanCurrentIndex - 1) === 363) {
+                    pacmanCurrentIndex = 391
+                }
+                break
+            case "ArrowUp":
+                // case 38:
+                if (
+                    pacmanCurrentIndex - width >= 0 &&
+                    !squares[pacmanCurrentIndex - width].classList.contains("wall") &&
+                    !squares[pacmanCurrentIndex - width].classList.contains("ghost-lair")
+
+                ) {
+                    pacmanCurrentIndex -= width
+                }
+                break
+            case "ArrowRight":
+                // case 39:
+                if (
+                    pacmanCurrentIndex % width < width - 1 &&
+                    !squares[pacmanCurrentIndex + 1].classList.contains("wall") &&
+                    !squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair")
+                ) {
+                    pacmanCurrentIndex += 1
+                }
+                if (
+                    (pacmanCurrentIndex + 1) === 392
+                ) {
+                    pacmanCurrentIndex = 364
+                }
+                break
+            case "ArrowDown":
+                // case 40:
+                if (
+                    pacmanCurrentIndex + width < width * width &&
+                    !squares[pacmanCurrentIndex + width].classList.contains("wall") &&
+                    !squares[pacmanCurrentIndex + width].classList.contains("ghost-lair")
+                ) {
+                    pacmanCurrentIndex += width
+                }
+                break
+        }
+        squares[pacmanCurrentIndex].classList.add("pac-man")
+        pacDotEaten()
+        powerPelletEaten()
+        checkForGameOver()
+        checkForWin()
+    }
+
+    document.addEventListener("keyup", movePacman)
+
+    //what happens when you eat a pac-dot
+    function pacDotEaten() {
+        if (squares[pacmanCurrentIndex].classList.contains("pac-dot")) {
+            score++
+            scoreDisplay.innerHTML = score
+            squares[pacmanCurrentIndex].classList.remove("pac-dot")
+        }
+    }
+
+    //what happens when you eat a power-pellet
+    function powerPelletEaten() {
+        if (squares[pacmanCurrentIndex].classList.contains("power-pellet")) {
+            score += 10
+            scoreDisplay.innerHTML = score
+            ghosts.forEach(ghost => ghost.isScared = true)
+            setTimeout(unScareGhosts, 10000)
+            squares[pacmanCurrentIndex].classList.remove("power-pellet")
+        }
+    }
+
+    //make the ghosts stop flashing
+    function unScareGhosts() {
+        ghosts.forEach(ghost => ghost.isScared = false)
+    }
+
+    //create ghosts using Constructor
+    class Ghost {
+        constructor(className, startIndex, speed) {
+            this.className = className
+            this.startIndex = startIndex
+            this.speed = speed
+            this.currentIndex = startIndex
+            this.isScared = false
+            this.timerId = NaN
+
+        }
+    }
+
+    //all my ghosts
+    const ghosts = [
+        new Ghost("blinky", 348, 250),
+        new Ghost("pinky", 376, 400),
+        new Ghost("inky", 351, 300),
+        new Ghost("clyde", 379, 500),
+    ]
+
+    //draw my ghosts onto the grid
+    ghosts.forEach(ghost =>
+        squares[ghost.currentIndex].classList.add(ghost.className, "ghost"))
+
+    //move ghosts randomly
+    ghosts.forEach(ghost => moveGhost(ghost))
+
+    function moveGhost(ghost) {
+        const directions = [-1, 1, width, -width]
+        let direction = directions[Math.floor(Math.random() * directions.length)]
+
+        ghost.timerId = setInterval(function () {
+            //if next square your ghost is going to go to does not have a ghost and does not have a wall
+            if (
+                !squares[ghost.currentIndex + direction].classList.contains("ghost") &&
+                !squares[ghost.currentIndex + direction].classList.contains("wall")
+            ) {
+                squares[ghost.currentIndex].classList.remove(ghost.className, "ghost", "scared-ghost")
+                ghost.currentIndex += direction
+                squares[ghost.currentIndex].classList.add(ghost.className, "ghost")
+                // else find a new random direction to go in
+            } else direction = directions[Math.floor(Math.random() * directions.length)]
+            // if the ghost is currently scared
+            if (ghost.isScared) {
+                squares[ghost.currentIndex].classList.add("scared-ghost")
+            }
+
+            //if the ghost is currently scared and pacman is on it
+            if (ghost.isScared && squares[ghost.currentIndex].classList.contains("pac-man")) {
+                ghost.isScared = false
+                squares[ghost.currentIndex].classList.remove(ghost.className, "ghost", "scared-ghost")
+                ghost.currentIndex = ghost.startIndex
+                score += 100
+                scoreDisplay.innerHTML = score
+                squares[ghost.currentIndex].classList.add(ghost.className, "ghost")
+            }
+            checkForGameOver()
+        }, ghost.speed)
+    }
+
+    //check for a game over
+    function checkForGameOver() {
+        if (
+            squares[pacmanCurrentIndex].classList.contains("ghost") &&
+            !squares[pacmanCurrentIndex].classList.contains("scared-ghost")) {
+            ghosts.forEach(ghost => clearInterval(ghost.timerId))
+            document.removeEventListener("keyup", movePacman)
+            setTimeout(function () {
+                alert("Game Over")
+            }, 500)
+        }
+    }
+
+    //check for a win - change the winning score to whatever you wish
+    function checkForWin() {
+        if (score >= 274) {
+            ghosts.forEach(ghost => clearInterval(ghost.timerId))
+            document.removeEventListener("keyup", movePacman)
+            setTimeout(function () {
+                alert("You have WON!")
+            }, 500)
+        }
+    }
+})
diff --git a/Pac-Man-Game/index.html b/Pac-Man-Game/index.html
new file mode 100644
index 000000000..f4afc7341
--- /dev/null
+++ b/Pac-Man-Game/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Pac-man</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="app.js"></script>
+  </head>
+  <body>
+    <div class="grid"></div>
+    <h3>Score:<span id="score"></span></h3>
+  </body>
+</html>
diff --git a/Pac-Man-Game/style.css b/Pac-Man-Game/style.css
new file mode 100644
index 000000000..2e95b9bf2
--- /dev/null
+++ b/Pac-Man-Game/style.css
@@ -0,0 +1,52 @@
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    width: 560px;
+    height: 560px;
+    border: solid black;
+}
+  
+.grid div {
+    width: 20px;
+    height: 20px;
+}
+
+.pac-dot {
+    background-color: green;   
+    border: 5px solid white;
+    box-sizing: border-box;
+}
+
+.wall {
+    background-color: blue;
+}
+
+.power-pellet {
+    background-color: green;
+    border-radius: 10px;
+}
+
+.blinky {
+    background-color: red;
+}
+
+.pinky {
+    background-color: pink;
+}
+
+.inky {
+    background-color: cyan;
+}
+
+.clyde {
+    background-color: orange;     
+}
+
+.pac-man {
+    background-color: yellow;
+    border-radius: 10px;
+}
+
+.scared-ghost {
+    background-color: aquamarine;
+}
diff --git a/Ping-Pong-Game/index.html b/Ping-Pong-Game/index.html
index 8abddb36c..f692cb54c 100644
--- a/Ping-Pong-Game/index.html
+++ b/Ping-Pong-Game/index.html
@@ -15,6 +15,12 @@
     <div id="scoreboard">
         <span id="scoreLeft">0</span> : <span id="scoreRight">0</span>
     </div>
+
+    <div id="controls">
+        <button id="startPauseBtn">Start</button>
+        <button id="resetBtn">Reset</button>
+    </div>
+
     <div id="buttons">
         <button id="startPauseResumeButton" class="controlButton">Start</button>
         <button id="endButton" class="controlButton">End</button>
@@ -23,6 +29,7 @@
         <p>Left Paddle: W (Up) / S (Down) | Right Paddle: Arrow Up / Arrow Down</p>
     </div>
 
+
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/Ping-Pong-Game/script.js b/Ping-Pong-Game/script.js
index 3e7a10838..c542b4e90 100644
--- a/Ping-Pong-Game/script.js
+++ b/Ping-Pong-Game/script.js
@@ -5,6 +5,26 @@ const paddleRight = document.getElementById('paddleRight');
 const ball = document.getElementById('ball');
 const scoreLeft = document.getElementById('scoreLeft');
 const scoreRight = document.getElementById('scoreRight');
+
+const startPauseBtn = document.getElementById('startPauseBtn');
+const resetBtn = document.getElementById('resetBtn');
+
+
+let ballX = 295;
+let ballY = 195;
+let ballSpeedX = 5;
+let ballSpeedY = 3;
+let paddleSpeed = 30;
+let leftScore = 0;
+let rightScore = 0;
+let gameInterval;
+let gamePaused = true;
+const winningScore = 5;
+
+// Paddle control for left paddle (controlled by ArrowUp and ArrowDown)
+document.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowUp' && paddleLeft.offsetTop > 0) {
+
 const startPauseResumeButton = document.getElementById('startPauseResumeButton');
 const endButton = document.getElementById('endButton');
 
@@ -47,22 +67,62 @@ document.addEventListener('keydown', (event) => {
 
     // Paddle left controls
     if (event.key === 'w' && paddleLeft.offsetTop > 0) {
+
         paddleLeft.style.top = (paddleLeft.offsetTop - paddleSpeed) + 'px';
     }
-    if (event.key === 's' && paddleLeft.offsetTop < gameArea.clientHeight - paddleLeft.clientHeight) {
+    if (event.key === 'ArrowDown' && paddleLeft.offsetTop < gameArea.clientHeight - paddleLeft.clientHeight) {
         paddleLeft.style.top = (paddleLeft.offsetTop + paddleSpeed) + 'px';
     }
 
+});
+
+// AI control for the right paddle
+function movePaddleRight() {
+    const ballCenter = ballY + ball.clientHeight / 2;
+    const paddleCenter = paddleRight.offsetTop + paddleRight.clientHeight / 2;
+
+    if (ballCenter < paddleCenter) {
+        paddleRight.style.top = Math.max(0, paddleRight.offsetTop - paddleSpeed / 2) + 'px';
+    } else if (ballCenter > paddleCenter) {
+        paddleRight.style.top = Math.min(gameArea.clientHeight - paddleRight.clientHeight, paddleRight.offsetTop + paddleSpeed / 2) + 'px';
+
+
     // Paddle right controls
     if (event.key === 'ArrowUp' && paddleRight.offsetTop > 0) {
         paddleRight.style.top = (paddleRight.offsetTop - paddleSpeed) + 'px';
+
     }
-    if (event.key === 'ArrowDown' && paddleRight.offsetTop < gameArea.clientHeight - paddleRight.clientHeight) {
-        paddleRight.style.top = (paddleRight.offsetTop + paddleSpeed) + 'px';
+}
+
+// Start or Pause the Game
+startPauseBtn.addEventListener('click', () => {
+    if (gamePaused) {
+        gameInterval = setInterval(gameLoop, 20);
+        startPauseBtn.textContent = 'Pause';
+    } else {
+        clearInterval(gameInterval);
+        startPauseBtn.textContent = 'Start';
     }
+    gamePaused = !gamePaused;
 });
 
+
+// Reset the Game
+resetBtn.addEventListener('click', resetGame);
+
+function resetGame() {
+    leftScore = 0;
+    rightScore = 0;
+    updateScores();
+    resetBall();
+    startPauseBtn.textContent = 'Start';
+    clearInterval(gameInterval);
+    gamePaused = true;
+}
+
+
 // Main game loop
+
 function gameLoop() {
     if (!gameStarted || gamePaused) return;
 
@@ -70,7 +130,10 @@ function gameLoop() {
     ballX += ballSpeedX;
     ballY += ballSpeedY;
 
+    // Ball collision with top and bottom
+
     // Ball collision with top and bottom walls
+
     if (ballY <= 0 || ballY >= gameArea.clientHeight - ball.clientHeight) {
         ballSpeedY = -ballSpeedY;
     }
@@ -86,18 +149,31 @@ function gameLoop() {
     // Ball out of bounds (score update)
     if (ballX < 0) {
         rightScore++;
+        checkWinner();
         resetBall();
     } else if (ballX > gameArea.clientWidth) {
         leftScore++;
+        checkWinner();
         resetBall();
     }
 
+<
+    // Update ball position
+    ball.style.left = ballX + 'px';
+    ball.style.top = ballY + 'px';
+
+    // Move AI paddle
+    movePaddleRight();
+
+    updateScores();
+
     // Update ball and score display
     updateBallPosition();
     scoreLeft.textContent = leftScore;
     scoreRight.textContent = rightScore;
 
     animationFrameId = requestAnimationFrame(gameLoop);
+
 }
 
 // Reset ball to the center with random direction
@@ -108,6 +184,19 @@ function resetBall() {
     ballSpeedY = 2 * (Math.random() < 0.5 ? 1 : -1);
 }
 
+
+function updateScores() {
+    scoreLeft.textContent = leftScore;
+    scoreRight.textContent = rightScore;
+}
+
+function checkWinner() {
+    if (leftScore === winningScore || rightScore === winningScore) {
+        alert(`${leftScore === winningScore ? 'Left' : 'Right'} Player Wins!`);
+        resetGame();
+    }
+}
+
 // Start, pause, and resume game button functionality
 startPauseResumeButton.addEventListener('click', () => {
     if (!gameStarted) {
@@ -140,3 +229,4 @@ endButton.addEventListener('click', () => {
 // Initialize the game on page load
 initGame();
 endButton.disabled = true;
+
diff --git a/Ping-Pong-Game/styles.css b/Ping-Pong-Game/styles.css
index a7b523a75..29914b3a8 100644
--- a/Ping-Pong-Game/styles.css
+++ b/Ping-Pong-Game/styles.css
@@ -24,8 +24,13 @@ body {
     position: absolute;
     width: 10px;
     height: 80px;
+
+    background-color: #fff;
+    transition: 0.1s ease;
+
     background: linear-gradient(135deg, #00ffcc, #0055ff);
     border-radius: 5px;
+
 }
 
 #paddleLeft {
@@ -84,3 +89,21 @@ body {
 .controlButton:hover {
     background-color: #00ffcc;
 }
+
+#controls {
+    margin-top: 15px;
+}
+
+button {
+    padding: 8px 12px;
+    margin: 0 5px;
+    border: none;
+    background-color: #5cb85c;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #4cae4c;
+}
diff --git a/Pokemon-Mini-Game/fire-removebg-preview-removebg-preview.png b/Pokemon-Mini-Game/fire-removebg-preview-removebg-preview.png
new file mode 100644
index 000000000..a2277241f
Binary files /dev/null and b/Pokemon-Mini-Game/fire-removebg-preview-removebg-preview.png differ
diff --git a/Pokemon-Mini-Game/flying-removebg-preview-removebg-preview.png b/Pokemon-Mini-Game/flying-removebg-preview-removebg-preview.png
new file mode 100644
index 000000000..21dd47a7e
Binary files /dev/null and b/Pokemon-Mini-Game/flying-removebg-preview-removebg-preview.png differ
diff --git a/Pokemon-Mini-Game/grass-removebg-preview.png b/Pokemon-Mini-Game/grass-removebg-preview.png
new file mode 100644
index 000000000..253376573
Binary files /dev/null and b/Pokemon-Mini-Game/grass-removebg-preview.png differ
diff --git a/Pokemon-Mini-Game/ground-removebg-preview.png b/Pokemon-Mini-Game/ground-removebg-preview.png
new file mode 100644
index 000000000..fe67f9f89
Binary files /dev/null and b/Pokemon-Mini-Game/ground-removebg-preview.png differ
diff --git a/Pokemon-Mini-Game/index .html b/Pokemon-Mini-Game/index .html
new file mode 100644
index 000000000..0908785fb
--- /dev/null
+++ b/Pokemon-Mini-Game/index .html	
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Poki-World</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="pokeball.jpg">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+
+  
+</head>
+<body >
+ 
+<div class="forLoadingBody">
+  
+  <l-quantum class="loader"
+    size="100"
+    speed="2"
+    color="white" 
+  ></l-quantum>
+ 
+  
+  <div id=welcome>
+ <h1 id="wel"><i>Welcome to Poki-verse</i></h1>
+  </div>
+
+  
+  <button id="mode"><i class="fa-regular fa-lightbulb"></i> <span id="modeText"> Light mode</span></button>
+  
+<br>
+  <br>
+  <h1 id="choose_your_pokemon"> <pre>Choose your 
+    pokemon:-</pre></h1>
+<br>
+<div class="choices">
+   
+  <div class="choice" id="ground"><img src="ground-removebg-preview.png" alt="ground"> <br> <i class="fa-solid fa-map-pin"></i> 
+   Ground-type</div>
+  <div class="choice" id="water"><img src="water-removebg-preview (1).png" alt="water"><br> <i class="fa-solid fa-droplet"></i> 
+   Water-type</div>
+  <div class="choice" id="fire"><img src="fire-removebg-preview-removebg-preview.png" alt="fire"><br> <i class="fa-solid fa-fire"></i> 
+   Fire-type</div>
+  <div class="choice" id="grass"><img src="grass-removebg-preview.png" alt="grass"><br><i class="fa-brands fa-pagelines"></i>  
+   Grass-type</div>
+  <div class="choice" id="flying"><img src="flying-removebg-preview-removebg-preview.png" alt="flying"><br> <i class="fa-solid fa-dove"></i> 
+   Flying-type</div>
+
+</div>
+ <br>
+  <br>
+  <h1 id="choose"><i class="fa-solid fa-user-ninja"></i> <span id="chooseText">Choose a Pokemon</span></h1>
+  
+<h2 id="fight"><i class="fa-brands fa-free-code-camp"></i> <span id="fightText" >Fight</span></h2> 
+
+
+  
+<div id="result">
+  
+  <div id=y_score>
+  <h4> <i class="fa-regular fa-user"></i> Your Score</h4>
+    <h4 id="yourScore">0</h4>
+  </div>
+  
+  <div id="c_score">
+  <h4><i class="fa-solid fa-computer"></i> Computer Score</h4>
+  <h4 id="computerScore">0</h4>
+  </div>
+</div>
+  <br>
+
+
+
+  <details id="rules">
+    <summary><h3 style="display: inline;"> <i class="fa-solid fa-scale-balanced"></i> Rules</h3> </summary>
+    <p><span style="font-size:16px;font-weight: bold;">Rules:-</span>
+    1. Fire type pokemon weakness is Water and Ground type pokemon. <br>
+    2. Water type pokemon weakness is Grass and Flying type pokemon. <br>
+    3. Grass type pokemon weakness is Fire and Flying type pokemon. <br>
+    4. Flying type pokemon weakness is Fire and Ground type pokemon. <br>
+    5. Ground type pokemon weakness is Water and Grass type pokemon. <br>
+    6. Fire type pokemon is strong against Flying and Grass type pokemon. <br>
+    7. Water type pokemon is strong against Fire and Ground type pokemon. <br>
+    8. Grass type pokemon is strong against Water and Ground type pokemon. <br>
+    9. Flying type pokemon is strong against Water and Grass type pokemon. <br>
+    10. Ground type pokemon is strong against Flying and Fire type pokemon. <br>
+      
+  </p>
+    </details>
+
+  
+
+
+
+  <footer id="copyright"> 
+  <p>&copy; 2024 GSSOC. All Rights Reserved.</p>
+   
+  </footer>
+
+
+
+
+
+
+   </div>
+
+  <script src="script.js"></script>
+   <script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script>
+
+</body>
+</html>
diff --git a/Pokemon-Mini-Game/pokeball.jpg b/Pokemon-Mini-Game/pokeball.jpg
new file mode 100644
index 000000000..69b890770
Binary files /dev/null and b/Pokemon-Mini-Game/pokeball.jpg differ
diff --git a/Pokemon-Mini-Game/pokemon-icon-vector-free.jpg b/Pokemon-Mini-Game/pokemon-icon-vector-free.jpg
new file mode 100644
index 000000000..4db6d6dc7
Binary files /dev/null and b/Pokemon-Mini-Game/pokemon-icon-vector-free.jpg differ
diff --git a/Pokemon-Mini-Game/pxfuel.jpg b/Pokemon-Mini-Game/pxfuel.jpg
new file mode 100644
index 000000000..8f4042770
Binary files /dev/null and b/Pokemon-Mini-Game/pxfuel.jpg differ
diff --git a/Pokemon-Mini-Game/pxfuelDark.jpg b/Pokemon-Mini-Game/pxfuelDark.jpg
new file mode 100644
index 000000000..9b314402f
Binary files /dev/null and b/Pokemon-Mini-Game/pxfuelDark.jpg differ
diff --git a/Pokemon-Mini-Game/script.js b/Pokemon-Mini-Game/script.js
new file mode 100644
index 000000000..9e1c11e3e
--- /dev/null
+++ b/Pokemon-Mini-Game/script.js
@@ -0,0 +1,270 @@
+// alert("Welcome to Poki-Verse");
+const loader = document.body.querySelector(".loader");
+const forLoadingBody=document.body.querySelector(".forLoadingBody");
+
+window.addEventListener("load", (e) => {
+  setTimeout(()=>{
+    loader.classList.add("removeLoader");
+    forLoadingBody.classList.remove("forLoadingBody");
+  }, 2000);
+});
+
+
+let bodyNode=document.querySelector("body");
+let choose=document.querySelector("#choose");
+let chooseText=document.querySelector("#chooseText");
+let fight=document.querySelector("#fight");
+let fightText=document.querySelector("#fightText");
+
+
+
+let yourScore=document.querySelector("#yourScore");
+let computerScore=document.querySelector("#computerScore");
+
+let userchoice;
+let randchoice;
+
+
+
+function choice(){
+  chooseText.innerText=`Your Pokemon ${userchoice}-type fought with ${randchoice}-type`;
+}
+
+
+function win(){
+  fightText.innerText= "You Won!";
+  fight.style.color="#25f505";
+  fightText.style.color="#25f505";
+  yourScore.innerText=Number(yourScore.innerText)+1;
+  yourScore.style.color="#1e6133";
+  computerScore.style.color="whitesmoke";
+}
+function lost(){
+   fightText.innerText="You Lost!";
+   fightText.style.color="red";
+   fight.style.color="red";
+  computerScore.innerText=Number(computerScore.innerText)+1;
+  yourScore.style.color="whitesmoke";
+  computerScore.style.color="maroon";
+}
+function draw(){
+   fightText.innerText="its Draw!";
+  fightText.style.color="white";
+   fight.style.color="white";
+  yourScore.style.color="#394e5c";
+  computerScore.style.color="#394e5c";
+}
+
+bodyNode.style.backgroundImage = "url('pxfuelDark.jpg')";
+
+
+
+let mod=document.querySelector("#mode");
+let modText=document.querySelector("#modeText");
+let anchorColors=document.querySelectorAll("a");
+let wel=document.querySelector("#welcome");
+
+let mode="dark";
+ document.body.style.color="white";
+
+mod.addEventListener("click",(e) =>{
+  if (mode === "dark") {
+    mode = "light";
+    bodyNode.style.backgroundImage = "url('pxfuel.jpg')";
+    document.body.style.color="black";
+    modText.innerText="Dark Mode";
+    
+    anchorColors.forEach((a) => {
+      a.style.color = "#01438a";
+    });
+  } else {
+    mode = "dark";
+    bodyNode.style.backgroundImage = "url('pxfuelDark.jpg')";
+     document.body.style.color="white";
+    modText.innerText="Light Mode";
+    
+    anchorColors.forEach((a) => {
+      a.style.color = "#aef2f5";
+    });
+  }}
+);
+
+anchorColors.forEach((a) => {
+  a.addEventListener("mousemove",(e)=>{
+    a.style.fontSize="20px";
+    a.style.transition="all 0.3s ease"
+  });
+  a.addEventListener("mouseleave",(e)=>{
+    a.style.fontSize="16px";
+  });
+});
+
+
+
+
+
+
+
+let ground=document.querySelector("#ground");
+let fire=document.querySelector("#fire");
+let grass=document.querySelector("#grass");
+let water=document.querySelector("#water");
+let flying=document.querySelector("#flying");
+
+ground.addEventListener("click",(e) =>{
+  userchoice="ground";
+  console.log(`Your Choice ${userchoice}`);
+  computerPlay();
+  result(userchoice,randchoice);
+})
+fire.addEventListener("click",(e) =>{
+  userchoice="fire";
+  console.log(`Your Choice ${userchoice}`);
+  computerPlay();
+  result(userchoice,randchoice);
+})
+grass.addEventListener("click",(e) =>{
+  userchoice="grass";
+  console.log(`Your Choice ${userchoice}`);
+  computerPlay();
+  result(userchoice,randchoice);
+})
+water.addEventListener("click",(e) =>{
+  userchoice="water";
+  console.log(`Your Choice ${userchoice}`);
+  randchoice=computerPlay();
+  result(userchoice,randchoice);
+})
+
+flying.addEventListener("click",(e) =>{
+  userchoice="flying";
+  
+  console.log(`Your Choice ${userchoice}`);
+  randchoice=computerPlay();
+  result(userchoice,randchoice);
+})
+
+let computerchoice = ["ground", "fire", "grass", "water", "flying"];
+
+function computerPlay() {
+ randchoice= computerchoice[Math.floor(Math.random()*computerchoice.length)];
+console.log(`Computer Choice ${randchoice}`);
+return randchoice;
+}
+
+function result(userchoice,randchoice){
+if(userchoice===randchoice){
+  console.log("It's a tie!");
+  draw();
+  choice();
+}
+else{
+   if( (userchoice==="ground") &&(randchoice==="flying" ||randchoice==="fire")){
+     console.log("You win!");
+     win();
+     choice();
+   }
+   else if( (userchoice==="ground") &&(randchoice==="grass" ||randchoice==="water")){
+       console.log("You Lost!");
+      lost();
+     choice();
+     }
+     else if( (userchoice==="flying") &&(randchoice==="water" ||randchoice==="grass")){
+        console.log("You win!");
+        win();
+       choice();
+      }
+     else if( (userchoice==="flying") &&(randchoice==="fire" ||randchoice==="ground")){
+            console.log("You Lost!");
+        lost();
+       choice();
+          }
+  else if( (userchoice==="water") &&(randchoice==="fire" ||randchoice==="ground")){
+    console.log("You win!");
+     win();
+    choice();
+  } 
+  else if( (userchoice==="water") &&(randchoice==="grass" ||randchoice==="flying")){
+         console.log("You Lost!");
+     lost();
+    choice();
+       }
+  else if( (userchoice==="fire") &&(randchoice==="flying" ||randchoice==="grass")){
+    console.log("You win!");
+     win();
+    choice();
+  }
+   else if( (userchoice==="fire") &&(randchoice==="water" ||randchoice==="ground")){
+         console.log("You Lost!");
+      lost();
+     choice();
+       }
+  else if( (userchoice==="grass") &&(randchoice==="water" ||randchoice==="ground")){
+    console.log("You win!");
+     win();
+    choice();
+  }
+     else if( (userchoice==="grass") &&(randchoice==="fire" ||randchoice==="flying")){
+         console.log("You Lost!");
+        lost();
+       choice();
+       }
+  }
+}
+
+
+
+
+let aboutmeFrame = document.querySelector("#aboutmeFrame");
+let scaledFrameNode = document.querySelector("#scaledFrame");
+scaledFrameNode.classList.add("removeFrame");
+let frame=0;
+  
+aboutmeFrame.addEventListener("click", (e) => {
+  if (frame === 0){
+    scaledFrameNode.classList.remove("removeFrame");
+    frame=1;
+  }
+  else{
+    scaledFrameNode.classList.add("removeFrame");
+    frame=0;
+  }
+});
+
+
+let anchorFontAwesome=document.querySelectorAll("a");
+
+anchorFontAwesome.forEach((a) => {
+  a.addEventListener("mouseenter",(e)=>{
+    console.log("Mouse over anchor element:", a.textContent);
+    a.style.display="inline";
+    let icon = document.createElement("icon");
+    icon.innerHTML = '  <i class="fas fa-up-right-from-square" style="display:inline"></i>';
+    a.append(icon);
+    icon.style.fontSize="16px";
+    icon.style.transition="all 1s ease";
+  });
+  a.addEventListener("mouseleave",(e)=>{
+    let icon = a.querySelector("icon");
+    if (icon) {
+      a.removeChild(icon);
+    }
+  });
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Pokemon-Mini-Game/style.css b/Pokemon-Mini-Game/style.css
new file mode 100644
index 000000000..b4328b9bc
--- /dev/null
+++ b/Pokemon-Mini-Game/style.css
@@ -0,0 +1,288 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+
+.loader{
+  height:100%;
+  width:100%;
+ position: fixed;
+  z-index: 100;
+  background-color: #27313d;
+}
+.forLoadingBody{
+  height:100vh;
+  width:100vw;
+  position: fixed;
+  z-index: 99;
+  background-color: #27313d;
+  margin:0px;
+}
+.removeLoader{
+  visibility: hidden;
+}
+
+body{
+  transition: all 1s ease;
+}
+div{
+  margin-left: 20px;
+  margin-right: 10px;
+  margin-bottom: 10px; 
+}
+#result{
+  margin:0;
+}
+
+#welcome{
+  text-align: center;
+}
+
+#wel{
+  color:black;
+   display: inline-block;
+   text-align: center; 
+  padding: 40px;
+  padding-top: 10px;
+  padding-bottom: 35px;
+    border: 1px solid black;
+background-image: url("pokemon-icon-vector-free.jpg");
+  background-size: cover;
+   border-radius: 20px;
+margin-top: 10px;
+  position:relative;
+transition: all .5s ease;
+}
+#wel:hover{
+  text-shadow: 0 0 4px cyan,0 0 3px cyan,0 0 2px cyan,0 0 1px cyan;
+}
+
+#mode{
+  padding: 10px;
+  border-radius: 13px;
+  font-size: 20px;
+   position: fixed; 
+  top:15px;
+  right:15px;
+}
+button:hover{
+  background-color: gray; 
+  color:whitesmoke;
+  transform: scale(1.08);
+  cursor:pointer;
+}
+button:focus {
+  background-color: #969695; 
+  color:whitesmoke;
+ transform: scale(1.04);
+}
+button:active {
+  background-color: #5c5c5b; 
+  color: white;
+  transform:scale(0.9);
+}
+ 
+
+.choices{
+  display: flex; 
+  /* position: relative;
+  top:100px; */
+   justify-content: space-around;
+  gap:50px;
+}
+.choice{
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  
+}
+.choice img{
+  height: 150px;
+  width:150px;
+border-radius: 50%;
+  transition: all 0.1s ease;
+}
+
+ .choice :hover{
+  cursor: pointer;
+  transform: scale(1.1);
+  filter:brightness(110%);
+   
+ }
+
+.choices:has(img:hover) img:not(:hover){
+  opacity: 50%;
+   transform: scale(0.9);
+  filter:grayscale(5%);
+}
+
+.choices:has(img:active) img:not(:active){
+  opacity: 80%;
+   transform: scale(0.9);
+  filter:blur(1px);
+}
+.choice :active{
+  cursor: pointer;
+   transform: scale(0.85);
+  filter:brightness(110%) sepia(10%) contrast(10px);
+  transition: all 0.1s ease;
+}
+#ground :hover{
+  box-shadow: 0px 0px 25px 10px #795548;
+  
+}
+#water :hover{
+  box-shadow: 0px 0px 25px 5px #03a9f4;
+}
+#fire :hover{
+  box-shadow: 0px 0px 25px 5px#ff9800;
+}
+#grass :hover{
+  box-shadow: 0px 0px 25px 5px #8bc34a;
+}
+#flying :hover{
+  box-shadow: 0px 0px 25px 10px #607d8b;
+}
+
+
+
+
+
+#fight{
+   display: block; 
+  text-align: center;
+padding:10px;
+   border: 1px solid black;
+  background-color: #808080;
+ }
+#result{
+  display: flex;
+  font-size: 25px;
+  font-weight: bold;
+  padding: 20px;
+  justify-content: center;
+  gap:50px;
+  text-align: center;
+border: 1px solid black;
+  margin-top: 20px;
+  background-color: #808080;
+}
+
+#choose{
+   display: block; 
+    text-align: center;
+  padding:10px;
+     border: 1px solid black;
+    background-color: #808080;
+  margin-bottom: 20px;
+  font-size: 25px;;
+}
+
+#rules,#choose_your_pokemon{
+  margin-left: 5px;
+}
+#rules p{
+   font-family: 'Times New Roman', Times, serif; 
+}
+
+#aboutMe{
+margin: 10px;
+  text-align: center;
+  font-weight: bold;
+  padding: 10px;
+}
+ 
+ #aboutMe a{
+   color:#aef2f5; 
+  text-decoration: dotted underline;
+  
+  text-decoration-color: #e34646;
+  text-decoration-thickness: 3px;;
+} 
+ #aboutMe p{
+margin: 20px;
+}
+
+
+
+
+#scaledFrame{
+  height: 600px;
+  width: 599px;
+  border: 1px solid black;
+  background-color: #808080;
+}
+
+@media(max-width:600px){
+  body{
+    width:600px;
+  }
+  
+  .choice :active{
+    opacity: 100%;
+    cursor: pointer;
+     transform: scale(0.9);
+  }
+  .choice :hover{
+    opacity: 100%;
+    cursor: pointer;
+     transform: scale(1);
+  }
+  
+.choices{
+  display: flex;
+  justify-content: space-around;
+  gap:50px;
+  flex-wrap: wrap;
+}
+  #rules{
+    font-size: 16px;
+  }
+}
+
+@media(min-width:600px)and (max-width:1000px){
+  body{
+    width:900px;
+  }
+  .choices{
+  display: flex;
+  justify-content: space-around;
+  gap:50px;
+  flex-wrap: wrap;
+} 
+  .choice :active{
+    opacity: 100%;
+    cursor: pointer;
+     transform: scale(0.9);
+  }
+  .choice :hover{
+    opacity: 100%;
+    cursor: pointer;
+     transform: scale(1);
+  }
+  
+} 
+/* @media(min-width:900px)and (max-width:1024px){
+body{
+  width:1024px;
+}
+} */
+
+
+
+.removeFrame{
+  display:none;
+}
+
+
+
+body ::selection{
+  background-color:#7f98b5;
+}
+body :not(a)::selection{
+  color: #b52a48;
+}
+.choices ::selection, button::selection, br::selection, #mode ::selection, a::selection, iframe::selection{
+  background-color: transparent;
+}
+
diff --git a/Pokemon-Mini-Game/water-removebg-preview (1).png b/Pokemon-Mini-Game/water-removebg-preview (1).png
new file mode 100644
index 000000000..6ec19ac15
Binary files /dev/null and b/Pokemon-Mini-Game/water-removebg-preview (1).png differ
diff --git a/Pure Html Game/index.html b/Pure Html Game/index.html
new file mode 100644
index 000000000..fd453eec6
--- /dev/null
+++ b/Pure Html Game/index.html	
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+    <body bgcolor="#000" background="http://crescer-galaxy.surge.sh/img/sky.gif">
+        <center>
+            <h1>
+                <font face="Impact" color="white" size="8">
+                    HELP US TO CAPTURE THE
+                </font>
+                <font face="Impact" color="red" size="8">
+                    IMPOSTER AIRCRAFT
+                </font>
+            </h1>
+            <p>
+                <font face="Arial" color="white" size="3">
+                    There is an impostor aircraft in our squad. We need your help to capture them.
+                </font>
+            </p>
+            <h2>
+                <font face="Impact" color="orange" size="5">
+                    YOU HAVE JUST ONE SINGLE CHANCE
+                </font>
+            </h2>
+        </center>
+        <marquee direction="right" scrolldelay="0">
+            <a href="https://codepen.io/sergioandrade/full/abNVdrX" target="_top">
+                <img src="https://img1.gratispng.com/20180320/buq/kisspng-galaga-spaceship-s80-spaceship-free-spacecraft-designs-spacecraft-png-5ab1b64c3b4331.4887499415215959802428.jpg"
+                    alt="Nave" width="120">
+            </a>
+        </marquee>
+        <marquee direction="right" scrolldelay="200">
+            <a href="https://codepen.io/sergioandrade/full/abNVdrX" target="_top">
+                <img src="https://img1.gratispng.com/20180320/buq/kisspng-galaga-spaceship-s80-spaceship-free-spacecraft-designs-spacecraft-png-5ab1b64c3b4331.4887499415215959802428.jpg"
+                    alt="Nave" width="120">
+            </a>
+        </marquee>
+        <marquee direction="right" scrolldelay="130">
+            <a href="https://codepen.io/sergioandrade/full/abNVdrX" target="_top">
+                <img src="https://img1.gratispng.com/20180320/buq/kisspng-galaga-spaceship-s80-spaceship-free-spacecraft-designs-spacecraft-png-5ab1b64c3b4331.4887499415215959802428.jpg"
+                    alt="Nave" width="120">
+            </a>
+        </marquee>
+        <marquee direction="right" scrolldelay="100">
+            <a href="https://codepen.io/sergioandrade/full/VwaraKe" target="_top">
+                <img src="https://img1.gratispng.com/20180320/buq/kisspng-galaga-spaceship-s80-spaceship-free-spacecraft-designs-spacecraft-png-5ab1b64c3b4331.4887499415215959802428.jpg"
+                    alt="Nave" width="120">
+            </a>
+        </marquee>
+        <marquee direction="right" scrolldelay="150">
+            <a href="https://codepen.io/sergioandrade/full/abNVdrX" target="_top">
+                <img src="https://img1.gratispng.com/20180320/buq/kisspng-galaga-spaceship-s80-spaceship-free-spacecraft-designs-spacecraft-png-5ab1b64c3b4331.4887499415215959802428.jpg"
+                    alt="Nave" width="120">
+            </a>
+        </marquee>
+        <marquee direction="right" scrolldelay="50">
+            <a href="https://codepen.io/sergioandrade/full/abNVdrX" target="_top">
+                <img src="https://img1.gratispng.com/20180320/buq/kisspng-galaga-spaceship-s80-spaceship-free-spacecraft-designs-spacecraft-png-5ab1b64c3b4331.4887499415215959802428.jpg"
+                    alt="Nave" width="120">
+            </a>
+        </marquee>
+    </body>
+</body>
+
+</html>
diff --git a/README.md b/README.md
index eeaf5b807..cc4a9a7e3 100644
--- a/README.md
+++ b/README.md
@@ -327,3 +327,8 @@ Thank you for exploring this project! We’d love to connect and hear from you.
 [![Email](https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:iamrahulmhto@gmail.com)
 [![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/iamrahulmahato)
 
+<div align="center">
+    <a href="#top">
+        <img src="https://img.shields.io/badge/Back%20to%20Top-000000?style=for-the-badge&logo=github&logoColor=white" alt="Back to Top">
+    </a>
+</div>
\ No newline at end of file
diff --git a/Real Estate visualizer/Readme.md b/Real Estate visualizer/Readme.md
new file mode 100644
index 000000000..ccdb8092f
--- /dev/null
+++ b/Real Estate visualizer/Readme.md	
@@ -0,0 +1,53 @@
+# Boston Housing Market Analysis Dashboard
+
+This is an interactive web dashboard built with [Dash](https://dash.plotly.com/), which visualizes data from the Boston Housing Market dataset. The application provides several graphs to analyze the housing data, including the distribution of home values, the average home value based on the number of rooms, and a scatter plot showing the relationship between home value and tax rate.
+
+## Features
+
+- **Select Highway Access Index (RAD)**: Allows users to filter data based on the RAD value, which indicates the accessibility of radial highways.
+- **Graphs**:
+  - **Median Home Value Distribution**: A histogram showing the distribution of the median home values (MEDV).
+  - **Average Home Value by Room Count**: A bar chart displaying the average home value for each room count.
+  - **Home Value vs. Tax Rate**: A scatter plot showing the relationship between home value (MEDV) and the tax rate (TAX), with color coding based on the RAD index.
+
+## Prerequisites
+
+Make sure you have the following installed:
+- Python 3.x
+- Dash (`dash`, `dash_core_components`, `dash_html_components`)
+- Plotly (`plotly`)
+- Pandas (`pandas`)
+
+You can install these dependencies using pip:
+
+```bash
+pip install dash plotly pandas
+Dataset
+This dashboard uses the Boston Housing dataset (data.csv). The dataset should contain the following columns:
+
+RM: Average number of rooms per dwelling.
+RAD: Index of accessibility to radial highways.
+MEDV: Median value of owner-occupied homes in $1000s.
+TAX: Property tax rate.
+Ensure that the data.csv file is located in the correct path for the application to load it correctly.
+
+How to Run
+Clone this repository or download the project files to your local machine.
+Make sure you have installed the necessary dependencies (dash, plotly, and pandas).
+Update the dataset path in the visulaizer.py file to match the location of your data.csv.
+Run the Dash application:
+bash
+Copy code
+python visulaizer.py
+Open your web browser and go to the address shown in the terminal (usually http://127.0.0.1:8050/).
+App Layout
+The app is composed of:
+
+A header (H1) with the title: "Boston Housing Market Analysis Dashboard".
+A dropdown for selecting the RAD value to filter the data.
+Three interactive graphs:
+Median Home Value Distribution: A histogram of home values.
+Average Home Value by Room Count: A bar chart showing average home values grouped by the number of rooms.
+Home Value vs. Tax Rate: A scatter plot of home value vs. tax rate.
+License
+This project is licensed under the MIT License - see the LICENSE file for details.
\ No newline at end of file
diff --git a/Real Estate visualizer/data.csv b/Real Estate visualizer/data.csv
new file mode 100644
index 000000000..e49db77a8
--- /dev/null
+++ b/Real Estate visualizer/data.csv	
@@ -0,0 +1,512 @@
+CRIM,ZN,INDUS,CHAS,NOX,RM,AGE,DIS,RAD,TAX,PTRATIO,B,LSTAT,MEDV
+0.00632,18,2.31,0,0.538,6.575,65.2,4.09,1,296,15.3,396.9,4.98,24
+0.02731,0,7.07,0,0.469,6.421,78.9,4.9671,2,242,17.8,396.9,9.14,21.6
+0.02729,0,7.07,0,0.469,7.185,61.1,4.9671,2,242,17.8,392.83,4.03,34.7
+0.03237,0,2.18,0,0.458,6.998,45.8,6.0622,3,222,18.7,394.63,2.94,33.4
+0.06905,0,2.18,0,0.458,7.147,54.2,6.0622,3,222,18.7,396.9,5.33,36.2
+0.02985,0,2.18,0,0.458,6.43,58.7,6.0622,3,222,18.7,394.12,5.21,28.7
+0.08829,12.5,7.87,0,0.524,6.012,66.6,5.5605,5,311,15.2,395.6,12.43,22.9
+0.14455,12.5,7.87,0,0.524,6.172,96.1,5.9505,5,311,15.2,396.9,19.15,27.1
+0.21124,12.5,7.87,0,0.524,5.631,100,6.0821,5,311,15.2,386.63,29.93,16.5
+0.17004,12.5,7.87,0,0.524,6.004,85.9,6.5921,5,311,15.2,386.71,17.1,18.9
+0.22489,12.5,7.87,0,0.524,,94.3,6.3467,5,311,15.2,392.52,20.45,15
+0.11747,12.5,7.87,0,0.524,6.009,82.9,6.2267,5,311,15.2,396.9,13.27,18.9
+0.09378,12.5,7.87,0,0.524,5.889,39,5.4509,5,311,15.2,390.5,15.71,21.7
+0.62976,0,8.14,0,0.538,5.949,61.8,4.7075,4,307,21,396.9,8.26,20.4
+0.63796,0,8.14,0,0.538,6.096,84.5,4.4619,4,307,21,380.02,10.26,18.2
+0.62739,0,8.14,0,0.538,5.834,56.5,4.4986,4,307,21,395.62,8.47,19.9
+1.05393,0,8.14,0,0.538,5.935,29.3,4.4986,4,307,21,386.85,6.58,23.1
+0.7842,0,8.14,0,0.538,5.99,81.7,4.2579,4,307,21,386.75,14.67,17.5
+0.80271,0,8.14,0,0.538,5.456,36.6,3.7965,4,307,21,288.99,11.69,20.2
+0.7258,0,8.14,0,0.538,5.727,69.5,3.7965,4,307,21,390.95,11.28,18.2
+1.25179,0,8.14,0,0.538,5.57,98.1,3.7979,4,307,21,376.57,21.02,13.6
+0.85204,0,8.14,0,0.538,5.965,89.2,4.0123,4,307,21,392.53,13.83,19.6
+1.23247,0,8.14,0,0.538,6.142,91.7,3.9769,4,307,21,396.9,18.72,15.2
+0.98843,0,8.14,0,0.538,5.813,100,4.0952,4,307,21,394.54,19.88,14.5
+0.75026,0,8.14,0,0.538,5.924,94.1,4.3996,4,307,21,394.33,16.3,15.6
+0.84054,0,8.14,0,0.538,5.599,85.7,4.4546,4,307,21,303.42,16.51,13.9
+0.67191,0,8.14,0,0.538,5.813,90.3,4.682,4,307,21,376.88,14.81,16.6
+0.95577,0,8.14,0,0.538,6.047,88.8,4.4534,4,307,21,306.38,17.28,14.8
+0.77299,0,8.14,0,0.538,6.495,94.4,4.4547,4,307,21,387.94,12.8,18.4
+1.00245,0,8.14,0,0.538,6.674,87.3,4.239,4,307,21,380.23,11.98,21
+1.13081,0,8.14,0,0.538,5.713,94.1,4.233,4,307,21,360.17,22.6,12.7
+1.35472,0,8.14,0,0.538,6.072,100,4.175,4,307,21,376.73,13.04,14.5
+1.38799,0,8.14,0,0.538,5.95,82,3.99,4,307,21,232.6,27.71,13.2
+1.15172,0,8.14,0,0.538,5.701,95,3.7872,4,307,21,358.77,18.35,13.1
+1.61282,0,8.14,0,0.538,6.096,96.9,3.7598,4,307,21,248.31,20.34,13.5
+0.06417,0,5.96,0,0.499,,68.2,3.3603,5,279,19.2,396.9,9.68,18.9
+0.09744,0,5.96,0,0.499,5.841,61.4,3.3779,5,279,19.2,377.56,11.41,20
+0.08014,0,5.96,0,0.499,5.85,41.5,3.9342,5,279,19.2,396.9,8.77,21
+0.17505,0,5.96,0,0.499,5.966,30.2,3.8473,5,279,19.2,393.43,10.13,24.7
+0.02763,75,2.95,0,0.428,6.595,21.8,5.4011,3,252,18.3,395.63,4.32,30.8
+0.03359,75,2.95,0,0.428,7.024,15.8,5.4011,3,252,18.3,395.62,1.98,34.9
+0.12744,0,6.91,0,0.448,6.77,2.9,5.7209,3,233,17.9,385.41,4.84,26.6
+0.1415,0,6.91,0,0.448,6.169,6.6,5.7209,3,233,17.9,383.37,5.81,25.3
+0.15936,0,6.91,0,0.448,6.211,6.5,5.7209,3,233,17.9,394.46,7.44,24.7
+0.12269,0,6.91,0,0.448,6.069,40,5.7209,3,233,17.9,389.39,9.55,21.2
+0.17142,0,6.91,0,0.448,5.682,33.8,5.1004,3,233,17.9,396.9,10.21,19.3
+0.18836,0,6.91,0,0.448,5.786,33.3,5.1004,3,233,17.9,396.9,14.15,20
+0.22927,0,6.91,0,0.448,6.03,85.5,5.6894,3,233,17.9,392.74,18.8,16.6
+0.25387,0,6.91,0,0.448,5.399,95.3,5.87,3,233,17.9,396.9,30.81,14.4
+0.21977,0,6.91,0,0.448,5.602,62,6.0877,3,233,17.9,396.9,16.2,19.4
+0.08873,21,5.64,0,0.439,5.963,45.7,6.8147,4,243,16.8,395.56,13.45,19.7
+0.04337,21,5.64,0,0.439,6.115,63,6.8147,4,243,16.8,393.97,9.43,20.5
+0.0536,21,5.64,0,0.439,6.511,21.1,6.8147,4,243,16.8,396.9,5.28,25
+0.04981,21,5.64,0,0.439,5.998,21.4,6.8147,4,243,16.8,396.9,8.43,23.4
+0.0136,75,4,0,0.41,5.888,47.6,7.3197,3,469,21.1,396.9,14.8,18.9
+0.01311,90,1.22,0,0.403,7.249,21.9,8.6966,5,226,17.9,395.93,4.81,35.4
+0.02055,85,0.74,0,0.41,6.383,35.7,9.1876,2,313,17.3,396.9,5.77,24.7
+0.01432,100,1.32,0,0.411,6.816,40.5,8.3248,5,256,15.1,392.9,3.95,31.6
+0.15445,25,5.13,0,0.453,6.145,29.2,7.8148,8,284,19.7,390.68,6.86,23.3
+0.10328,25,5.13,0,0.453,5.927,47.2,6.932,8,284,19.7,396.9,9.22,19.6
+0.14932,25,5.13,0,0.453,5.741,66.2,7.2254,8,284,19.7,395.11,13.15,18.7
+0.17171,25,5.13,0,0.453,5.966,93.4,6.8185,8,284,19.7,378.08,14.44,16
+0.11027,25,5.13,0,0.453,6.456,67.8,7.2255,8,284,19.7,396.9,6.73,22.2
+0.1265,25,5.13,0,0.453,,43.4,7.9809,8,284,19.7,395.58,9.5,25
+0.01951,17.5,1.38,0,0.4161,7.104,59.5,9.2229,3,216,18.6,393.24,8.05,33
+0.03584,80,3.37,0,0.398,6.29,17.8,6.6115,4,337,16.1,396.9,4.67,23.5
+0.04379,80,3.37,0,0.398,5.787,31.1,6.6115,4,337,16.1,396.9,10.24,19.4
+0.05789,12.5,6.07,0,0.409,5.878,21.4,6.498,4,345,18.9,396.21,8.1,22
+0.13554,12.5,6.07,0,0.409,5.594,36.8,6.498,4,345,18.9,396.9,13.09,17.4
+0.12816,12.5,6.07,0,0.409,5.885,33,6.498,4,345,18.9,396.9,8.79,20.9
+0.08826,0,10.81,0,0.413,6.417,6.6,5.2873,4,305,19.2,383.73,6.72,24.2
+0.15876,0,10.81,0,0.413,5.961,17.5,5.2873,4,305,19.2,376.94,9.88,21.7
+0.09164,0,10.81,0,0.413,6.065,7.8,5.2873,4,305,19.2,390.91,5.52,22.8
+0.19539,0,10.81,0,0.413,6.245,6.2,5.2873,4,305,19.2,377.17,7.54,23.4
+0.07896,0,12.83,0,0.437,6.273,6,4.2515,5,398,18.7,394.92,6.78,24.1
+0.09512,0,12.83,0,0.437,6.286,45,4.5026,5,398,18.7,383.23,8.94,21.4
+0.10153,0,12.83,0,0.437,6.279,74.5,4.0522,5,398,18.7,373.66,11.97,20
+0.08707,0,12.83,0,0.437,6.14,45.8,4.0905,5,398,18.7,386.96,10.27,20.8
+0.05646,0,12.83,0,0.437,6.232,53.7,5.0141,5,398,18.7,386.4,12.34,21.2
+0.08387,0,12.83,0,0.437,5.874,36.6,4.5026,5,398,18.7,396.06,9.1,20.3
+0.04113,25,4.86,0,0.426,6.727,33.5,5.4007,4,281,19,396.9,5.29,28
+0.04462,25,4.86,0,0.426,6.619,70.4,5.4007,4,281,19,395.63,7.22,23.9
+0.03659,25,4.86,0,0.426,6.302,32.2,5.4007,4,281,19,396.9,6.72,24.8
+0.03551,25,4.86,0,0.426,6.167,46.7,5.4007,4,281,19,390.64,7.51,22.9
+0.05059,0,4.49,0,0.449,6.389,48,4.7794,3,247,18.5,396.9,9.62,23.9
+0.05735,0,4.49,0,0.449,6.63,56.1,4.4377,3,247,18.5,392.3,6.53,26.6
+0.05188,0,4.49,0,0.449,6.015,45.1,4.4272,3,247,18.5,395.99,12.86,22.5
+0.07151,0,4.49,0,0.449,6.121,56.8,3.7476,3,247,18.5,395.15,8.44,22.2
+0.0566,0,3.41,0,0.489,7.007,86.3,3.4217,2,270,17.8,396.9,5.5,23.6
+0.05302,0,3.41,0,0.489,7.079,63.1,3.4145,2,270,17.8,396.06,5.7,28.7
+0.04684,0,3.41,0,0.489,6.417,66.1,3.0923,2,270,17.8,392.18,8.81,22.6
+0.03932,0,3.41,0,0.489,6.405,73.9,3.0921,2,270,17.8,393.55,8.2,22
+0.04203,28,15.04,0,0.464,6.442,53.6,3.6659,4,270,18.2,395.01,8.16,22.9
+0.02875,28,15.04,0,0.464,6.211,28.9,3.6659,4,270,18.2,396.33,6.21,25
+0.04294,28,15.04,0,0.464,6.249,77.3,3.615,4,270,18.2,396.9,10.59,20.6
+0.12204,0,2.89,0,0.445,6.625,57.8,3.4952,2,276,18,357.98,6.65,28.4
+0.11504,0,2.89,0,0.445,,69.6,3.4952,2,276,18,391.83,11.34,21.4
+0.12083,0,2.89,0,0.445,8.069,76,3.4952,2,276,18,396.9,4.21,38.7
+0.08187,0,2.89,0,0.445,7.82,36.9,3.4952,2,276,18,393.53,3.57,43.8
+0.0686,0,2.89,0,0.445,7.416,62.5,3.4952,2,276,18,396.9,6.19,33.2
+0.14866,0,8.56,0,0.52,6.727,79.9,2.7778,5,384,20.9,394.76,9.42,27.5
+0.11432,0,8.56,0,0.52,6.781,71.3,2.8561,5,384,20.9,395.58,7.67,26.5
+0.22876,0,8.56,0,0.52,6.405,85.4,2.7147,5,384,20.9,70.8,10.63,18.6
+0.21161,0,8.56,0,0.52,6.137,87.4,2.7147,5,384,20.9,394.47,13.44,19.3
+0.1396,0,8.56,0,0.52,6.167,90,2.421,5,384,20.9,392.69,12.33,20.1
+0.13262,0,8.56,0,0.52,5.851,96.7,2.1069,5,384,20.9,394.05,16.47,19.5
+0.1712,0,8.56,0,0.52,5.836,91.9,2.211,5,384,20.9,395.67,18.66,19.5
+0.13117,0,8.56,0,0.52,6.127,85.2,2.1224,5,384,20.9,387.69,14.09,20.4
+0.12802,0,8.56,0,0.52,6.474,97.1,2.4329,5,384,20.9,395.24,12.27,19.8
+0.26363,0,8.56,0,0.52,6.229,91.2,2.5451,5,384,20.9,391.23,15.55,19.4
+0.10793,0,8.56,0,0.52,6.195,54.4,2.7778,5,384,20.9,393.49,13,21.7
+0.10084,0,10.01,0,0.547,6.715,81.6,2.6775,6,432,17.8,395.59,10.16,22.8
+0.12329,0,10.01,0,0.547,5.913,92.9,2.3534,6,432,17.8,394.95,16.21,18.8
+0.22212,0,10.01,0,0.547,6.092,95.4,2.548,6,432,17.8,396.9,17.09,18.7
+0.14231,0,10.01,0,0.547,6.254,84.2,2.2565,6,432,17.8,388.74,10.45,18.5
+0.17134,0,10.01,0,0.547,5.928,88.2,2.4631,6,432,17.8,344.91,15.76,18.3
+0.13158,0,10.01,0,0.547,6.176,72.5,2.7301,6,432,17.8,393.3,12.04,21.2
+0.15098,0,10.01,0,0.547,6.021,82.6,2.7474,6,432,17.8,394.51,10.3,19.2
+0.13058,0,10.01,0,0.547,5.872,73.1,2.4775,6,432,17.8,338.63,15.37,20.4
+0.14476,0,10.01,0,0.547,5.731,65.2,2.7592,6,432,17.8,391.5,13.61,19.3
+0.06899,0,25.65,0,0.581,5.87,69.7,2.2577,2,188,19.1,389.15,14.37,22
+0.07165,0,25.65,0,0.581,6.004,84.1,2.1974,2,188,19.1,377.67,14.27,20.3
+0.09299,0,25.65,0,0.581,5.961,92.9,2.0869,2,188,19.1,378.09,17.93,20.5
+0.15038,0,25.65,0,0.581,5.856,97,1.9444,2,188,19.1,370.31,25.41,17.3
+0.09849,0,25.65,0,0.581,5.879,95.8,2.0063,2,188,19.1,379.38,17.58,18.8
+0.16902,0,25.65,0,0.581,5.986,88.4,1.9929,2,188,19.1,385.02,14.81,21.4
+0.38735,0,25.65,0,0.581,5.613,95.6,1.7572,2,188,19.1,359.29,27.26,15.7
+0.25915,0,21.89,0,0.624,5.693,96,1.7883,4,437,21.2,392.11,17.19,16.2
+0.32543,0,21.89,0,0.624,6.431,98.8,1.8125,4,437,21.2,396.9,15.39,18
+0.88125,0,21.89,0,0.624,5.637,94.7,1.9799,4,437,21.2,396.9,18.34,14.3
+0.34006,0,21.89,0,0.624,6.458,98.9,2.1185,4,437,21.2,395.04,12.6,19.2
+1.19294,0,21.89,0,0.624,6.326,97.7,2.271,4,437,21.2,396.9,12.26,19.6
+0.59005,0,21.89,0,0.624,6.372,97.9,2.3274,4,437,21.2,385.76,11.12,23
+0.32982,0,21.89,0,0.624,5.822,95.4,2.4699,4,437,21.2,388.69,15.03,18.4
+0.97617,0,21.89,0,0.624,5.757,98.4,2.346,4,437,21.2,262.76,17.31,15.6
+0.55778,0,21.89,0,0.624,,98.2,2.1107,4,437,21.2,394.67,16.96,18.1
+0.32264,0,21.89,0,0.624,5.942,93.5,1.9669,4,437,21.2,378.25,16.9,17.4
+0.35233,0,21.89,0,0.624,6.454,98.4,1.8498,4,437,21.2,394.08,14.59,17.1
+0.2498,0,21.89,0,0.624,5.857,98.2,1.6686,4,437,21.2,392.04,21.32,13.3
+0.54452,0,21.89,0,0.624,6.151,97.9,1.6687,4,437,21.2,396.9,18.46,17.8
+0.2909,0,21.89,0,0.624,6.174,93.6,1.6119,4,437,21.2,388.08,24.16,14
+1.62864,0,21.89,0,0.624,5.019,100,1.4394,4,437,21.2,396.9,34.41,14.4
+3.32105,0,19.58,1,0.871,5.403,100,1.3216,5,403,14.7,396.9,26.82,13.4
+4.0974,0,19.58,0,0.871,5.468,100,1.4118,5,403,14.7,396.9,26.42,15.6
+2.77974,0,19.58,0,0.871,4.903,97.8,1.3459,5,403,14.7,396.9,29.29,11.8
+2.37934,0,19.58,0,0.871,6.13,100,1.4191,5,403,14.7,172.91,27.8,13.8
+2.15505,0,19.58,0,0.871,5.628,100,1.5166,5,403,14.7,169.27,16.65,15.6
+2.36862,0,19.58,0,0.871,4.926,95.7,1.4608,5,403,14.7,391.71,29.53,14.6
+2.33099,0,19.58,0,0.871,5.186,93.8,1.5296,5,403,14.7,356.99,28.32,17.8
+2.73397,0,19.58,0,0.871,5.597,94.9,1.5257,5,403,14.7,351.85,21.45,15.4
+1.6566,0,19.58,0,0.871,6.122,97.3,1.618,5,403,14.7,372.8,14.1,21.5
+1.49632,0,19.58,0,0.871,5.404,100,1.5916,5,403,14.7,341.6,13.28,19.6
+1.12658,0,19.58,1,0.871,5.012,88,1.6102,5,403,14.7,343.28,12.12,15.3
+2.14918,0,19.58,0,0.871,5.709,98.5,1.6232,5,403,14.7,261.95,15.79,19.4
+1.41385,0,19.58,1,0.871,6.129,96,1.7494,5,403,14.7,321.02,15.12,17
+3.53501,0,19.58,1,0.871,6.152,82.6,1.7455,5,403,14.7,88.01,15.02,15.6
+2.44668,0,19.58,0,0.871,5.272,94,1.7364,5,403,14.7,88.63,16.14,13.1
+1.22358,0,19.58,0,0.605,6.943,97.4,1.8773,5,403,14.7,363.43,4.59,41.3
+1.34284,0,19.58,0,0.605,6.066,100,1.7573,5,403,14.7,353.89,6.43,24.3
+1.42502,0,19.58,0,0.871,6.51,100,1.7659,5,403,14.7,364.31,7.39,23.3
+1.27346,0,19.58,1,0.605,6.25,92.6,1.7984,5,403,14.7,338.92,5.5,27
+1.46336,0,19.58,0,0.605,7.489,90.8,1.9709,5,403,14.7,374.43,1.73,50
+1.83377,0,19.58,1,0.605,7.802,98.2,2.0407,5,403,14.7,389.61,1.92,50
+1.51902,0,19.58,1,0.605,8.375,93.9,2.162,5,403,14.7,388.45,3.32,50
+2.24236,0,19.58,0,0.605,5.854,91.8,2.422,5,403,14.7,395.11,11.64,22.7
+2.924,0,19.58,0,0.605,6.101,93,2.2834,5,403,14.7,240.16,9.81,25
+2.01019,0,19.58,0,0.605,7.929,96.2,2.0459,5,403,14.7,369.3,3.7,50
+1.80028,0,19.58,0,0.605,5.877,79.2,2.4259,5,403,14.7,227.61,12.14,23.8
+2.3004,0,19.58,0,0.605,6.319,96.1,2.1,5,403,14.7,297.09,11.1,23.8
+2.44953,0,19.58,0,0.605,6.402,95.2,2.2625,5,403,14.7,330.04,11.32,22.3
+1.20742,0,19.58,0,0.605,5.875,94.6,2.4259,5,403,14.7,292.29,14.43,17.4
+2.3139,0,19.58,0,0.605,5.88,97.3,2.3887,5,403,14.7,348.13,12.03,19.1
+0.13914,0,4.05,0,0.51,5.572,88.5,2.5961,5,296,16.6,396.9,14.69,23.1
+0.09178,0,4.05,0,0.51,6.416,84.1,2.6463,5,296,16.6,395.5,9.04,23.6
+0.08447,0,4.05,0,0.51,5.859,68.7,2.7019,5,296,16.6,393.23,9.64,22.6
+0.06664,0,4.05,0,0.51,6.546,33.1,3.1323,5,296,16.6,390.96,5.33,29.4
+0.07022,0,4.05,0,0.51,6.02,47.2,3.5549,5,296,16.6,393.23,10.11,23.2
+0.05425,0,4.05,0,0.51,6.315,73.4,3.3175,5,296,16.6,395.6,6.29,24.6
+0.06642,0,4.05,0,0.51,6.86,74.4,2.9153,5,296,16.6,391.27,6.92,29.9
+0.0578,0,2.46,0,0.488,6.98,58.4,2.829,3,193,17.8,396.9,5.04,37.2
+0.06588,0,2.46,0,0.488,7.765,83.3,2.741,3,193,17.8,395.56,7.56,39.8
+0.06888,0,2.46,0,0.488,6.144,62.2,2.5979,3,193,17.8,396.9,9.45,36.2
+0.09103,0,2.46,0,0.488,7.155,92.2,2.7006,3,193,17.8,394.12,4.82,37.9
+0.10008,0,2.46,0,0.488,6.563,95.6,2.847,3,193,17.8,396.9,5.68,32.5
+0.08308,0,2.46,0,0.488,5.604,89.8,2.9879,3,193,17.8,391,13.98,26.4
+0.06047,0,2.46,0,0.488,6.153,68.8,3.2797,3,193,17.8,387.11,13.15,29.6
+0.05602,0,2.46,0,0.488,7.831,53.6,3.1992,3,193,17.8,392.63,4.45,50
+0.07875,45,3.44,0,0.437,6.782,41.1,3.7886,5,398,15.2,393.87,6.68,32
+0.12579,45,3.44,0,0.437,6.556,29.1,4.5667,5,398,15.2,382.84,4.56,29.8
+0.0837,45,3.44,0,0.437,7.185,38.9,4.5667,5,398,15.2,396.9,5.39,34.9
+0.09068,45,3.44,0,0.437,6.951,21.5,6.4798,5,398,15.2,377.68,5.1,37
+0.06911,45,3.44,0,0.437,6.739,30.8,6.4798,5,398,15.2,389.71,4.69,30.5
+0.08664,45,3.44,0,0.437,7.178,26.3,6.4798,5,398,15.2,390.49,2.87,36.4
+0.02187,60,2.93,0,0.401,6.8,9.9,6.2196,1,265,15.6,393.37,5.03,31.1
+0.01439,60,2.93,0,0.401,6.604,18.8,6.2196,1,265,15.6,376.7,4.38,29.1
+0.01381,80,0.46,0,0.422,7.875,32,5.6484,4,255,14.4,394.23,2.97,50
+0.04011,80,1.52,0,0.404,7.287,34.1,7.309,2,329,12.6,396.9,4.08,33.3
+0.04666,80,1.52,0,0.404,7.107,36.6,7.309,2,329,12.6,354.31,8.61,30.3
+0.03768,80,1.52,0,0.404,7.274,38.3,7.309,2,329,12.6,392.2,6.62,34.6
+0.0315,95,1.47,0,0.403,6.975,15.3,7.6534,3,402,17,396.9,4.56,34.9
+0.01778,95,1.47,0,0.403,7.135,13.9,7.6534,3,402,17,384.3,4.45,32.9
+0.03445,82.5,2.03,0,0.415,6.162,38.4,6.27,2,348,14.7,393.77,7.43,24.1
+0.02177,82.5,2.03,0,0.415,7.61,15.7,6.27,2,348,14.7,395.38,3.11,42.3
+0.0351,95,2.68,0,0.4161,7.853,33.2,5.118,4,224,14.7,392.78,3.81,48.5
+0.02009,95,2.68,0,0.4161,8.034,31.9,5.118,4,224,14.7,390.55,2.88,50
+0.13642,0,10.59,0,0.489,5.891,22.3,3.9454,4,277,18.6,396.9,10.87,22.6
+0.22969,0,10.59,0,0.489,6.326,52.5,4.3549,4,277,18.6,394.87,10.97,24.4
+0.25199,0,10.59,0,0.489,5.783,72.7,4.3549,4,277,18.6,389.43,18.06,22.5
+0.13587,0,10.59,1,0.489,6.064,59.1,4.2392,4,277,18.6,381.32,14.66,24.4
+0.43571,0,10.59,1,0.489,5.344,100,3.875,4,277,18.6,396.9,23.09,20
+0.17446,0,10.59,1,0.489,5.96,92.1,3.8771,4,277,18.6,393.25,17.27,21.7
+0.37578,0,10.59,1,0.489,5.404,88.6,3.665,4,277,18.6,395.24,23.98,19.3
+0.21719,0,10.59,1,0.489,5.807,53.8,3.6526,4,277,18.6,390.94,16.03,22.4
+0.14052,0,10.59,0,0.489,6.375,32.3,3.9454,4,277,18.6,385.81,9.38,28.1
+0.28955,0,10.59,0,0.489,5.412,9.8,3.5875,4,277,18.6,348.93,29.55,23.7
+0.19802,0,10.59,0,0.489,6.182,42.4,3.9454,4,277,18.6,393.63,9.47,25
+0.0456,0,13.89,1,0.55,5.888,56,3.1121,5,276,16.4,392.8,13.51,23.3
+0.07013,0,13.89,0,0.55,6.642,85.1,3.4211,5,276,16.4,392.78,9.69,28.7
+0.11069,0,13.89,1,0.55,5.951,93.8,2.8893,5,276,16.4,396.9,17.92,21.5
+0.11425,0,13.89,1,0.55,6.373,92.4,3.3633,5,276,16.4,393.74,10.5,23
+0.35809,0,6.2,1,0.507,6.951,88.5,2.8617,8,307,17.4,391.7,9.71,26.7
+0.40771,0,6.2,1,0.507,6.164,91.3,3.048,8,307,17.4,395.24,21.46,21.7
+0.62356,0,6.2,1,0.507,6.879,77.7,3.2721,8,307,17.4,390.39,9.93,27.5
+0.6147,0,6.2,0,0.507,6.618,80.8,3.2721,8,307,17.4,396.9,7.6,30.1
+0.31533,0,6.2,0,0.504,8.266,78.3,2.8944,8,307,17.4,385.05,4.14,44.8
+0.52693,0,6.2,0,0.504,8.725,83,2.8944,8,307,17.4,382,4.63,50
+0.38214,0,6.2,0,0.504,8.04,86.5,3.2157,8,307,17.4,387.38,3.13,37.6
+0.41238,0,6.2,0,0.504,7.163,79.9,3.2157,8,307,17.4,372.08,6.36,31.6
+0.29819,0,6.2,0,0.504,7.686,17,3.3751,8,307,17.4,377.51,3.92,46.7
+0.44178,0,6.2,0,0.504,6.552,21.4,3.3751,8,307,17.4,380.34,3.76,31.5
+0.537,0,6.2,0,0.504,5.981,68.1,3.6715,8,307,17.4,378.35,11.65,24.3
+0.46296,0,6.2,0,0.504,7.412,76.9,3.6715,8,307,17.4,376.14,5.25,31.7
+0.57529,0,6.2,0,0.507,8.337,73.3,3.8384,8,307,17.4,385.91,2.47,41.7
+0.33147,0,6.2,0,0.507,8.247,70.4,3.6519,8,307,17.4,378.95,3.95,48.3
+0.44791,0,6.2,1,0.507,6.726,66.5,3.6519,8,307,17.4,360.2,8.05,29
+0.33045,0,6.2,0,0.507,6.086,61.5,3.6519,8,307,17.4,376.75,10.88,24
+0.52058,0,6.2,1,0.507,6.631,76.5,4.148,8,307,17.4,388.45,9.54,25.1
+0.51183,0,6.2,0,0.507,7.358,71.6,4.148,8,307,17.4,390.07,4.73,31.5
+0.08244,30,4.93,0,0.428,6.481,18.5,6.1899,6,300,16.6,379.41,6.36,23.7
+0.09252,30,4.93,0,0.428,6.606,42.2,6.1899,6,300,16.6,383.78,7.37,23.3
+0.11329,30,4.93,0,0.428,6.897,54.3,6.3361,6,300,16.6,391.25,11.38,22
+0.10612,30,4.93,0,0.428,6.095,65.1,6.3361,6,300,16.6,394.62,12.4,20.1
+0.1029,30,4.93,0,0.428,6.358,52.9,7.0355,6,300,16.6,372.75,11.22,22.2
+0.12757,30,4.93,0,0.428,6.393,7.8,7.0355,6,300,16.6,374.71,5.19,23.7
+0.20608,22,5.86,0,0.431,5.593,76.5,7.9549,7,330,19.1,372.49,12.5,17.6
+0.19133,22,5.86,0,0.431,5.605,70.2,7.9549,7,330,19.1,389.13,18.46,18.5
+0.33983,22,5.86,0,0.431,6.108,34.9,8.0555,7,330,19.1,390.18,9.16,24.3
+0.19657,22,5.86,0,0.431,6.226,79.2,8.0555,7,330,19.1,376.14,10.15,20.5
+0.16439,22,5.86,0,0.431,6.433,49.1,7.8265,7,330,19.1,374.71,9.52,24.5
+0.19073,22,5.86,0,0.431,6.718,17.5,7.8265,7,330,19.1,393.74,6.56,26.2
+0.1403,22,5.86,0,0.431,6.487,13,7.3967,7,330,19.1,396.28,5.9,24.4
+0.21409,22,5.86,0,0.431,6.438,8.9,7.3967,7,330,19.1,377.07,3.59,24.8
+0.08221,22,5.86,0,0.431,6.957,6.8,8.9067,7,330,19.1,386.09,3.53,29.6
+0.36894,22,5.86,0,0.431,8.259,8.4,8.9067,7,330,19.1,396.9,3.54,42.8
+0.04819,80,3.64,0,0.392,6.108,32,9.2203,1,315,16.4,392.89,6.57,21.9
+0.03548,80,3.64,0,0.392,5.876,19.1,9.2203,1,315,16.4,395.18,9.25,20.9
+0.01538,90,3.75,0,0.394,7.454,34.2,6.3361,3,244,15.9,386.34,3.11,44
+0.61154,20,3.97,0,0.647,8.704,86.9,1.801,5,264,13,389.7,5.12,50
+0.66351,20,3.97,0,0.647,7.333,100,1.8946,5,264,13,383.29,7.79,36
+0.65665,20,3.97,0,0.647,6.842,100,2.0107,5,264,13,391.93,6.9,30.1
+0.54011,20,3.97,0,0.647,7.203,81.8,2.1121,5,264,13,392.8,9.59,33.8
+0.53412,20,3.97,0,0.647,7.52,89.4,2.1398,5,264,13,388.37,7.26,43.1
+0.52014,20,3.97,0,0.647,8.398,91.5,2.2885,5,264,13,386.86,5.91,48.8
+0.82526,20,3.97,0,0.647,7.327,94.5,2.0788,5,264,13,393.42,11.25,31
+0.55007,20,3.97,0,0.647,7.206,91.6,1.9301,5,264,13,387.89,8.1,36.5
+0.76162,20,3.97,0,0.647,5.56,62.8,1.9865,5,264,13,392.4,10.45,22.8
+0.7857,20,3.97,0,0.647,7.014,84.6,2.1329,5,264,13,384.07,14.79,30.7
+0.57834,20,3.97,0,0.575,8.297,67,2.4216,5,264,13,384.54,7.44,50
+0.5405,20,3.97,0,0.575,7.47,52.6,2.872,5,264,13,390.3,3.16,43.5
+0.09065,20,6.96,1,0.464,5.92,61.5,3.9175,3,223,18.6,391.34,13.65,20.7
+0.29916,20,6.96,0,0.464,5.856,42.1,4.429,3,223,18.6,388.65,13,21.1
+0.16211,20,6.96,0,0.464,6.24,16.3,4.429,3,223,18.6,396.9,6.59,25.2
+0.1146,20,6.96,0,0.464,6.538,58.7,3.9175,3,223,18.6,394.96,7.73,24.4
+0.22188,20,6.96,1,0.464,7.691,51.8,4.3665,3,223,18.6,390.77,6.58,35.2
+0.05644,40,6.41,1,0.447,6.758,32.9,4.0776,4,254,17.6,396.9,3.53,32.4
+0.09604,40,6.41,0,0.447,6.854,42.8,4.2673,4,254,17.6,396.9,2.98,32
+0.10469,40,6.41,1,0.447,7.267,49,4.7872,4,254,17.6,389.25,6.05,33.2
+0.06127,40,6.41,1,0.447,6.826,27.6,4.8628,4,254,17.6,393.45,4.16,33.1
+0.07978,40,6.41,0,0.447,6.482,32.1,4.1403,4,254,17.6,396.9,7.19,29.1
+0.21038,20,3.33,0,0.4429,6.812,32.2,4.1007,5,216,14.9,396.9,4.85,35.1
+0.03578,20,3.33,0,0.4429,7.82,64.5,4.6947,5,216,14.9,387.31,3.76,45.4
+0.03705,20,3.33,0,0.4429,6.968,37.2,5.2447,5,216,14.9,392.23,4.59,35.4
+0.06129,20,3.33,1,0.4429,7.645,49.7,5.2119,5,216,14.9,377.07,3.01,46
+0.01501,90,1.21,1,0.401,7.923,24.8,5.885,1,198,13.6,395.52,3.16,50
+0.00906,90,2.97,0,0.4,7.088,20.8,7.3073,1,285,15.3,394.72,7.85,32.2
+0.01096,55,2.25,0,0.389,6.453,31.9,7.3073,1,300,15.3,394.72,8.23,22
+0.01965,80,1.76,0,0.385,6.23,31.5,9.0892,1,241,18.2,341.6,12.93,20.1
+0.03871,52.5,5.32,0,0.405,6.209,31.3,7.3172,6,293,16.6,396.9,7.14,23.2
+0.0459,52.5,5.32,0,0.405,6.315,45.6,7.3172,6,293,16.6,396.9,7.6,22.3
+0.04297,52.5,5.32,0,0.405,6.565,22.9,7.3172,6,293,16.6,371.72,9.51,24.8
+0.03502,80,4.95,0,0.411,6.861,27.9,5.1167,4,245,19.2,396.9,3.33,28.5
+0.07886,80,4.95,0,0.411,7.148,27.7,5.1167,4,245,19.2,396.9,3.56,37.3
+0.03615,80,4.95,0,0.411,6.63,23.4,5.1167,4,245,19.2,396.9,4.7,27.9
+0.08265,0,13.92,0,0.437,6.127,18.4,5.5027,4,289,16,396.9,8.58,23.9
+0.08199,0,13.92,0,0.437,6.009,42.3,5.5027,4,289,16,396.9,10.4,21.7
+0.12932,0,13.92,0,0.437,6.678,31.1,5.9604,4,289,16,396.9,6.27,28.6
+0.05372,0,13.92,0,0.437,6.549,51,5.9604,4,289,16,392.85,7.39,27.1
+0.14103,0,13.92,0,0.437,5.79,58,6.32,4,289,16,396.9,15.84,20.3
+0.06466,70,2.24,0,0.4,6.345,20.1,7.8278,5,358,14.8,368.24,4.97,22.5
+0.05561,70,2.24,0,0.4,7.041,10,7.8278,5,358,14.8,371.58,4.74,29
+0.04417,70,2.24,0,0.4,6.871,47.4,7.8278,5,358,14.8,390.86,6.07,24.8
+0.03537,34,6.09,0,0.433,6.59,40.4,5.4917,7,329,16.1,395.75,9.5,22
+0.09266,34,6.09,0,0.433,6.495,18.4,5.4917,7,329,16.1,383.61,8.67,26.4
+0.1,34,6.09,0,0.433,6.982,17.7,5.4917,7,329,16.1,390.43,4.86,33.1
+0.05515,33,2.18,0,0.472,7.236,41.1,4.022,7,222,18.4,393.68,6.93,36.1
+0.05479,33,2.18,0,0.472,6.616,58.1,3.37,7,222,18.4,393.36,8.93,28.4
+0.07503,33,2.18,0,0.472,7.42,71.9,3.0992,7,222,18.4,396.9,6.47,33.4
+0.04932,33,2.18,0,0.472,6.849,70.3,3.1827,7,222,18.4,396.9,7.53,28.2
+0.49298,0,9.9,0,0.544,6.635,82.5,3.3175,4,304,18.4,396.9,4.54,22.8
+0.3494,0,9.9,0,0.544,5.972,76.7,3.1025,4,304,18.4,396.24,9.97,20.3
+2.63548,0,9.9,0,0.544,4.973,37.8,2.5194,4,304,18.4,350.45,12.64,16.1
+0.79041,0,9.9,0,0.544,6.122,52.8,2.6403,4,304,18.4,396.9,5.98,22.1
+0.26169,0,9.9,0,0.544,6.023,90.4,2.834,4,304,18.4,396.3,11.72,19.4
+0.26938,0,9.9,0,0.544,6.266,82.8,3.2628,4,304,18.4,393.39,7.9,21.6
+0.3692,0,9.9,0,0.544,6.567,87.3,3.6023,4,304,18.4,395.69,9.28,23.8
+0.25356,0,9.9,0,0.544,5.705,77.7,3.945,4,304,18.4,396.42,11.5,16.2
+0.31827,0,9.9,0,0.544,5.914,83.2,3.9986,4,304,18.4,390.7,18.33,17.8
+0.24522,0,9.9,0,0.544,5.782,71.7,4.0317,4,304,18.4,396.9,15.94,19.8
+0.40202,0,9.9,0,0.544,6.382,67.2,3.5325,4,304,18.4,395.21,10.36,23.1
+0.47547,0,9.9,0,0.544,6.113,58.8,4.0019,4,304,18.4,396.23,12.73,21
+0.1676,0,7.38,0,0.493,6.426,52.3,4.5404,5,287,19.6,396.9,7.2,23.8
+0.18159,0,7.38,0,0.493,6.376,54.3,4.5404,5,287,19.6,396.9,6.87,23.1
+0.35114,0,7.38,0,0.493,6.041,49.9,4.7211,5,287,19.6,396.9,7.7,20.4
+0.28392,0,7.38,0,0.493,5.708,74.3,4.7211,5,287,19.6,391.13,11.74,18.5
+0.34109,0,7.38,0,0.493,6.415,40.1,4.7211,5,287,19.6,396.9,6.12,25
+0.19186,0,7.38,0,0.493,6.431,14.7,5.4159,5,287,19.6,393.68,5.08,24.6
+0.30347,0,7.38,0,0.493,6.312,28.9,5.4159,5,287,19.6,396.9,6.15,23
+0.24103,0,7.38,0,0.493,6.083,43.7,5.4159,5,287,19.6,396.9,12.79,22.2
+0.06617,0,3.24,0,0.46,5.868,25.8,5.2146,4,430,16.9,382.44,9.97,19.3
+0.06724,0,3.24,0,0.46,6.333,17.2,5.2146,4,430,16.9,375.21,7.34,22.6
+0.04544,0,3.24,0,0.46,6.144,32.2,5.8736,4,430,16.9,368.57,9.09,19.8
+0.05023,35,6.06,0,0.4379,5.706,28.4,6.6407,1,304,16.9,394.02,12.43,17.1
+0.03466,35,6.06,0,0.4379,6.031,23.3,6.6407,1,304,16.9,362.25,7.83,19.4
+0.05083,0,5.19,0,0.515,6.316,38.1,6.4584,5,224,20.2,389.71,5.68,22.2
+0.03738,0,5.19,0,0.515,6.31,38.5,6.4584,5,224,20.2,389.4,6.75,20.7
+0.03961,0,5.19,0,0.515,6.037,34.5,5.9853,5,224,20.2,396.9,8.01,21.1
+0.03427,0,5.19,0,0.515,5.869,46.3,5.2311,5,224,20.2,396.9,9.8,19.5
+0.03041,0,5.19,0,0.515,5.895,59.6,5.615,5,224,20.2,394.81,10.56,18.5
+0.03306,0,5.19,0,0.515,6.059,37.3,4.8122,5,224,20.2,396.14,8.51,20.6
+0.05497,0,5.19,0,0.515,5.985,45.4,4.8122,5,224,20.2,396.9,9.74,19
+0.06151,0,5.19,0,0.515,5.968,58.5,4.8122,5,224,20.2,396.9,9.29,18.7
+0.01301,35,1.52,0,0.442,7.241,49.3,7.0379,1,284,15.5,394.74,5.49,32.7
+0.02498,0,1.89,0,0.518,6.54,59.7,6.2669,1,422,15.9,389.96,8.65,16.5
+0.02543,55,3.78,0,0.484,6.696,56.4,5.7321,5,370,17.6,396.9,7.18,23.9
+0.03049,55,3.78,0,0.484,6.874,28.1,6.4654,5,370,17.6,387.97,4.61,31.2
+0.03113,0,4.39,0,0.442,6.014,48.5,8.0136,3,352,18.8,385.64,10.53,17.5
+0.06162,0,4.39,0,0.442,5.898,52.3,8.0136,3,352,18.8,364.61,12.67,17.2
+0.0187,85,4.15,0,0.429,6.516,27.7,8.5353,4,351,17.9,392.43,6.36,23.1
+0.01501,80,2.01,0,0.435,6.635,29.7,8.344,4,280,17,390.94,5.99,24.5
+0.02899,40,1.25,0,0.429,6.939,34.5,8.7921,1,335,19.7,389.85,5.89,26.6
+0.06211,40,1.25,0,0.429,6.49,44.4,8.7921,1,335,19.7,396.9,5.98,22.9
+0.0795,60,1.69,0,0.411,6.579,35.9,10.7103,4,411,18.3,370.78,5.49,24.1
+0.07244,60,1.69,0,0.411,5.884,18.5,10.7103,4,411,18.3,392.33,7.79,18.6
+0.01709,90,2.02,0,0.41,6.728,36.1,12.1265,5,187,17,384.46,4.5,30.1
+0.04301,80,1.91,0,0.413,5.663,21.9,10.5857,4,334,22,382.8,8.05,18.2
+0.10659,80,1.91,0,0.413,5.936,19.5,10.5857,4,334,22,376.04,5.57,20.6
+8.98296,0,18.1,1,0.77,6.212,97.4,2.1222,24,666,20.2,377.73,17.6,17.8
+3.8497,0,18.1,1,0.77,6.395,91,2.5052,24,666,20.2,391.34,13.27,21.7
+5.20177,0,18.1,1,0.77,6.127,83.4,2.7227,24,666,20.2,395.43,11.48,22.7
+4.26131,0,18.1,0,0.77,6.112,81.3,2.5091,24,666,20.2,390.74,12.67,22.6
+4.54192,0,18.1,0,0.77,6.398,88,2.5182,24,666,20.2,374.56,7.79,25
+3.83684,0,18.1,0,0.77,6.251,91.1,2.2955,24,666,20.2,350.65,14.19,19.9
+3.67822,0,18.1,0,0.77,5.362,96.2,2.1036,24,666,20.2,380.79,10.19,20.8
+4.22239,0,18.1,1,0.77,5.803,89,1.9047,24,666,20.2,353.04,14.64,16.8
+3.47428,0,18.1,1,0.718,8.78,82.9,1.9047,24,666,20.2,354.55,5.29,21.9
+4.55587,0,18.1,0,0.718,3.561,87.9,1.6132,24,666,20.2,354.7,7.12,27.5
+3.69695,0,18.1,0,0.718,4.963,91.4,1.7523,24,666,20.2,316.03,14,21.9
+13.5222,0,18.1,0,0.631,3.863,100,1.5106,24,666,20.2,131.42,13.33,23.1
+4.89822,0,18.1,0,0.631,4.97,100,1.3325,24,666,20.2,375.52,3.26,50
+5.66998,0,18.1,1,0.631,6.683,96.8,1.3567,24,666,20.2,375.33,3.73,50
+6.53876,0,18.1,1,0.631,7.016,97.5,1.2024,24,666,20.2,392.05,2.96,50
+9.2323,0,18.1,0,0.631,6.216,100,1.1691,24,666,20.2,366.15,9.53,50
+8.26725,0,18.1,1,0.668,5.875,89.6,1.1296,24,666,20.2,347.88,8.88,50
+11.1081,0,18.1,0,0.668,4.906,100,1.1742,24,666,20.2,396.9,34.77,13.8
+18.4982,0,18.1,0,0.668,4.138,100,1.137,24,666,20.2,396.9,37.97,13.8
+19.6091,0,18.1,0,0.671,7.313,97.9,1.3163,24,666,20.2,396.9,13.44,15
+15.288,0,18.1,0,0.671,6.649,93.3,1.3449,24,666,20.2,363.02,23.24,13.9
+9.82349,0,18.1,0,0.671,6.794,98.8,1.358,24,666,20.2,396.9,21.24,13.3
+23.6482,0,18.1,0,0.671,6.38,96.2,1.3861,24,666,20.2,396.9,23.69,13.1
+17.8667,0,18.1,0,0.671,6.223,100,1.3861,24,666,20.2,393.74,21.78,10.2
+88.9762,0,18.1,0,0.671,6.968,91.9,1.4165,24,666,20.2,396.9,17.21,10.4
+15.8744,0,18.1,0,0.671,6.545,99.1,1.5192,24,666,20.2,396.9,21.08,10.9
+9.18702,0,18.1,0,0.7,5.536,100,1.5804,24,666,20.2,396.9,23.6,11.3
+7.99248,0,18.1,0,0.7,5.52,100,1.5331,24,666,20.2,396.9,24.56,12.3
+20.0849,0,18.1,0,0.7,4.368,91.2,1.4395,24,666,20.2,285.83,30.63,8.8
+16.8118,0,18.1,0,0.7,5.277,98.1,1.4261,24,666,20.2,396.9,30.81,7.2
+24.3938,0,18.1,0,0.7,4.652,100,1.4672,24,666,20.2,396.9,28.28,10.5
+22.5971,0,18.1,0,0.7,5,89.5,1.5184,24,666,20.2,396.9,31.99,7.4
+14.3337,0,18.1,0,0.7,4.88,100,1.5895,24,666,20.2,372.92,30.62,10.2
+8.15174,0,18.1,0,0.7,5.39,98.9,1.7281,24,666,20.2,396.9,20.85,11.5
+6.96215,0,18.1,0,0.7,5.713,97,1.9265,24,666,20.2,394.43,17.11,15.1
+5.29305,0,18.1,0,0.7,6.051,82.5,2.1678,24,666,20.2,378.38,18.76,23.2
+11.5779,0,18.1,0,0.7,5.036,97,1.77,24,666,20.2,396.9,25.68,9.7
+8.64476,0,18.1,0,0.693,6.193,92.6,1.7912,24,666,20.2,396.9,15.17,13.8
+13.3598,0,18.1,0,0.693,5.887,94.7,1.7821,24,666,20.2,396.9,16.35,12.7
+8.71675,0,18.1,0,0.693,6.471,98.8,1.7257,24,666,20.2,391.98,17.12,13.1
+5.87205,0,18.1,0,0.693,6.405,96,1.6768,24,666,20.2,396.9,19.37,12.5
+7.67202,0,18.1,0,0.693,5.747,98.9,1.6334,24,666,20.2,393.1,19.92,8.5
+38.3518,0,18.1,0,0.693,5.453,100,1.4896,24,666,20.2,396.9,30.59,5
+9.91655,0,18.1,0,0.693,5.852,77.8,1.5004,24,666,20.2,338.16,29.97,6.3
+25.0461,0,18.1,0,0.693,5.987,100,1.5888,24,666,20.2,396.9,26.77,5.6
+14.2362,0,18.1,0,0.693,6.343,100,1.5741,24,666,20.2,396.9,20.32,7.2
+9.59571,0,18.1,0,0.693,6.404,100,1.639,24,666,20.2,376.11,20.31,12.1
+24.8017,0,18.1,0,0.693,5.349,96,1.7028,24,666,20.2,396.9,19.77,8.3
+41.5292,0,18.1,0,0.693,5.531,85.4,1.6074,24,666,20.2,329.46,27.38,8.5
+67.9208,0,18.1,0,0.693,5.683,100,1.4254,24,666,20.2,384.97,22.98,5
+20.7162,0,18.1,0,0.659,4.138,100,1.1781,24,666,20.2,370.22,23.34,11.9
+11.9511,0,18.1,0,0.659,5.608,100,1.2852,24,666,20.2,332.09,12.13,27.9
+7.40389,0,18.1,0,0.597,5.617,97.9,1.4547,24,666,20.2,314.64,26.4,17.2
+14.4383,0,18.1,0,0.597,6.852,100,1.4655,24,666,20.2,179.36,19.78,27.5
+51.1358,0,18.1,0,0.597,5.757,100,1.413,24,666,20.2,2.6,10.11,15
+14.0507,0,18.1,0,0.597,6.657,100,1.5275,24,666,20.2,35.05,21.22,17.2
+18.811,0,18.1,0,0.597,4.628,100,1.5539,24,666,20.2,28.79,34.37,17.9
+28.6558,0,18.1,0,0.597,5.155,100,1.5894,24,666,20.2,210.97,20.08,16.3
+45.7461,0,18.1,0,0.693,4.519,100,1.6582,24,666,20.2,88.27,36.98,7
+18.0846,0,18.1,0,0.679,6.434,100,1.8347,24,666,20.2,27.25,29.05,7.2
+10.8342,0,18.1,0,0.679,6.782,90.8,1.8195,24,666,20.2,21.57,25.79,7.5
+25.9406,0,18.1,0,0.679,5.304,89.1,1.6475,24,666,20.2,127.36,26.64,10.4
+73.5341,0,18.1,0,0.679,5.957,100,1.8026,24,666,20.2,16.45,20.62,8.8
+11.8123,0,18.1,0,0.718,6.824,76.5,1.794,24,666,20.2,48.45,22.74,8.4
+11.0874,0,18.1,0,0.718,6.411,100,1.8589,24,666,20.2,318.75,15.02,16.7
+7.02259,0,18.1,0,0.718,6.006,95.3,1.8746,24,666,20.2,319.98,15.7,14.2
+12.0482,0,18.1,0,0.614,5.648,87.6,1.9512,24,666,20.2,291.55,14.1,20.8
+7.05042,0,18.1,0,0.614,6.103,85.1,2.0218,24,666,20.2,2.52,23.29,13.4
+8.79212,0,18.1,0,0.584,5.565,70.6,2.0635,24,666,20.2,3.65,17.16,11.7
+15.8603,0,18.1,0,0.679,5.896,95.4,1.9096,24,666,20.2,7.68,24.39,8.3
+12.2472,0,18.1,0,0.584,5.837,59.7,1.9976,24,666,20.2,24.65,15.69,10.2
+37.6619,0,18.1,0,0.679,6.202,78.7,1.8629,24,666,20.2,18.82,14.52,10.9
+7.36711,0,18.1,0,0.679,6.193,78.1,1.9356,24,666,20.2,96.73,21.52,11
+9.33889,0,18.1,0,0.679,6.38,95.6,1.9682,24,666,20.2,60.72,24.08,9.5
+8.49213,0,18.1,0,0.584,6.348,86.1,2.0527,24,666,20.2,83.45,17.64,14.5
+10.0623,0,18.1,0,0.584,6.833,94.3,2.0882,24,666,20.2,81.33,19.69,14.1
+6.44405,0,18.1,0,0.584,6.425,74.8,2.2004,24,666,20.2,97.95,12.03,16.1
+5.58107,0,18.1,0,0.713,6.436,87.9,2.3158,24,666,20.2,100.19,16.22,14.3
+13.9134,0,18.1,0,0.713,6.208,95,2.2222,24,666,20.2,100.63,15.17,11.7
+11.1604,0,18.1,0,0.74,6.629,94.6,2.1247,24,666,20.2,109.85,23.27,13.4
+14.4208,0,18.1,0,0.74,6.461,93.3,2.0026,24,666,20.2,27.49,18.05,9.6
+15.1772,0,18.1,0,0.74,6.152,100,1.9142,24,666,20.2,9.32,26.45,8.7
+13.6781,0,18.1,0,0.74,5.935,87.9,1.8206,24,666,20.2,68.95,34.02,8.4
+9.39063,0,18.1,0,0.74,5.627,93.9,1.8172,24,666,20.2,396.9,22.88,12.8
+22.0511,0,18.1,0,0.74,5.818,92.4,1.8662,24,666,20.2,391.45,22.11,10.5
+9.72418,0,18.1,0,0.74,6.406,97.2,2.0651,24,666,20.2,385.96,19.52,17.1
+5.66637,0,18.1,0,0.74,6.219,100,2.0048,24,666,20.2,395.69,16.59,18.4
+9.96654,0,18.1,0,0.74,6.485,100,1.9784,24,666,20.2,386.73,18.85,15.4
+12.8023,0,18.1,0,0.74,5.854,96.6,1.8956,24,666,20.2,240.52,23.79,10.8
+10.6718,0,18.1,0,0.74,6.459,94.8,1.9879,24,666,20.2,43.06,23.98,11.8
+6.28807,0,18.1,0,0.74,6.341,96.4,2.072,24,666,20.2,318.01,17.79,14.9
+9.92485,0,18.1,0,0.74,6.251,96.6,2.198,24,666,20.2,388.52,16.44,12.6
+9.32909,0,18.1,0,0.713,6.185,98.7,2.2616,24,666,20.2,396.9,18.13,14.1
+7.52601,0,18.1,0,0.713,6.417,98.3,2.185,24,666,20.2,304.21,19.31,13
+6.71772,0,18.1,0,0.713,6.749,92.6,2.3236,24,666,20.2,0.32,17.44,13.4
+5.44114,0,18.1,0,0.713,6.655,98.2,2.3552,24,666,20.2,355.29,17.73,15.2
+5.09017,0,18.1,0,0.713,6.297,91.8,2.3682,24,666,20.2,385.09,17.27,16.1
+8.24809,0,18.1,0,0.713,7.393,99.3,2.4527,24,666,20.2,375.87,16.74,17.8
+9.51363,0,18.1,0,0.713,6.728,94.1,2.4961,24,666,20.2,6.68,18.71,14.9
+4.75237,0,18.1,0,0.713,6.525,86.5,2.4358,24,666,20.2,50.92,18.13,14.1
+4.66883,0,18.1,0,0.713,5.976,87.9,2.5806,24,666,20.2,10.48,19.01,12.7
+8.20058,0,18.1,0,0.713,5.936,80.3,2.7792,24,666,20.2,3.5,16.94,13.5
+7.75223,0,18.1,0,0.713,6.301,83.7,2.7831,24,666,20.2,272.21,16.23,14.9
+6.80117,0,18.1,0,0.713,6.081,84.4,2.7175,24,666,20.2,396.9,14.7,20
+4.81213,0,18.1,0,0.713,6.701,90,2.5975,24,666,20.2,255.23,16.42,16.4
+3.69311,0,18.1,0,0.713,6.376,88.4,2.5671,24,666,20.2,391.43,14.65,17.7
+6.65492,0,18.1,0,0.713,6.317,83,2.7344,24,666,20.2,396.9,13.99,19.5
+5.82115,0,18.1,0,0.713,6.513,89.9,2.8016,24,666,20.2,393.82,10.29,20.2
+7.83932,0,18.1,0,0.655,6.209,65.4,2.9634,24,666,20.2,396.9,13.22,21.4
+3.1636,0,18.1,0,0.655,5.759,48.2,3.0665,24,666,20.2,334.4,14.13,19.9
+3.77498,0,18.1,0,0.655,5.952,84.7,2.8715,24,666,20.2,22.01,17.15,19
+4.42228,0,18.1,0,0.584,6.003,94.5,2.5403,24,666,20.2,331.29,21.32,19.1
+15.5757,0,18.1,0,0.58,5.926,71,2.9084,24,666,20.2,368.74,18.13,19.1
+13.0751,0,18.1,0,0.58,5.713,56.7,2.8237,24,666,20.2,396.9,14.76,20.1
+4.34879,0,18.1,0,0.58,6.167,84,3.0334,24,666,20.2,396.9,16.29,19.9
+4.03841,0,18.1,0,0.532,6.229,90.7,3.0993,24,666,20.2,395.33,12.87,19.6
+3.56868,0,18.1,0,0.58,6.437,75,2.8965,24,666,20.2,393.37,14.36,23.2
+4.64689,0,18.1,0,0.614,6.98,67.6,2.5329,24,666,20.2,374.68,11.66,29.8
+8.05579,0,18.1,0,0.584,5.427,95.4,2.4298,24,666,20.2,352.58,18.14,13.8
+6.39312,0,18.1,0,0.584,6.162,97.4,2.206,24,666,20.2,302.76,24.1,13.3
+4.87141,0,18.1,0,0.614,6.484,93.6,2.3053,24,666,20.2,396.21,18.68,16.7
+15.0234,0,18.1,0,0.614,5.304,97.3,2.1007,24,666,20.2,349.48,24.91,12
+10.233,0,18.1,0,0.614,6.185,96.7,2.1705,24,666,20.2,379.7,18.03,14.6
+14.3337,0,18.1,0,0.614,6.229,88,1.9512,24,666,20.2,383.32,13.11,21.4
+5.82401,0,18.1,0,0.532,6.242,64.7,3.4242,24,666,20.2,396.9,10.74,23
+5.70818,0,18.1,0,0.532,6.75,74.9,3.3317,24,666,20.2,393.07,7.74,23.7
+5.73116,0,18.1,0,0.532,7.061,77,3.4106,24,666,20.2,395.28,7.01,25
+2.81838,0,18.1,0,0.532,5.762,40.3,4.0983,24,666,20.2,392.92,10.42,21.8
+2.37857,0,18.1,0,0.583,5.871,41.9,3.724,24,666,20.2,370.73,13.34,20.6
+3.67367,0,18.1,0,0.583,6.312,51.9,3.9917,24,666,20.2,388.62,10.58,21.2
+5.69175,0,18.1,0,0.583,6.114,79.8,3.5459,24,666,20.2,392.68,14.98,19.1
+4.83567,0,18.1,0,0.583,5.905,53.2,3.1523,24,666,20.2,388.22,11.45,20.6
+0.15086,0,27.74,0,0.609,5.454,92.7,1.8209,4,711,20.1,395.09,18.06,15.2
+0.18337,0,27.74,0,0.609,5.414,98.3,1.7554,4,711,20.1,344.05,23.97,7
+0.20746,0,27.74,0,0.609,5.093,98,1.8226,4,711,20.1,318.43,29.68,8.1
+0.10574,0,27.74,0,0.609,5.983,98.8,1.8681,4,711,20.1,390.11,18.07,13.6
+0.11132,0,27.74,0,0.609,5.983,83.5,2.1099,4,711,20.1,396.9,13.35,20.1
+0.17331,0,9.69,0,0.585,5.707,54,2.3817,6,391,19.2,396.9,12.01,21.8
+0.27957,0,9.69,0,0.585,5.926,42.6,2.3817,6,391,19.2,396.9,13.59,24.5
+0.17899,0,9.69,0,0.585,5.67,28.8,2.7986,6,391,19.2,393.29,17.6,23.1
+0.2896,0,9.69,0,0.585,5.39,72.9,2.7986,6,391,19.2,396.9,21.14,19.7
+0.26838,0,9.69,0,0.585,5.794,70.6,2.8927,6,391,19.2,396.9,14.1,18.3
+0.23912,0,9.69,0,0.585,6.019,65.3,2.4091,6,391,19.2,396.9,12.92,21.2
+0.17783,0,9.69,0,0.585,5.569,73.5,2.3999,6,391,19.2,395.77,15.1,17.5
+0.177783,0,9.69,0,0.585,6.027,79.7,2.4982,6,391,19.2,396.9,14.33,16.8
+0.06263,0,11.93,0,0.573,6.593,69.1,2.4786,1,273,21,391.99,9.67,22.4
+0.04527,0,11.93,0,0.573,6.12,76.7,2.2875,1,273,21,396.9,9.08,20.6
+0.06076,0,11.93,0,0.573,6.976,91,2.1675,1,273,21,396.9,5.64,23.9
+0.10959,0,11.93,0,0.573,6.794,89.3,2.3889,1,273,21,393.45,6.48,22
+0.04741,0,11.93,0,0.573,6.03,80.8,2.505,1,273,21,396.9,7.88,11.9
+0.98765,0,12.5,0,0.561,6.98,89,2.098,3,320,23,396,12,12
+0.23456,0,12.5,0,0.561,6.98,76,2.654,3,320,23,343,25,32
+0.44433,0,12.5,0,0.561,6.123,98,2.987,3,320,23,343,21,54
+0.77763,0,12.7,0,0.561,6.222,34,2.543,3,329,23,343,76,67
+0.65432,0,12.8,0,0.561,6.76E+00,67,2.987,3,345,23,321,45,24
diff --git a/Real Estate visualizer/visulaizer.py b/Real Estate visualizer/visulaizer.py
new file mode 100644
index 000000000..55dc363f4
--- /dev/null
+++ b/Real Estate visualizer/visulaizer.py	
@@ -0,0 +1,86 @@
+import dash
+from dash import dcc, html
+from dash.dependencies import Input, Output
+import plotly.express as px
+import pandas as pd
+
+# Load dataset
+data = pd.read_csv(
+    r"C:\Users\Ananya\OneDrive\Documents\GitHub\master-web-development\Real Estate visualizer\data.csv"
+)  # Adjust path to your file location
+
+# Initialize the Dash app
+app = dash.Dash(__name__)
+
+# Define the app layout
+app.layout = html.Div(
+    children=[
+        # Main title
+        html.H1(
+            "Boston Housing Market Analysis Dashboard", style={"text-align": "center"}
+        ),
+        # Highway Access Index (RAD) dropdown
+        html.Div(
+            children=[
+                html.Label("Select Highway Access Index (RAD):"),
+                dcc.Dropdown(
+                    id="rad_dropdown",
+                    options=[
+                        {"label": str(rad), "value": str(rad)}
+                        for rad in sorted(data["RAD"].unique())
+                    ],
+                    multi=True,
+                    placeholder="Select highway access index",
+                ),
+            ],
+            style={"width": "30%", "display": "inline-block"},
+        ),
+        # Graphs for visualization
+        dcc.Graph(id="medv_distribution_graph"),
+        dcc.Graph(id="avg_value_room_graph"),
+        dcc.Graph(id="value_tax_scatter"),
+    ]
+)
+
+
+# Callback to update graphs based on RAD selection
+@app.callback(
+    [
+        Output("medv_distribution_graph", "figure"),
+        Output("avg_value_room_graph", "figure"),
+        Output("value_tax_scatter", "figure"),
+    ],
+    [Input("rad_dropdown", "value")],
+)
+def update_graphs(selected_rad):
+    # Filter data based on highway access index selection
+    filtered_data = data
+    if selected_rad:
+        filtered_data = filtered_data[
+            filtered_data["RAD"].astype(str).isin(selected_rad)
+        ]
+
+    # Plot 1: Distribution of Median Home Value (MEDV)
+    medv_distribution_fig = px.histogram(
+        filtered_data, x="MEDV", nbins=50, title="Median Home Value Distribution"
+    )
+
+    # Plot 2: Average Home Value by Room Count
+    avg_value_room_fig = px.bar(
+        filtered_data.groupby("RM")["MEDV"].mean().reset_index(),
+        x="RM",
+        y="MEDV",
+        title="Average Home Value by Room Count",
+    )
+
+    # Plot 3: Scatter Plot of Home Value vs Tax Rate
+    value_tax_scatter_fig = px.scatter(
+        filtered_data, x="TAX", y="MEDV", color="RAD", title="Home Value vs. Tax Rate"
+    )
+
+    return medv_distribution_fig, avg_value_room_fig, value_tax_scatter_fig
+
+
+# Run the app
+if __name__ == "__main__":
+    app.run_server(debug=True)
diff --git a/Solitare_Game/README.md b/Solitare_Game/README.md
new file mode 100644
index 000000000..41c01256e
--- /dev/null
+++ b/Solitare_Game/README.md
@@ -0,0 +1,21 @@
+# Spider-Solitaire
+
+Just a simple remake of classic Spider Solitaire game built during 6-week internship program at Leapfrog Technology Inc.  
+The project utilizes vanilla Javascript and HTML canvas for animations.
+
+Just clone or download the repo and open index.html in your web browser to get started.
+The latest version of the game is hosted on github. Click here to 
+## How to Play
+The goal of this game is to arrange all of your cards of the same suit into columns from King to Ace. Once you arrange a column like that, it will append to the bottom left corner of your screen. 
+
+You can move cards between columns by dragging them. When moving cards, you can either move one cardrd off the top of a pile, or several cards (as long as they go in descending order).
+
+If you click on the cards in the bottom right of the screen, a new card will be added to every column. Then you can use those new cards to your advantage. When there are no remaining cards, you win!
+
+## Game Modes
+* 1-Suit 
+* 2-Suits 
+* 4-Suits 
+
+
+
diff --git a/Solitare_Game/audio/bg-music.mp3 b/Solitare_Game/audio/bg-music.mp3
new file mode 100644
index 000000000..1832d3c1f
Binary files /dev/null and b/Solitare_Game/audio/bg-music.mp3 differ
diff --git a/Solitare_Game/audio/drag.mp3 b/Solitare_Game/audio/drag.mp3
new file mode 100644
index 000000000..0b3973a28
Binary files /dev/null and b/Solitare_Game/audio/drag.mp3 differ
diff --git a/Solitare_Game/audio/hint.mp3 b/Solitare_Game/audio/hint.mp3
new file mode 100644
index 000000000..97de20bc9
Binary files /dev/null and b/Solitare_Game/audio/hint.mp3 differ
diff --git a/Solitare_Game/audio/oven.ogg b/Solitare_Game/audio/oven.ogg
new file mode 100644
index 000000000..e38aae329
Binary files /dev/null and b/Solitare_Game/audio/oven.ogg differ
diff --git a/Solitare_Game/audio/pop.mp3 b/Solitare_Game/audio/pop.mp3
new file mode 100644
index 000000000..28a62449d
Binary files /dev/null and b/Solitare_Game/audio/pop.mp3 differ
diff --git a/Solitare_Game/css/cards.css b/Solitare_Game/css/cards.css
new file mode 100644
index 000000000..aa1756522
--- /dev/null
+++ b/Solitare_Game/css/cards.css
@@ -0,0 +1,236 @@
+.card.open {
+	background-color: #FFF;
+	background-repeat: no-repeat;
+	background-clip: padding-box;
+	background-position: 80px 120px; /* clear */
+	width: 81px;	
+	height: 114px;
+}
+
+
+body::after {/* preload img */
+	content: '';
+	position: absolute;
+	z-index: -1;
+	top: -1px;
+	left: -1px;
+	width: 0;
+	height: 0;
+	background-repeat: no-repeat;
+} 
+
+/*Clubs*/
+.card.open.c101 {
+	background: url('../images/clubs/clubs_01.png');
+}
+
+.card.open.c102 {
+	background: url('../images/clubs/clubs_02.png');
+}
+
+.card.open.c103 {
+	background: url('../images/clubs/clubs_03.png');
+}
+
+.card.open.c104 {
+	background: url('../images/clubs/clubs_04.png');
+}
+
+.card.open.c105 {
+	background: url('../images/clubs/clubs_05.png');
+}
+
+.card.open.c106 {
+	background: url('../images/clubs/clubs_06.png');}
+
+.card.open.c107 {
+	background: url('../images/clubs/clubs_07.png');
+}
+
+.card.open.c108 {
+	background: url('../images/clubs/clubs_08.png');
+}
+
+.card.open.c109 {
+	background: url('../images/clubs/clubs_09.png');
+}
+
+.card.open.c110 {
+	background: url('../images/clubs/clubs_10.png');
+}
+
+.card.open.c111 {
+	background: url('../images/clubs/clubs_11.png');
+}
+
+.card.open.c112 {
+	background: url('../images/clubs/clubs_12.png');
+}
+
+.card.open.c113 {
+	background: url('../images/clubs/clubs_13.png');
+}
+
+
+/*Diamonds*/
+.card.open.d101 {
+	background: url('../images/diamonds/diamonds_01.png');
+}
+
+.card.open.d102 {
+	background: url('../images/diamonds/diamonds_02.png');
+}
+
+.card.open.d103 {
+	background: url('../images/diamonds/diamonds_03.png');
+}
+
+.card.open.d104 {
+	background: url('../images/diamonds/diamonds_04.png');
+}
+
+.card.open.d105 {
+	background: url('../images/diamonds/diamonds_05.png');
+}
+
+.card.open.d106 {
+	background: url('../images/diamonds/diamonds_06.png');
+}
+
+.card.open.d107 {
+	background: url('../images/diamonds/diamonds_07.png');
+}
+
+.card.open.d108 {
+	background: url('../images/diamonds/diamonds_08.png');
+}
+
+.card.open.d109 {
+	background: url('../images/diamonds/diamonds_09.png');
+}
+
+.card.open.d110 {
+	background: url('../images/diamonds/diamonds_10.png');
+}
+
+.card.open.d111 {
+	background: url('../images/diamonds/diamonds_11.png');
+}
+
+.card.open.d112 {
+	background: url('../images/diamonds/diamonds_12.png');
+}
+
+.card.open.d113 {
+	background: url('../images/diamonds/diamonds_13.png');
+}
+
+
+/*HEARTS*/
+.card.open.h101 {
+	background: url('../images/hearts/hearts_01.png');
+}
+
+.card.open.h102 {
+	background: url('../images/hearts/hearts_02.png');
+}
+
+.card.open.h103 {
+	background: url('../images/hearts/hearts_03.png');
+}
+
+.card.open.h104 {
+	background: url('../images/hearts/hearts_04.png');
+}
+
+.card.open.h105 {
+	background: url('../images/hearts/hearts_05.png');
+}
+
+.card.open.h106 {
+	background: url('../images/hearts/hearts_06.png');
+}
+
+.card.open.h107 {
+	background: url('../images/hearts/hearts_07.png');
+}
+
+.card.open.h108 {
+	background: url('../images/hearts/hearts_08.png');
+}
+
+.card.open.h109 {
+	background: url('../images/hearts/hearts_09.png');
+}
+
+.card.open.h110 {
+	background: url('../images/hearts/hearts_10.png');
+}
+
+.card.open.h111 {
+	background: url('../images/hearts/hearts_11.png');
+}
+
+.card.open.h112 {
+	background: url('../images/hearts/hearts_12.png');
+}
+
+.card.open.h113 {
+	background: url('../images/hearts/hearts_13.png');
+}
+
+
+/*SPADES*/
+.card.open.s101 {
+	background: url('../images/spades/spades_01.png');
+}
+
+.card.open.s102 {
+	background: url('../images/spades/spades_02.png');
+}
+
+.card.open.s103 {
+	background: url('../images/spades/spades_03.png');
+}
+
+.card.open.s104 {
+	background: url('../images/spades/spades_04.png');
+}
+
+.card.open.s105 {
+	background: url('../images/spades/spades_05.png');
+}
+
+.card.open.s106 {
+	background: url('../images/spades/spades_06.png');
+}
+
+.card.open.s107 {
+	background: url('../images/spades/spades_07.png');
+}
+
+.card.open.s108 {
+	background: url('../images/spades/spades_08.png');
+}
+
+.card.open.s109 {
+	background: url('../images/spades/spades_09.png');
+}
+
+.card.open.s110 {
+	background: url('../images/spades/spades_10.png');
+}
+
+.card.open.s111 {
+	background: url('../images/spades/spades_11.png');
+}
+
+.card.open.s112 {
+	background: url('../images/spades/spades_12.png');
+}
+
+.card.open.s113 {
+	background: url('../images/spades/spades_13.png');
+}
+
+
diff --git a/Solitare_Game/css/reset.css b/Solitare_Game/css/reset.css
new file mode 100644
index 000000000..8b1776d9a
--- /dev/null
+++ b/Solitare_Game/css/reset.css
@@ -0,0 +1,28 @@
+html, body, ul {
+	margin: 0;
+	padding: 0;
+}
+
+ul {
+	list-style-type: none;
+}
+
+button, 
+input[type="button"], 
+input[type="submit"] {
+	border: none;
+}
+
+
+.clear-fix:before, .clear-fix:after { 
+	content: "";  
+	display: table; 
+} 
+
+.clear-fix:after {  
+	clear: both;
+} 
+
+.clear-fix { 
+	zoom: 1; 
+}
\ No newline at end of file
diff --git a/Solitare_Game/css/style.css b/Solitare_Game/css/style.css
new file mode 100644
index 000000000..66cd9773c
--- /dev/null
+++ b/Solitare_Game/css/style.css
@@ -0,0 +1,605 @@
+body {
+	overflow: hidden;
+	background: url(../images/background.png) #065B23;
+}
+
+.home-screen {
+	background: url('../images/homescreen1.jpg') ;
+	/*	display: table;*/
+	width: 1366px;
+	height: 768px;
+}
+
+.home-screen button {
+	width: 390px;
+	height: 80px;
+	padding: 10px;
+	font-size: 28px;
+	font-weight: 1000;
+	text-transform: uppercase;
+	top: 390px;
+	left: 440px;
+	cursor: pointer;
+	color: #f6bf5b;
+	background: #a66428;
+	border-radius: 20px;
+	position: absolute;
+}
+
+.home-screen button:hover, .home-screen button#high-score-btn:hover {
+	background: #774218;
+}
+
+.home-screen button label {
+	cursor: pointer;
+}
+
+.home-screen button#high-score-btn {
+	width: 150px;
+	height: 40px;
+	padding: 10px;
+	font-size: 15px;
+	font-weight: 1100;
+	text-transform: uppercase;
+	top: 380px;
+	left: 900px;
+	position: absolute;
+	cursor: pointer;
+	color: #f6bf5b;
+	background: #a66428;
+	border-radius: 20px;
+}
+
+
+
+.wrapper {
+	width: 1000px;
+	margin: -20px auto;
+}
+
+.column {
+	width: 100px;
+	min-height: 120px;
+	padding-top: 40px;
+	float: left;
+	/*	border: 1px solid #000;*/
+}
+
+.start-form {
+	width: 800px;
+	height: 520px;
+	display: block;
+	box-sizing: border-box; /*padding and border included in total height and width*/
+	margin-top: 100px;
+	padding: 20px 25px;
+	background-color: #E7E7E7;
+	border: 5px solid #074744;
+	font-family: Georgia, serif;
+	box-shadow: 0 0 12px 5px rgba(0,0,0,0.6);
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%,-75%);
+	position: absolute;
+	display: none;
+}
+
+input[type=radio] {
+	border: 0px;
+	width: 25px;
+	height: 25px;
+
+}
+
+.start-form .title {
+	margin-top: 20px;
+	margin-bottom: 50px;
+	font-size: 32px;
+	text-align: center;
+	font-weight: bold;
+}
+
+.start-form .game-option{
+	display: block;
+	margin-bottom: 20px;
+	font-size: 30px;
+	height: 70px;
+	line-height: 70px;
+	cursor: pointer;
+	margin-left: 40px;
+}
+
+.start-form .game-option:hover, .start-form .game-option:active {
+	background: #045c58;
+	color: #e7e7e7;
+}
+
+.start-form input[type="submit"] {
+	width: 200px;
+	height: 52px;
+	margin-top: 5px;
+	font-size: 28px;
+	cursor: pointer;
+	text-align: center;
+	margin-left: 50%;
+	margin-top: 20px;
+	transform: translate(-50%, 0);
+	background: #021615;
+	color: #E7E7E7;
+	border-radius: 5px;
+	box-shadow: 0px 13px 24px 6px rgba(0,0,0,0.79);
+}
+
+.start-form input[type="submit"]:hover {
+	background: #045c58;;
+}
+
+
+.start-form .suit {
+	display: inline-block;
+	background-image: url('../images/card-shapes.png');
+	background-repeat: no-repeat;
+	background-position: 170px 50%;
+	background-size: 200px 80px;
+
+}
+
+.start-form .suit.one {
+	width: 220px;
+}
+
+
+.start-form .suit.two {
+	width: 270px;
+}
+
+
+.start-form .suit.four {
+	width: 375px;
+}
+
+.control-panel {
+	position: absolute;
+	left: 50%;
+	bottom: 10px;
+	transform: translate(-50%, 0);
+	border: 1px solid #000;
+	border-bottom: 0;
+	padding: 20px;
+	background-color: #E7E7E7;
+	opacity: 0.4;
+	transition: opacity 0.2s ease 0s;
+	text-align: center;
+	border-radius: 15px;
+	display: none;
+}
+
+.control-panel:hover,
+.control-panel:active {
+	opacity: 1;
+}
+
+.opaque {
+	opacity: 1;
+}
+
+.control-panel button {
+	display: inline-block;
+	width: 142px;
+	height: 40px;
+	font-size: 16px;
+	outline: 1px solid grey;
+	outline-offset: -4px;
+	/*
+	animation-name: blink;
+	animation-duration: 2s;
+	animation-iteration-count: infinite;
+	*/
+	cursor: pointer;
+}
+
+.control-panel button:hover{
+	background: #074744;
+	color: #e7e7e7;
+}
+
+.timer{
+	font-size: 20px;
+	font-weight: bold;
+	color: #fff;
+	position: absolute;
+	right: 14%;
+	bottom: 30px;
+	border: 1px solid #fff;
+	padding: 10px;
+	display: none;
+}
+
+.score {
+	bottom: 30px;
+	left: 15%;
+	font-size: 20px;
+	font-weight: bold;
+	color: #fff;
+	border: 1px solid #fff;
+	padding: 10px;
+	position: absolute;
+	display: none;
+}
+
+.message {
+	display: inline-block;
+	position: absolute;
+	background-color: #F4F4F4;
+	border: 1px solid #000;
+	padding: 7px 10px;
+	border-radius: 4px;
+	font-size: 20px;
+}
+
+.faq, .faq-shadow {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+}
+
+.faq {
+	z-index: 30;
+	width: 50%;
+	left: -100%;
+	box-sizing: border-box;
+	padding: 0 2%;
+	background-color: #E7E7E7;
+	font-family: Georgia, serif;
+	font-size: 16px;
+	line-height: 1.32;
+	text-align: justify;
+	box-shadow: 0 0 12px 6px rgba(0,0,0,0.8);
+	overflow: scroll;
+	transition: width 2s;
+}
+
+.faq.open {
+	left: 0;
+}
+
+.faq-shadow {
+	z-index: 35;
+	width: 50%;
+	left: -50%;
+	background-color: transparent;
+	transition-delay: 0s;
+}
+
+.faq.open + .faq-shadow {
+	left: 50%;
+	background-color: rgba(0,0,0,0.4);
+	transition: background 0.2s linear 0.4s;
+}
+
+.faq-close{
+	cursor: pointer;
+}
+
+.faq-close::after {
+	content: '+';
+	position: absolute;
+	top: 0;
+	right: 15px;
+	padding: 10px;
+	font-family: Arial, sans-serif;
+	font-size: 36px;
+	transform: rotate(45deg);	
+}
+
+.faq h1, 
+.faq h2 {
+	font-style: italic;
+	margin-bottom: 0.25em;
+}
+
+.faq h1 {
+	font-size: 32px;
+}
+
+.faq h2 {
+	font-size: 20px;
+}
+
+
+.faq p {
+	margin-top: 0;
+	text-indent: 1.5em;
+}
+
+.faq ol {
+	list-style-type: disc;
+}
+
+.game-title {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -62%);
+	width: 600px;
+	height: 500px;
+	border: 5px solid #065B23;
+	font-family: Georgia, serif;
+	color: #E7E7E7;
+	text-align: center;
+	box-shadow: 0 0 12px 5px rgba(0,0,0,0.6);
+	display: none;
+}
+
+
+/*Cards style*/
+.card {
+	display: block;
+	width: 82px;
+	height: 119px;
+	margin: 0 auto;
+	border: 1px solid #000;
+	border-radius: 5px;
+}
+
+.card:first-child {
+	margin-top: 0 !important;
+}
+
+.column .card,
+.drag-el .card {
+	margin-top: -86px;
+}
+
+.drag-el {
+	z-index: 100;
+	position: absolute;
+}
+
+
+.column[data-height="1"] .open {
+	margin-top: -90px;
+}
+
+
+.column[data-height="2"] .open {
+	margin-top: -94px;
+}
+
+.column[data-height="3"] .open {
+	margin-top: -98px;
+}
+
+.column[data-height="4"] .open {
+	margin-top: -102px;
+}
+
+.column[data-height="5"] .open {
+	margin-top: -106px;
+}
+
+.column .closed,
+.column .closed + .open {
+	margin-top: -116px;
+}
+
+.card.closed {
+	background-image: 
+		linear-gradient(45deg, rgba(0,0,0,0) 48%, rgba(255,255,255,0.30) 60%, rgba(0,0,0,0) 52%),
+		linear-gradient(-45deg, rgba(0,0,0,0) 48%, rgba(255,255,255,0.25) 60%, rgba(0,0,0,0) 52%);
+	background-size: 13px 17px;
+	background-color: #a83345;
+}
+
+.card.open,
+.source .card:last-child {
+	cursor: pointer;
+	/* see bg style in cards.css */
+}
+
+
+.offside {
+	width: inherit;
+	position: absolute;
+	bottom: 120px;
+}
+
+.source .card,
+.dropout .card {
+	position: absolute;
+	bottom: 0;
+}
+
+.source .card {
+	right: 0;
+} 
+
+
+.dropout .card {
+	left: 0;
+	cursor: default;
+}
+
+.source .card:nth-child(n+11) {
+	right: 10px;
+}
+
+
+.source .card:nth-child(n+21) {
+	right: 20px;
+}
+
+.source .card:nth-child(n+31) {
+	right: 30px;
+}
+
+.source .card:nth-child(n+41) {
+	right: 40px;
+}
+
+
+.dropout {
+	display: table;
+	position: relative;
+}
+
+/*Elements render in order as they appear in the document flow ==> static*/
+.dropout .card:first-child {
+	position: static;
+}
+
+.dropout::after {
+	content: ' ';
+	display: block;
+	width: calc(100% + 70px);
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+
+.backlight {
+	box-shadow: 0 0 20px 5px yellow;
+}
+
+
+.dropout .card:nth-child(n+14) {
+	left: 15px;
+}
+
+.dropout .card:nth-child(n+27) {
+	left: 30px;
+}
+
+.dropout .card:nth-child(n+40) {
+	left: 45px;
+}
+
+.dropout .card:nth-child(n+53) {
+	left: 60px;
+}
+
+.dropout .card:nth-child(n+66) {
+	left: 75px;
+}
+
+.dropout .card:nth-child(n+79) {
+	left: 90px;
+}
+
+.dropout .card:nth-child(n+92) {
+	left: 105px;
+}
+
+.ghost {
+	z-index: 100;
+	position: fixed;
+	transition-property: top, left;
+	transition-duration: 0.3s;
+	transition-timing-function: linear;
+	transition-delay: 0s;
+}
+
+.congratulation {
+	width: 100%;
+	height: 100%;
+	display: none;
+}
+
+canvas {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
+
+/**/
+
+
+
+
+.input {
+display: none;
+position: absolute;
+top: 18em;
+left: 0;
+right: 0;
+text-align: center;
+}
+.input input {
+width: 5em;
+padding-left: 0.2em;
+border: 0.08em solid #333;
+background: none;
+border-radius: 5px;
+font-size: 3em;
+}
+.input input:focus { outline: none; }
+.input input::-webkit-input-placeholder { 
+color: #666;
+text-shadow: none;
+}
+.input input:-moz-placeholder {
+color: #666;
+text-shadow: none;
+}
+
+.restart {
+position: absolute;
+top: 2.5em;
+left: 0;
+right: 0;
+text-align: center;
+}
+
+
+
+
+.score-board {
+	position: absolute;
+	left: 380px;
+	top: 30px;
+	width: 500px;
+	height: 500px;
+	color: #074744;
+	background: #e7e7e7;
+	border-radius: 20px;
+	border: 5px solid #074744;
+	display: none;
+	padding: 20px;
+}
+
+.score-board h2 {
+	text-align: center;
+}
+
+
+ol#high-scores {
+	font-size: 24px;
+}
+
+ol li {
+	list-style-type: none;
+	counter-increment: list;
+	position: relative;
+	padding-bottom: 30px;
+	padding-right: 20px;
+	text-align: right;
+}
+
+ol li:after {
+	content: counter(list) ".";
+	position: absolute;
+	left: -1.5em;
+	width: -80px;
+	text-align: right;
+	color: blue;
+	
+	
+}
+
+
+
+
+
diff --git a/Solitare_Game/images/background.png b/Solitare_Game/images/background.png
new file mode 100644
index 000000000..bbf3d4959
Binary files /dev/null and b/Solitare_Game/images/background.png differ
diff --git a/Solitare_Game/images/card-shapes.png b/Solitare_Game/images/card-shapes.png
new file mode 100644
index 000000000..135d309f3
Binary files /dev/null and b/Solitare_Game/images/card-shapes.png differ
diff --git a/Solitare_Game/images/clubs/clubs_01.png b/Solitare_Game/images/clubs/clubs_01.png
new file mode 100644
index 000000000..741499b79
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_01.png differ
diff --git a/Solitare_Game/images/clubs/clubs_02.png b/Solitare_Game/images/clubs/clubs_02.png
new file mode 100644
index 000000000..4238c7c68
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_02.png differ
diff --git a/Solitare_Game/images/clubs/clubs_03.png b/Solitare_Game/images/clubs/clubs_03.png
new file mode 100644
index 000000000..d6b511646
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_03.png differ
diff --git a/Solitare_Game/images/clubs/clubs_04.png b/Solitare_Game/images/clubs/clubs_04.png
new file mode 100644
index 000000000..647405d73
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_04.png differ
diff --git a/Solitare_Game/images/clubs/clubs_05.png b/Solitare_Game/images/clubs/clubs_05.png
new file mode 100644
index 000000000..a6d890160
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_05.png differ
diff --git a/Solitare_Game/images/clubs/clubs_06.png b/Solitare_Game/images/clubs/clubs_06.png
new file mode 100644
index 000000000..7821252ee
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_06.png differ
diff --git a/Solitare_Game/images/clubs/clubs_07.png b/Solitare_Game/images/clubs/clubs_07.png
new file mode 100644
index 000000000..a2f2d41a1
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_07.png differ
diff --git a/Solitare_Game/images/clubs/clubs_08.png b/Solitare_Game/images/clubs/clubs_08.png
new file mode 100644
index 000000000..3465e34e1
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_08.png differ
diff --git a/Solitare_Game/images/clubs/clubs_09.png b/Solitare_Game/images/clubs/clubs_09.png
new file mode 100644
index 000000000..48960e3b5
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_09.png differ
diff --git a/Solitare_Game/images/clubs/clubs_10.png b/Solitare_Game/images/clubs/clubs_10.png
new file mode 100644
index 000000000..428efbf7c
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_10.png differ
diff --git a/Solitare_Game/images/clubs/clubs_11.png b/Solitare_Game/images/clubs/clubs_11.png
new file mode 100644
index 000000000..2e613fb68
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_11.png differ
diff --git a/Solitare_Game/images/clubs/clubs_12.png b/Solitare_Game/images/clubs/clubs_12.png
new file mode 100644
index 000000000..0dd9e7dc4
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_12.png differ
diff --git a/Solitare_Game/images/clubs/clubs_13.png b/Solitare_Game/images/clubs/clubs_13.png
new file mode 100644
index 000000000..a82bc64b2
Binary files /dev/null and b/Solitare_Game/images/clubs/clubs_13.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_01.png b/Solitare_Game/images/diamonds/diamonds_01.png
new file mode 100644
index 000000000..613144260
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_01.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_02.png b/Solitare_Game/images/diamonds/diamonds_02.png
new file mode 100644
index 000000000..407894f8d
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_02.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_03.png b/Solitare_Game/images/diamonds/diamonds_03.png
new file mode 100644
index 000000000..49b283038
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_03.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_04.png b/Solitare_Game/images/diamonds/diamonds_04.png
new file mode 100644
index 000000000..c1ffecc98
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_04.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_05.png b/Solitare_Game/images/diamonds/diamonds_05.png
new file mode 100644
index 000000000..d085623b6
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_05.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_06.png b/Solitare_Game/images/diamonds/diamonds_06.png
new file mode 100644
index 000000000..36d9adcb2
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_06.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_07.png b/Solitare_Game/images/diamonds/diamonds_07.png
new file mode 100644
index 000000000..e29e18788
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_07.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_08.png b/Solitare_Game/images/diamonds/diamonds_08.png
new file mode 100644
index 000000000..eb4c6f1c4
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_08.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_09.png b/Solitare_Game/images/diamonds/diamonds_09.png
new file mode 100644
index 000000000..8ad3115ae
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_09.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_10.png b/Solitare_Game/images/diamonds/diamonds_10.png
new file mode 100644
index 000000000..c7e558cf4
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_10.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_11.png b/Solitare_Game/images/diamonds/diamonds_11.png
new file mode 100644
index 000000000..a1458348b
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_11.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_12.png b/Solitare_Game/images/diamonds/diamonds_12.png
new file mode 100644
index 000000000..eaae33358
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_12.png differ
diff --git a/Solitare_Game/images/diamonds/diamonds_13.png b/Solitare_Game/images/diamonds/diamonds_13.png
new file mode 100644
index 000000000..d6c040aed
Binary files /dev/null and b/Solitare_Game/images/diamonds/diamonds_13.png differ
diff --git a/Solitare_Game/images/hearts/hearts_01.png b/Solitare_Game/images/hearts/hearts_01.png
new file mode 100644
index 000000000..aec63f5c1
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_01.png differ
diff --git a/Solitare_Game/images/hearts/hearts_02.png b/Solitare_Game/images/hearts/hearts_02.png
new file mode 100644
index 000000000..8542a9396
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_02.png differ
diff --git a/Solitare_Game/images/hearts/hearts_03.png b/Solitare_Game/images/hearts/hearts_03.png
new file mode 100644
index 000000000..cabd53bb4
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_03.png differ
diff --git a/Solitare_Game/images/hearts/hearts_04.png b/Solitare_Game/images/hearts/hearts_04.png
new file mode 100644
index 000000000..3d1a49851
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_04.png differ
diff --git a/Solitare_Game/images/hearts/hearts_05.png b/Solitare_Game/images/hearts/hearts_05.png
new file mode 100644
index 000000000..a5ec41082
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_05.png differ
diff --git a/Solitare_Game/images/hearts/hearts_06.png b/Solitare_Game/images/hearts/hearts_06.png
new file mode 100644
index 000000000..d413c33a4
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_06.png differ
diff --git a/Solitare_Game/images/hearts/hearts_07.png b/Solitare_Game/images/hearts/hearts_07.png
new file mode 100644
index 000000000..76d177dbd
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_07.png differ
diff --git a/Solitare_Game/images/hearts/hearts_08.png b/Solitare_Game/images/hearts/hearts_08.png
new file mode 100644
index 000000000..9b9f3f093
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_08.png differ
diff --git a/Solitare_Game/images/hearts/hearts_09.png b/Solitare_Game/images/hearts/hearts_09.png
new file mode 100644
index 000000000..ec6e96bc4
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_09.png differ
diff --git a/Solitare_Game/images/hearts/hearts_10.png b/Solitare_Game/images/hearts/hearts_10.png
new file mode 100644
index 000000000..64439135c
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_10.png differ
diff --git a/Solitare_Game/images/hearts/hearts_11.png b/Solitare_Game/images/hearts/hearts_11.png
new file mode 100644
index 000000000..1ae6e1f51
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_11.png differ
diff --git a/Solitare_Game/images/hearts/hearts_12.png b/Solitare_Game/images/hearts/hearts_12.png
new file mode 100644
index 000000000..bb436bc8d
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_12.png differ
diff --git a/Solitare_Game/images/hearts/hearts_13.png b/Solitare_Game/images/hearts/hearts_13.png
new file mode 100644
index 000000000..bb1a562b4
Binary files /dev/null and b/Solitare_Game/images/hearts/hearts_13.png differ
diff --git a/Solitare_Game/images/homescreen.jpg b/Solitare_Game/images/homescreen.jpg
new file mode 100644
index 000000000..badb0ea7b
Binary files /dev/null and b/Solitare_Game/images/homescreen.jpg differ
diff --git a/Solitare_Game/images/homescreen1.jpg b/Solitare_Game/images/homescreen1.jpg
new file mode 100644
index 000000000..8b337bd48
Binary files /dev/null and b/Solitare_Game/images/homescreen1.jpg differ
diff --git a/Solitare_Game/images/spades/spades_01.png b/Solitare_Game/images/spades/spades_01.png
new file mode 100644
index 000000000..65e9a1d0a
Binary files /dev/null and b/Solitare_Game/images/spades/spades_01.png differ
diff --git a/Solitare_Game/images/spades/spades_02.png b/Solitare_Game/images/spades/spades_02.png
new file mode 100644
index 000000000..22e29b32f
Binary files /dev/null and b/Solitare_Game/images/spades/spades_02.png differ
diff --git a/Solitare_Game/images/spades/spades_03.png b/Solitare_Game/images/spades/spades_03.png
new file mode 100644
index 000000000..fda4aee52
Binary files /dev/null and b/Solitare_Game/images/spades/spades_03.png differ
diff --git a/Solitare_Game/images/spades/spades_04.png b/Solitare_Game/images/spades/spades_04.png
new file mode 100644
index 000000000..39f74ee53
Binary files /dev/null and b/Solitare_Game/images/spades/spades_04.png differ
diff --git a/Solitare_Game/images/spades/spades_05.png b/Solitare_Game/images/spades/spades_05.png
new file mode 100644
index 000000000..7c8f7d390
Binary files /dev/null and b/Solitare_Game/images/spades/spades_05.png differ
diff --git a/Solitare_Game/images/spades/spades_06.png b/Solitare_Game/images/spades/spades_06.png
new file mode 100644
index 000000000..cfcca69cf
Binary files /dev/null and b/Solitare_Game/images/spades/spades_06.png differ
diff --git a/Solitare_Game/images/spades/spades_07.png b/Solitare_Game/images/spades/spades_07.png
new file mode 100644
index 000000000..4eb881a4d
Binary files /dev/null and b/Solitare_Game/images/spades/spades_07.png differ
diff --git a/Solitare_Game/images/spades/spades_08.png b/Solitare_Game/images/spades/spades_08.png
new file mode 100644
index 000000000..ae3f4d1dc
Binary files /dev/null and b/Solitare_Game/images/spades/spades_08.png differ
diff --git a/Solitare_Game/images/spades/spades_09.png b/Solitare_Game/images/spades/spades_09.png
new file mode 100644
index 000000000..84503dd2c
Binary files /dev/null and b/Solitare_Game/images/spades/spades_09.png differ
diff --git a/Solitare_Game/images/spades/spades_10.png b/Solitare_Game/images/spades/spades_10.png
new file mode 100644
index 000000000..7a077ac87
Binary files /dev/null and b/Solitare_Game/images/spades/spades_10.png differ
diff --git a/Solitare_Game/images/spades/spades_11.png b/Solitare_Game/images/spades/spades_11.png
new file mode 100644
index 000000000..44eb41e2e
Binary files /dev/null and b/Solitare_Game/images/spades/spades_11.png differ
diff --git a/Solitare_Game/images/spades/spades_12.png b/Solitare_Game/images/spades/spades_12.png
new file mode 100644
index 000000000..91933b89b
Binary files /dev/null and b/Solitare_Game/images/spades/spades_12.png differ
diff --git a/Solitare_Game/images/spades/spades_13.png b/Solitare_Game/images/spades/spades_13.png
new file mode 100644
index 000000000..5acd0fd94
Binary files /dev/null and b/Solitare_Game/images/spades/spades_13.png differ
diff --git a/Solitare_Game/index.html b/Solitare_Game/index.html
new file mode 100644
index 000000000..761d87666
--- /dev/null
+++ b/Solitare_Game/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Spider Solitaire</title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<!-- CSS Files Link-->
+		<link rel="stylesheet" type="text/css" href="css/reset.css">
+		<link rel="stylesheet" type="text/css" href="css/style.css">
+		<link rel="stylesheet" type="text/css" href="css/cards.css">
+	</head>
+	<body>
+		<div class = "home-screen">
+
+			<button id="start-btn">
+				<label>Start Game</label>
+			</button>
+
+			<button id = "high-score-btn">High Score</button>
+			
+			<div id = "scoreBoard" class = "score-board">	
+				<h2>Score Board</h2>
+				Rank    <span style="float:right;">Number of Moves</span>
+				<ol id = "high-scores">
+				</ol>				
+				<div class="faq-close" title="close" onclick="dealer.closeScoreBoard()"></div>
+			</div>
+		</div>
+
+		<form action = "index.html" name = "startGame" id = "startGame" class = "start-form">
+			<div class="title">Choose a Difficulty Level</div>
+			<label class="game-option">
+				<input type="radio" name="radioBtn" value = "1" checked>
+				<span class="suit one">One suit</span>
+			</label>
+			<label class="game-option">
+				<input type="radio" name="radioBtn" value = "2">
+				<span class="suit two">Two suits</span>
+			</label>
+			<label class="game-option">
+				<input type="radio" name="radioBtn" value = "4">
+				<span class="suit four">Four suits</span>
+			</label>
+			<input type="submit" value="Play">
+		</form>
+
+
+		<div class="congratulation">
+			<canvas id="canvas">ttt</canvas>
+		</div>
+
+		<div class="wrapper">
+			<div class="timer">
+				<label>Time</label>
+				<label id="minutes">00</label>:<label id="seconds">00</label>
+			</div>
+			<div class="score">
+				<label>Moves: </label>
+				<label id="score">0</label>
+			</div>
+
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+			<ul class="column" data-height=""></ul>
+
+			<div class="offside">
+				<ul class="source" id="source"></ul>
+				<ul class="dropout" id="dropout"></ul>
+			</div>
+		</div>
+
+		<div class="control-panel opaque">
+			<button class="btn-hint">Hint</button>
+			<button class="btn-new">Restart Game</button>
+			<button class="btnFaq" onclick="dealer.showFaq()">FAQ</button>			
+		</div>
+
+		<div id="faq" class="faq">
+			<h1>Frequently Asked Questions</h1>
+
+			<h2>Purpose of the game</h2>
+			<p>Remove all 	cards from the playing field in the fewest moves.</p>
+
+			<h2>Rules of the game</h2>
+			<p>
+				For solitaire, 2 decks of 52 cards are required. Initially, 54 cards are evenly decomposed into 10 columns  and the remaining 50 are added to 5 heaps of 10. In each column, all but the upper ones are closed. You can move cards from a column to a column. Maps are moved according to the following rules:
+			</p>
+			<ol>
+				<li>On an empty space, you can move the top card of any column.</li>
+				<li>The top card of the column can be moved to the next highest card, regardless of its suit and color.</li>
+				<li>A stack of cards of the same suit, lying in order, can be moved as one card.</li>
+			</ol>
+			<p>
+				If the top closed card of any column is released, it automatically opens. As soon as a column appears from the cards of the same suit collected in order, this column is removed into the house. Permitted at any time, when there are no empty columns, take one of the piles stacked on 10 cards and scatter these cards one at a time in each column.
+			</p>
+			<p>
+				There are 3 levels of difficulty. On the first, all cards have the same suit - peaks (each card repeats 8 times); on the second, all cards have two different suits - peaks and hearts. At the last level of difficult	y, you will have to deal with two full decks with 4 suits.
+			</p>
+			<div class="faq-close" title="close" onclick="dealer.closeFaq()"></div>
+		</div>
+		<div class="faq-shadow"></div>
+
+
+
+		<ul class="drag-el" id="drag-el"></ul>
+
+
+		<script src="js/cardDeck.js"></script>
+		<script src="js/cardDealer.js"></script>
+		<script src="js/cardAnimation.js"></script>
+		<script src="js/timeCounter.js"></script>
+		<script src="js/dragEvent.js"></script>
+		<script src="js/sound.js"></script>
+
+		<script src="js/victoryAnimation.js"></script>
+		<script src="js/script.js"></script>
+	</body>
+</html>
diff --git a/Solitare_Game/js/cardAnimation.js b/Solitare_Game/js/cardAnimation.js
new file mode 100644
index 000000000..074ca341a
--- /dev/null
+++ b/Solitare_Game/js/cardAnimation.js
@@ -0,0 +1,41 @@
+Node.prototype.animationAppendChild = function(child) {
+
+	var startCoords = {
+		top: child.getBoundingClientRect().top,
+		left: child.getBoundingClientRect().left
+	}
+
+	this.appendChild(child);
+
+	var endCoords = {
+		top: child.getBoundingClientRect().top,
+		left: child.getBoundingClientRect().left
+	}
+
+	child.style.display = 'none'; 
+
+	var ghost = document.createElement('div');
+	ghost.className = child.className;
+	ghost.classList.add('ghost');
+	ghost.style.top = startCoords.top - 150 + 'px';
+	ghost.style.left = startCoords.left + 'px';
+	document.body.insertBefore(ghost,document.body.children[0]);
+
+	var queue = document.querySelectorAll('.ghost').length -2;
+	ghost.style.transitionDelay = queue*100 + 'ms';
+
+	setTimeout(function(){
+		ghost.style.top = endCoords.top + 'px';
+		ghost.style.left = endCoords.left + 'px';
+	},0);
+	
+	ghost.addEventListener('transitionend', function(e) {
+		if (!e.target.parentNode)
+			return;
+		child.style.display = '';
+		ghost.parentNode.removeChild(ghost);
+		ghost = null;
+	});
+
+	return child;
+};
diff --git a/Solitare_Game/js/cardDealer.js b/Solitare_Game/js/cardDealer.js
new file mode 100644
index 000000000..dd1ad1357
--- /dev/null
+++ b/Solitare_Game/js/cardDealer.js
@@ -0,0 +1,213 @@
+function CardDealer() {
+
+	var that = this;
+
+	this.shuffle = function(allCardsArr) { 
+		var i = allCardsArr.length;
+		var j, t;
+		while(i) {
+			j =  Math.floor((i--) * Math.random());
+			t = allCardsArr[i];
+			allCardsArr[i] = allCardsArr[j];
+			allCardsArr[j] = t;	
+		}
+	};
+
+	this.reUpload = function(allCardsArr) {
+		var ul = document.createElement('ul');
+		for(var i = 0; i < allCardsArr.length; i++) {
+			var li = document.createElement('li');
+			li.className = 'card closed';
+			li.classList.add(allCardsArr[i]);
+			li.dataset.card = allCardsArr[i];
+			ul.appendChild(li);
+		}
+		cardDeckEl.innerHTML = ul.innerHTML; 
+		ul = null;
+	}
+
+	this.delivery = function(n, opened, animation) {
+		var cols = document.querySelectorAll('.column');
+		var c = 0;
+		
+		for (var i = 0; i< n; i++) {
+			if (opened) {
+				cardDeckEl.lastElementChild.classList.add('open');
+				cardDeckEl.lastElementChild.classList.remove('closed');
+			}
+			
+			animation ?
+				cols[c].animationAppendChild(cardDeckEl.lastElementChild)
+			:	cols[c].appendChild(cardDeckEl.lastElementChild);
+
+			if(++c >= cols.length) 
+				c = 0;	
+		}
+	}
+
+	this.checkEmpty = function (elems) {
+		for (var i = 0; i < elems.length; i++) {
+			if(!elems[i].children[0]) 
+				return true;
+		}
+	}
+
+	this.checkStartDrag = function(target, selectors) {
+		var parent = target.parentNode;
+
+		if ( !target.classList.contains('card') ) {
+			return
+		}
+		if ( !target.classList.contains('open') ) {
+			return;
+		}
+		if ( parent.lastElementChild == target ) {
+			return true;
+		} 
+			
+		var sibling = target.nextElementSibling;
+		var str = '';
+
+		while (sibling) {
+			str += ' + .' + sibling.dataset.card;    //contains s112 if the sibling is the queen of spades
+			sibling = sibling.nextElementSibling;
+		}
+
+		str = '.' + target.dataset.card + str;
+
+		if ( ~selectors.join('').indexOf(str) ) 
+			return true;
+	};
+
+	this.showCongratulation = function() {
+		document.querySelector('.congratulation').style.display = 'block';
+	}
+
+	this.hideCongratulation = function() {
+		document.querySelector('.congratulation').style.display = 'none';
+	}
+
+	this.hint = function(allCards, allPlaces, selectors) {
+		this.hintCount = dealer.hintCount || 0;
+		var find = search(this.hintCount) || search(0);
+		if (!find) return;
+
+		find[0].classList.add('backlight');
+
+		setTimeout(function() {
+			find[1].classList.add('backlight');
+		}, 200);
+
+		setTimeout(function() {
+			find[0].classList.remove('backlight');
+			find[1].classList.remove('backlight');
+		}, 1500);
+
+		function search(position) {
+			for (var i = position; i < allCards.length; i++) {
+				dealer.hintCount = i + 1;
+				if (!dealer.checkStartDrag(allCards[i], selectors))
+					continue;
+				var card1 = +allCards[i].dataset.card.slice(1);  //returns integer like 105
+
+				for (var j = 0; j < allPlaces.length; j++) {
+					if (allCards[i].parentNode == allPlaces[j].parentNode) continue;
+					var card2 = +allPlaces[j].dataset.card.slice(1);
+
+					if (card1 + 1 == card2){ 
+
+						hintSound = new Sound('audio/hint.mp3');
+						hintSound.play();
+						return [allCards[i], allPlaces[j]];
+
+					}
+				}
+			}
+		}
+	};
+
+
+
+	this.showMessage = function(text, left, top) {
+		if (document.getElementById('message1')) { 
+			return;
+		}
+		var el = document.createElement('div');
+		el.innerHTML = text;
+		el.setAttribute('id', 'message1');
+		el.className = 'message';
+		el.style.left = left + 'px';
+		el.style.top = top + 'px';
+		document.body.appendChild(el);
+		setTimeout(function() {
+			document.body.removeChild(el) 
+		}, 2500);
+	}
+
+	this.showFaq = function(){
+		document.getElementById('faq').style.left = '0%'; 
+	}
+
+	this.closeFaq = function(){
+		document.getElementById('faq').style.left = '-100%'; 
+	}
+
+	this.closeScoreBoard = function(){
+		document.getElementById('scoreBoard').style.display = 'none'; 
+	}
+
+
+	this.getLimitHeight = function() {
+		var lowerEl = document.querySelector('.offside');
+		var innerEl = lowerEl.querySelector('.card');
+		var innerHeight = 0;
+		if (innerEl){
+			innerHeight = getComputedStyle(innerEl).height.slice(0, -2); 
+		}
+		return lowerEl.getBoundingClientRect().bottom - innerHeight; 
+		return false;
+	}
+
+	this.setSuitedHeight = function(el, maxHeight) {
+		el.dataset.height = '';	
+		var c = 1;
+		while(el.getBoundingClientRect().bottom > maxHeight) {
+			el.dataset.height = c;
+			if(++c > 5)
+				break;
+		}
+	}
+
+	this.takeAway = function(selectors, dropoutEl, animation) {
+		var coinc = [];
+
+		for (var i = 0; i < selectors.length; i++) {
+			var elems = document.querySelectorAll('.open' + cardDeck.selectors[i]);
+			elems = Array.prototype.slice.call(elems);	
+			coinc = coinc.concat(elems);
+		}
+
+		while (coinc[0]) {
+			var p = coinc.pop().parentNode;
+
+			for (var i = 12; i >= 0; i--) {
+				animation ? 
+					dropoutEl.animationAppendChild(p.lastElementChild) :
+				dropoutEl.appendChild(p.lastElementChild);
+				if (p.children[0]) {
+					p.lastElementChild.classList.add('open');
+					p.lastElementChild.classList.remove('closed');
+				}   
+			}
+		}
+	};
+
+
+
+
+
+
+
+
+}
+
diff --git a/Solitare_Game/js/cardDeck.js b/Solitare_Game/js/cardDeck.js
new file mode 100644
index 000000000..986dd5d41
--- /dev/null
+++ b/Solitare_Game/js/cardDeck.js
@@ -0,0 +1,58 @@
+function CardDeck() {
+	this.suit = ['s','h','c','d'];
+	this.pattern = [];
+	this.selectors = [];
+	this.newDeck = [];
+	this.cards = [];
+
+	var that = this;
+
+	this.getValueFromRadioButton = function(buttons) {
+		for(var i = 0; i < buttons.length; i++) {   
+			this.button = buttons[i];
+
+			if(this.button.checked) {
+				this.radioBtnValue = this.button.value;
+				return this.radioBtnValue;
+			}
+		}
+		return null; 		
+	}
+
+	//Init Start
+	this.init = function() {
+		noOfMoves = 0;
+		for(var i = 0; i <= 12; i++) {
+			this.pattern[i] = i + 101;
+		}
+
+		for(i = 0; i < this.radioBtnValue; i++) {
+			this.selectors[i] = '';
+			for (var j = 12; ;) {
+				this.selectors[i] += '.' + this.suit[i] + this.pattern[j];
+				if(--j < 0){
+					break;
+				}
+				this.selectors[i] += ' + ';		
+			}
+		}
+
+		for (i=0; i < this.radioBtnValue; i++) {
+			this.pattern.forEach(function(item){
+				that.newDeck.push(that.suit[i] + item);
+			});
+		}
+	}
+	
+	this.create = function() {
+		while (104 / this.newDeck.length > 1)	{
+			that.newDeck = that.newDeck.concat(that.newDeck);	
+		}
+		this.cards = that.newDeck; 
+	}
+
+	this.getCards = function() {
+		return this.cards;
+	}
+}
+
diff --git a/Solitare_Game/js/dragEvent.js b/Solitare_Game/js/dragEvent.js
new file mode 100644
index 000000000..6d8f08df4
--- /dev/null
+++ b/Solitare_Game/js/dragEvent.js
@@ -0,0 +1,122 @@
+function DragEvents() {
+	this.el = document.getElementById('drag-el');
+	this.shiftX = 0;
+	this.shiftY = 0;
+	var that = this;
+	this.parentOld = '';
+
+
+	//Start Drag
+	this.startDrag = function(e) { 
+		var t = e.target;		
+		if (!cardDeck || that.el.children[0] || !dealer.checkStartDrag(t, cardDeck.selectors)){
+			return;
+		}
+
+		that.shiftX = e.pageX - t.getBoundingClientRect().left;
+		that.shiftY = e.pageY - t.getBoundingClientRect().top;
+		that.el.style.left = e.pageX - that.shiftX + 'px';
+		that.el.style.top = e.pageY - that.shiftY + 'px';
+
+		while (t != t.parentNode.lastElementChild) {
+			console.log(t.parentNode.lastElementChild);
+			that.el.insertBefore(t.parentNode.lastElementChild, that.el.children[0]);
+		}
+
+		that.parentOld = t.parentNode;
+		that.el.insertBefore(t, that.el.children[0]);
+		e.preventDefault();
+	}
+
+	//Move Drag
+	this.moveDrag = function(e) {
+		if ( !that.el.children[0] ) 
+			return;
+		console.log('pagex',e.pageX);
+		console.log('shiftx',that.shiftX);
+		that.el.style.left = e.pageX - that.shiftX + 'px';
+		that.el.style.top = e.pageY - that.shiftY + 'px';
+
+		e.preventDefault();
+	}
+
+	//End Drag
+	this.endDrag = function() {
+
+		if ( !that.el.children[0] ) 
+			return;
+
+		that.parentNew = that.getDroppable(that.el.children[0], that.parentOld);
+
+		while (that.el.children[0]) {
+			if (that.parentNew) {
+				that.parentNew.appendChild(that.el.children[0]);
+
+			}
+			else
+				that.parentOld.appendChild(that.el.children[0]);
+		}
+
+		if (that.parentNew && that.parentOld.children[0]) {
+			that.parentOld.lastElementChild.classList.add('open');
+			that.parentOld.lastElementChild.classList.remove('closed');
+		}
+
+		if (that.parentNew) {
+			dealer.takeAway(cardDeck.selectors, dropout, true);
+			dealer.setSuitedHeight(that.parentNew, limitHeight);
+			dealer.setSuitedHeight(that.parentOld, limitHeight);
+		}
+
+		if (dropout.children.length == 104){ 
+			dealer.showCongratulation();
+			clearInterval(timeKeeper);
+			UpdateScore();
+			bgSound = new Audio('audio/bg-music.mp3');
+			bgSound.addEventListener('ended', function() {
+				this.currentTime = 0;
+				this.play();
+			}, false);
+			bgSound.play();
+
+
+		}
+	};
+
+	this.getDroppable = function(target, source) { 
+		if (!target) return;
+
+		var pointX = target.getBoundingClientRect().left + target.offsetWidth/2; //offset width = viewable width inc. padding border scrollbar
+		var pointY = target.getBoundingClientRect().top - 3;
+
+		this.container = document.elementFromPoint(pointX, pointY); //returns the top element at the specified coordinates i.e the next hidden card to be opened.		
+		console.log("container",this.container);
+
+		while (this.container) {
+			if (this.container.classList.contains('column'))  //If there is no hidden element 
+				break;
+			this.container = this.container.parentElement;
+		}
+
+		if (!this.container || this.container === source) 
+			return;
+
+		if ( !this.container.children[0] )
+			return this.container;
+
+		var cardNum1 = +target.dataset.card.slice(1); //Returns only a number that can be compared --> Represents target
+		var cardNum2 = +this.container.lastElementChild.dataset.card.slice(1); // Represents last element of new parent
+		if ( cardNum1 + 1 == cardNum2 ) {
+			noOfMoves++;
+			var moves = document.getElementById("score");
+			moves.innerHTML = noOfMoves;	
+			popSound = new Sound('audio/pop.mp3');
+			popSound.play();
+			return this.container;
+		}
+		dragSound = new Sound('audio/drag.mp3');
+		dragSound.play();
+
+	};
+
+}
\ No newline at end of file
diff --git a/Solitare_Game/js/script.js b/Solitare_Game/js/script.js
new file mode 100644
index 000000000..ce16501ce
--- /dev/null
+++ b/Solitare_Game/js/script.js
@@ -0,0 +1,191 @@
+var cardDeckEl = document.getElementById('source'); //Source cards
+var dropout = document.getElementById('dropout');
+
+dragObj = new DragEvents();
+dealer = new CardDealer();
+var timeKeeper = 0;
+var noOfMoves = 0;
+var score = 500;
+var limitHeight, cardDeck;
+
+
+document.getElementById('start-btn').onclick = function() {
+	document.querySelector('.home-screen').style.display = 'none';
+	document.querySelector('.start-form').style.display = 'block';
+	document.querySelector('.control-panel').style.display = 'none';
+}
+
+document.forms.startGame.onsubmit = function(e) {
+	cardDeck = new CardDeck(); 
+	cardDeck.getValueFromRadioButton(this.radioBtn);
+	cardDeck.init();
+	cardDeck.create();		
+
+	dealer = new CardDealer();
+	dealer.shuffle(cardDeck.getCards());
+	dealer.reUpload(cardDeck.getCards()); 
+	dealer.delivery(44,false,true);	
+	dealer.delivery(10,true,true);
+
+	document.querySelector('.control-panel').style.display = 'block';
+	document.querySelector('.timer').style.display = 'block';
+	document.querySelector('.score').style.display = 'block';
+	document.querySelector('.opaque').classList.remove('opaque'); 
+
+	timer = new TimeCounter();
+	timeKeeper = setInterval(timer.setTime, 1000);
+	this.style.display = 'none';
+	return false;
+}
+
+cardDeckEl.onclick = function(e) {
+	if (this.lastElementChild != e.target)
+		return;
+	var empty = dealer.checkEmpty(document.querySelectorAll('.column'));
+	if (empty) {
+		var msg = 'Cannot send cards to empty column';
+		dealer.showMessage(msg,e.pageX-320,e.pageY-80);
+		return;
+	}
+	dealer.delivery(10,true,true);
+	//	dealer.takeAway(cardDeck.selectors, dropout, true);
+	var cols = document.querySelectorAll('.column');
+	limitHeight = dealer.getLimitHeight();
+	for (var i = 0; i < cols.length; i++) {
+		dealer.setSuitedHeight(cols[i], limitHeight);
+	}
+}
+
+var moves = document.getElementById("score");
+
+//On Restart Game Button Click
+document.querySelector('.btn-new').onclick = function(e) {
+	if (!cardDeck) return;
+	if (dropout.children.length == 104) 
+		dealer.hideCongratulation();
+
+	dropout.innerHTML = '';
+	var cols = document.querySelectorAll('.column');
+	for (var i = 0; i < cols.length; i++) {
+		cols[i].innerHTML = '';
+	}
+	dealer.shuffle(cardDeck.getCards());
+	dealer.reUpload(cardDeck.getCards());
+	dealer.delivery(44,false,true);
+	dealer.delivery(10, true,true);
+
+	noOfMoves = 0;
+	var moves = document.getElementById("score");
+	moves.innerHTML = noOfMoves;
+
+	timer = new TimeCounter();
+	clearInterval(timeKeeper);
+	timeKeeper = setInterval(timer.setTime, 1000);
+};
+
+
+document.querySelector('.btn-hint').onclick = function(e) {
+	var allCards = document.querySelectorAll('.column .card.open');
+	var allPlaces = document.querySelectorAll('.column .card.open:last-child');
+	
+	if (allCards.length == 0) {
+		return; 	
+	} 
+	else if (allPlaces.length < 10) {
+		var text = 'Fill all the columns for hint :)';
+		dealer.showMessage(text, e.pageX-80, e.pageY-80);
+		return;
+	}
+	dealer.hint(allCards, allPlaces, cardDeck.selectors);
+};
+
+
+document.addEventListener('touchstart', function(e) {
+	if (e.targetTouches[0].target != e.target) return;
+	dragObj.startDrag(e);
+});
+
+document.addEventListener('mousedown', function(e) {
+	if (e.which != 1){
+		return;   //e.which = returns numeric keycode for the key pressed or mouse pressed. numeric keycode for mouse pressed = 1
+	} 
+	dragObj.startDrag(e);
+});
+
+document.addEventListener('touchmove', dragObj.moveDrag);
+document.addEventListener('mousemove', dragObj.moveDrag);
+
+document.addEventListener('touchend', dragObj.endDrag);
+document.addEventListener('mouseup', dragObj.endDrag);  
+
+
+highScores = document.querySelector('ol#high-scores');
+
+
+var scoreBoard = 	document.getElementById('scoreBoard');
+document.querySelector('#high-score-btn').onclick = function() {
+	scoreBoard.style.display = 'block';
+}
+
+
+function HighScores() {
+	if(typeof(Storage)!=="undefined"){
+		var scores = false;
+		if(localStorage["highScores"]) {
+			highScores.style.display = "block"; 
+			highScores.innerHTML = '';  
+			scores = JSON.parse(localStorage["highScores"]);
+			scores = scores.sort(function(a,b){return parseInt(a)-parseInt(b)});
+
+			for(var i = 0; i < 10; i++){
+				var s = scores[i];     
+
+				var fragment = document.createElement('li');
+				fragment.innerHTML = (typeof(s) != "undefined" ? s : "" );
+				highScores.appendChild(fragment);
+				console.log(highScores);
+			}	
+		}
+	} 
+	else
+	{
+		highScores.style.display = "none";
+	}
+}
+
+
+HighScores();
+
+function UpdateScore() {
+	if(typeof(Storage)!=="undefined"){
+		var current = parseInt(moves.innerHTML); //moves=score
+		var scores = false;
+		if(localStorage["highScores"]) {
+
+			scores = JSON.parse(localStorage["highScores"]);
+			scores = scores.sort(function(a,b){return parseInt(a)-parseInt(b)});
+
+			for(var i = 0; i < 10; i++){
+				var s = parseInt(scores[i]);
+
+				var val = (!isNaN(s) ? s : 0 );
+				if(current > val)
+				{
+					val = current;
+					scores.splice(i, 0, parseInt(current));
+					break;
+				}
+			}
+
+			scores.length = 10;                                
+			localStorage["highScores"] = JSON.stringify(scores);
+
+		} else {                        
+			var scores = new Array();
+			scores[0] = current;
+			localStorage["highScores"] = JSON.stringify(scores);
+		}
+
+		HighScores();
+	} 
+}
\ No newline at end of file
diff --git a/Solitare_Game/js/sound.js b/Solitare_Game/js/sound.js
new file mode 100644
index 000000000..2c297d962
--- /dev/null
+++ b/Solitare_Game/js/sound.js
@@ -0,0 +1,17 @@
+function Sound(src) {
+	this.sound = document.createElement('audio');
+	this.sound.src = src;
+	this.sound.setAttribute('preload','auto');
+	this.sound.setAttribute('controls','none');
+	this.sound.style.display = 'none';
+
+	document.body.appendChild(this.sound);
+
+	this.play = function() {
+		this.sound.play();
+	}
+
+	this.stop = function() {
+		this.sound.pause();
+	}
+}
\ No newline at end of file
diff --git a/Solitare_Game/js/timeCounter.js b/Solitare_Game/js/timeCounter.js
new file mode 100644
index 000000000..6f0019588
--- /dev/null
+++ b/Solitare_Game/js/timeCounter.js
@@ -0,0 +1,26 @@
+function TimeCounter() {
+	this.minutesLabel = document.getElementById("minutes");
+	this.secondsLabel = document.getElementById("seconds");
+	this.totalSeconds = 0;
+	var that = this;
+
+	this.pad = function(val)
+	{
+		var valString = val + "";
+		if(valString.length < 2)
+		{
+			return "0" + valString;
+		}
+		else
+		{
+			return valString;
+		}
+	}
+
+	this.setTime = function()
+	{
+		++that.totalSeconds;
+		that.secondsLabel.innerHTML = that.pad(that.totalSeconds%60);
+		that.minutesLabel.innerHTML = that.pad(parseInt(that.totalSeconds/60));
+	}	
+}
diff --git a/Solitare_Game/js/victoryAnimation.js b/Solitare_Game/js/victoryAnimation.js
new file mode 100644
index 000000000..48f767c0f
--- /dev/null
+++ b/Solitare_Game/js/victoryAnimation.js
@@ -0,0 +1,124 @@
+var ctx = canvas.getContext("2d");
+var w = document.body.clientWidth;
+var h = document.body.clientHeight;
+canvas.width = w;
+canvas.height = h;
+
+var nodes = [];
+
+function draw() {
+	requestAnimationFrame(draw);
+
+	ctx.font = "72px OpenSans";
+	ctx.fillText("You Won!!!",500,300);
+
+	ctx.globalCompositeOperation = "xor";  //defines how new image is drawn in to a existing image
+	ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+	ctx.fillRect(0, 0, w, h);  //left,top,width,height
+	ctx.globalCompositeOperation = "lighter";
+
+	var l = nodes.length;
+	var node;
+	
+	while (l--) {
+		node = nodes[l];
+		drawNode(node);
+		if (node.dead) {
+			nodes.splice(l, 1);
+		}
+	}
+
+	if (nodes.length < 20) {
+		l = rand(4, 1) | 0;
+		while (l--) {
+			nodes.push(
+				makeNode(
+					(Math.random() * w) | 0,
+					(Math.random() * h) | 0,
+					100,
+					"hsl(" + (rand(300, 0) | 0) + ", 100%, 50%)",
+					100
+				)
+			);
+		}
+	}
+}
+
+function drawNode(node) {
+	var l = node.children.length,
+			point;
+	while (l--) {
+		point = node.children[l];
+		ctx.beginPath();
+		ctx.fillStyle = point.color;
+		ctx.arc(point.x, point.y, 1, 0, PI2);
+		ctx.fill();
+		ctx.closePath();
+		updatePoint(point);
+		if (point.dead) {
+			node.children.splice(l, 1);
+			if (node.count >100) {
+				nodes.push(
+					makeNode(point.x, point.y, node.radius * 10, node.color, (node.count / 10) | 0)
+				);
+			}
+		}
+	}
+	if (!node.children.length) {
+		node.dead = true;
+	}
+}
+
+function updatePoint(point) {
+	var dx = point.x - point.dx;
+	var dy = point.y - point.dy;
+	var c = Math.sqrt(dx * dx + dy * dy);
+	point.dead = c < 1;
+	point.x -= dx * point.velocity;
+	point.y -= dy * point.velocity;
+}
+
+const rad = Math.PI / 180;
+const PI2 = Math.PI * 2;
+var ttt = 0;
+
+function rand(max, min) {
+	min = min || 0;
+	return Math.random() * (max - min) + min;
+}
+
+function makeNode(x, y, radius, color, partCount) {
+	radius = radius || 0;
+	partCount = partCount || 0;
+	var count = partCount;
+
+	var children = [];
+	var kof = 0;
+	var r = 0;
+
+	while (partCount--) {
+		kof = (100 * Math.random()) | 0;   //bitwise or
+		r = (radius * Math.random()) | 0;
+		children.push({
+			x: x,
+			y: y,
+			dx: x + r * Math.cos(ttt * kof * rad),
+			dy: y + r * Math.sin(ttt * kof * rad),
+			color: color,
+			velocity: rand(1, 0.06)
+		});
+		ttt++;
+	}
+
+	return {
+		radius: radius,
+		count: count,
+		color: color,
+		x: x,
+		y: y,
+		children: children
+	};
+}
+
+draw();
+
diff --git a/Solitare_Game/screenshots/Screenshot1.png b/Solitare_Game/screenshots/Screenshot1.png
new file mode 100644
index 000000000..0a59afd33
Binary files /dev/null and b/Solitare_Game/screenshots/Screenshot1.png differ
diff --git a/Solitare_Game/screenshots/Screenshot2.png b/Solitare_Game/screenshots/Screenshot2.png
new file mode 100644
index 000000000..61bb73972
Binary files /dev/null and b/Solitare_Game/screenshots/Screenshot2.png differ
diff --git a/Solitare_Game/screenshots/Screenshot3.png b/Solitare_Game/screenshots/Screenshot3.png
new file mode 100644
index 000000000..8e0f5fa6f
Binary files /dev/null and b/Solitare_Game/screenshots/Screenshot3.png differ
diff --git a/SpaceBubbleDodger_Game/index.html b/SpaceBubbleDodger_Game/index.html
new file mode 100644
index 000000000..a4c5927c0
--- /dev/null
+++ b/SpaceBubbleDodger_Game/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Space Bubble Dodger</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="game-container">
+        <canvas id="gameCanvas"></canvas>
+        <div id="score">Score: <span id="scoreValue">0</span></div>
+        <div id="game-over" class="hidden">
+            <h2>Game Over!</h2>
+            <p>Your final score: <span id="finalScore"></span></p>
+            <button id="restartButton">Play again</button>
+        </div>
+    </div>
+    <div id="level-up-popup" class="popup hidden"></div>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/SpaceBubbleDodger_Game/script.js b/SpaceBubbleDodger_Game/script.js
new file mode 100644
index 000000000..b08480a8d
--- /dev/null
+++ b/SpaceBubbleDodger_Game/script.js
@@ -0,0 +1,164 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+canvas.width = 800;
+canvas.height = 600;
+
+let score = 0;
+let bubbles = [];
+let gameOver = false;
+let level = 1;
+let spaceship = {
+    x: canvas.width / 2,
+    y: canvas.height - 50,
+    width: 60,
+    height: 60,
+    speed: 10 // Increased base speed
+};
+
+let bubbleBaseSpeed = 2;
+let bubbleSpeedIncrease = 0.5; // Bubble speed increase per level
+let spaceshipSpeedIncrease = 2; // Speed increase per level for spaceship
+
+function createBubble() {
+    const size = Math.random() * (30 - 10) + 10;
+    const x = Math.random() * (canvas.width - size);
+    bubbles.push({ x, y: 0, size, speed: bubbleBaseSpeed + bubbleSpeedIncrease * (level - 1) });
+}
+
+function drawSpaceship() {
+    ctx.save();
+    ctx.translate(spaceship.x, spaceship.y);
+    
+    // Draw the main body
+    ctx.fillStyle = '#00ffff';
+    ctx.beginPath();
+    ctx.moveTo(0, -spaceship.height / 2);
+    ctx.lineTo(-spaceship.width / 2, spaceship.height / 2);
+    ctx.lineTo(spaceship.width / 2, spaceship.height / 2);
+    ctx.closePath();
+    ctx.fill();
+
+    // Draw the cockpit
+    ctx.fillStyle = '#ffffff';
+    ctx.beginPath();
+    ctx.arc(0, 0, spaceship.width / 6, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Draw the wings
+    ctx.fillStyle = '#ff00ff';
+    ctx.beginPath();
+    ctx.moveTo(-spaceship.width / 2, spaceship.height / 4);
+    ctx.lineTo(-spaceship.width, spaceship.height / 2);
+    ctx.lineTo(-spaceship.width / 2, spaceship.height / 2);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.moveTo(spaceship.width / 2, spaceship.height / 4);
+    ctx.lineTo(spaceship.width, spaceship.height / 2);
+    ctx.lineTo(spaceship.width / 2, spaceship.height / 2);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.restore();
+}
+
+function drawBubbles() {
+    bubbles.forEach(bubble => {
+        ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.7)`;
+        ctx.beginPath();
+        ctx.arc(bubble.x, bubble.y, bubble.size, 0, Math.PI * 2);
+        ctx.fill();
+    });
+}
+
+function update() {
+    if (gameOver) return;
+
+    bubbles.forEach((bubble, index) => {
+        bubble.y += bubble.speed;
+
+        // Collision detection
+        if (
+            bubble.y + bubble.size > spaceship.y - spaceship.height / 2 &&
+            bubble.y - bubble.size < spaceship.y + spaceship.height / 2 &&
+            bubble.x + bubble.size > spaceship.x - spaceship.width / 2 &&
+            bubble.x - bubble.size < spaceship.x + spaceship.width / 2
+        ) {
+            gameOver = true;
+            document.getElementById('game-over').classList.remove('hidden');
+            document.getElementById('finalScore').textContent = score;
+        }
+
+        if (bubble.y - bubble.size > canvas.height) {
+            bubbles.splice(index, 1);
+            score++;
+            document.getElementById('scoreValue').innerText = score;
+
+            // Level up every 5 points
+            if (score % 5 === 0) {
+                level++;
+                showLevelUpPopup();
+                spaceship.speed += spaceshipSpeedIncrease; // Increased speed increment
+                bubbleSpeedIncrease += 0.5; // Increase bubble speed increment
+                createBubble();
+            }
+        }
+    });
+
+    if (bubbles.length < 5) {
+        createBubble();
+    }
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawSpaceship();
+    drawBubbles();
+}
+
+function gameLoop() {
+    update();
+    draw();
+    if (!gameOver) {
+        requestAnimationFrame(gameLoop);
+    }
+}
+
+document.addEventListener('keydown', (e) => {
+    if (gameOver) return;
+    const moveDistance = spaceship.speed;
+    if (e.code === 'ArrowLeft' && spaceship.x > spaceship.width / 2) {
+        spaceship.x = Math.max(spaceship.x - moveDistance, spaceship.width / 2);
+    } else if (e.code === 'ArrowRight' && spaceship.x < canvas.width - spaceship.width / 2) {
+        spaceship.x = Math.min(spaceship.x + moveDistance, canvas.width - spaceship.width / 2);
+    }
+});
+
+document.getElementById('restartButton').addEventListener('click', () => {
+    score = 0;
+    bubbles = [];
+    gameOver = false;
+    level = 1;
+    spaceship.speed = 10; // Reset to new base speed
+    document.getElementById('scoreValue').innerText = score;
+    document.getElementById('game-over').classList.add('hidden');
+    spaceship.x = canvas.width / 2;
+    gameLoop();
+});
+
+function showLevelUpPopup() {
+    const popup = document.getElementById('level-up-popup');
+    popup.textContent = `Level Up! Now at Level ${level}`;
+    popup.classList.remove('hidden');
+    popup.style.opacity = 1;
+    setTimeout(() => {
+        popup.style.opacity = 0;
+        setTimeout(() => {
+            popup.classList.add('hidden');
+        }, 500);
+    }, 2000);
+}
+
+// Start the game loop
+gameLoop();
\ No newline at end of file
diff --git a/SpaceBubbleDodger_Game/style.css b/SpaceBubbleDodger_Game/style.css
new file mode 100644
index 000000000..da788f5ff
--- /dev/null
+++ b/SpaceBubbleDodger_Game/style.css
@@ -0,0 +1,63 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #000;
+    font-family: Arial, sans-serif;
+}
+
+#game-container {
+    position: relative;
+}
+
+#gameCanvas {
+    border: 2px solid #fff;
+}
+
+#score {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: #fff;
+    font-size: 20px;
+}
+
+#game-over {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+    border-radius: 10px;
+}
+
+#restartButton {
+    margin-top: 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.hidden {
+    display: none;
+}
+
+.popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.5s;
+}
\ No newline at end of file
diff --git a/Task Planner/index.html b/Task Planner/index.html
new file mode 100644
index 000000000..c07cea819
--- /dev/null
+++ b/Task Planner/index.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Task Planner</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div id="app">
+        <h1>Task Planner</h1>
+        <form id="task-form">
+            <label for="task-title">Task Title</label>
+            <input type="text" id="task-title" placeholder="Enter your task title" required>
+
+            <label for="task-desc">Description</label>
+            <textarea id="task-desc" placeholder="Task description (optional)"></textarea>
+
+            <label for="task-date">Due Date</label>
+            <input type="date" id="task-date" required>
+
+            <label for="task-time">Alarm Time</label>
+            <input type="time" id="task-time" placeholder="Set alarm time (optional)">
+
+            <button type="submit">Add Task</button>
+        </form>
+
+        <div id="task-list"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Task Planner/script.js b/Task Planner/script.js
new file mode 100644
index 000000000..3728d40a8
--- /dev/null
+++ b/Task Planner/script.js	
@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.getElementById("task-form");
+  const taskList = document.getElementById("task-list");
+  let editMode = false;
+  let editId = null;
+
+  function loadTasks() {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    taskList.innerHTML = "";
+    tasks.forEach((task) => displayTask(task));
+  }
+
+  function saveAllTasks(tasks) {
+    localStorage.setItem("tasks", JSON.stringify(tasks));
+  }
+
+  function saveTask(task) {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    if (editMode) {
+      const index = tasks.findIndex((t) => t.id === editId);
+      if (index !== -1) {
+        tasks[index] = task;
+      }
+      editMode = false;
+      editId = null;
+    } else {
+      tasks.push(task);
+    }
+    saveAllTasks(tasks);
+  }
+
+  function displayTask(task) {
+    const taskItem = document.createElement("div");
+    taskItem.className = "task";
+    taskItem.innerHTML = `
+        <h3>${task.title}</h3>
+        <p>${task.description}</p>
+        <p>Due: ${task.date}</p>
+        <button onclick="editTask('${task.id}')">Edit</button>
+        <button onclick="deleteTask('${task.id}')">Delete</button>
+      `;
+    taskList.appendChild(taskItem);
+  }
+
+  window.editTask = function (id) {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    const task = tasks.find((t) => t.id === id);
+    if (task) {
+      document.getElementById("task-title").value = task.title;
+      document.getElementById("task-desc").value = task.description;
+      document.getElementById("task-date").value = task.date;
+      editMode = true;
+      editId = id;
+    }
+  };
+
+  window.deleteTask = function (id) {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    const updatedTasks = tasks.filter((task) => task.id !== id);
+    saveAllTasks(updatedTasks);
+    loadTasks();
+  };
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const task = {
+      id: editMode ? editId : Date.now().toString(),
+      title: document.getElementById("task-title").value,
+      description: document.getElementById("task-desc").value,
+      date: document.getElementById("task-date").value,
+    };
+    saveTask(task);
+    loadTasks();
+    form.reset();
+  });
+
+  loadTasks();
+});
diff --git a/Task Planner/style.css b/Task Planner/style.css
new file mode 100644
index 000000000..717b40aac
--- /dev/null
+++ b/Task Planner/style.css	
@@ -0,0 +1,86 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(135deg, teal 0%, #367588 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
+  
+  #app {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    max-width: 500px;
+    padding: 20px;
+  }
+  
+  form {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  form label {
+    font-weight: bold;
+    margin: 8px 0 4px;
+  }
+  
+  form input, form textarea, form button {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    margin-bottom: 15px;
+  }
+  
+  form button {
+    background-color: #ff7f50;
+    color: #fff;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  form button:hover {
+    background-color: #ff6347;
+  }
+  
+  .task {
+    background: #f5f5f5;
+    border-left: 5px solid #ff7f50;
+    margin: 10px 0;
+    padding: 15px;
+    border-radius: 5px;
+  }
+  
+  .task h3 {
+    color: #333;
+    margin-bottom: 5px;
+  }
+  
+  .task button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: #ff6347;
+    font-weight: bold;
+    margin-left: 5px;
+    transition: color 0.3s;
+  }
+  
+  .task button:hover {
+    color: #ff4500;
+  }
+  
+  @media (max-width: 600px) {
+    #app {
+      padding: 15px;
+    }
+  }
+  
\ No newline at end of file
diff --git a/The 3D Cube game/index.html b/The 3D Cube game/index.html
new file mode 100644
index 000000000..38a79ac7e
--- /dev/null
+++ b/The 3D Cube game/index.html	
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="script" href="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js">
+    <title>Document</title>
+</head>
+
+<body>
+
+    <div class="ui">
+
+        <div class="ui__background"></div>
+
+        <div class="ui__game"></div>
+
+        <div class="ui__texts">
+            <h1 class="text text--title">
+                <span>THE</span>
+                <span>CUBE</span>
+            </h1>
+            <div class="text text--note">
+                Double tap to start
+            </div>
+            <div class="text text--timer">
+                0:00
+            </div>
+            <div class="text text--complete">
+                <span>Complete!</span>
+            </div>
+            <div class="text text--best-time">
+                <icon trophy></icon>
+                <span>Best Time!</span>
+            </div>
+        </div>
+
+        <div class="ui__prefs">
+            <range name="size" title="Cube Size" list="2,3,4,5"></range>
+            <range name="flip" title="Flip Type" list="Swift&nbsp;,Smooth,Bounce"></range>
+            <range name="scramble" title="Scramble Length" list="20,25,30"></range>
+            <range name="fov" title="Camera Angle" list="Ortographic,Perspective"></range>
+            <range name="theme" title="Color Scheme" list="Cube,Erno,Dust,Camo,Rain"></range>
+        </div>
+
+        <div class="ui__theme">
+            <range name="hue" title="Hue" color></range>
+            <range name="saturation" title="Saturation" color></range>
+            <range name="lightness" title="Lightness" color></range>
+        </div>
+
+        <div class="ui__stats">
+            <div class="stats" name="cube-size">
+                <i>Cube:</i><b>3x3x3</b>
+            </div>
+            <div class="stats" name="total-solves">
+                <i>Total solves:</i><b>-</b>
+            </div>
+            <div class="stats" name="best-time">
+                <i>Best time:</i><b>-</b>
+            </div>
+            <div class="stats" name="worst-time">
+                <i>Worst time:</i><b>-</b>
+            </div>
+            <div class="stats" name="average-5">
+                <i>Average of 5:</i><b>-</b>
+            </div>
+            <div class="stats" name="average-12">
+                <i>Average of 12:</i><b>-</b>
+            </div>
+            <div class="stats" name="average-25">
+                <i>Average of 25:</i><b>-</b>
+            </div>
+        </div>
+
+        <div class="ui__buttons">
+            <button class="btn btn--bl btn--stats">
+                <icon trophy></icon>
+            </button>
+            <button class="btn btn--br btn--prefs">
+                <icon settings></icon>
+            </button>
+            <button class="btn btn--bl btn--back">
+                <icon back></icon>
+            </button>
+            <button class="btn btn--br btn--theme">
+                <icon theme></icon>
+            </button>
+            <button class="btn btn--br btn--reset">
+                <icon reset></icon>
+            </button>
+        </div>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/The 3D Cube game/script.js b/The 3D Cube game/script.js
new file mode 100644
index 000000000..115b7962a
--- /dev/null
+++ b/The 3D Cube game/script.js	
@@ -0,0 +1,3760 @@
+// Three.js - https://github.com/mrdoob/three.js/
+// RoundedBoxGeometry - https://github.com/pailhead/three-rounded-box
+
+const animationEngine = (() => {
+    let uniqueID = 0;
+
+    class AnimationEngine {
+        constructor() {
+            this.ids = [];
+            this.animations = {};
+            this.update = this.update.bind(this);
+            this.raf = 0;
+            this.time = 0;
+        }
+
+        update() {
+            const now = performance.now();
+            const delta = now - this.time;
+            this.time = now;
+
+            let i = this.ids.length;
+
+            this.raf = i ? requestAnimationFrame(this.update) : 0;
+
+            while (i--)
+                this.animations[this.ids[i]] &&
+                    this.animations[this.ids[i]].update(delta);
+        }
+
+        add(animation) {
+            animation.id = uniqueID++;
+
+            this.ids.push(animation.id);
+            this.animations[animation.id] = animation;
+
+            if (this.raf !== 0) return;
+
+            this.time = performance.now();
+            this.raf = requestAnimationFrame(this.update);
+        }
+
+        remove(animation) {
+            const index = this.ids.indexOf(animation.id);
+
+            if (index < 0) return;
+
+            this.ids.splice(index, 1);
+            delete this.animations[animation.id];
+            animation = null;
+        }
+    }
+
+    return new AnimationEngine();
+})();
+
+class Animation {
+    constructor(start) {
+        if (start === true) this.start();
+    }
+
+    start() {
+        animationEngine.add(this);
+    }
+
+    stop() {
+        animationEngine.remove(this);
+    }
+
+    update(delta) {}
+}
+
+class World extends Animation {
+    constructor(game) {
+        super(true);
+
+        this.game = game;
+
+        this.container = this.game.dom.game;
+        this.scene = new THREE.Scene();
+
+        this.renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            alpha: true,
+        });
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.container.appendChild(this.renderer.domElement);
+
+        this.camera = new THREE.PerspectiveCamera(2, 1, 0.1, 10000);
+
+        this.stage = { width: 2, height: 3 };
+        this.fov = 10;
+
+        this.createLights();
+
+        this.onResize = [];
+
+        this.resize();
+        window.addEventListener("resize", () => this.resize(), false);
+    }
+
+    update() {
+        this.renderer.render(this.scene, this.camera);
+    }
+
+    resize() {
+        this.width = this.container.offsetWidth;
+        this.height = this.container.offsetHeight;
+
+        this.renderer.setSize(this.width, this.height);
+
+        this.camera.fov = this.fov;
+        this.camera.aspect = this.width / this.height;
+
+        const aspect = this.stage.width / this.stage.height;
+        const fovRad = this.fov * THREE.Math.DEG2RAD;
+
+        let distance =
+            aspect < this.camera.aspect
+                ? this.stage.height / 2 / Math.tan(fovRad / 2)
+                : this.stage.width /
+                  this.camera.aspect /
+                  (2 * Math.tan(fovRad / 2));
+
+        distance *= 0.5;
+
+        this.camera.position.set(distance, distance, distance);
+        this.camera.lookAt(this.scene.position);
+        this.camera.updateProjectionMatrix();
+
+        const docFontSize =
+            aspect < this.camera.aspect
+                ? (this.height / 100) * aspect
+                : this.width / 100;
+
+        document.documentElement.style.fontSize = docFontSize + "px";
+
+        if (this.onResize) this.onResize.forEach((cb) => cb());
+    }
+
+    createLights() {
+        this.lights = {
+            holder: new THREE.Object3D(),
+            ambient: new THREE.AmbientLight(0xffffff, 0.69),
+            front: new THREE.DirectionalLight(0xffffff, 0.36),
+            back: new THREE.DirectionalLight(0xffffff, 0.19),
+        };
+
+        this.lights.front.position.set(1.5, 5, 3);
+        this.lights.back.position.set(-1.5, -5, -3);
+
+        this.lights.holder.add(this.lights.ambient);
+        this.lights.holder.add(this.lights.front);
+        this.lights.holder.add(this.lights.back);
+
+        this.scene.add(this.lights.holder);
+    }
+}
+
+function RoundedBoxGeometry(size, radius, radiusSegments) {
+    THREE.BufferGeometry.call(this);
+
+    this.type = "RoundedBoxGeometry";
+
+    radiusSegments = !isNaN(radiusSegments)
+        ? Math.max(1, Math.floor(radiusSegments))
+        : 1;
+
+    var width, height, depth;
+
+    width = height = depth = size;
+    radius = size * radius;
+
+    radius = Math.min(
+        radius,
+        Math.min(width, Math.min(height, Math.min(depth))) / 2
+    );
+
+    var edgeHalfWidth = width / 2 - radius;
+    var edgeHalfHeight = height / 2 - radius;
+    var edgeHalfDepth = depth / 2 - radius;
+
+    this.parameters = {
+        width: width,
+        height: height,
+        depth: depth,
+        radius: radius,
+        radiusSegments: radiusSegments,
+    };
+
+    var rs1 = radiusSegments + 1;
+    var totalVertexCount = (rs1 * radiusSegments + 1) << 3;
+
+    var positions = new THREE.BufferAttribute(
+        new Float32Array(totalVertexCount * 3),
+        3
+    );
+    var normals = new THREE.BufferAttribute(
+        new Float32Array(totalVertexCount * 3),
+        3
+    );
+
+    var cornerVerts = [],
+        cornerNormals = [],
+        normal = new THREE.Vector3(),
+        vertex = new THREE.Vector3(),
+        vertexPool = [],
+        normalPool = [],
+        indices = [];
+    var lastVertex = rs1 * radiusSegments,
+        cornerVertNumber = rs1 * radiusSegments + 1;
+    doVertices();
+    doFaces();
+    doCorners();
+    doHeightEdges();
+    doWidthEdges();
+    doDepthEdges();
+
+    function doVertices() {
+        var cornerLayout = [
+            new THREE.Vector3(1, 1, 1),
+            new THREE.Vector3(1, 1, -1),
+            new THREE.Vector3(-1, 1, -1),
+            new THREE.Vector3(-1, 1, 1),
+            new THREE.Vector3(1, -1, 1),
+            new THREE.Vector3(1, -1, -1),
+            new THREE.Vector3(-1, -1, -1),
+            new THREE.Vector3(-1, -1, 1),
+        ];
+
+        for (var j = 0; j < 8; j++) {
+            cornerVerts.push([]);
+            cornerNormals.push([]);
+        }
+
+        var PIhalf = Math.PI / 2;
+        var cornerOffset = new THREE.Vector3(
+            edgeHalfWidth,
+            edgeHalfHeight,
+            edgeHalfDepth
+        );
+
+        for (var y = 0; y <= radiusSegments; y++) {
+            var v = y / radiusSegments;
+            var va = v * PIhalf;
+            var cosVa = Math.cos(va);
+            var sinVa = Math.sin(va);
+
+            if (y == radiusSegments) {
+                vertex.set(0, 1, 0);
+                var vert = vertex
+                    .clone()
+                    .multiplyScalar(radius)
+                    .add(cornerOffset);
+                cornerVerts[0].push(vert);
+                vertexPool.push(vert);
+                var norm = vertex.clone();
+                cornerNormals[0].push(norm);
+                normalPool.push(norm);
+                continue;
+            }
+
+            for (var x = 0; x <= radiusSegments; x++) {
+                var u = x / radiusSegments;
+                var ha = u * PIhalf;
+                vertex.x = cosVa * Math.cos(ha);
+                vertex.y = sinVa;
+                vertex.z = cosVa * Math.sin(ha);
+
+                var vert = vertex
+                    .clone()
+                    .multiplyScalar(radius)
+                    .add(cornerOffset);
+                cornerVerts[0].push(vert);
+                vertexPool.push(vert);
+
+                var norm = vertex.clone().normalize();
+                cornerNormals[0].push(norm);
+                normalPool.push(norm);
+            }
+        }
+
+        for (var i = 1; i < 8; i++) {
+            for (var j = 0; j < cornerVerts[0].length; j++) {
+                var vert = cornerVerts[0][j].clone().multiply(cornerLayout[i]);
+                cornerVerts[i].push(vert);
+                vertexPool.push(vert);
+
+                var norm = cornerNormals[0][j]
+                    .clone()
+                    .multiply(cornerLayout[i]);
+                cornerNormals[i].push(norm);
+                normalPool.push(norm);
+            }
+        }
+    }
+
+    function doCorners() {
+        var flips = [true, false, true, false, false, true, false, true];
+
+        var lastRowOffset = rs1 * (radiusSegments - 1);
+
+        for (var i = 0; i < 8; i++) {
+            var cornerOffset = cornerVertNumber * i;
+
+            for (var v = 0; v < radiusSegments - 1; v++) {
+                var r1 = v * rs1;
+                var r2 = (v + 1) * rs1;
+
+                for (var u = 0; u < radiusSegments; u++) {
+                    var u1 = u + 1;
+                    var a = cornerOffset + r1 + u;
+                    var b = cornerOffset + r1 + u1;
+                    var c = cornerOffset + r2 + u;
+                    var d = cornerOffset + r2 + u1;
+
+                    if (!flips[i]) {
+                        indices.push(a);
+                        indices.push(b);
+                        indices.push(c);
+
+                        indices.push(b);
+                        indices.push(d);
+                        indices.push(c);
+                    } else {
+                        indices.push(a);
+                        indices.push(c);
+                        indices.push(b);
+
+                        indices.push(b);
+                        indices.push(c);
+                        indices.push(d);
+                    }
+                }
+            }
+
+            for (var u = 0; u < radiusSegments; u++) {
+                var a = cornerOffset + lastRowOffset + u;
+                var b = cornerOffset + lastRowOffset + u + 1;
+                var c = cornerOffset + lastVertex;
+
+                if (!flips[i]) {
+                    indices.push(a);
+                    indices.push(b);
+                    indices.push(c);
+                } else {
+                    indices.push(a);
+                    indices.push(c);
+                    indices.push(b);
+                }
+            }
+        }
+    }
+
+    function doFaces() {
+        var a = lastVertex;
+        var b = lastVertex + cornerVertNumber;
+        var c = lastVertex + cornerVertNumber * 2;
+        var d = lastVertex + cornerVertNumber * 3;
+
+        indices.push(a);
+        indices.push(b);
+        indices.push(c);
+        indices.push(a);
+        indices.push(c);
+        indices.push(d);
+
+        a = lastVertex + cornerVertNumber * 4;
+        b = lastVertex + cornerVertNumber * 5;
+        c = lastVertex + cornerVertNumber * 6;
+        d = lastVertex + cornerVertNumber * 7;
+
+        indices.push(a);
+        indices.push(c);
+        indices.push(b);
+        indices.push(a);
+        indices.push(d);
+        indices.push(c);
+
+        a = 0;
+        b = cornerVertNumber;
+        c = cornerVertNumber * 4;
+        d = cornerVertNumber * 5;
+
+        indices.push(a);
+        indices.push(c);
+        indices.push(b);
+        indices.push(b);
+        indices.push(c);
+        indices.push(d);
+
+        a = cornerVertNumber * 2;
+        b = cornerVertNumber * 3;
+        c = cornerVertNumber * 6;
+        d = cornerVertNumber * 7;
+
+        indices.push(a);
+        indices.push(c);
+        indices.push(b);
+        indices.push(b);
+        indices.push(c);
+        indices.push(d);
+
+        a = radiusSegments;
+        b = radiusSegments + cornerVertNumber * 3;
+        c = radiusSegments + cornerVertNumber * 4;
+        d = radiusSegments + cornerVertNumber * 7;
+
+        indices.push(a);
+        indices.push(b);
+        indices.push(c);
+        indices.push(b);
+        indices.push(d);
+        indices.push(c);
+
+        a = radiusSegments + cornerVertNumber;
+        b = radiusSegments + cornerVertNumber * 2;
+        c = radiusSegments + cornerVertNumber * 5;
+        d = radiusSegments + cornerVertNumber * 6;
+
+        indices.push(a);
+        indices.push(c);
+        indices.push(b);
+        indices.push(b);
+        indices.push(c);
+        indices.push(d);
+    }
+
+    function doHeightEdges() {
+        for (var i = 0; i < 4; i++) {
+            var cOffset = i * cornerVertNumber;
+            var cRowOffset = 4 * cornerVertNumber + cOffset;
+            var needsFlip = i & (1 === 1);
+
+            for (var u = 0; u < radiusSegments; u++) {
+                var u1 = u + 1;
+                var a = cOffset + u;
+                var b = cOffset + u1;
+                var c = cRowOffset + u;
+                var d = cRowOffset + u1;
+
+                if (!needsFlip) {
+                    indices.push(a);
+                    indices.push(b);
+                    indices.push(c);
+                    indices.push(b);
+                    indices.push(d);
+                    indices.push(c);
+                } else {
+                    indices.push(a);
+                    indices.push(c);
+                    indices.push(b);
+                    indices.push(b);
+                    indices.push(c);
+                    indices.push(d);
+                }
+            }
+        }
+    }
+
+    function doDepthEdges() {
+        var cStarts = [0, 2, 4, 6];
+        var cEnds = [1, 3, 5, 7];
+
+        for (var i = 0; i < 4; i++) {
+            var cStart = cornerVertNumber * cStarts[i];
+            var cEnd = cornerVertNumber * cEnds[i];
+
+            var needsFlip = 1 >= i;
+
+            for (var u = 0; u < radiusSegments; u++) {
+                var urs1 = u * rs1;
+                var u1rs1 = (u + 1) * rs1;
+
+                var a = cStart + urs1;
+                var b = cStart + u1rs1;
+                var c = cEnd + urs1;
+                var d = cEnd + u1rs1;
+
+                if (needsFlip) {
+                    indices.push(a);
+                    indices.push(c);
+                    indices.push(b);
+                    indices.push(b);
+                    indices.push(c);
+                    indices.push(d);
+                } else {
+                    indices.push(a);
+                    indices.push(b);
+                    indices.push(c);
+                    indices.push(b);
+                    indices.push(d);
+                    indices.push(c);
+                }
+            }
+        }
+    }
+
+    function doWidthEdges() {
+        var end = radiusSegments - 1;
+
+        var cStarts = [0, 1, 4, 5];
+        var cEnds = [3, 2, 7, 6];
+        var needsFlip = [0, 1, 1, 0];
+
+        for (var i = 0; i < 4; i++) {
+            var cStart = cStarts[i] * cornerVertNumber;
+            var cEnd = cEnds[i] * cornerVertNumber;
+
+            for (var u = 0; u <= end; u++) {
+                var a = cStart + radiusSegments + u * rs1;
+                var b =
+                    cStart +
+                    (u != end
+                        ? radiusSegments + (u + 1) * rs1
+                        : cornerVertNumber - 1);
+
+                var c = cEnd + radiusSegments + u * rs1;
+                var d =
+                    cEnd +
+                    (u != end
+                        ? radiusSegments + (u + 1) * rs1
+                        : cornerVertNumber - 1);
+
+                if (!needsFlip[i]) {
+                    indices.push(a);
+                    indices.push(b);
+                    indices.push(c);
+                    indices.push(b);
+                    indices.push(d);
+                    indices.push(c);
+                } else {
+                    indices.push(a);
+                    indices.push(c);
+                    indices.push(b);
+                    indices.push(b);
+                    indices.push(c);
+                    indices.push(d);
+                }
+            }
+        }
+    }
+
+    var index = 0;
+
+    for (var i = 0; i < vertexPool.length; i++) {
+        positions.setXYZ(
+            index,
+            vertexPool[i].x,
+            vertexPool[i].y,
+            vertexPool[i].z
+        );
+
+        normals.setXYZ(
+            index,
+            normalPool[i].x,
+            normalPool[i].y,
+            normalPool[i].z
+        );
+
+        index++;
+    }
+
+    this.setIndex(new THREE.BufferAttribute(new Uint16Array(indices), 1));
+    this.addAttribute("position", positions);
+    this.addAttribute("normal", normals);
+}
+
+RoundedBoxGeometry.prototype = Object.create(THREE.BufferGeometry.prototype);
+RoundedBoxGeometry.constructor = RoundedBoxGeometry;
+
+function RoundedPlaneGeometry(size, radius, depth) {
+    var x, y, width, height;
+
+    x = y = -size / 2;
+    width = height = size;
+    radius = size * radius;
+
+    const shape = new THREE.Shape();
+
+    shape.moveTo(x, y + radius);
+    shape.lineTo(x, y + height - radius);
+    shape.quadraticCurveTo(x, y + height, x + radius, y + height);
+    shape.lineTo(x + width - radius, y + height);
+    shape.quadraticCurveTo(
+        x + width,
+        y + height,
+        x + width,
+        y + height - radius
+    );
+    shape.lineTo(x + width, y + radius);
+    shape.quadraticCurveTo(x + width, y, x + width - radius, y);
+    shape.lineTo(x + radius, y);
+    shape.quadraticCurveTo(x, y, x, y + radius);
+
+    const geometry = new THREE.ExtrudeBufferGeometry(shape, {
+        depth: depth,
+        bevelEnabled: false,
+        curveSegments: 3,
+    });
+
+    return geometry;
+}
+
+class Cube {
+    constructor(game) {
+        this.game = game;
+        this.size = 3;
+
+        this.geometry = {
+            pieceCornerRadius: 0.12,
+            edgeCornerRoundness: 0.15,
+            edgeScale: 0.82,
+            edgeDepth: 0.01,
+        };
+
+        this.holder = new THREE.Object3D();
+        this.object = new THREE.Object3D();
+        this.animator = new THREE.Object3D();
+
+        this.holder.add(this.animator);
+        this.animator.add(this.object);
+
+        this.game.world.scene.add(this.holder);
+    }
+
+    init() {
+        this.cubes = [];
+        this.object.children = [];
+        this.object.add(this.game.controls.group);
+
+        if (this.size === 2) this.scale = 1.25;
+        else if (this.size === 3) this.scale = 1;
+        else if (this.size > 3) this.scale = 3 / this.size;
+
+        this.object.scale.set(this.scale, this.scale, this.scale);
+
+        const controlsScale = this.size === 2 ? 0.825 : 1;
+        this.game.controls.edges.scale.set(
+            controlsScale,
+            controlsScale,
+            controlsScale
+        );
+
+        this.generatePositions();
+        this.generateModel();
+
+        this.pieces.forEach((piece) => {
+            this.cubes.push(piece.userData.cube);
+            this.object.add(piece);
+        });
+
+        this.holder.traverse((node) => {
+            if (node.frustumCulled) node.frustumCulled = false;
+        });
+
+        this.updateColors(this.game.themes.getColors());
+
+        this.sizeGenerated = this.size;
+    }
+
+    resize(force = false) {
+        if (this.size !== this.sizeGenerated || force) {
+            this.size = this.game.preferences.ranges.size.value;
+
+            this.reset();
+            this.init();
+
+            this.game.saved = false;
+            this.game.timer.reset();
+            this.game.storage.clearGame();
+        }
+    }
+
+    reset() {
+        this.game.controls.edges.rotation.set(0, 0, 0);
+
+        this.holder.rotation.set(0, 0, 0);
+        this.object.rotation.set(0, 0, 0);
+        this.animator.rotation.set(0, 0, 0);
+    }
+
+    generatePositions() {
+        const m = this.size - 1;
+        const first =
+            this.size % 2 !== 0
+                ? 0 - Math.floor(this.size / 2)
+                : 0.5 - this.size / 2;
+
+        let x, y, z;
+
+        this.positions = [];
+
+        for (x = 0; x < this.size; x++) {
+            for (y = 0; y < this.size; y++) {
+                for (z = 0; z < this.size; z++) {
+                    let position = new THREE.Vector3(
+                        first + x,
+                        first + y,
+                        first + z
+                    );
+                    let edges = [];
+
+                    if (x == 0) edges.push(0);
+                    if (x == m) edges.push(1);
+                    if (y == 0) edges.push(2);
+                    if (y == m) edges.push(3);
+                    if (z == 0) edges.push(4);
+                    if (z == m) edges.push(5);
+
+                    position.edges = edges;
+                    this.positions.push(position);
+                }
+            }
+        }
+    }
+
+    generateModel() {
+        this.pieces = [];
+        this.edges = [];
+
+        const pieceSize = 1 / 3;
+
+        const mainMaterial = new THREE.MeshLambertMaterial();
+
+        const pieceMesh = new THREE.Mesh(
+            new RoundedBoxGeometry(
+                pieceSize,
+                this.geometry.pieceCornerRadius,
+                3
+            ),
+            mainMaterial.clone()
+        );
+
+        const edgeGeometry = RoundedPlaneGeometry(
+            pieceSize,
+            this.geometry.edgeCornerRoundness,
+            this.geometry.edgeDepth
+        );
+
+        this.positions.forEach((position, index) => {
+            const piece = new THREE.Object3D();
+            const pieceCube = pieceMesh.clone();
+            const pieceEdges = [];
+
+            piece.position.copy(position.clone().divideScalar(3));
+            piece.add(pieceCube);
+            piece.name = index;
+            piece.edgesName = "";
+
+            position.edges.forEach((position) => {
+                const edge = new THREE.Mesh(edgeGeometry, mainMaterial.clone());
+                const name = ["L", "R", "D", "U", "B", "F"][position];
+                const distance = pieceSize / 2;
+
+                edge.position.set(
+                    distance * [-1, 1, 0, 0, 0, 0][position],
+                    distance * [0, 0, -1, 1, 0, 0][position],
+                    distance * [0, 0, 0, 0, -1, 1][position]
+                );
+
+                edge.rotation.set(
+                    (Math.PI / 2) * [0, 0, 1, -1, 0, 0][position],
+                    (Math.PI / 2) * [-1, 1, 0, 0, 2, 0][position],
+                    0
+                );
+
+                edge.scale.set(
+                    this.geometry.edgeScale,
+                    this.geometry.edgeScale,
+                    this.geometry.edgeScale
+                );
+
+                edge.name = name;
+
+                piece.add(edge);
+                pieceEdges.push(name);
+                this.edges.push(edge);
+            });
+
+            piece.userData.edges = pieceEdges;
+            piece.userData.cube = pieceCube;
+
+            piece.userData.start = {
+                position: piece.position.clone(),
+                rotation: piece.rotation.clone(),
+            };
+
+            this.pieces.push(piece);
+        });
+    }
+
+    updateColors(colors) {
+        if (typeof this.pieces !== "object" && typeof this.edges !== "object")
+            return;
+
+        this.pieces.forEach((piece) =>
+            piece.userData.cube.material.color.setHex(colors.P)
+        );
+        this.edges.forEach((edge) =>
+            edge.material.color.setHex(colors[edge.name])
+        );
+    }
+
+    loadFromData(data) {
+        this.size = data.size;
+
+        this.reset();
+        this.init();
+
+        this.pieces.forEach((piece) => {
+            const index = data.names.indexOf(piece.name);
+
+            const position = data.positions[index];
+            const rotation = data.rotations[index];
+
+            piece.position.set(position.x, position.y, position.z);
+            piece.rotation.set(rotation.x, rotation.y, rotation.z);
+        });
+    }
+}
+
+const Easing = {
+    Power: {
+        In: (power) => {
+            power = Math.round(power || 1);
+
+            return (t) => Math.pow(t, power);
+        },
+
+        Out: (power) => {
+            power = Math.round(power || 1);
+
+            return (t) => 1 - Math.abs(Math.pow(t - 1, power));
+        },
+
+        InOut: (power) => {
+            power = Math.round(power || 1);
+
+            return (t) =>
+                t < 0.5
+                    ? Math.pow(t * 2, power) / 2
+                    : (1 - Math.abs(Math.pow(t * 2 - 1 - 1, power))) / 2 + 0.5;
+        },
+    },
+
+    Sine: {
+        In: () => (t) => 1 + Math.sin((Math.PI / 2) * t - Math.PI / 2),
+
+        Out: () => (t) => Math.sin((Math.PI / 2) * t),
+
+        InOut: () => (t) => (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2,
+    },
+
+    Back: {
+        Out: (s) => {
+            s = s || 1.70158;
+
+            return (t) => {
+                return (t -= 1) * t * ((s + 1) * t + s) + 1;
+            };
+        },
+
+        In: (s) => {
+            s = s || 1.70158;
+
+            return (t) => {
+                return t * t * ((s + 1) * t - s);
+            };
+        },
+    },
+
+    Elastic: {
+        Out: (amplitude, period) => {
+            let PI2 = Math.PI * 2;
+
+            let p1 = amplitude >= 1 ? amplitude : 1;
+            let p2 = (period || 0.3) / (amplitude < 1 ? amplitude : 1);
+            let p3 = (p2 / PI2) * (Math.asin(1 / p1) || 0);
+
+            p2 = PI2 / p2;
+
+            return (t) => {
+                return p1 * Math.pow(2, -10 * t) * Math.sin((t - p3) * p2) + 1;
+            };
+        },
+    },
+};
+
+class Tween extends Animation {
+    constructor(options) {
+        super(false);
+
+        this.duration = options.duration || 500;
+        this.easing = options.easing || ((t) => t);
+        this.onUpdate = options.onUpdate || (() => {});
+        this.onComplete = options.onComplete || (() => {});
+
+        this.delay = options.delay || false;
+        this.yoyo = options.yoyo ? false : null;
+
+        this.progress = 0;
+        this.value = 0;
+        this.delta = 0;
+
+        this.getFromTo(options);
+
+        if (this.delay) setTimeout(() => super.start(), this.delay);
+        else super.start();
+
+        this.onUpdate(this);
+    }
+
+    update(delta) {
+        const old = this.value * 1;
+        const direction = this.yoyo === true ? -1 : 1;
+
+        this.progress += (delta / this.duration) * direction;
+
+        this.value = this.easing(this.progress);
+        this.delta = this.value - old;
+
+        if (this.values !== null) this.updateFromTo();
+
+        if (this.yoyo !== null) this.updateYoyo();
+        else if (this.progress <= 1) this.onUpdate(this);
+        else {
+            this.progress = 1;
+            this.value = 1;
+            this.onUpdate(this);
+            this.onComplete(this);
+            super.stop();
+        }
+    }
+
+    updateYoyo() {
+        if (this.progress > 1 || this.progress < 0) {
+            this.value = this.progress = this.progress > 1 ? 1 : 0;
+            this.yoyo = !this.yoyo;
+        }
+
+        this.onUpdate(this);
+    }
+
+    updateFromTo() {
+        this.values.forEach((key) => {
+            this.target[key] =
+                this.from[key] + (this.to[key] - this.from[key]) * this.value;
+        });
+    }
+
+    getFromTo(options) {
+        if (!options.target || !options.to) {
+            this.values = null;
+            return;
+        }
+
+        this.target = options.target || null;
+        this.from = options.from || {};
+        this.to = options.to || null;
+        this.values = [];
+
+        if (Object.keys(this.from).length < 1)
+            Object.keys(this.to).forEach((key) => {
+                this.from[key] = this.target[key];
+            });
+
+        Object.keys(this.to).forEach((key) => {
+            this.values.push(key);
+        });
+    }
+}
+
+window.addEventListener("touchmove", () => {});
+document.addEventListener(
+    "touchmove",
+    (event) => {
+        event.preventDefault();
+    },
+    { passive: false }
+);
+
+class Draggable {
+    constructor(element, options) {
+        this.position = {
+            current: new THREE.Vector2(),
+            start: new THREE.Vector2(),
+            delta: new THREE.Vector2(),
+            old: new THREE.Vector2(),
+            drag: new THREE.Vector2(),
+        };
+
+        this.options = Object.assign(
+            {
+                calcDelta: false,
+            },
+            options || {}
+        );
+
+        this.element = element;
+        this.touch = null;
+
+        this.drag = {
+            start: (event) => {
+                if (event.type == "mousedown" && event.which != 1) return;
+                if (event.type == "touchstart" && event.touches.length > 1)
+                    return;
+
+                this.getPositionCurrent(event);
+
+                if (this.options.calcDelta) {
+                    this.position.start = this.position.current.clone();
+                    this.position.delta.set(0, 0);
+                    this.position.drag.set(0, 0);
+                }
+
+                this.touch = event.type == "touchstart";
+
+                this.onDragStart(this.position);
+
+                window.addEventListener(
+                    this.touch ? "touchmove" : "mousemove",
+                    this.drag.move,
+                    false
+                );
+                window.addEventListener(
+                    this.touch ? "touchend" : "mouseup",
+                    this.drag.end,
+                    false
+                );
+            },
+
+            move: (event) => {
+                if (this.options.calcDelta) {
+                    this.position.old = this.position.current.clone();
+                }
+
+                this.getPositionCurrent(event);
+
+                if (this.options.calcDelta) {
+                    this.position.delta = this.position.current
+                        .clone()
+                        .sub(this.position.old);
+                    this.position.drag = this.position.current
+                        .clone()
+                        .sub(this.position.start);
+                }
+
+                this.onDragMove(this.position);
+            },
+
+            end: (event) => {
+                this.getPositionCurrent(event);
+
+                this.onDragEnd(this.position);
+
+                window.removeEventListener(
+                    this.touch ? "touchmove" : "mousemove",
+                    this.drag.move,
+                    false
+                );
+                window.removeEventListener(
+                    this.touch ? "touchend" : "mouseup",
+                    this.drag.end,
+                    false
+                );
+            },
+        };
+
+        this.onDragStart = () => {};
+        this.onDragMove = () => {};
+        this.onDragEnd = () => {};
+
+        this.enable();
+
+        return this;
+    }
+
+    enable() {
+        this.element.addEventListener("touchstart", this.drag.start, false);
+        this.element.addEventListener("mousedown", this.drag.start, false);
+
+        return this;
+    }
+
+    disable() {
+        this.element.removeEventListener("touchstart", this.drag.start, false);
+        this.element.removeEventListener("mousedown", this.drag.start, false);
+
+        return this;
+    }
+
+    getPositionCurrent(event) {
+        const dragEvent = event.touches
+            ? event.touches[0] || event.changedTouches[0]
+            : event;
+
+        this.position.current.set(dragEvent.pageX, dragEvent.pageY);
+    }
+
+    convertPosition(position) {
+        position.x = (position.x / this.element.offsetWidth) * 2 - 1;
+        position.y = -((position.y / this.element.offsetHeight) * 2 - 1);
+
+        return position;
+    }
+}
+
+const STILL = 0;
+const PREPARING = 1;
+const ROTATING = 2;
+const ANIMATING = 3;
+
+class Controls {
+    constructor(game) {
+        this.game = game;
+
+        this.flipConfig = 0;
+
+        this.flipEasings = [
+            Easing.Power.Out(3),
+            Easing.Sine.Out(),
+            Easing.Back.Out(1.5),
+        ];
+        this.flipSpeeds = [125, 200, 300];
+
+        this.raycaster = new THREE.Raycaster();
+
+        const helperMaterial = new THREE.MeshBasicMaterial({
+            depthWrite: false,
+            transparent: true,
+            opacity: 0,
+            color: 0x0033ff,
+        });
+
+        this.group = new THREE.Object3D();
+        this.group.name = "controls";
+        this.game.cube.object.add(this.group);
+
+        this.helper = new THREE.Mesh(
+            new THREE.PlaneBufferGeometry(200, 200),
+            helperMaterial.clone()
+        );
+
+        this.helper.rotation.set(0, Math.PI / 4, 0);
+        this.game.world.scene.add(this.helper);
+
+        this.edges = new THREE.Mesh(
+            new THREE.BoxBufferGeometry(1, 1, 1),
+            helperMaterial.clone()
+        );
+
+        this.game.world.scene.add(this.edges);
+
+        this.onSolved = () => {};
+        this.onMove = () => {};
+
+        this.momentum = [];
+
+        this.scramble = null;
+        this.state = STILL;
+        this.enabled = false;
+
+        this.initDraggable();
+    }
+
+    enable() {
+        this.draggable.enable();
+        this.enabled = true;
+    }
+
+    disable() {
+        this.draggable.disable();
+        this.enabled = false;
+    }
+
+    initDraggable() {
+        this.draggable = new Draggable(this.game.dom.game);
+
+        this.draggable.onDragStart = (position) => {
+            if (this.scramble !== null) return;
+            if (this.state === PREPARING || this.state === ROTATING) return;
+
+            this.gettingDrag = this.state === ANIMATING;
+
+            const edgeIntersect = this.getIntersect(
+                position.current,
+                this.edges,
+                false
+            );
+
+            if (edgeIntersect !== false) {
+                this.dragIntersect = this.getIntersect(
+                    position.current,
+                    this.game.cube.cubes,
+                    true
+                );
+            }
+
+            if (edgeIntersect !== false && this.dragIntersect !== false) {
+                this.dragNormal = edgeIntersect.face.normal.round();
+                this.flipType = "layer";
+
+                this.attach(this.helper, this.edges);
+
+                this.helper.rotation.set(0, 0, 0);
+                this.helper.position.set(0, 0, 0);
+                this.helper.lookAt(this.dragNormal);
+                this.helper.translateZ(0.5);
+                this.helper.updateMatrixWorld();
+
+                this.detach(this.helper, this.edges);
+            } else {
+                this.dragNormal = new THREE.Vector3(0, 0, 1);
+                this.flipType = "cube";
+
+                this.helper.position.set(0, 0, 0);
+                this.helper.rotation.set(0, Math.PI / 4, 0);
+                this.helper.updateMatrixWorld();
+            }
+
+            let planeIntersect = this.getIntersect(
+                position.current,
+                this.helper,
+                false
+            );
+            if (planeIntersect === false) return;
+
+            this.dragCurrent = this.helper.worldToLocal(planeIntersect.point);
+            this.dragTotal = new THREE.Vector3();
+            this.state = this.state === STILL ? PREPARING : this.state;
+        };
+
+        this.draggable.onDragMove = (position) => {
+            if (this.scramble !== null) return;
+            if (
+                this.state === STILL ||
+                (this.state === ANIMATING && this.gettingDrag === false)
+            )
+                return;
+
+            const planeIntersect = this.getIntersect(
+                position.current,
+                this.helper,
+                false
+            );
+            if (planeIntersect === false) return;
+
+            const point = this.helper.worldToLocal(
+                planeIntersect.point.clone()
+            );
+
+            this.dragDelta = point.clone().sub(this.dragCurrent).setZ(0);
+            this.dragTotal.add(this.dragDelta);
+            this.dragCurrent = point;
+            this.addMomentumPoint(this.dragDelta);
+
+            if (this.state === PREPARING && this.dragTotal.length() > 0.05) {
+                this.dragDirection = this.getMainAxis(this.dragTotal);
+
+                if (this.flipType === "layer") {
+                    const direction = new THREE.Vector3();
+                    direction[this.dragDirection] = 1;
+
+                    const worldDirection = this.helper
+                        .localToWorld(direction)
+                        .sub(this.helper.position);
+                    const objectDirection = this.edges
+                        .worldToLocal(worldDirection)
+                        .round();
+
+                    this.flipAxis = objectDirection
+                        .cross(this.dragNormal)
+                        .negate();
+
+                    this.selectLayer(this.getLayer(false));
+                } else {
+                    const axis =
+                        this.dragDirection != "x"
+                            ? this.dragDirection == "y" &&
+                              position.current.x > this.game.world.width / 2
+                                ? "z"
+                                : "x"
+                            : "y";
+
+                    this.flipAxis = new THREE.Vector3();
+                    this.flipAxis[axis] = 1 * (axis == "x" ? -1 : 1);
+                }
+
+                this.flipAngle = 0;
+                this.state = ROTATING;
+            } else if (this.state === ROTATING) {
+                const rotation = this.dragDelta[this.dragDirection];
+
+                if (this.flipType === "layer") {
+                    this.group.rotateOnAxis(this.flipAxis, rotation);
+                    this.flipAngle += rotation;
+                } else {
+                    this.edges.rotateOnWorldAxis(this.flipAxis, rotation);
+                    this.game.cube.object.rotation.copy(this.edges.rotation);
+                    this.flipAngle += rotation;
+                }
+            }
+        };
+
+        this.draggable.onDragEnd = (position) => {
+            if (this.scramble !== null) return;
+            if (this.state !== ROTATING) {
+                this.gettingDrag = false;
+                this.state = STILL;
+                return;
+            }
+
+            this.state = ANIMATING;
+
+            const momentum = this.getMomentum()[this.dragDirection];
+            const flip =
+                Math.abs(momentum) > 0.05 &&
+                Math.abs(this.flipAngle) < Math.PI / 2;
+
+            const angle = flip
+                ? this.roundAngle(
+                      this.flipAngle + Math.sign(this.flipAngle) * (Math.PI / 4)
+                  )
+                : this.roundAngle(this.flipAngle);
+
+            const delta = angle - this.flipAngle;
+
+            if (this.flipType === "layer") {
+                this.rotateLayer(delta, false, (layer) => {
+                    this.game.storage.saveGame();
+
+                    this.state = this.gettingDrag ? PREPARING : STILL;
+                    this.gettingDrag = false;
+
+                    this.checkIsSolved();
+                });
+            } else {
+                this.rotateCube(delta, () => {
+                    this.state = this.gettingDrag ? PREPARING : STILL;
+                    this.gettingDrag = false;
+                });
+            }
+        };
+    }
+
+    rotateLayer(rotation, scramble, callback) {
+        const config = scramble ? 0 : this.flipConfig;
+
+        const easing = this.flipEasings[config];
+        const duration = this.flipSpeeds[config];
+        const bounce = config == 2 ? this.bounceCube() : () => {};
+
+        this.rotationTween = new Tween({
+            easing: easing,
+            duration: duration,
+            onUpdate: (tween) => {
+                let deltaAngle = tween.delta * rotation;
+                this.group.rotateOnAxis(this.flipAxis, deltaAngle);
+                bounce(tween.value, deltaAngle, rotation);
+            },
+            onComplete: () => {
+                if (!scramble) this.onMove();
+
+                const layer = this.flipLayer.slice(0);
+
+                this.game.cube.object.rotation.setFromVector3(
+                    this.snapRotation(
+                        this.game.cube.object.rotation.toVector3()
+                    )
+                );
+                this.group.rotation.setFromVector3(
+                    this.snapRotation(this.group.rotation.toVector3())
+                );
+                this.deselectLayer(this.flipLayer);
+
+                callback(layer);
+            },
+        });
+    }
+
+    bounceCube() {
+        let fixDelta = true;
+
+        return (progress, delta, rotation) => {
+            if (progress >= 1) {
+                if (fixDelta) {
+                    delta = (progress - 1) * rotation;
+                    fixDelta = false;
+                }
+
+                this.game.cube.object.rotateOnAxis(this.flipAxis, delta);
+            }
+        };
+    }
+
+    rotateCube(rotation, callback) {
+        const config = this.flipConfig;
+        const easing = [
+            Easing.Power.Out(4),
+            Easing.Sine.Out(),
+            Easing.Back.Out(2),
+        ][config];
+        const duration = [100, 150, 350][config];
+
+        this.rotationTween = new Tween({
+            easing: easing,
+            duration: duration,
+            onUpdate: (tween) => {
+                this.edges.rotateOnWorldAxis(
+                    this.flipAxis,
+                    tween.delta * rotation
+                );
+                this.game.cube.object.rotation.copy(this.edges.rotation);
+            },
+            onComplete: () => {
+                this.edges.rotation.setFromVector3(
+                    this.snapRotation(this.edges.rotation.toVector3())
+                );
+                this.game.cube.object.rotation.copy(this.edges.rotation);
+                callback();
+            },
+        });
+    }
+
+    selectLayer(layer) {
+        this.group.rotation.set(0, 0, 0);
+        this.movePieces(layer, this.game.cube.object, this.group);
+        this.flipLayer = layer;
+    }
+
+    deselectLayer(layer) {
+        this.movePieces(layer, this.group, this.game.cube.object);
+        this.flipLayer = null;
+    }
+
+    movePieces(layer, from, to) {
+        from.updateMatrixWorld();
+        to.updateMatrixWorld();
+
+        layer.forEach((index) => {
+            const piece = this.game.cube.pieces[index];
+
+            piece.applyMatrix(from.matrixWorld);
+            from.remove(piece);
+            piece.applyMatrix(new THREE.Matrix4().getInverse(to.matrixWorld));
+            to.add(piece);
+        });
+    }
+
+    getLayer(position) {
+        const scalar = { 2: 6, 3: 3, 4: 4, 5: 3 }[this.game.cube.size];
+        const layer = [];
+
+        let axis;
+
+        if (position === false) {
+            const piece = this.dragIntersect.object.parent;
+
+            axis = this.getMainAxis(this.flipAxis);
+            position = piece.position.clone().multiplyScalar(scalar).round();
+        } else {
+            axis = this.getMainAxis(position);
+        }
+
+        this.game.cube.pieces.forEach((piece) => {
+            const piecePosition = piece.position
+                .clone()
+                .multiplyScalar(scalar)
+                .round();
+
+            if (piecePosition[axis] == position[axis]) layer.push(piece.name);
+        });
+
+        return layer;
+    }
+
+    keyboardMove(type, move, callback) {
+        if (this.state !== STILL) return;
+        if (this.enabled !== true) return;
+
+        if (type === "LAYER") {
+            const layer = this.getLayer(move.position);
+
+            this.flipAxis = new THREE.Vector3();
+            this.flipAxis[move.axis] = 1;
+            this.state = ROTATING;
+
+            this.selectLayer(layer);
+            this.rotateLayer(move.angle, false, (layer) => {
+                this.game.storage.saveGame();
+                this.state = STILL;
+                this.checkIsSolved();
+            });
+        } else if (type === "CUBE") {
+            this.flipAxis = new THREE.Vector3();
+            this.flipAxis[move.axis] = 1;
+            this.state = ROTATING;
+
+            this.rotateCube(move.angle, () => {
+                this.state = STILL;
+            });
+        }
+    }
+
+    scrambleCube() {
+        if (this.scramble == null) {
+            this.scramble = this.game.scrambler;
+            this.scramble.callback =
+                typeof callback !== "function" ? () => {} : callback;
+        }
+
+        const converted = this.scramble.converted;
+        const move = converted[0];
+        const layer = this.getLayer(move.position);
+
+        this.flipAxis = new THREE.Vector3();
+        this.flipAxis[move.axis] = 1;
+
+        this.selectLayer(layer);
+        this.rotateLayer(move.angle, true, () => {
+            converted.shift();
+
+            if (converted.length > 0) {
+                this.scrambleCube();
+            } else {
+                this.scramble = null;
+                this.game.storage.saveGame();
+            }
+        });
+    }
+
+    getIntersect(position, object, multiple) {
+        this.raycaster.setFromCamera(
+            this.draggable.convertPosition(position.clone()),
+            this.game.world.camera
+        );
+
+        const intersect = multiple
+            ? this.raycaster.intersectObjects(object)
+            : this.raycaster.intersectObject(object);
+
+        return intersect.length > 0 ? intersect[0] : false;
+    }
+
+    getMainAxis(vector) {
+        return Object.keys(vector).reduce((a, b) =>
+            Math.abs(vector[a]) > Math.abs(vector[b]) ? a : b
+        );
+    }
+
+    detach(child, parent) {
+        child.applyMatrix(parent.matrixWorld);
+        parent.remove(child);
+        this.game.world.scene.add(child);
+    }
+
+    attach(child, parent) {
+        child.applyMatrix(new THREE.Matrix4().getInverse(parent.matrixWorld));
+        this.game.world.scene.remove(child);
+        parent.add(child);
+    }
+
+    addMomentumPoint(delta) {
+        const time = Date.now();
+
+        this.momentum = this.momentum.filter(
+            (moment) => time - moment.time < 500
+        );
+
+        if (delta !== false) this.momentum.push({ delta, time });
+    }
+
+    getMomentum() {
+        const points = this.momentum.length;
+        const momentum = new THREE.Vector2();
+
+        this.addMomentumPoint(false);
+
+        this.momentum.forEach((point, index) => {
+            momentum.add(point.delta.multiplyScalar(index / points));
+        });
+
+        return momentum;
+    }
+
+    roundAngle(angle) {
+        const round = Math.PI / 2;
+        return Math.sign(angle) * Math.round(Math.abs(angle) / round) * round;
+    }
+
+    snapRotation(angle) {
+        return angle.set(
+            this.roundAngle(angle.x),
+            this.roundAngle(angle.y),
+            this.roundAngle(angle.z)
+        );
+    }
+
+    checkIsSolved() {
+        const start = performance.now();
+
+        let solved = true;
+        const sides = {
+            "x-": [],
+            "x+": [],
+            "y-": [],
+            "y+": [],
+            "z-": [],
+            "z+": [],
+        };
+
+        this.game.cube.edges.forEach((edge) => {
+            const position = edge.parent
+                .localToWorld(edge.position.clone())
+                .sub(this.game.cube.object.position);
+
+            const mainAxis = this.getMainAxis(position);
+            const mainSign =
+                position.multiplyScalar(2).round()[mainAxis] < 1 ? "-" : "+";
+
+            sides[mainAxis + mainSign].push(edge.name);
+        });
+
+        Object.keys(sides).forEach((side) => {
+            if (!sides[side].every((value) => value === sides[side][0]))
+                solved = false;
+        });
+
+        if (solved) this.onSolved();
+    }
+}
+
+class Scrambler {
+    constructor(game) {
+        this.game = game;
+
+        this.dificulty = 0;
+
+        this.scrambleLength = {
+            2: [7, 9, 11],
+            3: [20, 25, 30],
+            4: [30, 40, 50],
+            5: [40, 60, 80],
+        };
+
+        this.moves = [];
+        this.conveted = [];
+        this.pring = "";
+    }
+
+    scramble(scramble) {
+        let count = 0;
+        this.moves = typeof scramble !== "undefined" ? scramble.split(" ") : [];
+
+        if (this.moves.length < 1) {
+            const scrambleLength =
+                this.scrambleLength[this.game.cube.size][this.dificulty];
+
+            const faces = this.game.cube.size < 4 ? "UDLRFB" : "UuDdLlRrFfBb";
+            const modifiers = ["", "'", "2"];
+            const total =
+                typeof scramble === "undefined" ? scrambleLength : scramble;
+
+            while (count < total) {
+                const move =
+                    faces[Math.floor(Math.random() * faces.length)] +
+                    modifiers[Math.floor(Math.random() * 3)];
+
+                if (
+                    count > 0 &&
+                    move.charAt(0) == this.moves[count - 1].charAt(0)
+                )
+                    continue;
+                if (
+                    count > 1 &&
+                    move.charAt(0) == this.moves[count - 2].charAt(0)
+                )
+                    continue;
+
+                this.moves.push(move);
+                count++;
+            }
+        }
+
+        this.callback = () => {};
+        this.convert();
+        this.print = this.moves.join(" ");
+
+        return this;
+    }
+
+    convert(moves) {
+        this.converted = [];
+
+        this.moves.forEach((move) => {
+            const convertedMove = this.convertMove(move);
+            const modifier = move.charAt(1);
+
+            this.converted.push(convertedMove);
+            if (modifier == "2") this.converted.push(convertedMove);
+        });
+    }
+
+    convertMove(move) {
+        const face = move.charAt(0);
+        const modifier = move.charAt(1);
+
+        const axis = { D: "y", U: "y", L: "x", R: "x", F: "z", B: "z" }[
+            face.toUpperCase()
+        ];
+        let row = { D: -1, U: 1, L: -1, R: 1, F: 1, B: -1 }[face.toUpperCase()];
+
+        if (this.game.cube.size > 3 && face !== face.toLowerCase())
+            row = row * 2;
+
+        const position = new THREE.Vector3();
+        position[
+            { D: "y", U: "y", L: "x", R: "x", F: "z", B: "z" }[
+                face.toUpperCase()
+            ]
+        ] = row;
+
+        const angle = (Math.PI / 2) * -row * (modifier == "'" ? -1 : 1);
+
+        return { position, axis, angle, name: move };
+    }
+}
+
+class Transition {
+    constructor(game) {
+        this.game = game;
+
+        this.tweens = {};
+        this.durations = {};
+        this.data = {
+            cubeY: -0.2,
+            cameraZoom: 0.85,
+        };
+
+        this.activeTransitions = 0;
+    }
+
+    init() {
+        this.game.controls.disable();
+
+        this.game.cube.object.position.y = this.data.cubeY;
+        this.game.cube.animator.position.y = 4;
+        this.game.cube.animator.rotation.x = -Math.PI / 3;
+        this.game.world.camera.zoom = this.data.cameraZoom;
+        this.game.world.camera.updateProjectionMatrix();
+
+        this.tweens.buttons = {};
+        this.tweens.timer = [];
+        this.tweens.title = [];
+        this.tweens.best = [];
+        this.tweens.complete = [];
+        this.tweens.prefs = [];
+        this.tweens.theme = [];
+        this.tweens.stats = [];
+    }
+
+    buttons(show, hide) {
+        const buttonTween = (button, show) => {
+            return new Tween({
+                target: button.style,
+                duration: 300,
+                easing: show ? Easing.Power.Out(2) : Easing.Power.In(3),
+                from: { opacity: show ? 0 : 1 },
+                to: { opacity: show ? 1 : 0 },
+                onUpdate: (tween) => {
+                    const translate = show ? 1 - tween.value : tween.value;
+                    button.style.transform = `translate3d(0, ${
+                        translate * 1.5
+                    }em, 0)`;
+                },
+                onComplete: () =>
+                    (button.style.pointerEvents = show ? "all" : "none"),
+            });
+        };
+
+        hide.forEach(
+            (button) =>
+                (this.tweens.buttons[button] = buttonTween(
+                    this.game.dom.buttons[button],
+                    false
+                ))
+        );
+
+        setTimeout(
+            () =>
+                show.forEach((button) => {
+                    this.tweens.buttons[button] = buttonTween(
+                        this.game.dom.buttons[button],
+                        true
+                    );
+                }),
+            hide ? 500 : 0
+        );
+    }
+
+    cube(show, theming = false) {
+        this.activeTransitions++;
+
+        try {
+            this.tweens.cube.stop();
+        } catch (e) {}
+        const currentY = this.game.cube.animator.position.y;
+        const currentRotation = this.game.cube.animator.rotation.x;
+
+        this.tweens.cube = new Tween({
+            duration: show ? 3000 : 1250,
+            easing: show ? Easing.Elastic.Out(0.8, 0.6) : Easing.Back.In(1),
+            onUpdate: (tween) => {
+                this.game.cube.animator.position.y = show
+                    ? theming
+                        ? 0.9 + (1 - tween.value) * 3.5
+                        : (1 - tween.value) * 4
+                    : currentY + tween.value * 4;
+
+                this.game.cube.animator.rotation.x = show
+                    ? ((1 - tween.value) * Math.PI) / 3
+                    : currentRotation + (tween.value * -Math.PI) / 3;
+            },
+        });
+
+        if (theming) {
+            if (show) {
+                this.game.world.camera.zoom = 0.75;
+                this.game.world.camera.updateProjectionMatrix();
+            } else {
+                setTimeout(() => {
+                    this.game.world.camera.zoom = this.data.cameraZoom;
+                    this.game.world.camera.updateProjectionMatrix();
+                }, 1500);
+            }
+        }
+
+        this.durations.cube = show ? 1500 : 1500;
+
+        setTimeout(() => this.activeTransitions--, this.durations.cube);
+    }
+
+    float() {
+        try {
+            this.tweens.float.stop();
+        } catch (e) {}
+        this.tweens.float = new Tween({
+            duration: 1500,
+            easing: Easing.Sine.InOut(),
+            yoyo: true,
+            onUpdate: (tween) => {
+                this.game.cube.holder.position.y = -0.02 + tween.value * 0.04;
+                this.game.cube.holder.rotation.x = 0.005 - tween.value * 0.01;
+                this.game.cube.holder.rotation.z =
+                    -this.game.cube.holder.rotation.x;
+                this.game.cube.holder.rotation.y =
+                    this.game.cube.holder.rotation.x;
+
+                this.game.controls.edges.position.y =
+                    this.game.cube.holder.position.y +
+                    this.game.cube.object.position.y;
+            },
+        });
+    }
+
+    zoom(play, time) {
+        this.activeTransitions++;
+
+        const zoom = play ? 1 : this.data.cameraZoom;
+        const duration = time > 0 ? Math.max(time, 1500) : 1500;
+        const rotations = time > 0 ? Math.round(duration / 1500) : 1;
+        const easing = Easing.Power.InOut(time > 0 ? 2 : 3);
+
+        this.tweens.zoom = new Tween({
+            target: this.game.world.camera,
+            duration: duration,
+            easing: easing,
+            to: { zoom: zoom },
+            onUpdate: () => {
+                this.game.world.camera.updateProjectionMatrix();
+            },
+        });
+
+        this.tweens.rotate = new Tween({
+            target: this.game.cube.animator.rotation,
+            duration: duration,
+            easing: easing,
+            to: { y: -Math.PI * 2 * rotations },
+            onComplete: () => {
+                this.game.cube.animator.rotation.y = 0;
+            },
+        });
+
+        this.durations.zoom = duration;
+
+        setTimeout(() => this.activeTransitions--, this.durations.zoom);
+    }
+
+    elevate(complete) {
+        this.activeTransitions++;
+
+        const cubeY = (this.tweens.elevate = new Tween({
+            target: this.game.cube.object.position,
+            duration: complete ? 1500 : 0,
+            easing: Easing.Power.InOut(3),
+            to: { y: complete ? -0.05 : this.data.cubeY },
+        }));
+
+        this.durations.elevate = 1500;
+
+        setTimeout(() => this.activeTransitions--, this.durations.elevate);
+    }
+
+    complete(show, best) {
+        this.activeTransitions++;
+
+        const text = best
+            ? this.game.dom.texts.best
+            : this.game.dom.texts.complete;
+
+        if (text.querySelector("span i") === null)
+            text.querySelectorAll("span").forEach((span) =>
+                this.splitLetters(span)
+            );
+
+        const letters = text.querySelectorAll(".icon, i");
+
+        this.flipLetters(best ? "best" : "complete", letters, show);
+
+        text.style.opacity = 1;
+
+        const duration = this.durations[best ? "best" : "complete"];
+
+        if (!show)
+            setTimeout(
+                () => (this.game.dom.texts.timer.style.transform = ""),
+                duration
+            );
+
+        setTimeout(() => this.activeTransitions--, duration);
+    }
+
+    stats(show) {
+        if (show) this.game.scores.calcStats();
+
+        this.activeTransitions++;
+
+        this.tweens.stats.forEach((tween) => {
+            tween.stop();
+            tween = null;
+        });
+
+        let tweenId = -1;
+
+        const stats = this.game.dom.stats.querySelectorAll(".stats");
+        const easing = show ? Easing.Power.Out(2) : Easing.Power.In(3);
+
+        stats.forEach((stat, index) => {
+            const delay = index * (show ? 80 : 60);
+
+            this.tweens.stats[tweenId++] = new Tween({
+                delay: delay,
+                duration: 400,
+                easing: easing,
+                onUpdate: (tween) => {
+                    const translate = show
+                        ? (1 - tween.value) * 2
+                        : tween.value;
+                    const opacity = show ? tween.value : 1 - tween.value;
+
+                    stat.style.transform = `translate3d(0, ${translate}em, 0)`;
+                    stat.style.opacity = opacity;
+                },
+            });
+        });
+
+        this.durations.stats = 0;
+
+        setTimeout(() => this.activeTransitions--, this.durations.stats);
+    }
+
+    preferences(show) {
+        this.ranges(
+            this.game.dom.prefs.querySelectorAll(".range"),
+            "prefs",
+            show
+        );
+    }
+
+    theming(show) {
+        this.ranges(
+            this.game.dom.theme.querySelectorAll(".range"),
+            "prefs",
+            show
+        );
+    }
+
+    ranges(ranges, type, show) {
+        this.activeTransitions++;
+
+        this.tweens[type].forEach((tween) => {
+            tween.stop();
+            tween = null;
+        });
+
+        const easing = show ? Easing.Power.Out(2) : Easing.Power.In(3);
+
+        let tweenId = -1;
+        let listMax = 0;
+
+        ranges.forEach((range, rangeIndex) => {
+            const label = range.querySelector(".range__label");
+            const track = range.querySelector(".range__track-line");
+            const handle = range.querySelector(".range__handle");
+            const list = range.querySelectorAll(".range__list div");
+
+            const delay = rangeIndex * (show ? 120 : 100);
+
+            label.style.opacity = show ? 0 : 1;
+            track.style.opacity = show ? 0 : 1;
+            handle.style.opacity = show ? 0 : 1;
+            handle.style.pointerEvents = show ? "all" : "none";
+
+            this.tweens[type][tweenId++] = new Tween({
+                delay: show ? delay : delay,
+                duration: 400,
+                easing: easing,
+                onUpdate: (tween) => {
+                    const translate = show ? 1 - tween.value : tween.value;
+                    const opacity = show ? tween.value : 1 - tween.value;
+
+                    label.style.transform = `translate3d(0, ${translate}em, 0)`;
+                    label.style.opacity = opacity;
+                },
+            });
+
+            this.tweens[type][tweenId++] = new Tween({
+                delay: show ? delay + 100 : delay,
+                duration: 400,
+                easing: easing,
+                onUpdate: (tween) => {
+                    const translate = show ? 1 - tween.value : tween.value;
+                    const scale = show ? tween.value : 1 - tween.value;
+                    const opacity = scale;
+
+                    track.style.transform = `translate3d(0, ${translate}em, 0) scale3d(${scale}, 1, 1)`;
+                    track.style.opacity = opacity;
+                },
+            });
+
+            this.tweens[type][tweenId++] = new Tween({
+                delay: show ? delay + 100 : delay,
+                duration: 400,
+                easing: easing,
+                onUpdate: (tween) => {
+                    const translate = show ? 1 - tween.value : tween.value;
+                    const opacity = 1 - translate;
+                    const scale = 0.5 + opacity * 0.5;
+
+                    handle.style.transform = `translate3d(0, ${translate}em, 0) scale3d(${scale}, ${scale}, ${scale})`;
+                    handle.style.opacity = opacity;
+                },
+            });
+
+            list.forEach((listItem, labelIndex) => {
+                listItem.style.opacity = show ? 0 : 1;
+
+                this.tweens[type][tweenId++] = new Tween({
+                    delay: show ? delay + 200 + labelIndex * 50 : delay,
+                    duration: 400,
+                    easing: easing,
+                    onUpdate: (tween) => {
+                        const translate = show ? 1 - tween.value : tween.value;
+                        const opacity = show ? tween.value : 1 - tween.value;
+
+                        listItem.style.transform = `translate3d(0, ${translate}em, 0)`;
+                        listItem.style.opacity = opacity;
+                    },
+                });
+            });
+
+            listMax = list.length > listMax ? list.length - 1 : listMax;
+
+            range.style.opacity = 1;
+        });
+
+        this.durations[type] = show
+            ? (ranges.length - 1) * 100 + 200 + listMax * 50 + 400
+            : (ranges.length - 1) * 100 + 400;
+
+        setTimeout(() => this.activeTransitions--, this.durations[type]);
+    }
+
+    title(show) {
+        this.activeTransitions++;
+
+        const title = this.game.dom.texts.title;
+
+        if (title.querySelector("span i") === null)
+            title
+                .querySelectorAll("span")
+                .forEach((span) => this.splitLetters(span));
+
+        const letters = title.querySelectorAll("i");
+
+        this.flipLetters("title", letters, show);
+
+        title.style.opacity = 1;
+
+        const note = this.game.dom.texts.note;
+
+        this.tweens.title[letters.length] = new Tween({
+            target: note.style,
+            easing: Easing.Sine.InOut(),
+            duration: show ? 800 : 400,
+            yoyo: show ? true : null,
+            from: {
+                opacity: show ? 0 : parseFloat(getComputedStyle(note).opacity),
+            },
+            to: { opacity: show ? 1 : 0 },
+        });
+
+        setTimeout(() => this.activeTransitions--, this.durations.title);
+    }
+
+    timer(show) {
+        this.activeTransitions++;
+
+        const timer = this.game.dom.texts.timer;
+
+        timer.style.opacity = 0;
+        this.game.timer.convert();
+        this.game.timer.setText();
+
+        this.splitLetters(timer);
+        const letters = timer.querySelectorAll("i");
+        this.flipLetters("timer", letters, show);
+
+        timer.style.opacity = 1;
+
+        setTimeout(() => this.activeTransitions--, this.durations.timer);
+    }
+
+    splitLetters(element) {
+        const text = element.innerHTML;
+
+        element.innerHTML = "";
+
+        text.split("").forEach((letter) => {
+            const i = document.createElement("i");
+
+            i.innerHTML = letter;
+
+            element.appendChild(i);
+        });
+    }
+
+    flipLetters(type, letters, show) {
+        try {
+            this.tweens[type].forEach((tween) => tween.stop());
+        } catch (e) {}
+        letters.forEach((letter, index) => {
+            letter.style.opacity = show ? 0 : 1;
+
+            this.tweens[type][index] = new Tween({
+                easing: Easing.Sine.Out(),
+                duration: show ? 800 : 400,
+                delay: index * 50,
+                onUpdate: (tween) => {
+                    const rotation = show
+                        ? (1 - tween.value) * -80
+                        : tween.value * 80;
+
+                    letter.style.transform = `rotate3d(0, 1, 0, ${rotation}deg)`;
+                    letter.style.opacity = show ? tween.value : 1 - tween.value;
+                },
+            });
+        });
+
+        this.durations[type] = (letters.length - 1) * 50 + (show ? 800 : 400);
+    }
+}
+
+class Timer extends Animation {
+    constructor(game) {
+        super(false);
+
+        this.game = game;
+        this.reset();
+    }
+
+    start(continueGame) {
+        this.startTime = continueGame
+            ? Date.now() - this.deltaTime
+            : Date.now();
+        this.deltaTime = 0;
+        this.converted = this.convert();
+
+        super.start();
+    }
+
+    reset() {
+        this.startTime = 0;
+        this.currentTime = 0;
+        this.deltaTime = 0;
+        this.converted = "0:00";
+    }
+
+    stop() {
+        this.currentTime = Date.now();
+        this.deltaTime = this.currentTime - this.startTime;
+        this.convert();
+
+        super.stop();
+
+        return { time: this.converted, millis: this.deltaTime };
+    }
+
+    update() {
+        const old = this.converted;
+
+        this.currentTime = Date.now();
+        this.deltaTime = this.currentTime - this.startTime;
+        this.convert();
+
+        if (this.converted != old) {
+            localStorage.setItem("theCube_time", this.deltaTime);
+            this.setText();
+        }
+    }
+
+    convert() {
+        const seconds = parseInt((this.deltaTime / 1000) % 60);
+        const minutes = parseInt(this.deltaTime / (1000 * 60));
+
+        this.converted = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
+    }
+
+    setText() {
+        this.game.dom.texts.timer.innerHTML = this.converted;
+    }
+}
+
+const RangeHTML = [
+    '<div class="range">',
+    '<div class="range__label"></div>',
+    '<div class="range__track">',
+    '<div class="range__track-line"></div>',
+    '<div class="range__handle"><div></div></div>',
+    "</div>",
+    '<div class="range__list"></div>',
+    "</div>",
+].join("\n");
+
+document.querySelectorAll("range").forEach((el) => {
+    const temp = document.createElement("div");
+    temp.innerHTML = RangeHTML;
+
+    const range = temp.querySelector(".range");
+    const rangeLabel = range.querySelector(".range__label");
+    const rangeList = range.querySelector(".range__list");
+
+    range.setAttribute("name", el.getAttribute("name"));
+    rangeLabel.innerHTML = el.getAttribute("title");
+
+    if (el.hasAttribute("color")) {
+        range.classList.add("range--type-color");
+        range.classList.add("range--color-" + el.getAttribute("name"));
+    }
+
+    if (el.hasAttribute("list")) {
+        el.getAttribute("list")
+            .split(",")
+            .forEach((listItemText) => {
+                const listItem = document.createElement("div");
+                listItem.innerHTML = listItemText;
+                rangeList.appendChild(listItem);
+            });
+    }
+
+    el.parentNode.replaceChild(range, el);
+});
+
+class Range {
+    constructor(name, options) {
+        options = Object.assign(
+            {
+                range: [0, 1],
+                value: 0,
+                step: 0,
+                onUpdate: () => {},
+                onComplete: () => {},
+            },
+            options || {}
+        );
+
+        this.element = document.querySelector('.range[name="' + name + '"]');
+        this.track = this.element.querySelector(".range__track");
+        this.handle = this.element.querySelector(".range__handle");
+        this.list = [].slice.call(
+            this.element.querySelectorAll(".range__list div")
+        );
+
+        this.value = options.value;
+        this.min = options.range[0];
+        this.max = options.range[1];
+        this.step = options.step;
+
+        this.onUpdate = options.onUpdate;
+        this.onComplete = options.onComplete;
+
+        this.setValue(this.value);
+
+        this.initDraggable();
+    }
+
+    setValue(value) {
+        this.value = this.round(this.limitValue(value));
+        this.setHandlePosition();
+    }
+
+    initDraggable() {
+        let current;
+
+        this.draggable = new Draggable(this.handle, { calcDelta: true });
+
+        this.draggable.onDragStart = (position) => {
+            current = this.positionFromValue(this.value);
+            this.handle.style.left = current + "px";
+        };
+
+        this.draggable.onDragMove = (position) => {
+            current = this.limitPosition(current + position.delta.x);
+            this.value = this.round(this.valueFromPosition(current));
+            this.setHandlePosition();
+
+            this.onUpdate(this.value);
+        };
+
+        this.draggable.onDragEnd = (position) => {
+            this.onComplete(this.value);
+        };
+    }
+
+    round(value) {
+        if (this.step < 1) return value;
+
+        return (
+            Math.round((value - this.min) / this.step) * this.step + this.min
+        );
+    }
+
+    limitValue(value) {
+        const max = Math.max(this.max, this.min);
+        const min = Math.min(this.max, this.min);
+
+        return Math.min(Math.max(value, min), max);
+    }
+
+    limitPosition(position) {
+        return Math.min(Math.max(position, 0), this.track.offsetWidth);
+    }
+
+    percentsFromValue(value) {
+        return (value - this.min) / (this.max - this.min);
+    }
+
+    valueFromPosition(position) {
+        return (
+            this.min +
+            (this.max - this.min) * (position / this.track.offsetWidth)
+        );
+    }
+
+    positionFromValue(value) {
+        return this.percentsFromValue(value) * this.track.offsetWidth;
+    }
+
+    setHandlePosition() {
+        this.handle.style.left = this.percentsFromValue(this.value) * 100 + "%";
+    }
+}
+
+class Preferences {
+    constructor(game) {
+        this.game = game;
+    }
+
+    init() {
+        this.ranges = {
+            size: new Range("size", {
+                value: this.game.cube.size,
+                range: [2, 5],
+                step: 1,
+                onUpdate: (value) => {
+                    this.game.cube.size = value;
+
+                    this.game.preferences.ranges.scramble.list.forEach(
+                        (item, i) => {
+                            item.innerHTML =
+                                this.game.scrambler.scrambleLength[
+                                    this.game.cube.size
+                                ][i];
+                        }
+                    );
+                },
+                onComplete: () => this.game.storage.savePreferences(),
+            }),
+
+            flip: new Range("flip", {
+                value: this.game.controls.flipConfig,
+                range: [0, 2],
+                step: 1,
+                onUpdate: (value) => {
+                    this.game.controls.flipConfig = value;
+                },
+                onComplete: () => this.game.storage.savePreferences(),
+            }),
+
+            scramble: new Range("scramble", {
+                value: this.game.scrambler.dificulty,
+                range: [0, 2],
+                step: 1,
+                onUpdate: (value) => {
+                    this.game.scrambler.dificulty = value;
+                },
+                onComplete: () => this.game.storage.savePreferences(),
+            }),
+
+            fov: new Range("fov", {
+                value: this.game.world.fov,
+                range: [2, 45],
+                onUpdate: (value) => {
+                    this.game.world.fov = value;
+                    this.game.world.resize();
+                },
+                onComplete: () => this.game.storage.savePreferences(),
+            }),
+
+            theme: new Range("theme", {
+                value: { cube: 0, erno: 1, dust: 2, camo: 3, rain: 4 }[
+                    this.game.themes.theme
+                ],
+                range: [0, 4],
+                step: 1,
+                onUpdate: (value) => {
+                    const theme = ["cube", "erno", "dust", "camo", "rain"][
+                        value
+                    ];
+                    this.game.themes.setTheme(theme);
+                },
+                onComplete: () => this.game.storage.savePreferences(),
+            }),
+
+            hue: new Range("hue", {
+                value: 0,
+                range: [0, 360],
+                onUpdate: (value) => this.game.themeEditor.updateHSL(),
+                onComplete: () => this.game.storage.savePreferences(),
+            }),
+
+            saturation: new Range("saturation", {
+                value: 100,
+                range: [0, 100],
+                onUpdate: (value) => this.game.themeEditor.updateHSL(),
+                onComplete: () => this.game.storage.savePreferences(),
+            }),
+
+            lightness: new Range("lightness", {
+                value: 50,
+                range: [0, 100],
+                onUpdate: (value) => this.game.themeEditor.updateHSL(),
+                onComplete: () => this.game.storage.savePreferences(),
+            }),
+        };
+
+        this.ranges.scramble.list.forEach((item, i) => {
+            item.innerHTML =
+                this.game.scrambler.scrambleLength[this.game.cube.size][i];
+        });
+    }
+}
+
+class Confetti {
+    constructor(game) {
+        this.game = game;
+        this.started = 0;
+
+        this.options = {
+            speed: { min: 0.0011, max: 0.0022 },
+            revolution: { min: 0.01, max: 0.05 },
+            size: { min: 0.1, max: 0.15 },
+            colors: [0x41aac8, 0x82ca38, 0xffef48, 0xef3923, 0xff8c0a],
+        };
+
+        this.geometry = new THREE.PlaneGeometry(1, 1);
+        this.material = new THREE.MeshLambertMaterial({
+            side: THREE.DoubleSide,
+        });
+
+        this.holders = [
+            new ConfettiStage(this.game, this, 1, 20),
+            new ConfettiStage(this.game, this, -1, 30),
+        ];
+    }
+
+    start() {
+        if (this.started > 0) return;
+
+        this.holders.forEach((holder) => {
+            this.game.world.scene.add(holder.holder);
+            holder.start();
+            this.started++;
+        });
+    }
+
+    stop() {
+        if (this.started == 0) return;
+
+        this.holders.forEach((holder) => {
+            holder.stop(() => {
+                this.game.world.scene.remove(holder.holder);
+                this.started--;
+            });
+        });
+    }
+
+    updateColors(colors) {
+        this.holders.forEach((holder) => {
+            holder.options.colors.forEach((color, index) => {
+                holder.options.colors[index] =
+                    colors[["D", "F", "R", "B", "L"][index]];
+            });
+        });
+    }
+}
+
+class ConfettiStage extends Animation {
+    constructor(game, parent, distance, count) {
+        super(false);
+
+        this.game = game;
+        this.parent = parent;
+
+        this.distanceFromCube = distance;
+
+        this.count = count;
+        this.particles = [];
+
+        this.holder = new THREE.Object3D();
+        this.holder.rotation.copy(this.game.world.camera.rotation);
+
+        this.object = new THREE.Object3D();
+        this.holder.add(this.object);
+
+        this.resizeViewport = this.resizeViewport.bind(this);
+        this.game.world.onResize.push(this.resizeViewport);
+        this.resizeViewport();
+
+        this.geometry = this.parent.geometry;
+        this.material = this.parent.material;
+
+        this.options = this.parent.options;
+
+        let i = this.count;
+        while (i--) this.particles.push(new Particle(this));
+    }
+
+    start() {
+        this.time = performance.now();
+        this.playing = true;
+
+        let i = this.count;
+        while (i--) this.particles[i].reset();
+
+        super.start();
+    }
+
+    stop(callback) {
+        this.playing = false;
+        this.completed = 0;
+        this.callback = callback;
+    }
+
+    reset() {
+        super.stop();
+
+        this.callback();
+    }
+
+    update() {
+        const now = performance.now();
+        const delta = now - this.time;
+        this.time = now;
+
+        let i = this.count;
+
+        while (i--)
+            if (!this.particles[i].completed) this.particles[i].update(delta);
+
+        if (!this.playing && this.completed == this.count) this.reset();
+    }
+
+    resizeViewport() {
+        const fovRad = this.game.world.camera.fov * THREE.Math.DEG2RAD;
+
+        this.height =
+            2 *
+            Math.tan(fovRad / 2) *
+            (this.game.world.camera.position.length() - this.distanceFromCube);
+        this.width = this.height * this.game.world.camera.aspect;
+
+        const scale = 1 / this.game.transition.data.cameraZoom;
+
+        this.width *= scale;
+        this.height *= scale;
+
+        this.object.position.z = this.distanceFromCube;
+        this.object.position.y = this.height / 2;
+    }
+}
+
+class Particle {
+    constructor(confetti) {
+        this.confetti = confetti;
+        this.options = this.confetti.options;
+
+        this.velocity = new THREE.Vector3();
+        this.force = new THREE.Vector3();
+
+        this.mesh = new THREE.Mesh(
+            this.confetti.geometry,
+            this.confetti.material.clone()
+        );
+        this.confetti.object.add(this.mesh);
+
+        this.size = THREE.Math.randFloat(
+            this.options.size.min,
+            this.options.size.max
+        );
+        this.mesh.scale.set(this.size, this.size, this.size);
+
+        return this;
+    }
+
+    reset(randomHeight = true) {
+        this.completed = false;
+
+        this.color = new THREE.Color(
+            this.options.colors[
+                Math.floor(Math.random() * this.options.colors.length)
+            ]
+        );
+        this.mesh.material.color.set(this.color);
+
+        this.speed =
+            THREE.Math.randFloat(
+                this.options.speed.min,
+                this.options.speed.max
+            ) * -1;
+        this.mesh.position.x = THREE.Math.randFloat(
+            -this.confetti.width / 2,
+            this.confetti.width / 2
+        );
+        this.mesh.position.y = randomHeight
+            ? THREE.Math.randFloat(this.size, this.confetti.height + this.size)
+            : this.size;
+
+        this.revolutionSpeed = THREE.Math.randFloat(
+            this.options.revolution.min,
+            this.options.revolution.max
+        );
+        this.revolutionAxis = ["x", "y", "z"][Math.floor(Math.random() * 3)];
+        this.mesh.rotation.set(
+            (Math.random() * Math.PI) / 3,
+            (Math.random() * Math.PI) / 3,
+            (Math.random() * Math.PI) / 3
+        );
+    }
+
+    stop() {
+        this.completed = true;
+        this.confetti.completed++;
+    }
+
+    update(delta) {
+        this.mesh.position.y += this.speed * delta;
+        this.mesh.rotation[this.revolutionAxis] += this.revolutionSpeed;
+
+        if (this.mesh.position.y < -this.confetti.height - this.size)
+            this.confetti.playing ? this.reset(false) : this.stop();
+    }
+}
+
+class Scores {
+    constructor(game) {
+        this.game = game;
+
+        this.data = {
+            2: {
+                scores: [],
+                solves: 0,
+                best: 0,
+                worst: 0,
+            },
+            3: {
+                scores: [],
+                solves: 0,
+                best: 0,
+                worst: 0,
+            },
+            4: {
+                scores: [],
+                solves: 0,
+                best: 0,
+                worst: 0,
+            },
+            5: {
+                scores: [],
+                solves: 0,
+                best: 0,
+                worst: 0,
+            },
+        };
+    }
+
+    addScore(time) {
+        const data = this.data[this.game.cube.sizeGenerated];
+
+        data.scores.push(time);
+        data.solves++;
+
+        if (data.scores.lenght > 100) data.scores.shift();
+
+        let bestTime = false;
+
+        if (time < data.best || data.best === 0) {
+            data.best = time;
+            bestTime = true;
+        }
+
+        if (time > data.worst) data.worst = time;
+
+        this.game.storage.saveScores();
+
+        return bestTime;
+    }
+
+    calcStats() {
+        const s = this.game.cube.sizeGenerated;
+        const data = this.data[s];
+
+        this.setStat("cube-size", `${s}<i>x</i>${s}<i>x</i>${s}`);
+        this.setStat("total-solves", data.solves);
+        this.setStat("best-time", this.convertTime(data.best));
+        this.setStat("worst-time", this.convertTime(data.worst));
+        this.setStat("average-5", this.getAverage(5));
+        this.setStat("average-12", this.getAverage(12));
+        this.setStat("average-25", this.getAverage(25));
+    }
+
+    setStat(name, value) {
+        if (value === 0) value = "-";
+
+        this.game.dom.stats.querySelector(
+            `.stats[name="${name}"] b`
+        ).innerHTML = value;
+    }
+
+    getAverage(count) {
+        const data = this.data[this.game.cube.sizeGenerated];
+
+        if (data.scores.length < count) return 0;
+
+        return this.convertTime(
+            data.scores.slice(-count).reduce((a, b) => a + b, 0) / count
+        );
+    }
+
+    convertTime(time) {
+        if (time <= 0) return 0;
+
+        const seconds = parseInt((time / 1000) % 60);
+        const minutes = parseInt(time / (1000 * 60));
+
+        return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
+    }
+}
+
+class Storage {
+    constructor(game) {
+        this.game = game;
+
+        const userVersion = localStorage.getItem("theCube_version");
+
+        if (!userVersion || userVersion !== window.gameVersion) {
+            this.clearGame();
+            this.clearPreferences();
+            this.migrateScores();
+            localStorage.setItem("theCube_version", window.gameVersion);
+        }
+    }
+
+    init() {
+        this.loadPreferences();
+        this.loadScores();
+    }
+
+    loadGame() {
+        try {
+            const gameInProgress =
+                localStorage.getItem("theCube_playing") === "true";
+
+            if (!gameInProgress) throw new Error();
+
+            const gameCubeData = JSON.parse(
+                localStorage.getItem("theCube_savedState")
+            );
+            const gameTime = parseInt(localStorage.getItem("theCube_time"));
+
+            if (!gameCubeData || gameTime === null) throw new Error();
+            if (gameCubeData.size !== this.game.cube.sizeGenerated)
+                throw new Error();
+
+            this.game.cube.loadFromData(gameCubeData);
+
+            this.game.timer.deltaTime = gameTime;
+
+            this.game.saved = true;
+        } catch (e) {
+            this.game.saved = false;
+        }
+    }
+
+    saveGame() {
+        const gameInProgress = true;
+        const gameCubeData = { names: [], positions: [], rotations: [] };
+        const gameTime = this.game.timer.deltaTime;
+
+        gameCubeData.size = this.game.cube.sizeGenerated;
+
+        this.game.cube.pieces.forEach((piece) => {
+            gameCubeData.names.push(piece.name);
+            gameCubeData.positions.push(piece.position);
+            gameCubeData.rotations.push(piece.rotation.toVector3());
+        });
+
+        localStorage.setItem("theCube_playing", gameInProgress);
+        localStorage.setItem(
+            "theCube_savedState",
+            JSON.stringify(gameCubeData)
+        );
+        localStorage.setItem("theCube_time", gameTime);
+    }
+
+    clearGame() {
+        localStorage.removeItem("theCube_playing");
+        localStorage.removeItem("theCube_savedState");
+        localStorage.removeItem("theCube_time");
+    }
+
+    loadScores() {
+        try {
+            const scoresData = JSON.parse(
+                localStorage.getItem("theCube_scores")
+            );
+
+            if (!scoresData) throw new Error();
+
+            this.game.scores.data = scoresData;
+        } catch (e) {}
+    }
+
+    saveScores() {
+        const scoresData = this.game.scores.data;
+
+        localStorage.setItem("theCube_scores", JSON.stringify(scoresData));
+    }
+
+    clearScores() {
+        localStorage.removeItem("theCube_scores");
+    }
+
+    migrateScores() {
+        try {
+            const scoresData = JSON.parse(
+                localStorage.getItem("theCube_scoresData")
+            );
+            const scoresBest = parseInt(
+                localStorage.getItem("theCube_scoresBest")
+            );
+            const scoresWorst = parseInt(
+                localStorage.getItem("theCube_scoresWorst")
+            );
+            const scoresSolves = parseInt(
+                localStorage.getItem("theCube_scoresSolves")
+            );
+
+            if (!scoresData || !scoresBest || !scoresSolves || !scoresWorst)
+                return false;
+
+            this.game.scores.data[3].scores = scoresData;
+            this.game.scores.data[3].best = scoresBest;
+            this.game.scores.data[3].solves = scoresSolves;
+            this.game.scores.data[3].worst = scoresWorst;
+
+            localStorage.removeItem("theCube_scoresData");
+            localStorage.removeItem("theCube_scoresBest");
+            localStorage.removeItem("theCube_scoresWorst");
+            localStorage.removeItem("theCube_scoresSolves");
+        } catch (e) {}
+    }
+
+    loadPreferences() {
+        try {
+            const preferences = JSON.parse(
+                localStorage.getItem("theCube_preferences")
+            );
+
+            if (!preferences) throw new Error();
+
+            this.game.cube.size = parseInt(preferences.cubeSize);
+            this.game.controls.flipConfig = parseInt(preferences.flipConfig);
+            this.game.scrambler.dificulty = parseInt(preferences.dificulty);
+
+            this.game.world.fov = parseFloat(preferences.fov);
+            this.game.world.resize();
+
+            this.game.themes.colors = preferences.colors;
+            this.game.themes.setTheme(preferences.theme);
+
+            return true;
+        } catch (e) {
+            this.game.cube.size = 3;
+            this.game.controls.flipConfig = 0;
+            this.game.scrambler.dificulty = 1;
+
+            this.game.world.fov = 10;
+            this.game.world.resize();
+
+            this.game.themes.setTheme("cube");
+
+            this.savePreferences();
+
+            return false;
+        }
+    }
+
+    savePreferences() {
+        const preferences = {
+            cubeSize: this.game.cube.size,
+            flipConfig: this.game.controls.flipConfig,
+            dificulty: this.game.scrambler.dificulty,
+            fov: this.game.world.fov,
+            theme: this.game.themes.theme,
+            colors: this.game.themes.colors,
+        };
+
+        localStorage.setItem(
+            "theCube_preferences",
+            JSON.stringify(preferences)
+        );
+    }
+
+    clearPreferences() {
+        localStorage.removeItem("theCube_preferences");
+    }
+}
+
+class Themes {
+    constructor(game) {
+        this.game = game;
+        this.theme = null;
+
+        this.defaults = {
+            cube: {
+                U: 0xfff7ff, // white
+                D: 0xffef48, // yellow
+                F: 0xef3923, // red
+                R: 0x41aac8, // blue
+                B: 0xff8c0a, // orange
+                L: 0x82ca38, // green
+                P: 0x08101a, // piece
+                G: 0xd1d5db, // background
+            },
+            erno: {
+                U: 0xffffff,
+                D: 0xffd500,
+                F: 0xc41e3a,
+                R: 0x0051ba,
+                B: 0xff5800,
+                L: 0x009e60,
+                P: 0x08101a,
+                G: 0x8abdff,
+            },
+            dust: {
+                U: 0xfff6eb,
+                D: 0xe7c48d,
+                F: 0x8f253e,
+                R: 0x607e69,
+                B: 0xbe6f62,
+                L: 0x849f5d,
+                P: 0x08101a,
+                G: 0xe7c48d,
+            },
+            camo: {
+                U: 0xfff6eb,
+                D: 0xbfb672,
+                F: 0x37241c,
+                R: 0x718456,
+                B: 0x805831,
+                L: 0x37431d,
+                P: 0x08101a,
+                G: 0xbfb672,
+            },
+            rain: {
+                U: 0xfafaff,
+                D: 0xedb92d,
+                F: 0xce2135,
+                R: 0x449a89,
+                B: 0xec582f,
+                L: 0xa3a947,
+                P: 0x08101a,
+                G: 0x87b9ac,
+            },
+        };
+
+        this.colors = JSON.parse(JSON.stringify(this.defaults));
+    }
+
+    getColors() {
+        return this.colors[this.theme];
+    }
+
+    setTheme(theme = false, force = false) {
+        if (theme === this.theme && force === false) return;
+        if (theme !== false) this.theme = theme;
+
+        const colors = this.getColors();
+
+        this.game.dom.prefs
+            .querySelectorAll(".range__handle div")
+            .forEach((range) => {
+                range.style.background =
+                    "#" + colors.R.toString(16).padStart(6, "0");
+            });
+
+        this.game.cube.updateColors(colors);
+
+        this.game.confetti.updateColors(colors);
+
+        this.game.dom.back.style.background =
+            "#" + colors.G.toString(16).padStart(6, "0");
+    }
+}
+
+class ThemeEditor {
+    constructor(game) {
+        this.game = game;
+
+        this.editColor = "R";
+
+        this.getPieceColor = this.getPieceColor.bind(this);
+    }
+
+    colorFromHSL(h, s, l) {
+        h = Math.round(h);
+        s = Math.round(s);
+        l = Math.round(l);
+
+        return new THREE.Color(`hsl(${h}, ${s}%, ${l}%)`);
+    }
+
+    setHSL(color = null, animate = false) {
+        this.editColor = color === null ? "R" : color;
+
+        const hsl = new THREE.Color(
+            this.game.themes.getColors()[this.editColor]
+        );
+
+        const { h, s, l } = hsl.getHSL(hsl);
+        const { hue, saturation, lightness } = this.game.preferences.ranges;
+
+        if (animate) {
+            const ho = hue.value / 360;
+            const so = saturation.value / 100;
+            const lo = lightness.value / 100;
+
+            const colorOld = this.colorFromHSL(
+                hue.value,
+                saturation.value,
+                lightness.value
+            );
+
+            if (this.tweenHSL) this.tweenHSL.stop();
+
+            this.tweenHSL = new Tween({
+                duration: 200,
+                easing: Easing.Sine.Out(),
+                onUpdate: (tween) => {
+                    hue.setValue((ho + (h - ho) * tween.value) * 360);
+                    saturation.setValue((so + (s - so) * tween.value) * 100);
+                    lightness.setValue((lo + (l - lo) * tween.value) * 100);
+
+                    const colorTween = colorOld.clone().lerp(hsl, tween.value);
+
+                    const colorTweenStyle = colorTween.getStyle();
+                    const colorTweenHex = colorTween.getHSL(colorTween);
+
+                    hue.handle.style.color = colorTweenStyle;
+                    saturation.handle.style.color = colorTweenStyle;
+                    lightness.handle.style.color = colorTweenStyle;
+
+                    saturation.track.style.color = this.colorFromHSL(
+                        colorTweenHex.h * 360,
+                        100,
+                        50
+                    ).getStyle();
+                    lightness.track.style.color = this.colorFromHSL(
+                        colorTweenHex.h * 360,
+                        colorTweenHex.s * 100,
+                        50
+                    ).getStyle();
+
+                    this.game.dom.theme.style.display = "none";
+                    this.game.dom.theme.offsetHeight;
+                    this.game.dom.theme.style.display = "";
+                },
+                onComplete: () => {
+                    this.updateHSL();
+                    this.game.storage.savePreferences();
+                },
+            });
+        } else {
+            hue.setValue(h * 360);
+            saturation.setValue(s * 100);
+            lightness.setValue(l * 100);
+
+            this.updateHSL();
+            this.game.storage.savePreferences();
+        }
+    }
+
+    updateHSL() {
+        const { hue, saturation, lightness } = this.game.preferences.ranges;
+
+        const h = hue.value;
+        const s = saturation.value;
+        const l = lightness.value;
+
+        const color = this.colorFromHSL(h, s, l).getStyle();
+
+        hue.handle.style.color = color;
+        saturation.handle.style.color = color;
+        lightness.handle.style.color = color;
+
+        saturation.track.style.color = this.colorFromHSL(h, 100, 50).getStyle();
+        lightness.track.style.color = this.colorFromHSL(h, s, 50).getStyle();
+
+        this.game.dom.theme.style.display = "none";
+        this.game.dom.theme.offsetHeight;
+        this.game.dom.theme.style.display = "";
+
+        const theme = this.game.themes.theme;
+
+        this.game.themes.colors[theme][this.editColor] = this.colorFromHSL(
+            h,
+            s,
+            l
+        ).getHex();
+        this.game.themes.setTheme();
+    }
+
+    colorPicker(enable) {
+        if (enable) {
+            this.game.dom.game.addEventListener(
+                "click",
+                this.getPieceColor,
+                false
+            );
+        } else {
+            this.game.dom.game.removeEventListener(
+                "click",
+                this.getPieceColor,
+                false
+            );
+        }
+    }
+
+    getPieceColor(event) {
+        const clickEvent = event.touches
+            ? event.touches[0] || event.changedTouches[0]
+            : event;
+
+        const clickPosition = new THREE.Vector2(
+            clickEvent.pageX,
+            clickEvent.pageY
+        );
+
+        let edgeIntersect = this.game.controls.getIntersect(
+            clickPosition,
+            this.game.cube.edges,
+            true
+        );
+        let pieceIntersect = this.game.controls.getIntersect(
+            clickPosition,
+            this.game.cube.cubes,
+            true
+        );
+
+        if (edgeIntersect !== false) {
+            const edge = edgeIntersect.object;
+
+            const position = edge.parent
+                .localToWorld(edge.position.clone())
+                .sub(this.game.cube.object.position)
+                .sub(this.game.cube.animator.position);
+
+            const mainAxis = this.game.controls.getMainAxis(position);
+            if (position.multiplyScalar(2).round()[mainAxis] < 1)
+                edgeIntersect = false;
+        }
+
+        const name = edgeIntersect
+            ? edgeIntersect.object.name
+            : pieceIntersect
+            ? "P"
+            : "G";
+
+        this.setHSL(name, true);
+    }
+
+    resetTheme() {
+        this.game.themes.colors[this.game.themes.theme] = JSON.parse(
+            JSON.stringify(this.game.themes.defaults[this.game.themes.theme])
+        );
+
+        this.game.themes.setTheme();
+
+        this.setHSL(this.editColor, true);
+    }
+}
+
+const States = {
+    3: {
+        checkerboard: {
+            names: [
+                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+                18, 19, 20, 21, 22, 23, 24, 25, 26,
+            ],
+            positions: [
+                { x: 1 / 3, y: -1 / 3, z: 1 / 3 },
+                { x: -1 / 3, y: 1 / 3, z: 0 },
+                { x: 1 / 3, y: -1 / 3, z: -1 / 3 },
+                { x: -1 / 3, y: 0, z: -1 / 3 },
+                { x: 1 / 3, y: 0, z: 0 },
+                { x: -1 / 3, y: 0, z: 1 / 3 },
+                { x: 1 / 3, y: 1 / 3, z: 1 / 3 },
+                { x: -1 / 3, y: -1 / 3, z: 0 },
+                { x: 1 / 3, y: 1 / 3, z: -1 / 3 },
+                { x: 0, y: 1 / 3, z: -1 / 3 },
+                { x: 0, y: -1 / 3, z: 0 },
+                { x: 0, y: 1 / 3, z: 1 / 3 },
+                { x: 0, y: 0, z: 1 / 3 },
+                { x: 0, y: 0, z: 0 },
+                { x: 0, y: 0, z: -1 / 3 },
+                { x: 0, y: -1 / 3, z: -1 / 3 },
+                { x: 0, y: 1 / 3, z: 0 },
+                { x: 0, y: -1 / 3, z: 1 / 3 },
+                { x: -1 / 3, y: -1 / 3, z: 1 / 3 },
+                { x: 1 / 3, y: 1 / 3, z: 0 },
+                { x: -1 / 3, y: -1 / 3, z: -1 / 3 },
+                { x: 1 / 3, y: 0, z: -1 / 3 },
+                { x: -1 / 3, y: 0, z: 0 },
+                { x: 1 / 3, y: 0, z: 1 / 3 },
+                { x: -1 / 3, y: 1 / 3, z: 1 / 3 },
+                { x: 1 / 3, y: -1 / 3, z: 0 },
+                { x: -1 / 3, y: 1 / 3, z: -1 / 3 },
+            ],
+            rotations: [
+                { x: -Math.PI, y: 0, z: Math.PI },
+                { x: Math.PI, y: 0, z: 0 },
+                { x: -Math.PI, y: 0, z: Math.PI },
+                { x: 0, y: 0, z: 0 },
+                { x: 0, y: 0, z: Math.PI },
+                { x: 0, y: 0, z: 0 },
+                { x: -Math.PI, y: 0, z: Math.PI },
+                { x: Math.PI, y: 0, z: 0 },
+                { x: -Math.PI, y: 0, z: Math.PI },
+                { x: 0, y: 0, z: Math.PI },
+                { x: 0, y: 0, z: 0 },
+                { x: 0, y: 0, z: Math.PI },
+                { x: -Math.PI, y: 0, z: 0 },
+                { x: Math.PI, y: 0, z: Math.PI },
+                { x: Math.PI, y: 0, z: 0 },
+                { x: 0, y: 0, z: Math.PI },
+                { x: 0, y: 0, z: 0 },
+                { x: 0, y: 0, z: Math.PI },
+                { x: Math.PI, y: 0, z: Math.PI },
+                { x: -Math.PI, y: 0, z: 0 },
+                { x: Math.PI, y: 0, z: Math.PI },
+                { x: 0, y: 0, z: 0 },
+                { x: 0, y: 0, z: Math.PI },
+                { x: 0, y: 0, z: 0 },
+                { x: Math.PI, y: 0, z: Math.PI },
+                { x: -Math.PI, y: 0, z: 0 },
+                { x: Math.PI, y: 0, z: Math.PI },
+            ],
+            size: 3,
+        },
+    },
+};
+
+class IconsConverter {
+    constructor(options) {
+        options = Object.assign(
+            {
+                tagName: "icon",
+                className: "icon",
+                styles: false,
+                icons: {},
+                observe: false,
+                convert: false,
+            },
+            options || {}
+        );
+
+        this.tagName = options.tagName;
+        this.className = options.className;
+        this.icons = options.icons;
+
+        this.svgTag = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "svg"
+        );
+        this.svgTag.setAttribute("class", this.className);
+
+        if (options.styles) this.addStyles();
+        if (options.convert) this.convertAllIcons();
+
+        if (options.observe) {
+            const MutationObserver =
+                window.MutationObserver || window.WebKitMutationObserver;
+            this.observer = new MutationObserver((mutations) => {
+                this.convertAllIcons();
+            });
+            this.observer.observe(document.documentElement, {
+                childList: true,
+                subtree: true,
+            });
+        }
+
+        return this;
+    }
+
+    convertAllIcons() {
+        document.querySelectorAll(this.tagName).forEach((icon) => {
+            this.convertIcon(icon);
+        });
+    }
+
+    convertIcon(icon) {
+        const svgData = this.icons[icon.attributes[0].localName];
+
+        if (typeof svgData === "undefined") return;
+
+        const svg = this.svgTag.cloneNode(true);
+        const viewBox = svgData.viewbox.split(" ");
+
+        svg.setAttributeNS(null, "viewBox", svgData.viewbox);
+        svg.style.width = viewBox[2] / viewBox[3] + "em";
+        svg.style.height = "1em";
+        svg.innerHTML = svgData.content;
+
+        icon.parentNode.replaceChild(svg, icon);
+    }
+
+    addStyles() {
+        const style = document.createElement("style");
+        style.innerHTML = `.${this.className} { display: inline-block; font-size: inherit; overflow: visible; vertical-align: -0.125em; preserveAspectRatio: none; }`;
+        document.head.appendChild(style);
+    }
+}
+
+const Icons = new IconsConverter({
+    icons: {
+        settings: {
+            viewbox: "0 0 512 512",
+            content:
+                '<path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z" />',
+        },
+        back: {
+            viewbox: "0 0 512 512",
+            content:
+                '<path transform="translate(512, 0) scale(-1,1)" fill="currentColor" d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />',
+        },
+        trophy: {
+            viewbox: "0 0 576 512",
+            content:
+                '<path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 66.5 77.9 131.7 171.9 142.4C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6C498.4 275.6 576 210.3 576 144V88c0-13.3-10.7-24-24-24zM64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-47.5-16.4-77-49.9-77-70.2zm448 0c0 20.2-29.4 53.8-77 70.2 7-25 11.8-53.6 12.8-86.2H512v16zm-127.3 4.7l-39.6 38.6 9.4 54.6c1.7 9.8-8.7 17.2-17.4 12.6l-49-25.8-49 25.8c-8.8 4.6-19.1-2.9-17.4-12.6l9.4-54.6-39.6-38.6c-7.1-6.9-3.2-19 6.7-20.5l54.8-8 24.5-49.6c4.4-8.9 17.1-8.9 21.5 0l24.5 49.6 54.8 8c9.6 1.5 13.5 13.6 6.4 20.5z" />',
+        },
+        cancel: {
+            viewbox: "0 0 352 512",
+            content:
+                '<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" />',
+        },
+        theme: {
+            viewbox: "0 0 512 512",
+            content:
+                '<path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/>',
+        },
+        reset: {
+            viewbox: "0 0 512 512",
+            content:
+                '<path fill="currentColor" d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z" />',
+        },
+        trash: {
+            viewbox: "0 0 448 512",
+            content:
+                '<path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" />',
+        },
+    },
+
+    convert: true,
+});
+
+const STATE = {
+    Menu: 0,
+    Playing: 1,
+    Complete: 2,
+    Stats: 3,
+    Prefs: 4,
+    Theme: 5,
+};
+
+const BUTTONS = {
+    Menu: ["stats", "prefs"],
+    Playing: ["back"],
+    Complete: [],
+    Stats: [],
+    Prefs: ["back", "theme"],
+    Theme: ["back", "reset"],
+    None: [],
+};
+
+const SHOW = true;
+const HIDE = false;
+
+class Game {
+    constructor() {
+        this.dom = {
+            ui: document.querySelector(".ui"),
+            game: document.querySelector(".ui__game"),
+            back: document.querySelector(".ui__background"),
+            prefs: document.querySelector(".ui__prefs"),
+            theme: document.querySelector(".ui__theme"),
+            stats: document.querySelector(".ui__stats"),
+            texts: {
+                title: document.querySelector(".text--title"),
+                note: document.querySelector(".text--note"),
+                timer: document.querySelector(".text--timer"),
+                complete: document.querySelector(".text--complete"),
+                best: document.querySelector(".text--best-time"),
+                theme: document.querySelector(".text--theme"),
+            },
+            buttons: {
+                prefs: document.querySelector(".btn--prefs"),
+                back: document.querySelector(".btn--back"),
+                stats: document.querySelector(".btn--stats"),
+                reset: document.querySelector(".btn--reset"),
+                theme: document.querySelector(".btn--theme"),
+            },
+        };
+
+        this.world = new World(this);
+        this.cube = new Cube(this);
+        this.controls = new Controls(this);
+        this.scrambler = new Scrambler(this);
+        this.transition = new Transition(this);
+        this.timer = new Timer(this);
+        this.preferences = new Preferences(this);
+        this.scores = new Scores(this);
+        this.storage = new Storage(this);
+        this.confetti = new Confetti(this);
+        this.themes = new Themes(this);
+        this.themeEditor = new ThemeEditor(this);
+
+        this.initActions();
+
+        this.state = STATE.Menu;
+        this.newGame = false;
+        this.saved = false;
+
+        this.storage.init();
+        this.preferences.init();
+        this.cube.init();
+        this.transition.init();
+
+        this.storage.loadGame();
+        this.scores.calcStats();
+
+        setTimeout(() => {
+            this.transition.float();
+            this.transition.cube(SHOW);
+
+            setTimeout(() => this.transition.title(SHOW), 700);
+            setTimeout(
+                () => this.transition.buttons(BUTTONS.Menu, BUTTONS.None),
+                1000
+            );
+        }, 500);
+    }
+
+    initActions() {
+        let tappedTwice = false;
+
+        this.dom.game.addEventListener(
+            "click",
+            (event) => {
+                if (this.transition.activeTransitions > 0) return;
+                if (this.state === STATE.Playing) return;
+
+                if (this.state === STATE.Menu) {
+                    if (!tappedTwice) {
+                        tappedTwice = true;
+                        setTimeout(() => (tappedTwice = false), 300);
+                        return false;
+                    }
+
+                    this.game(SHOW);
+                } else if (this.state === STATE.Complete) {
+                    this.complete(HIDE);
+                } else if (this.state === STATE.Stats) {
+                    this.stats(HIDE);
+                }
+            },
+            false
+        );
+
+        this.controls.onMove = () => {
+            if (this.newGame) {
+                this.timer.start(true);
+                this.newGame = false;
+            }
+        };
+
+        this.dom.buttons.back.onclick = (event) => {
+            if (this.transition.activeTransitions > 0) return;
+
+            if (this.state === STATE.Playing) {
+                this.game(HIDE);
+            } else if (this.state === STATE.Prefs) {
+                this.prefs(HIDE);
+            } else if (this.state === STATE.Theme) {
+                this.theme(HIDE);
+            }
+        };
+
+        this.dom.buttons.reset.onclick = (event) => {
+            if (this.state === STATE.Theme) {
+                this.themeEditor.resetTheme();
+            }
+        };
+
+        this.dom.buttons.prefs.onclick = (event) => this.prefs(SHOW);
+
+        this.dom.buttons.theme.onclick = (event) => this.theme(SHOW);
+
+        this.dom.buttons.stats.onclick = (event) => this.stats(SHOW);
+
+        this.controls.onSolved = () => this.complete(SHOW);
+    }
+
+    game(show) {
+        if (show) {
+            if (!this.saved) {
+                this.scrambler.scramble();
+                this.controls.scrambleCube();
+                this.newGame = true;
+            }
+
+            const duration = this.saved
+                ? 0
+                : this.scrambler.converted.length *
+                  (this.controls.flipSpeeds[0] + 10);
+
+            this.state = STATE.Playing;
+            this.saved = true;
+
+            this.transition.buttons(BUTTONS.None, BUTTONS.Menu);
+
+            this.transition.zoom(STATE.Playing, duration);
+            this.transition.title(HIDE);
+
+            setTimeout(() => {
+                this.transition.timer(SHOW);
+                this.transition.buttons(BUTTONS.Playing, BUTTONS.None);
+            }, this.transition.durations.zoom - 1000);
+
+            setTimeout(() => {
+                this.controls.enable();
+                if (!this.newGame) this.timer.start(true);
+            }, this.transition.durations.zoom);
+        } else {
+            this.state = STATE.Menu;
+
+            this.transition.buttons(BUTTONS.Menu, BUTTONS.Playing);
+
+            this.transition.zoom(STATE.Menu, 0);
+
+            this.controls.disable();
+            if (!this.newGame) this.timer.stop();
+            this.transition.timer(HIDE);
+
+            setTimeout(
+                () => this.transition.title(SHOW),
+                this.transition.durations.zoom - 1000
+            );
+
+            this.playing = false;
+            this.controls.disable();
+        }
+    }
+
+    prefs(show) {
+        if (show) {
+            if (this.transition.activeTransitions > 0) return;
+
+            this.state = STATE.Prefs;
+
+            this.transition.buttons(BUTTONS.Prefs, BUTTONS.Menu);
+
+            this.transition.title(HIDE);
+            this.transition.cube(HIDE);
+
+            setTimeout(() => this.transition.preferences(SHOW), 1000);
+        } else {
+            this.cube.resize();
+
+            this.state = STATE.Menu;
+
+            this.transition.buttons(BUTTONS.Menu, BUTTONS.Prefs);
+
+            this.transition.preferences(HIDE);
+
+            setTimeout(() => this.transition.cube(SHOW), 500);
+            setTimeout(() => this.transition.title(SHOW), 1200);
+        }
+    }
+
+    theme(show) {
+        this.themeEditor.colorPicker(show);
+
+        if (show) {
+            if (this.transition.activeTransitions > 0) return;
+
+            this.cube.loadFromData(States["3"]["checkerboard"]);
+
+            this.themeEditor.setHSL(null, false);
+
+            this.state = STATE.Theme;
+
+            this.transition.buttons(BUTTONS.Theme, BUTTONS.Prefs);
+
+            this.transition.preferences(HIDE);
+
+            setTimeout(() => this.transition.cube(SHOW, true), 500);
+            setTimeout(() => this.transition.theming(SHOW), 1000);
+        } else {
+            this.state = STATE.Prefs;
+
+            this.transition.buttons(BUTTONS.Prefs, BUTTONS.Theme);
+
+            this.transition.cube(HIDE, true);
+            this.transition.theming(HIDE);
+
+            setTimeout(() => this.transition.preferences(SHOW), 1000);
+            setTimeout(() => {
+                const gameCubeData = JSON.parse(
+                    localStorage.getItem("theCube_savedState")
+                );
+
+                if (!gameCubeData) {
+                    this.cube.resize(true);
+                    return;
+                }
+
+                this.cube.loadFromData(gameCubeData);
+            }, 1500);
+        }
+    }
+
+    stats(show) {
+        if (show) {
+            if (this.transition.activeTransitions > 0) return;
+
+            this.state = STATE.Stats;
+
+            this.transition.buttons(BUTTONS.Stats, BUTTONS.Menu);
+
+            this.transition.title(HIDE);
+            this.transition.cube(HIDE);
+
+            setTimeout(() => this.transition.stats(SHOW), 1000);
+        } else {
+            this.state = STATE.Menu;
+
+            this.transition.buttons(BUTTONS.Menu, BUTTONS.None);
+
+            this.transition.stats(HIDE);
+
+            setTimeout(() => this.transition.cube(SHOW), 500);
+            setTimeout(() => this.transition.title(SHOW), 1200);
+        }
+    }
+
+    complete(show) {
+        if (show) {
+            this.transition.buttons(BUTTONS.Complete, BUTTONS.Playing);
+
+            this.state = STATE.Complete;
+            this.saved = false;
+
+            this.controls.disable();
+            this.timer.stop();
+            this.storage.clearGame();
+
+            this.bestTime = this.scores.addScore(this.timer.deltaTime);
+
+            this.transition.zoom(STATE.Menu, 0);
+            this.transition.elevate(SHOW);
+
+            setTimeout(() => {
+                this.transition.complete(SHOW, this.bestTime);
+                this.confetti.start();
+            }, 1000);
+        } else {
+            this.state = STATE.Stats;
+            this.saved = false;
+
+            this.transition.timer(HIDE);
+            this.transition.complete(HIDE, this.bestTime);
+            this.transition.cube(HIDE);
+            this.timer.reset();
+
+            setTimeout(() => {
+                this.cube.reset();
+                this.confetti.stop();
+
+                this.transition.stats(SHOW);
+                this.transition.elevate(0);
+            }, 1000);
+
+            return false;
+        }
+    }
+}
+
+window.version = "0.99.2";
+window.game = new Game();
diff --git a/The 3D Cube game/style.scss b/The 3D Cube game/style.scss
new file mode 100644
index 000000000..d26edbaa7
--- /dev/null
+++ b/The 3D Cube game/style.scss	
@@ -0,0 +1,359 @@
+@font-face
+  font-family: 'BungeeFont'
+  font-weight: normal
+  font-style: normal
+  src: url('data:font/truetype;charset=utf-8;base64,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') format('woff2'), url('data:font/truetype;charset=utf-8;base64,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') format('woff')
+
+=inset($position: absolute)
+  position: $position
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+
+*
+  &,
+  &:before,
+  &:after
+    -webkit-user-select: none
+    -moz-user-select: none
+    user-select: none
+    box-sizing: border-box
+    cursor: inherit
+    margin: 0
+    padding: 0
+    outline: none
+    font-size: inherit
+    font-family: inherit
+    font-weight: inherit
+    font-style: inherit
+    text-transform: uppercase
+
+  &:focus
+    outline: none
+
+html
+  -webkit-tap-highlight-color: transparent
+  -webkit-text-size-adjust: 100%
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  -ms-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%
+  overflow: hidden
+  height: 100%
+
+body
+  font-family: 'BungeeFont', sans-serif
+  font-weight: normal
+  font-style: normal
+  line-height: 1
+  cursor: default
+  overflow: hidden
+  height: 100%
+  font-size: 5rem
+
+.icon
+  display: inline-block
+  font-size: inherit
+  overflow: visible
+  vertical-align: -0.125em
+  preserveAspectRatio: none
+  
+.range
+  position: relative
+  width: 14em
+  z-index: 1
+  opacity: 0
+
+  &:not(:last-child)
+    margin-bottom: 2em
+
+  &__label
+    position: relative
+    font-size: 0.9em
+    line-height: 0.75em
+    padding-bottom: 0.5em
+    z-index: 2
+
+  &__track
+    position: relative
+    height: 1em
+    margin-left: 0.5em
+    margin-right: 0.5em
+    z-index: 3
+
+    &-line
+      position: absolute
+      background: rgba(#000, 0.2)
+      height: 2px
+      top: 50%
+      margin-top: -1px
+      left: -0.5em
+      right: -0.5em
+      transform-origin: left center
+
+  &__handle
+    position: absolute
+    width: 0
+    height: 0
+    top: 50%
+    left: 0
+    cursor: pointer
+    z-index: 1
+
+    div
+      transition: background 500ms ease
+      position: absolute
+      left: 0
+      top: 0
+      width: 0.9em
+      height: 0.9em
+      border-radius: 0.2em
+      margin-left: -0.45em
+      margin-top: -0.45em
+      background: #41aac8
+      border-bottom: 2px solid rgba(#000, 0.2)
+
+      .range.is-active &
+        transform: scale(1.25)
+
+    &:after
+      content: ''
+      position: absolute
+      left: 0
+      top: 0
+      width: 3em
+      height: 3em
+      margin-left: -1.5em
+      margin-top: -1.5em
+
+  &__list
+    display: flex
+    flex-flow: row nowrap
+    justify-content: space-between
+    position: relative
+    padding-top: 0.5em
+    font-size: 0.55em
+    color: rgba(#000, 0.5)
+    z-index: 1
+
+  &--type
+    &-color
+      &:not(:last-child)
+        margin-bottom: 1em
+
+      .range
+        &__list
+          display: none
+
+        &__handle
+          > div
+            background: currentColor !important
+
+        &__track
+          &-line
+            background: transparent
+
+            &:after
+              +inset
+              content: ''
+              opacity: 0.5
+
+  &--color
+    &-hue
+      .range
+        &__handle
+          color: red
+
+        &__track
+          color: red
+
+          &-line
+            &:after
+              background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
+              
+
+    &-saturation
+      .range
+        &__handle
+          color: red
+
+        &__track
+          color: red
+
+          &-line
+            &:after
+              background: linear-gradient(to right, gray, currentColor)
+
+    &-lightness
+      .range
+        &__handle
+          color: red
+
+        &__track
+          color: red
+
+          &-line
+            &:after
+              background: linear-gradient(to right, black, currentColor, white)
+
+.stats
+  position: relative
+  width: 14em
+  z-index: 1
+  display: flex
+  justify-content: space-between
+  opacity: 0
+
+  &:not(:last-child)
+    margin-bottom: 1.5em
+
+  > i
+    display: block
+    color: rgba(#000, 0.5)
+    font-size: 0.9em
+
+  > b
+    display: block
+    font-size: 0.9em
+
+    > i
+      font-size: 0.75em
+
+  &[name="worst-time"]
+    display: none
+
+.text
+  position: absolute
+  left: 0
+  right: 0
+  text-align: center
+  line-height: 0.75
+  perspective: 100rem
+  opacity: 0
+
+  i
+    display: inline-block
+    opacity: 0
+    white-space: pre-wrap
+
+  &--title
+    bottom: 75%
+    font-size: 4.4em
+    height: 1.2em
+
+    span
+      display: block
+
+      &:first-child
+        font-size: 0.5em
+        margin-bottom: 0.2em
+
+  &--note
+    top: 87%
+    font-size: 1em
+
+  &--timer
+    bottom: 78%
+    font-size: 3.5em
+    line-height: 1
+
+  &--complete,
+  &--best-time
+    font-size: 1.5em
+    top: 83%
+    line-height: 1em
+
+.btn
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  background-color: transparent
+  border-radius: 0
+  border-width: 0
+  position: absolute
+  pointer-events: none
+  font-size: 1.2em
+  color: rgba(#000, 0.25)
+  opacity: 0
+
+  &:after
+    position: absolute
+    content: ''
+    width: 3em
+    height: 3em
+    left: 50%
+    top: 50%
+    margin-left: -1.5em
+    margin-top: -1.5em
+    border-radius: 100%
+
+  &--bl
+    bottom: 0.8em
+    left: 0.8em
+
+  &--br
+    bottom: 0.8em
+    right: 0.8em
+
+  &--bc
+    bottom: 0.8em
+    left: calc(50% - 0.5em)
+
+  svg 
+    display: block
+
+  &--cancel
+    display: none !important
+.ui
+  pointer-events: none
+  color: #070d15
+
+  &,
+  &__background,
+  &__game,
+  &__texts,
+  &__prefs,
+  &__theme,
+  &__stats,
+  &__buttons
+    +inset
+    overflow: hidden
+
+  &__background
+    z-index: 1
+    transition: background 500ms ease
+    background: #d1d5db
+
+    &:after
+      +inset
+      content: ''
+      background-image: linear-gradient(to bottom, rgba(#fff, 1) 50%, rgba(#fff, 0) 100%)
+
+  &__game
+    pointer-events: all
+    z-index: 2
+
+    canvas
+      display: block
+      width: 100%
+      height: 100%
+
+  &__texts
+    z-index: 3
+
+  &__prefs,
+  &__stats,
+  &__theme
+    display: flex
+    flex-flow: column nowrap
+    justify-content: center
+    align-items: center
+    overflow: hidden
+    z-index: 4
+
+  &__theme
+    padding-top: 15em
+
+  &__buttons
+    z-index: 5
diff --git a/Unruly Tower Game/index.html b/Unruly Tower Game/index.html
new file mode 100644
index 000000000..666e742fd
--- /dev/null
+++ b/Unruly Tower Game/index.html	
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.scss" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="container">
+        <canvas height="900" width="1600"></canvas>
+    </div>
+
+
+
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Unruly Tower Game/script.js b/Unruly Tower Game/script.js
new file mode 100644
index 000000000..49269f426
--- /dev/null
+++ b/Unruly Tower Game/script.js	
@@ -0,0 +1,944 @@
+class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+}
+
+class OffScreenCanvas {
+    constructor(width, height) {
+        let c = document.createElement("canvas");
+        c.width = width;
+        c.height = height;
+        this.ctx = c.getContext("2d");
+        this.canvas = c;
+    }
+}
+
+class Opening {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    draw($) {
+        let center = this.x - $.state.pos.x,
+            l = getCirclePoint(600, 800, center - $.platform.width / 2),
+            r = getCirclePoint(600, 800, center + $.platform.width / 2);
+
+        if (l > r) {
+            let sl = getCirclePoint(560, 800, center - $.platform.width / 2),
+                sr = getCirclePoint(560, 800, center + $.platform.width / 2),
+                c = new OffScreenCanvas(1600, 250),
+                sc = new OffScreenCanvas(1600, 250),
+                smallDoor = drawDoor(
+                    sc,
+                    "#b9e2d7",
+                    sr,
+                    sl - sr,
+                    250,
+                    "#262525"
+                ),
+                bigDoor = drawDoor(
+                    c,
+                    $.ctx.createPattern(smallDoor, "no-repeat"),
+                    r,
+                    l - r,
+                    250
+                );
+
+            $.ctx.drawImage(bigDoor, 0, this.y + $.state.pos.y);
+        }
+    }
+}
+
+function prepareGraphics() {
+    const b = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/";
+
+    prepareImage($, b + "c-standing.png", "standing", 0, false);
+    prepareImage($, b + "c-standing.png", "standing", 1, true);
+
+    prepareImage($, b + "c-jumping3.png", "jumpingUp", 0, false);
+    prepareImage($, b + "c-jumping3.png", "jumpingUp", 1, true);
+
+    prepareImage($, b + "c-jumpingdown.png", "jumpingDown", 0, false);
+    prepareImage($, b + "c-jumpingdown.png", "jumpingDown", 1, true);
+
+    prepareImage($, b + "Slice 1_copy.png", "runningLeft", 0, false);
+    prepareImage($, b + "Slice 1_copy.png", "runningLeft", 1, false);
+    prepareImage($, b + "c-walking3.png", "runningLeft", 2, false);
+    prepareImage($, b + "c-walking3.png", "runningLeft", 3, false);
+
+    prepareImage($, b + "Slice 1_copy.png", "runningRight", 0, true);
+    prepareImage($, b + "Slice 1_copy.png", "runningRight", 1, true);
+    prepareImage($, b + "c-walking3.png", "runningRight", 2, true);
+    prepareImage($, b + "c-walking3.png", "runningRight", 3, true);
+}
+
+function prepareImage($, src, type, index, flipped) {
+    let temp = new OffScreenCanvas(317, 300),
+        image = new Image();
+
+    image.onload = function () {
+        if (flipped) {
+            temp.ctx.save();
+            temp.ctx.scale(-1, 1);
+        }
+
+        temp.ctx.drawImage(image, 0, 0, 317 * (flipped ? -1 : 1), 300);
+
+        if (flipped) {
+            temp.ctx.restore();
+        }
+
+        $.animationFrames[type][index] = temp.canvas;
+    };
+
+    image.src = src;
+
+    return temp.canvas;
+}
+
+function drawDoor(c, color, x, width, height, bg) {
+    let y = 90;
+
+    if (bg) {
+        c.ctx.fillStyle = bg;
+        c.ctx.fillRect(0, 0, c.canvas.width, c.canvas.height);
+    }
+
+    c.ctx.fillStyle = color;
+    c.ctx.beginPath();
+    c.ctx.moveTo(x, y);
+    c.ctx.lineTo(x, y + height);
+    c.ctx.lineTo(x + width, y + height);
+    c.ctx.lineTo(x + width, y);
+    c.ctx.ellipse(x + width / 2, y, width / 2, 90, 0, 0, Math.PI, true);
+    c.ctx.fill();
+
+    return c.canvas;
+}
+
+class Platform {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.infront = false;
+        this.outerBox = null;
+    }
+
+    getY($) {
+        return this.y + $.state.pos.y;
+    }
+
+    isInFront($) {
+        let center = this.x - $.state.pos.x,
+            innerBox = getBox($, 600, center),
+            outerBox = getBox($, 680, center);
+
+        this.infront = outerBox.left > outerBox.right;
+        return this.infront;
+    }
+
+    drawFront($) {
+        $.ctx.fillStyle = $.colors.wood2;
+        $.ctx.fillRect(
+            this.outerBox.left,
+            this.getY($),
+            this.outerBox.width,
+            $.platform.height
+        );
+    }
+
+    draw($) {
+        let center = this.x - $.state.pos.x,
+            innerBox = getBox($, 600, center),
+            outerBox = getBox($, 680, center),
+            isLeftSide = innerBox.left > outerBox.left;
+
+        this.infront = outerBox.left > outerBox.right;
+
+        for (let dir of ["left", "right"]) {
+            let adjust = dir === "left" ? outerBox.unit : outerBox.unit * 6,
+                outer = {
+                    top: {
+                        left: new Point(
+                            outerBox.left + adjust,
+                            this.getY($) + $.platform.height
+                        ),
+                        right: new Point(
+                            outerBox.left + outerBox.unit + adjust,
+                            this.getY($) + $.platform.height
+                        ),
+                    },
+                    bottom: {
+                        left: new Point(
+                            innerBox.left + adjust,
+                            this.getY($) + 70
+                        ),
+                        right: new Point(
+                            innerBox.left + innerBox.unit + adjust,
+                            this.getY($) + 70
+                        ),
+                    },
+                },
+                inner = {
+                    top: {
+                        left: new Point(
+                            outerBox.left + adjust,
+                            this.getY($) + ($.platform.height - 10)
+                        ),
+                        right: new Point(
+                            outerBox.left + outerBox.unit + adjust,
+                            this.getY($) + ($.platform.height - 10)
+                        ),
+                    },
+                    bottom: {
+                        left: new Point(
+                            innerBox.left + adjust,
+                            this.getY($) + 60
+                        ),
+                        right: new Point(
+                            innerBox.left + innerBox.unit + adjust,
+                            this.getY($) + 60
+                        ),
+                    },
+                };
+
+            drawPolygon(
+                $,
+                $.colors.wood3,
+                inner.top.left,
+                inner.bottom.left,
+                inner.bottom.right,
+                inner.top.right
+            );
+            drawPolygon(
+                $,
+                $.colors.wood4,
+                outer.top.left,
+                outer.bottom.left,
+                outer.bottom.right,
+                outer.top.right
+            );
+
+            if (!isLeftSide) {
+                drawPolygon(
+                    $,
+                    $.colors.wood5,
+                    inner.top.right,
+                    outer.top.right,
+                    outer.bottom.right,
+                    inner.bottom.right
+                );
+            } else {
+                drawPolygon(
+                    $,
+                    $.colors.wood5,
+                    inner.top.left,
+                    outer.top.left,
+                    outer.bottom.left,
+                    inner.bottom.left
+                );
+            }
+        }
+
+        $.ctx.fillStyle = $.colors.wood1;
+        if (isLeftSide) {
+            $.ctx.fillRect(
+                innerBox.left,
+                this.getY($),
+                outerBox.left - innerBox.left,
+                $.platform.height
+            );
+        } else {
+            $.ctx.fillRect(
+                outerBox.right,
+                this.getY($),
+                innerBox.left - outerBox.left,
+                $.platform.height
+            );
+        }
+
+        this.outerBox = outerBox;
+    }
+}
+
+function drawPolygon($, color, ...points) {
+    $.ctx.fillStyle = color;
+    $.ctx.beginPath();
+    $.ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+        $.ctx.lineTo(points[i].x, points[i].y);
+    }
+    $.ctx.fill();
+}
+
+function getBox($, radius, center) {
+    let l = getCirclePoint(radius, 800, center - $.platform.width / 2),
+        r = getCirclePoint(radius, 800, center + $.platform.width / 2);
+
+    return {
+        left: l,
+        right: r,
+        width: r - l,
+        unit: (r - l) / 8,
+    };
+}
+
+var fallbackCanvas = new OffScreenCanvas(10, 10).canvas;
+
+var $ = {
+    container: null,
+    canvas: null,
+    ctx: null,
+    platforms: [
+        new Platform(1600, 600),
+        new Platform(1585, 600),
+        new Platform(1570, 600),
+        new Platform(1540, 500),
+        new Platform(1525, 500),
+        new Platform(1480, 500),
+        new Platform(1465, 500),
+        new Platform(1435, 400),
+        new Platform(1415, 270),
+        new Platform(1435, 135),
+        new Platform(1465, 40),
+        new Platform(1480, 40),
+        new Platform(1500, -80),
+        new Platform(1520, -200),
+        new Platform(1520, -335),
+        new Platform(1490, -460),
+        new Platform(1460, -535),
+        new Platform(1430, -610),
+        new Platform(1415, -610),
+        new Platform(1370, -610),
+        new Platform(1355, -610),
+        new Platform(1355, -610),
+        new Platform(1330, -710),
+        new Platform(1305, -810),
+        new Platform(1280, -910),
+        new Platform(1265, -910),
+        new Platform(1220, -910),
+        new Platform(1205, -910),
+        new Platform(1150, -910),
+        new Platform(1100, -910),
+    ],
+    openings: [new Opening(1600, 350), new Opening(1205, -1160)],
+    brick: {
+        shine: "",
+        shade: "rgba(256, 256, 256, 0.8)",
+        color: "rgba(186, 186, 173, 0.8)", // #BABAAD
+        width: 16,
+        height: 48,
+        padding: 4,
+    },
+    platform: {
+        height: 22,
+        width: 13 /* Degrees */,
+        color: "#5A4142",
+    },
+    tower: {
+        width: 1200,
+        shadowWidth: 130,
+        skyWidth: 200,
+    },
+    sky: {
+        bg: "#1F0B22",
+        starSizes: [2, 3, 4, 5],
+        starColors: ["#6C586F", "#857188", "#D1BDD4", "#E6D1A8"],
+    },
+    colors: {
+        bg: "#FBD0D0",
+        wood1: "#BC8550", // side
+        wood2: "#ECC897", // front
+        wood3: "#4B3937", // back support
+        wood4: "#FFB287", // front support
+        wood5: "#D58212", // side support
+    },
+    settings: {
+        maxSpeed: 0.09, // left right
+        minSpeed: 0.01, // left right
+        friction: 0.7, // left right
+        acceleration: 0.02, // left right
+        jump: {
+            gravity: {
+                boost: 0.0014,
+                normal: 0.003,
+                down: 0.004,
+            },
+            maxSpeed: 0.6,
+            fallStartSpeed: 0.07,
+            friction: 0.98,
+        },
+    },
+    storage: {
+        bricks: null,
+        sky: null,
+        shadows: null,
+    },
+    input: {
+        left: false,
+        right: false,
+        jump: false,
+    },
+    animationFrames: {
+        standing: [fallbackCanvas, fallbackCanvas],
+        jumpingUp: [fallbackCanvas, fallbackCanvas],
+        jumpingDown: [fallbackCanvas, fallbackCanvas],
+        runningLeft: [
+            fallbackCanvas,
+            fallbackCanvas,
+            fallbackCanvas,
+            fallbackCanvas,
+        ],
+        runningRight: [
+            fallbackCanvas,
+            fallbackCanvas,
+            fallbackCanvas,
+            fallbackCanvas,
+        ],
+    },
+    savedState: null,
+    state: {
+        paused: false,
+        titles: {
+            opacity: 0,
+            ready: false,
+            text: "Game Over",
+        },
+        climbstarted: false,
+        time: null,
+        dt: null,
+        climbspeed: {
+            normal: 0.05,
+            fast: 0.12,
+        },
+        pos: {
+            x: 1485,
+            y: 0,
+        },
+        activePlatforms: [],
+        jump: {
+            isGrounded: true,
+            isJumping: false,
+            isBoosting: false,
+            speed: 0,
+            nextY: 0,
+        },
+        player: {
+            dir: 1,
+            x: 725,
+            y: 350,
+            prevY: 350,
+            speed: 0,
+            animationFrame: 0,
+            animationFrameCount: 0,
+        },
+    },
+};
+
+$.container = document.getElementById("container");
+$.canvas = document.getElementsByTagName("canvas")[0];
+$.ctx = $.canvas.getContext("2d");
+
+resize();
+if (!$.savedState) {
+    $.savedState = JSON.parse(JSON.stringify($.state));
+}
+
+prepareGraphics();
+draw();
+
+window.addEventListener("keydown", keyDown, false);
+window.addEventListener("keyup", keyUp, false);
+
+function keyUp(e) {
+    move(e, false);
+}
+
+function keyDown(e) {
+    move(e, true);
+}
+
+function move(e, keyDown) {
+    if (e.keyCode === 37) $.input.left = keyDown;
+    if (e.keyCode === 39) $.input.right = keyDown;
+    if (e.keyCode === 32) $.input.jump = keyDown;
+}
+
+function resize() {
+    $.rect = $.container.getBoundingClientRect();
+
+    if ($.canvas.height > window.innerHeight) {
+        $.container.style.transform = `scale(${
+            window.innerHeight / $.canvas.height
+        })`;
+    }
+}
+
+window.addEventListener("resize", function (event) {
+    resize();
+});
+
+function draw() {
+    let now = new Date().getTime();
+    $.state.dt = now - ($.state.time || now);
+    $.state.time = now;
+
+    if (!$.state.paused) {
+        doCalculations();
+    }
+
+    if (!$.state.paused && $.state.titles.opacity !== 100) {
+        drawSky();
+        drawPlatforms(false);
+        drawBricks();
+        drawDoors();
+        drawShadows();
+        drawPlatforms(true);
+        drawPlayer($);
+    }
+
+    if ($.state.paused) {
+        drawTitles();
+    }
+
+    requestAnimationFrame(draw);
+}
+
+function drawTitles() {
+    if ($.state.titles.opacity < 100) {
+        $.state.titles.opacity += Math.floor($.state.dt * 0.2);
+    }
+
+    if ($.state.titles.opacity > 100) $.state.titles.opacity = 100;
+
+    $.ctx.fillStyle = "rgba(0, 0, 0, " + $.state.titles.opacity / 100 + ")";
+    $.ctx.rect(0, 0, $.canvas.width, $.canvas.height);
+    $.ctx.fill();
+
+    $.ctx.fillStyle =
+        "rgba(251, 199, 15, " + $.state.titles.opacity / 100 + ")";
+    $.ctx.font = "96px 'Germania One', cursive";
+    $.ctx.fillText(
+        $.state.titles.text,
+        600,
+        520 - easing($.state.titles.opacity / 100) * 40
+    );
+
+    if ($.state.titles.opacity == 100 && !$.input.jump) {
+        $.state.titles.ready = true;
+    }
+
+    if ($.state.titles.ready && $.input.jump) {
+        $.state = JSON.parse(JSON.stringify($.savedState));
+    }
+}
+
+function easing(n) {
+    // https://github.com/component/ease
+    var s = 1.70158;
+    return --n * n * ((s + 1) * n + s) + 1;
+}
+
+function drawPlayer($) {
+    let drawY = $.state.player.y + $.state.pos.y - 48,
+        drawX = $.state.player.x - ($.state.player.dir ? 120 : 80);
+
+    if ($.state.jump.isJumping) {
+        if ($.state.jump.speed > 0) {
+            $.ctx.drawImage(
+                $.animationFrames.jumpingUp[$.state.player.dir],
+                drawX,
+                drawY
+            );
+        } else {
+            $.ctx.drawImage(
+                $.animationFrames.jumpingDown[$.state.player.dir],
+                drawX,
+                drawY
+            );
+        }
+    } else if ($.state.player.speed !== 0) {
+        if ($.state.player.dir) {
+            $.ctx.drawImage(
+                $.animationFrames.runningRight[$.state.player.animationFrame],
+                drawX,
+                drawY
+            );
+        } else {
+            $.ctx.drawImage(
+                $.animationFrames.runningLeft[$.state.player.animationFrame],
+                drawX,
+                drawY
+            );
+        }
+    } else {
+        $.ctx.drawImage(
+            $.animationFrames.standing[$.state.player.dir],
+            drawX,
+            drawY
+        );
+    }
+
+    //$.ctx.fillRect($.state.player.x, $.state.player.y + $.state.pos.y, 150, 250);
+    $.state.player.animationFrameCount += $.state.dt;
+
+    if ($.state.player.animationFrameCount > 50) {
+        $.state.player.animationFrame += 1;
+        $.state.player.animationFrameCount = 0;
+    }
+
+    if ($.state.player.animationFrame > 3) {
+        $.state.player.animationFrame = 0;
+    }
+}
+
+function drawDoors() {
+    for (let i = 0; i < $.openings.length; i++) {
+        let opening = $.openings[i];
+
+        if (opening.x < $.state.pos.x - 40) continue;
+
+        if (opening.x > $.state.pos.x + 220) continue;
+
+        opening.draw($);
+    }
+}
+
+function drawPlatforms(drawInfrontPlatforms) {
+    if (drawInfrontPlatforms) {
+        $.state.activePlatforms = [];
+    }
+
+    for (let i = 0; i < $.platforms.length; i++) {
+        let platform = $.platforms[i];
+
+        if (platform.x < $.state.pos.x - 40) continue;
+
+        if (platform.x > $.state.pos.x + 220) continue;
+
+        if (drawInfrontPlatforms) {
+            if (platform.isInFront($)) {
+                platform.draw($);
+                $.state.activePlatforms.push(platform);
+            }
+        } else if (!platform.isInFront($)) {
+            platform.draw($);
+        }
+    }
+
+    for (let i = 0; i < $.state.activePlatforms.length; i++) {
+        $.state.activePlatforms[i].drawFront($);
+    }
+}
+
+function doCalculations() {
+    if ($.input.left) {
+        $.state.player.speed += $.settings.acceleration;
+    } else if ($.input.right) {
+        $.state.player.speed -= $.settings.acceleration;
+    } else if ($.state.player.speed !== 0) {
+        $.state.player.speed *= $.state.jump.isJumping
+            ? $.settings.jump.friction
+            : $.settings.friction;
+    }
+
+    if (Math.abs($.state.player.speed) > $.settings.maxSpeed) {
+        $.state.player.speed =
+            $.state.player.speed > 0
+                ? $.settings.maxSpeed
+                : -1 * $.settings.maxSpeed;
+    } else if (Math.abs($.state.player.speed) < $.settings.minSpeed) {
+        $.state.player.speed = 0;
+    }
+
+    if ($.state.player.speed !== 0) {
+        let currentSpeed = $.state.jump.isJumping
+            ? $.state.player.speed * 0.7
+            : $.state.player.speed;
+        $.state.pos.x +=
+            $.state.player.speed < 0
+                ? Math.ceil(currentSpeed * $.state.dt)
+                : Math.floor(currentSpeed * $.state.dt);
+        $.state.player.dir = currentSpeed > 0 ? 0 : 1;
+    }
+
+    if (!$.state.climbstarted && $.input.jump) {
+        $.state.climbstarted = true;
+    }
+
+    if ($.input.jump || $.state.jump.isJumping) {
+        if ($.state.jump.isGrounded) {
+            $.state.jump.isGrounded = false;
+            $.state.jump.isJumping = true;
+            $.state.jump.isBoosting = true;
+            $.state.jump.speed = $.settings.jump.maxSpeed;
+        }
+
+        if ($.state.jump.isJumping) {
+            let upwards = $.state.jump.speed > 0,
+                adjust = $.state.dt < 30 ? 30 - $.state.dt : 0; // .·´¯`(>▂<)´¯`·.
+
+            if (!upwards && $.state.jump.isBoosting) {
+                $.state.jump.isBoosting = false;
+            }
+
+            $.state.player.prevY = $.state.player.y;
+            $.state.player.y -= $.state.jump.speed * $.state.dt;
+            $.state.jump.speed -=
+                ($.settings.jump.gravity[
+                    upwards
+                        ? $.state.jump.isBoosting
+                            ? "boost"
+                            : "normal"
+                        : "down"
+                ] -
+                    adjust * 0.00002) *
+                $.state.dt;
+        }
+    }
+
+    if ($.state.jump.isBoosting && !$.input.jump) {
+        $.state.jump.isBoosting = false;
+    }
+
+    if ($.state.climbstarted && $.state.pos.y < 1440) {
+        $.state.pos.y +=
+            ($.state.player.y + $.state.pos.y < 250
+                ? $.state.climbspeed.fast
+                : $.state.climbspeed.normal) * $.state.dt;
+    }
+
+    collisionDetection();
+
+    if ($.state.player.y + $.state.pos.y > 900) {
+        $.state.paused = true;
+    }
+}
+
+function collisionDetection() {
+    if ($.state.jump.isJumping && $.state.jump.speed < 0) {
+        for (let i = 0; i < $.state.activePlatforms.length; i++) {
+            let platform = $.state.activePlatforms[i];
+
+            if (Math.abs(platform.x - ($.state.pos.x + 90)) < 10) {
+                let playerFloor = $.state.player.y + 250,
+                    playerFloorPrev = $.state.player.prevY + 250;
+
+                if (playerFloor > platform.y && playerFloorPrev < platform.y) {
+                    $.state.player.y = platform.y - 250;
+                    $.state.jump.isGrounded = true;
+                    $.state.jump.isJumping = false;
+                    $.state.jump.isBoosting = false;
+                    $.state.jump.speed = 0;
+                }
+            }
+        }
+    } else if ($.state.jump.isGrounded) {
+        let groundToStandOnFound = false;
+
+        for (let i = 0; i < $.state.activePlatforms.length; i++) {
+            let platform = $.state.activePlatforms[i];
+
+            if (Math.abs(platform.x - ($.state.pos.x + 90)) < 10) {
+                if (platform.y - ($.state.player.y + 250) === 0) {
+                    groundToStandOnFound = true;
+                    break;
+                }
+            }
+        }
+
+        if (!groundToStandOnFound) {
+            $.state.jump.isGrounded = false;
+            $.state.jump.isJumping = true;
+            $.state.jump.isBoosting = true;
+            $.state.jump.speed = $.settings.jump.fallStartSpeed;
+        }
+    }
+}
+
+function drawSky() {
+    if ($.storage.sky == null) {
+        let height = $.canvas.height,
+            temp = new OffScreenCanvas($.canvas.width, height);
+        temp.ctx.fillStyle = $.sky.bg;
+        temp.ctx.fillRect(0, 0, $.canvas.width, height);
+
+        for (let i = 0; i < 150; i++) {
+            let starSize = Math.floor(Math.random() * $.sky.starSizes.length);
+            temp.ctx.fillStyle = $.sky.starColors[starSize];
+            temp.ctx.beginPath();
+            temp.ctx.arc(
+                Math.floor(Math.random() * $.canvas.width),
+                Math.floor(Math.random() * height),
+                $.sky.starSizes[starSize],
+                0,
+                2 * Math.PI
+            );
+            temp.ctx.fill();
+        }
+
+        $.storage.sky = temp.canvas;
+    } else {
+        let skypos = (($.state.pos.x - 2000) % 200) * 8 * -1,
+            skyYPos = $.state.pos.y % $.canvas.height;
+
+        $.ctx.drawImage($.storage.sky, skypos, skyYPos);
+        $.ctx.drawImage($.storage.sky, skypos - $.canvas.width, skyYPos);
+        $.ctx.drawImage($.storage.sky, skypos, skyYPos - $.canvas.height);
+        $.ctx.drawImage(
+            $.storage.sky,
+            skypos - $.canvas.width,
+            skyYPos - $.canvas.height
+        );
+    }
+}
+
+function drawShadows() {
+    if ($.storage.shadows) {
+        $.ctx.drawImage($.storage.shadows, $.tower.skyWidth, 0);
+    } else {
+        var temp = new OffScreenCanvas($.tower.width, $.canvas.height);
+        drawTowerShadow(
+            temp.ctx,
+            0,
+            $.tower.shadowWidth + 80,
+            $.canvas.height,
+            "#727C80",
+            "transparent"
+        );
+        drawTowerShadow(
+            temp.ctx,
+            0,
+            $.tower.shadowWidth,
+            $.canvas.height,
+            "#00011F",
+            "transparent"
+        );
+        drawTowerShadow(
+            temp.ctx,
+            temp.canvas.width - ($.tower.shadowWidth + 80),
+            $.tower.shadowWidth + 80,
+            $.canvas.height,
+            "transparent",
+            "#727C80"
+        );
+        drawTowerShadow(
+            temp.ctx,
+            temp.canvas.width - $.tower.shadowWidth,
+            $.tower.shadowWidth,
+            $.canvas.height,
+            "transparent",
+            "#00011F"
+        );
+        $.storage.shadows = temp.canvas;
+    }
+}
+
+function drawTowerShadow(ctx, start, width, height, from, to) {
+    let grd = ctx.createLinearGradient(start, 0, start + width, 0);
+    grd.addColorStop(0, from);
+    grd.addColorStop(1, to);
+
+    ctx.fillStyle = grd;
+    ctx.fillRect(start, 0, width, height);
+}
+
+function drawBricks() {
+    let brickRowHeight = $.brick.height * 2 + $.brick.padding * 2;
+
+    if (!$.storage.bricks) {
+        $.storage.bricks = {};
+        for (let i = 0; i < 16; i++) {
+            $.storage.bricks["brick" + i] = brickFactory(brickRowHeight, i);
+        }
+    }
+
+    for (let row = -1; row < 12; row++) {
+        $.ctx.drawImage(
+            $.storage.bricks["brick" + ($.state.pos.x % $.brick.width)],
+            $.tower.skyWidth,
+            brickRowHeight * row + ($.state.pos.y % brickRowHeight)
+        );
+    }
+}
+
+function brickFactory(height, pos) {
+    let temp = new OffScreenCanvas($.tower.width, height),
+        x = $.brick.padding,
+        y = $.brick.padding,
+        pointA = { x: 0, y: 0 },
+        pointB,
+        step = $.brick.width,
+        halfrow = true,
+        gradient = temp.ctx.createLinearGradient(
+            0,
+            0,
+            temp.canvas.width,
+            height
+        );
+
+    gradient.addColorStop(0, "black");
+    gradient.addColorStop(0.35, "#353637");
+    gradient.addColorStop(0.65, "#353637");
+    gradient.addColorStop(1, "black");
+
+    temp.ctx.fillStyle = gradient;
+
+    temp.ctx.fillRect(0, 0, temp.canvas.width, temp.canvas.height);
+
+    for (let i = 0; i < 2; i++) {
+        for (let j = 180 + pos; j <= 360; j += step) {
+            pointA = getCirclePoint(600, 600, j);
+
+            if (halfrow) {
+                j += step / 2;
+                halfrow = false;
+            }
+
+            pointB = getCirclePoint(600, 600, j + step);
+
+            // Main
+            temp.ctx.fillStyle = $.brick.color;
+            temp.ctx.fillRect(
+                pointA,
+                y,
+                pointB - pointA - $.brick.padding,
+                $.brick.height
+            );
+
+            // Shade
+            temp.ctx.fillStyle = $.brick.shade;
+            temp.ctx.fillRect(pointA, y, pointB - pointA - $.brick.padding, 3);
+        }
+
+        y += $.brick.padding;
+        y += $.brick.height;
+    }
+
+    return temp.canvas;
+}
+
+function getCirclePoint(radius, center, angle) {
+    var radian = (angle / 180) * Math.PI;
+
+    return center + radius * Math.cos(radian);
+}
+
+function norm(value, min, max) {
+    return (value - min) / (max - min);
+}
+
+function lerp(norm, min, max) {
+    return (max - min) * norm + min;
+}
+
+function map(value, sourceMin, sourceMax, destMin, destMax) {
+    return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
+}
+
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
diff --git a/Unruly Tower Game/style.css b/Unruly Tower Game/style.css
new file mode 100644
index 000000000..97069bb5a
--- /dev/null
+++ b/Unruly Tower Game/style.css	
@@ -0,0 +1,13 @@
+body {
+  background-color: #444;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+#container {
+  transform-origin: 50% 0;
+}
diff --git a/Valorous Rabbit/index.html b/Valorous Rabbit/index.html
new file mode 100644
index 000000000..4bfd5deeb
--- /dev/null
+++ b/Valorous Rabbit/index.html	
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.scss">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
+    <title>Document</title>
+</head>
+
+<body>
+
+    <div id="world" />
+    <div id="gameoverInstructions">
+        Game Over
+    </div>
+    <div id="dist">
+        <div class="label">distance</div>
+        <div id="distValue">000</div>
+    </div>
+
+    <div id="instructions">Click to jump<span class="lightInstructions"> — Grab the carrots / avoid the hedgehogs</span>
+    </div>
+
+
+    <div id="credits">
+        <p><a href="https://codepen.io/Yakudoo/" target="blank">other codepens</a> | <a href="https://www.epic.net"
+                target="blank">epic.net</a></p>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Valorous Rabbit/script.js b/Valorous Rabbit/script.js
new file mode 100644
index 000000000..f1147e1de
--- /dev/null
+++ b/Valorous Rabbit/script.js	
@@ -0,0 +1,1552 @@
+//THREEJS RELATED VARIABLES
+
+var scene,
+    camera,
+    fieldOfView,
+    aspectRatio,
+    nearPlane,
+    farPlane,
+    gobalLight,
+    shadowLight,
+    backLight,
+    renderer,
+    container,
+    controls,
+    clock;
+var delta = 0;
+var floorRadius = 200;
+var speed = 6;
+var distance = 0;
+var level = 1;
+var levelInterval;
+var levelUpdateFreq = 3000;
+var initSpeed = 5;
+var maxSpeed = 48;
+var monsterPos = 0.65;
+var monsterPosTarget = 0.65;
+var floorRotation = 0;
+var collisionObstacle = 10;
+var collisionBonus = 20;
+var gameStatus = "play";
+var cameraPosGame = 160;
+var cameraPosGameOver = 260;
+var monsterAcceleration = 0.004;
+var malusClearColor = 0xb44b39;
+var malusClearAlpha = 0;
+var audio = new Audio(
+    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/Antonio-Vivaldi-Summer_01.mp3"
+);
+
+var fieldGameOver, fieldDistance;
+
+//SCREEN & MOUSE VARIABLES
+
+var HEIGHT,
+    WIDTH,
+    windowHalfX,
+    windowHalfY,
+    mousePos = {
+        x: 0,
+        y: 0,
+    };
+
+//3D OBJECTS VARIABLES
+
+var hero;
+
+// Materials
+var blackMat = new THREE.MeshPhongMaterial({
+    color: 0x100707,
+    shading: THREE.FlatShading,
+});
+
+var brownMat = new THREE.MeshPhongMaterial({
+    color: 0xb44b39,
+    shininess: 0,
+    shading: THREE.FlatShading,
+});
+
+var greenMat = new THREE.MeshPhongMaterial({
+    color: 0x7abf8e,
+    shininess: 0,
+    shading: THREE.FlatShading,
+});
+
+var pinkMat = new THREE.MeshPhongMaterial({
+    color: 0xdc5f45, //0xb43b29,//0xff5b49,
+    shininess: 0,
+    shading: THREE.FlatShading,
+});
+
+var lightBrownMat = new THREE.MeshPhongMaterial({
+    color: 0xe07a57,
+    shading: THREE.FlatShading,
+});
+
+var whiteMat = new THREE.MeshPhongMaterial({
+    color: 0xa49789,
+    shading: THREE.FlatShading,
+});
+var skinMat = new THREE.MeshPhongMaterial({
+    color: 0xff9ea5,
+    shading: THREE.FlatShading,
+});
+
+// OTHER VARIABLES
+
+var PI = Math.PI;
+
+//INIT THREE JS, SCREEN AND MOUSE EVENTS
+
+function initScreenAnd3D() {
+    HEIGHT = window.innerHeight;
+    WIDTH = window.innerWidth;
+    windowHalfX = WIDTH / 2;
+    windowHalfY = HEIGHT / 2;
+
+    scene = new THREE.Scene();
+
+    scene.fog = new THREE.Fog(0xd6eae6, 160, 350);
+
+    aspectRatio = WIDTH / HEIGHT;
+    fieldOfView = 50;
+    nearPlane = 1;
+    farPlane = 2000;
+    camera = new THREE.PerspectiveCamera(
+        fieldOfView,
+        aspectRatio,
+        nearPlane,
+        farPlane
+    );
+    camera.position.x = 0;
+    camera.position.z = cameraPosGame;
+    camera.position.y = 30;
+    camera.lookAt(new THREE.Vector3(0, 30, 0));
+
+    renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        antialias: true,
+    });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setClearColor(malusClearColor, malusClearAlpha);
+
+    renderer.setSize(WIDTH, HEIGHT);
+    renderer.shadowMap.enabled = true;
+
+    container = document.getElementById("world");
+    container.appendChild(renderer.domElement);
+
+    window.addEventListener("resize", handleWindowResize, false);
+    document.addEventListener("mousedown", handleMouseDown, false);
+    document.addEventListener("touchend", handleMouseDown, false);
+
+    /*
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+  //controls.minPolarAngle = -Math.PI / 2; 
+  //controls.maxPolarAngle = Math.PI / 2;
+  //controls.noZoom = true;
+  controls.noPan = true;
+  //*/
+
+    clock = new THREE.Clock();
+}
+
+function handleWindowResize() {
+    HEIGHT = window.innerHeight;
+    WIDTH = window.innerWidth;
+    windowHalfX = WIDTH / 2;
+    windowHalfY = HEIGHT / 2;
+    renderer.setSize(WIDTH, HEIGHT);
+    camera.aspect = WIDTH / HEIGHT;
+    camera.updateProjectionMatrix();
+}
+
+function handleMouseDown(event) {
+    if (gameStatus == "play") hero.jump();
+    else if (gameStatus == "readyToReplay") {
+        replay();
+    }
+}
+
+function createLights() {
+    globalLight = new THREE.AmbientLight(0xffffff, 0.9);
+
+    shadowLight = new THREE.DirectionalLight(0xffffff, 1);
+    shadowLight.position.set(-30, 40, 20);
+    shadowLight.castShadow = true;
+    shadowLight.shadow.camera.left = -400;
+    shadowLight.shadow.camera.right = 400;
+    shadowLight.shadow.camera.top = 400;
+    shadowLight.shadow.camera.bottom = -400;
+    shadowLight.shadow.camera.near = 1;
+    shadowLight.shadow.camera.far = 2000;
+    shadowLight.shadow.mapSize.width = shadowLight.shadow.mapSize.height = 2048;
+
+    scene.add(globalLight);
+    scene.add(shadowLight);
+}
+
+function createFloor() {
+    floorShadow = new THREE.Mesh(
+        new THREE.SphereGeometry(floorRadius, 50, 50),
+        new THREE.MeshPhongMaterial({
+            color: 0x7abf8e,
+            specular: 0x000000,
+            shininess: 1,
+            transparent: true,
+            opacity: 0.5,
+        })
+    );
+    //floorShadow.rotation.x = -Math.PI / 2;
+    floorShadow.receiveShadow = true;
+
+    floorGrass = new THREE.Mesh(
+        new THREE.SphereGeometry(floorRadius - 0.5, 50, 50),
+        new THREE.MeshBasicMaterial({
+            color: 0x7abf8e,
+        })
+    );
+    //floor.rotation.x = -Math.PI / 2;
+    floorGrass.receiveShadow = false;
+
+    floor = new THREE.Group();
+    floor.position.y = -floorRadius;
+
+    floor.add(floorShadow);
+    floor.add(floorGrass);
+    scene.add(floor);
+}
+
+Hero = function () {
+    this.status = "running";
+    this.runningCycle = 0;
+    this.mesh = new THREE.Group();
+    this.body = new THREE.Group();
+    this.mesh.add(this.body);
+
+    var torsoGeom = new THREE.CubeGeometry(7, 7, 10, 1);
+
+    this.torso = new THREE.Mesh(torsoGeom, brownMat);
+    this.torso.position.z = 0;
+    this.torso.position.y = 7;
+    this.torso.castShadow = true;
+    this.body.add(this.torso);
+
+    var pantsGeom = new THREE.CubeGeometry(9, 9, 5, 1);
+    this.pants = new THREE.Mesh(pantsGeom, whiteMat);
+    this.pants.position.z = -3;
+    this.pants.position.y = 0;
+    this.pants.castShadow = true;
+    this.torso.add(this.pants);
+
+    var tailGeom = new THREE.CubeGeometry(3, 3, 3, 1);
+    tailGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, -2));
+    this.tail = new THREE.Mesh(tailGeom, lightBrownMat);
+    this.tail.position.z = -4;
+    this.tail.position.y = 5;
+    this.tail.castShadow = true;
+    this.torso.add(this.tail);
+
+    this.torso.rotation.x = -Math.PI / 8;
+
+    var headGeom = new THREE.CubeGeometry(10, 10, 13, 1);
+
+    headGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 7.5));
+    this.head = new THREE.Mesh(headGeom, brownMat);
+    this.head.position.z = 2;
+    this.head.position.y = 11;
+    this.head.castShadow = true;
+    this.body.add(this.head);
+
+    var cheekGeom = new THREE.CubeGeometry(1, 4, 4, 1);
+    this.cheekR = new THREE.Mesh(cheekGeom, pinkMat);
+    this.cheekR.position.x = -5;
+    this.cheekR.position.z = 7;
+    this.cheekR.position.y = -2.5;
+    this.cheekR.castShadow = true;
+    this.head.add(this.cheekR);
+
+    this.cheekL = this.cheekR.clone();
+    this.cheekL.position.x = -this.cheekR.position.x;
+    this.head.add(this.cheekL);
+
+    var noseGeom = new THREE.CubeGeometry(6, 6, 3, 1);
+    this.nose = new THREE.Mesh(noseGeom, lightBrownMat);
+    this.nose.position.z = 13.5;
+    this.nose.position.y = 2.6;
+    this.nose.castShadow = true;
+    this.head.add(this.nose);
+
+    var mouthGeom = new THREE.CubeGeometry(4, 2, 4, 1);
+    mouthGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 3));
+    mouthGeom.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 12));
+    this.mouth = new THREE.Mesh(mouthGeom, brownMat);
+    this.mouth.position.z = 8;
+    this.mouth.position.y = -4;
+    this.mouth.castShadow = true;
+    this.head.add(this.mouth);
+
+    var pawFGeom = new THREE.CubeGeometry(3, 3, 3, 1);
+    this.pawFR = new THREE.Mesh(pawFGeom, lightBrownMat);
+    this.pawFR.position.x = -2;
+    this.pawFR.position.z = 6;
+    this.pawFR.position.y = 1.5;
+    this.pawFR.castShadow = true;
+    this.body.add(this.pawFR);
+
+    this.pawFL = this.pawFR.clone();
+    this.pawFL.position.x = -this.pawFR.position.x;
+    this.pawFL.castShadow = true;
+    this.body.add(this.pawFL);
+
+    var pawBGeom = new THREE.CubeGeometry(3, 3, 6, 1);
+    this.pawBL = new THREE.Mesh(pawBGeom, lightBrownMat);
+    this.pawBL.position.y = 1.5;
+    this.pawBL.position.z = 0;
+    this.pawBL.position.x = 5;
+    this.pawBL.castShadow = true;
+    this.body.add(this.pawBL);
+
+    this.pawBR = this.pawBL.clone();
+    this.pawBR.position.x = -this.pawBL.position.x;
+    this.pawBR.castShadow = true;
+    this.body.add(this.pawBR);
+
+    var earGeom = new THREE.CubeGeometry(7, 18, 2, 1);
+    earGeom.vertices[6].x += 2;
+    earGeom.vertices[6].z += 0.5;
+
+    earGeom.vertices[7].x += 2;
+    earGeom.vertices[7].z -= 0.5;
+
+    earGeom.vertices[2].x -= 2;
+    earGeom.vertices[2].z -= 0.5;
+
+    earGeom.vertices[3].x -= 2;
+    earGeom.vertices[3].z += 0.5;
+    earGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 9, 0));
+
+    this.earL = new THREE.Mesh(earGeom, brownMat);
+    this.earL.position.x = 2;
+    this.earL.position.z = 2.5;
+    this.earL.position.y = 5;
+    this.earL.rotation.z = -Math.PI / 12;
+    this.earL.castShadow = true;
+    this.head.add(this.earL);
+
+    this.earR = this.earL.clone();
+    this.earR.position.x = -this.earL.position.x;
+    this.earR.rotation.z = -this.earL.rotation.z;
+    this.earR.castShadow = true;
+    this.head.add(this.earR);
+
+    var eyeGeom = new THREE.CubeGeometry(2, 4, 4);
+
+    this.eyeL = new THREE.Mesh(eyeGeom, whiteMat);
+    this.eyeL.position.x = 5;
+    this.eyeL.position.z = 5.5;
+    this.eyeL.position.y = 2.9;
+    this.eyeL.castShadow = true;
+    this.head.add(this.eyeL);
+
+    var irisGeom = new THREE.CubeGeometry(0.6, 2, 2);
+
+    this.iris = new THREE.Mesh(irisGeom, blackMat);
+    this.iris.position.x = 1.2;
+    this.iris.position.y = 1;
+    this.iris.position.z = 1;
+    this.eyeL.add(this.iris);
+
+    this.eyeR = this.eyeL.clone();
+    this.eyeR.children[0].position.x = -this.iris.position.x;
+
+    this.eyeR.position.x = -this.eyeL.position.x;
+    this.head.add(this.eyeR);
+
+    this.body.traverse(function (object) {
+        if (object instanceof THREE.Mesh) {
+            object.castShadow = true;
+            object.receiveShadow = true;
+        }
+    });
+};
+
+BonusParticles = function () {
+    this.mesh = new THREE.Group();
+    var bigParticleGeom = new THREE.CubeGeometry(10, 10, 10, 1);
+    var smallParticleGeom = new THREE.CubeGeometry(5, 5, 5, 1);
+    this.parts = [];
+    for (var i = 0; i < 10; i++) {
+        var partPink = new THREE.Mesh(bigParticleGeom, pinkMat);
+        var partGreen = new THREE.Mesh(smallParticleGeom, greenMat);
+        partGreen.scale.set(0.5, 0.5, 0.5);
+        this.parts.push(partPink);
+        this.parts.push(partGreen);
+        this.mesh.add(partPink);
+        this.mesh.add(partGreen);
+    }
+};
+
+BonusParticles.prototype.explose = function () {
+    var _this = this;
+    var explosionSpeed = 0.5;
+    for (var i = 0; i < this.parts.length; i++) {
+        var tx = -50 + Math.random() * 100;
+        var ty = -50 + Math.random() * 100;
+        var tz = -50 + Math.random() * 100;
+        var p = this.parts[i];
+        p.position.set(0, 0, 0);
+        p.scale.set(1, 1, 1);
+        p.visible = true;
+        var s = explosionSpeed + Math.random() * 0.5;
+        TweenMax.to(p.position, s, {
+            x: tx,
+            y: ty,
+            z: tz,
+            ease: Power4.easeOut,
+        });
+        TweenMax.to(p.scale, s, {
+            x: 0.01,
+            y: 0.01,
+            z: 0.01,
+            ease: Power4.easeOut,
+            onComplete: removeParticle,
+            onCompleteParams: [p],
+        });
+    }
+};
+
+function removeParticle(p) {
+    p.visible = false;
+}
+
+Hero.prototype.run = function () {
+    this.status = "running";
+
+    var s = Math.min(speed, maxSpeed);
+
+    this.runningCycle += delta * s * 0.7;
+    this.runningCycle = this.runningCycle % (Math.PI * 2);
+    var t = this.runningCycle;
+
+    var amp = 4;
+    var disp = 0.2;
+
+    // BODY
+
+    this.body.position.y = 6 + Math.sin(t - Math.PI / 2) * amp;
+    this.body.rotation.x = 0.2 + Math.sin(t - Math.PI / 2) * amp * 0.1;
+
+    this.torso.rotation.x = Math.sin(t - Math.PI / 2) * amp * 0.1;
+    this.torso.position.y = 7 + Math.sin(t - Math.PI / 2) * amp * 0.5;
+
+    // MOUTH
+    this.mouth.rotation.x = Math.PI / 16 + Math.cos(t) * amp * 0.05;
+
+    // HEAD
+    this.head.position.z = 2 + Math.sin(t - Math.PI / 2) * amp * 0.5;
+    this.head.position.y = 8 + Math.cos(t - Math.PI / 2) * amp * 0.7;
+    this.head.rotation.x = -0.2 + Math.sin(t + Math.PI) * amp * 0.1;
+
+    // EARS
+    this.earL.rotation.x = Math.cos(-Math.PI / 2 + t) * (amp * 0.2);
+    this.earR.rotation.x = Math.cos(-Math.PI / 2 + 0.2 + t) * (amp * 0.3);
+
+    // EYES
+    this.eyeR.scale.y = this.eyeL.scale.y =
+        0.7 + Math.abs(Math.cos(-Math.PI / 4 + t * 0.5)) * 0.6;
+
+    // TAIL
+    this.tail.rotation.x = Math.cos(Math.PI / 2 + t) * amp * 0.3;
+
+    // FRONT RIGHT PAW
+    this.pawFR.position.y = 1.5 + Math.sin(t) * amp;
+    this.pawFR.rotation.x = (Math.cos(t) * Math.PI) / 4;
+
+    this.pawFR.position.z = 6 - Math.cos(t) * amp * 2;
+
+    // FRONT LEFT PAW
+
+    this.pawFL.position.y = 1.5 + Math.sin(disp + t) * amp;
+    this.pawFL.rotation.x = (Math.cos(t) * Math.PI) / 4;
+
+    this.pawFL.position.z = 6 - Math.cos(disp + t) * amp * 2;
+
+    // BACK RIGHT PAW
+    this.pawBR.position.y = 1.5 + Math.sin(Math.PI + t) * amp;
+    this.pawBR.rotation.x = (Math.cos(t + Math.PI * 1.5) * Math.PI) / 3;
+
+    this.pawBR.position.z = -Math.cos(Math.PI + t) * amp;
+
+    // BACK LEFT PAW
+    this.pawBL.position.y = 1.5 + Math.sin(Math.PI + t) * amp;
+    this.pawBL.rotation.x = (Math.cos(t + Math.PI * 1.5) * Math.PI) / 3;
+
+    this.pawBL.position.z = -Math.cos(Math.PI + t) * amp;
+};
+
+Hero.prototype.jump = function () {
+    if (this.status == "jumping") return;
+    this.status = "jumping";
+    var _this = this;
+    var totalSpeed = 10 / speed;
+    var jumpHeight = 45;
+
+    TweenMax.to(this.earL.rotation, totalSpeed, {
+        x: "+=.3",
+        ease: Back.easeOut,
+    });
+    TweenMax.to(this.earR.rotation, totalSpeed, {
+        x: "-=.3",
+        ease: Back.easeOut,
+    });
+
+    TweenMax.to(this.pawFL.rotation, totalSpeed, {
+        x: "+=.7",
+        ease: Back.easeOut,
+    });
+    TweenMax.to(this.pawFR.rotation, totalSpeed, {
+        x: "-=.7",
+        ease: Back.easeOut,
+    });
+    TweenMax.to(this.pawBL.rotation, totalSpeed, {
+        x: "+=.7",
+        ease: Back.easeOut,
+    });
+    TweenMax.to(this.pawBR.rotation, totalSpeed, {
+        x: "-=.7",
+        ease: Back.easeOut,
+    });
+
+    TweenMax.to(this.tail.rotation, totalSpeed, {
+        x: "+=1",
+        ease: Back.easeOut,
+    });
+
+    TweenMax.to(this.mouth.rotation, totalSpeed, {
+        x: 0.5,
+        ease: Back.easeOut,
+    });
+
+    TweenMax.to(this.mesh.position, totalSpeed / 2, {
+        y: jumpHeight,
+        ease: Power2.easeOut,
+    });
+    TweenMax.to(this.mesh.position, totalSpeed / 2, {
+        y: 0,
+        ease: Power4.easeIn,
+        delay: totalSpeed / 2,
+        onComplete: function () {
+            //t = 0;
+            _this.status = "running";
+        },
+    });
+};
+
+Monster = function () {
+    this.runningCycle = 0;
+
+    this.mesh = new THREE.Group();
+    this.body = new THREE.Group();
+
+    var torsoGeom = new THREE.CubeGeometry(15, 15, 20, 1);
+    this.torso = new THREE.Mesh(torsoGeom, blackMat);
+
+    var headGeom = new THREE.CubeGeometry(20, 20, 40, 1);
+    headGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 20));
+    this.head = new THREE.Mesh(headGeom, blackMat);
+    this.head.position.z = 12;
+    this.head.position.y = 2;
+
+    var mouthGeom = new THREE.CubeGeometry(10, 4, 20, 1);
+    mouthGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, -2, 10));
+    this.mouth = new THREE.Mesh(mouthGeom, blackMat);
+    this.mouth.position.y = -8;
+    this.mouth.rotation.x = 0.4;
+    this.mouth.position.z = 4;
+
+    this.heroHolder = new THREE.Group();
+    this.heroHolder.position.z = 20;
+    this.mouth.add(this.heroHolder);
+
+    var toothGeom = new THREE.CubeGeometry(2, 2, 1, 1);
+
+    toothGeom.vertices[1].x -= 1;
+    toothGeom.vertices[4].x += 1;
+    toothGeom.vertices[5].x += 1;
+    toothGeom.vertices[0].x -= 1;
+
+    for (var i = 0; i < 3; i++) {
+        var toothf = new THREE.Mesh(toothGeom, whiteMat);
+        toothf.position.x = -2.8 + i * 2.5;
+        toothf.position.y = 1;
+        toothf.position.z = 19;
+
+        var toothl = new THREE.Mesh(toothGeom, whiteMat);
+        toothl.rotation.y = Math.PI / 2;
+        toothl.position.z = 12 + i * 2.5;
+        toothl.position.y = 1;
+        toothl.position.x = 4;
+
+        var toothr = toothl.clone();
+        toothl.position.x = -4;
+
+        this.mouth.add(toothf);
+        this.mouth.add(toothl);
+        this.mouth.add(toothr);
+    }
+
+    var tongueGeometry = new THREE.CubeGeometry(6, 1, 14);
+    tongueGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 7));
+
+    this.tongue = new THREE.Mesh(tongueGeometry, pinkMat);
+    this.tongue.position.z = 2;
+    this.tongue.rotation.x = -0.2;
+    this.mouth.add(this.tongue);
+
+    var noseGeom = new THREE.CubeGeometry(4, 4, 4, 1);
+    this.nose = new THREE.Mesh(noseGeom, pinkMat);
+    this.nose.position.z = 39.5;
+    this.nose.position.y = 9;
+    this.head.add(this.nose);
+
+    this.head.add(this.mouth);
+
+    var eyeGeom = new THREE.CubeGeometry(2, 3, 3);
+
+    this.eyeL = new THREE.Mesh(eyeGeom, whiteMat);
+    this.eyeL.position.x = 10;
+    this.eyeL.position.z = 5;
+    this.eyeL.position.y = 5;
+    this.eyeL.castShadow = true;
+    this.head.add(this.eyeL);
+
+    var irisGeom = new THREE.CubeGeometry(0.6, 1, 1);
+
+    this.iris = new THREE.Mesh(irisGeom, blackMat);
+    this.iris.position.x = 1.2;
+    this.iris.position.y = -1;
+    this.iris.position.z = 1;
+    this.eyeL.add(this.iris);
+
+    this.eyeR = this.eyeL.clone();
+    this.eyeR.children[0].position.x = -this.iris.position.x;
+    this.eyeR.position.x = -this.eyeL.position.x;
+    this.head.add(this.eyeR);
+
+    var earGeom = new THREE.CubeGeometry(8, 6, 2, 1);
+    earGeom.vertices[1].x -= 4;
+    earGeom.vertices[4].x += 4;
+    earGeom.vertices[5].x += 4;
+    earGeom.vertices[5].z -= 2;
+    earGeom.vertices[0].x -= 4;
+    earGeom.vertices[0].z -= 2;
+
+    earGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 3, 0));
+
+    this.earL = new THREE.Mesh(earGeom, blackMat);
+    this.earL.position.x = 6;
+    this.earL.position.z = 1;
+    this.earL.position.y = 10;
+    this.earL.castShadow = true;
+    this.head.add(this.earL);
+
+    this.earR = this.earL.clone();
+    this.earR.position.x = -this.earL.position.x;
+    this.earR.rotation.z = -this.earL.rotation.z;
+    this.head.add(this.earR);
+
+    var eyeGeom = new THREE.CubeGeometry(2, 4, 4);
+
+    var tailGeom = new THREE.CylinderGeometry(5, 2, 20, 4, 1);
+    tailGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 10, 0));
+    tailGeom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
+    tailGeom.applyMatrix(new THREE.Matrix4().makeRotationZ(Math.PI / 4));
+
+    this.tail = new THREE.Mesh(tailGeom, blackMat);
+    this.tail.position.z = -10;
+    this.tail.position.y = 4;
+    this.torso.add(this.tail);
+
+    var pawGeom = new THREE.CylinderGeometry(1.5, 0, 10);
+    pawGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, -5, 0));
+    this.pawFL = new THREE.Mesh(pawGeom, blackMat);
+    this.pawFL.position.y = -7.5;
+    this.pawFL.position.z = 8.5;
+    this.pawFL.position.x = 5.5;
+    this.torso.add(this.pawFL);
+
+    this.pawFR = this.pawFL.clone();
+    this.pawFR.position.x = -this.pawFL.position.x;
+    this.torso.add(this.pawFR);
+
+    this.pawBR = this.pawFR.clone();
+    this.pawBR.position.z = -this.pawFL.position.z;
+    this.torso.add(this.pawBR);
+
+    this.pawBL = this.pawBR.clone();
+    this.pawBL.position.x = this.pawFL.position.x;
+    this.torso.add(this.pawBL);
+
+    this.mesh.add(this.body);
+    this.torso.add(this.head);
+    this.body.add(this.torso);
+
+    this.torso.castShadow = true;
+    this.head.castShadow = true;
+    this.pawFL.castShadow = true;
+    this.pawFR.castShadow = true;
+    this.pawBL.castShadow = true;
+    this.pawBR.castShadow = true;
+
+    this.body.rotation.y = Math.PI / 2;
+};
+
+Monster.prototype.run = function () {
+    var s = Math.min(speed, maxSpeed);
+    this.runningCycle += delta * s * 0.7;
+    this.runningCycle = this.runningCycle % (Math.PI * 2);
+    var t = this.runningCycle;
+
+    this.pawFR.rotation.x = (Math.sin(t) * Math.PI) / 4;
+    this.pawFR.position.y = -5.5 - Math.sin(t);
+    this.pawFR.position.z = 7.5 + Math.cos(t);
+
+    this.pawFL.rotation.x = (Math.sin(t + 0.4) * Math.PI) / 4;
+    this.pawFL.position.y = -5.5 - Math.sin(t + 0.4);
+    this.pawFL.position.z = 7.5 + Math.cos(t + 0.4);
+
+    this.pawBL.rotation.x = (Math.sin(t + 2) * Math.PI) / 4;
+    this.pawBL.position.y = -5.5 - Math.sin(t + 3.8);
+    this.pawBL.position.z = -7.5 + Math.cos(t + 3.8);
+
+    this.pawBR.rotation.x = (Math.sin(t + 2.4) * Math.PI) / 4;
+    this.pawBR.position.y = -5.5 - Math.sin(t + 3.4);
+    this.pawBR.position.z = -7.5 + Math.cos(t + 3.4);
+
+    this.torso.rotation.x = (Math.sin(t) * Math.PI) / 8;
+    this.torso.position.y = 3 - Math.sin(t + Math.PI / 2) * 3;
+
+    //this.head.position.y = 5-Math.sin(t+Math.PI/2)*2;
+    this.head.rotation.x = -0.1 + Math.sin(-t - 1) * 0.4;
+    this.mouth.rotation.x = 0.2 + Math.sin(t + Math.PI + 0.3) * 0.4;
+
+    this.tail.rotation.x = 0.2 + Math.sin(t - Math.PI / 2);
+
+    this.eyeR.scale.y = 0.5 + Math.sin(t + Math.PI) * 0.5;
+};
+
+Hero.prototype.nod = function () {
+    var _this = this;
+    var sp = 0.5 + Math.random();
+
+    // HEAD
+    var tHeadRotY = -Math.PI / 6 + (Math.random() * Math.PI) / 3;
+    TweenMax.to(this.head.rotation, sp, {
+        y: tHeadRotY,
+        ease: Power4.easeInOut,
+        onComplete: function () {
+            _this.nod();
+        },
+    });
+
+    // EARS
+    var tEarLRotX = Math.PI / 4 + (Math.random() * Math.PI) / 6;
+    var tEarRRotX = Math.PI / 4 + (Math.random() * Math.PI) / 6;
+
+    TweenMax.to(this.earL.rotation, sp, {
+        x: tEarLRotX,
+        ease: Power4.easeInOut,
+    });
+    TweenMax.to(this.earR.rotation, sp, {
+        x: tEarRRotX,
+        ease: Power4.easeInOut,
+    });
+
+    // PAWS BACK LEFT
+
+    var tPawBLRot = (Math.random() * Math.PI) / 2;
+    var tPawBLY = -4 + Math.random() * 8;
+
+    TweenMax.to(this.pawBL.rotation, sp / 2, {
+        x: tPawBLRot,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 2,
+    });
+    TweenMax.to(this.pawBL.position, sp / 2, {
+        y: tPawBLY,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 2,
+    });
+
+    // PAWS BACK RIGHT
+
+    var tPawBRRot = (Math.random() * Math.PI) / 2;
+    var tPawBRY = -4 + Math.random() * 8;
+    TweenMax.to(this.pawBR.rotation, sp / 2, {
+        x: tPawBRRot,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 2,
+    });
+    TweenMax.to(this.pawBR.position, sp / 2, {
+        y: tPawBRY,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 2,
+    });
+
+    // PAWS FRONT LEFT
+
+    var tPawFLRot = (Math.random() * Math.PI) / 2;
+    var tPawFLY = -4 + Math.random() * 8;
+
+    TweenMax.to(this.pawFL.rotation, sp / 2, {
+        x: tPawFLRot,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 2,
+    });
+
+    TweenMax.to(this.pawFL.position, sp / 2, {
+        y: tPawFLY,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 2,
+    });
+
+    // PAWS FRONT RIGHT
+
+    var tPawFRRot = (Math.random() * Math.PI) / 2;
+    var tPawFRY = -4 + Math.random() * 8;
+
+    TweenMax.to(this.pawFR.rotation, sp / 2, {
+        x: tPawFRRot,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 2,
+    });
+
+    TweenMax.to(this.pawFR.position, sp / 2, {
+        y: tPawFRY,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 2,
+    });
+
+    // MOUTH
+    var tMouthRot = (Math.random() * Math.PI) / 8;
+    TweenMax.to(this.mouth.rotation, sp, {
+        x: tMouthRot,
+        ease: Power1.easeInOut,
+    });
+    // IRIS
+    var tIrisY = -1 + Math.random() * 2;
+    var tIrisZ = -1 + Math.random() * 2;
+    var iris1 = this.iris;
+    var iris2 = this.eyeR.children[0];
+    TweenMax.to([iris1.position, iris2.position], sp, {
+        y: tIrisY,
+        z: tIrisZ,
+        ease: Power1.easeInOut,
+    });
+
+    //EYES
+    if (Math.random() > 0.2)
+        TweenMax.to([this.eyeR.scale, this.eyeL.scale], sp / 8, {
+            y: 0,
+            ease: Power1.easeInOut,
+            yoyo: true,
+            repeat: 1,
+        });
+};
+
+Hero.prototype.hang = function () {
+    var _this = this;
+    var sp = 1;
+    var ease = Power4.easeOut;
+
+    TweenMax.killTweensOf(this.eyeL.scale);
+    TweenMax.killTweensOf(this.eyeR.scale);
+
+    this.body.rotation.x = 0;
+    this.torso.rotation.x = 0;
+    this.body.position.y = 0;
+    this.torso.position.y = 7;
+
+    TweenMax.to(this.mesh.rotation, sp, { y: 0, ease: ease });
+    TweenMax.to(this.mesh.position, sp, { y: -7, z: 6, ease: ease });
+    TweenMax.to(this.head.rotation, sp, {
+        x: Math.PI / 6,
+        ease: ease,
+        onComplete: function () {
+            _this.nod();
+        },
+    });
+
+    TweenMax.to(this.earL.rotation, sp, { x: Math.PI / 3, ease: ease });
+    TweenMax.to(this.earR.rotation, sp, { x: Math.PI / 3, ease: ease });
+
+    TweenMax.to(this.pawFL.position, sp, { y: -1, z: 3, ease: ease });
+    TweenMax.to(this.pawFR.position, sp, { y: -1, z: 3, ease: ease });
+    TweenMax.to(this.pawBL.position, sp, { y: -2, z: -3, ease: ease });
+    TweenMax.to(this.pawBR.position, sp, { y: -2, z: -3, ease: ease });
+
+    TweenMax.to(this.eyeL.scale, sp, { y: 1, ease: ease });
+    TweenMax.to(this.eyeR.scale, sp, { y: 1, ease: ease });
+};
+
+Monster.prototype.nod = function () {
+    var _this = this;
+    var sp = 1 + Math.random() * 2;
+
+    // HEAD
+    var tHeadRotY = -Math.PI / 3 + Math.random() * 0.5;
+    var tHeadRotX = Math.PI / 3 - 0.2 + Math.random() * 0.4;
+    TweenMax.to(this.head.rotation, sp, {
+        x: tHeadRotX,
+        y: tHeadRotY,
+        ease: Power4.easeInOut,
+        onComplete: function () {
+            _this.nod();
+        },
+    });
+
+    // TAIL
+
+    var tTailRotY = -Math.PI / 4;
+    TweenMax.to(this.tail.rotation, sp / 8, {
+        y: tTailRotY,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 8,
+    });
+
+    // EYES
+
+    TweenMax.to([this.eyeR.scale, this.eyeL.scale], sp / 20, {
+        y: 0,
+        ease: Power1.easeInOut,
+        yoyo: true,
+        repeat: 1,
+    });
+};
+
+Monster.prototype.sit = function () {
+    var sp = 1.2;
+    var ease = Power4.easeOut;
+    var _this = this;
+    TweenMax.to(this.torso.rotation, sp, { x: -1.3, ease: ease });
+    TweenMax.to(this.torso.position, sp, {
+        y: -5,
+        ease: ease,
+        onComplete: function () {
+            _this.nod();
+            gameStatus = "readyToReplay";
+        },
+    });
+
+    TweenMax.to(this.head.rotation, sp, {
+        x: Math.PI / 3,
+        y: -Math.PI / 3,
+        ease: ease,
+    });
+    TweenMax.to(this.tail.rotation, sp, { x: 2, y: Math.PI / 4, ease: ease });
+    TweenMax.to(this.pawBL.rotation, sp, { x: -0.1, ease: ease });
+    TweenMax.to(this.pawBR.rotation, sp, { x: -0.1, ease: ease });
+    TweenMax.to(this.pawFL.rotation, sp, { x: 1, ease: ease });
+    TweenMax.to(this.pawFR.rotation, sp, { x: 1, ease: ease });
+    TweenMax.to(this.mouth.rotation, sp, { x: 0.3, ease: ease });
+    TweenMax.to(this.eyeL.scale, sp, { y: 1, ease: ease });
+    TweenMax.to(this.eyeR.scale, sp, { y: 1, ease: ease });
+
+    //TweenMax.to(this.body.rotation, sp, {y:Math.PI/4});
+};
+
+Carrot = function () {
+    this.angle = 0;
+    this.mesh = new THREE.Group();
+
+    var bodyGeom = new THREE.CylinderGeometry(5, 3, 10, 4, 1);
+    bodyGeom.vertices[8].y += 2;
+    bodyGeom.vertices[9].y -= 3;
+
+    this.body = new THREE.Mesh(bodyGeom, pinkMat);
+
+    var leafGeom = new THREE.CubeGeometry(5, 10, 1, 1);
+    leafGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 5, 0));
+    leafGeom.vertices[2].x -= 1;
+    leafGeom.vertices[3].x -= 1;
+    leafGeom.vertices[6].x += 1;
+    leafGeom.vertices[7].x += 1;
+
+    this.leaf1 = new THREE.Mesh(leafGeom, greenMat);
+    this.leaf1.position.y = 7;
+    this.leaf1.rotation.z = 0.3;
+    this.leaf1.rotation.x = 0.2;
+
+    this.leaf2 = this.leaf1.clone();
+    this.leaf2.scale.set(1, 1.3, 1);
+    this.leaf2.position.y = 7;
+    this.leaf2.rotation.z = -0.3;
+    this.leaf2.rotation.x = -0.2;
+
+    this.mesh.add(this.body);
+    this.mesh.add(this.leaf1);
+    this.mesh.add(this.leaf2);
+
+    this.body.traverse(function (object) {
+        if (object instanceof THREE.Mesh) {
+            object.castShadow = true;
+            object.receiveShadow = true;
+        }
+    });
+};
+
+Hedgehog = function () {
+    this.angle = 0;
+    this.status = "ready";
+    this.mesh = new THREE.Group();
+    var bodyGeom = new THREE.CubeGeometry(6, 6, 6, 1);
+    this.body = new THREE.Mesh(bodyGeom, blackMat);
+
+    var headGeom = new THREE.CubeGeometry(5, 5, 7, 1);
+    this.head = new THREE.Mesh(headGeom, lightBrownMat);
+    this.head.position.z = 6;
+    this.head.position.y = -0.5;
+
+    var noseGeom = new THREE.CubeGeometry(1.5, 1.5, 1.5, 1);
+    this.nose = new THREE.Mesh(noseGeom, blackMat);
+    this.nose.position.z = 4;
+    this.nose.position.y = 2;
+
+    var eyeGeom = new THREE.CubeGeometry(1, 3, 3);
+
+    this.eyeL = new THREE.Mesh(eyeGeom, whiteMat);
+    this.eyeL.position.x = 2.2;
+    this.eyeL.position.z = -0.5;
+    this.eyeL.position.y = 0.8;
+    this.eyeL.castShadow = true;
+    this.head.add(this.eyeL);
+
+    var irisGeom = new THREE.CubeGeometry(0.5, 1, 1);
+
+    this.iris = new THREE.Mesh(irisGeom, blackMat);
+    this.iris.position.x = 0.5;
+    this.iris.position.y = 0.8;
+    this.iris.position.z = 0.8;
+    this.eyeL.add(this.iris);
+
+    this.eyeR = this.eyeL.clone();
+    this.eyeR.children[0].position.x = -this.iris.position.x;
+    this.eyeR.position.x = -this.eyeL.position.x;
+
+    var spikeGeom = new THREE.CubeGeometry(0.5, 2, 0.5, 1);
+    spikeGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 1, 0));
+
+    for (var i = 0; i < 9; i++) {
+        var row = i % 3;
+        var col = Math.floor(i / 3);
+        var sb = new THREE.Mesh(spikeGeom, blackMat);
+        sb.rotation.x =
+            -Math.PI / 2 + (Math.PI / 12) * row - 0.5 + Math.random();
+        sb.position.z = -3;
+        sb.position.y = -2 + row * 2;
+        sb.position.x = -2 + col * 2;
+        this.body.add(sb);
+        var st = new THREE.Mesh(spikeGeom, blackMat);
+        st.position.y = 3;
+        st.position.x = -2 + row * 2;
+        st.position.z = -2 + col * 2;
+        st.rotation.z = Math.PI / 6 - (Math.PI / 6) * row - 0.5 + Math.random();
+        this.body.add(st);
+
+        var sr = new THREE.Mesh(spikeGeom, blackMat);
+        sr.position.x = 3;
+        sr.position.y = -2 + row * 2;
+        sr.position.z = -2 + col * 2;
+        sr.rotation.z =
+            -Math.PI / 2 + (Math.PI / 12) * row - 0.5 + Math.random();
+        this.body.add(sr);
+
+        var sl = new THREE.Mesh(spikeGeom, blackMat);
+        sl.position.x = -3;
+        sl.position.y = -2 + row * 2;
+        sl.position.z = -2 + col * 2;
+        sl.rotation.z =
+            Math.PI / 2 - (Math.PI / 12) * row - 0.5 + Math.random();
+        this.body.add(sl);
+    }
+
+    this.head.add(this.eyeR);
+    var earGeom = new THREE.CubeGeometry(2, 2, 0.5, 1);
+    this.earL = new THREE.Mesh(earGeom, lightBrownMat);
+    this.earL.position.x = 2.5;
+    this.earL.position.z = -2.5;
+    this.earL.position.y = 2.5;
+    this.earL.rotation.z = -Math.PI / 12;
+    this.earL.castShadow = true;
+    this.head.add(this.earL);
+
+    this.earR = this.earL.clone();
+    this.earR.position.x = -this.earL.position.x;
+    this.earR.rotation.z = -this.earL.rotation.z;
+    this.earR.castShadow = true;
+    this.head.add(this.earR);
+
+    var mouthGeom = new THREE.CubeGeometry(1, 1, 0.5, 1);
+    this.mouth = new THREE.Mesh(mouthGeom, blackMat);
+    this.mouth.position.z = 3.5;
+    this.mouth.position.y = -1.5;
+    this.head.add(this.mouth);
+
+    this.mesh.add(this.body);
+    this.body.add(this.head);
+    this.head.add(this.nose);
+
+    this.mesh.traverse(function (object) {
+        if (object instanceof THREE.Mesh) {
+            object.castShadow = true;
+            object.receiveShadow = true;
+        }
+    });
+};
+
+Hedgehog.prototype.nod = function () {
+    var _this = this;
+    var speed = 0.1 + Math.random() * 0.5;
+    var angle = -Math.PI / 4 + (Math.random() * Math.PI) / 2;
+    TweenMax.to(this.head.rotation, speed, {
+        y: angle,
+        onComplete: function () {
+            _this.nod();
+        },
+    });
+};
+
+function createHero() {
+    hero = new Hero();
+    hero.mesh.rotation.y = Math.PI / 2;
+    scene.add(hero.mesh);
+    hero.nod();
+}
+
+function createMonster() {
+    monster = new Monster();
+    monster.mesh.position.z = 20;
+    //monster.mesh.scale.set(1.2,1.2,1.2);
+    scene.add(monster.mesh);
+    updateMonsterPosition();
+}
+
+function updateMonsterPosition() {
+    monster.run();
+    monsterPosTarget -= delta * monsterAcceleration;
+    monsterPos += (monsterPosTarget - monsterPos) * delta;
+    if (monsterPos < 0.56) {
+        gameOver();
+    }
+
+    var angle = Math.PI * monsterPos;
+    monster.mesh.position.y =
+        -floorRadius + Math.sin(angle) * (floorRadius + 12);
+    monster.mesh.position.x = Math.cos(angle) * (floorRadius + 15);
+    monster.mesh.rotation.z = -Math.PI / 2 + angle;
+}
+
+function gameOver() {
+    fieldGameOver.className = "show";
+    gameStatus = "gameOver";
+    monster.sit();
+    hero.hang();
+    monster.heroHolder.add(hero.mesh);
+    TweenMax.to(this, 1, { speed: 0 });
+    TweenMax.to(camera.position, 3, { z: cameraPosGameOver, y: 60, x: -30 });
+    carrot.mesh.visible = false;
+    obstacle.mesh.visible = false;
+    clearInterval(levelInterval);
+}
+
+function replay() {
+    gameStatus = "preparingToReplay";
+
+    fieldGameOver.className = "";
+
+    TweenMax.killTweensOf(monster.pawFL.position);
+    TweenMax.killTweensOf(monster.pawFR.position);
+    TweenMax.killTweensOf(monster.pawBL.position);
+    TweenMax.killTweensOf(monster.pawBR.position);
+
+    TweenMax.killTweensOf(monster.pawFL.rotation);
+    TweenMax.killTweensOf(monster.pawFR.rotation);
+    TweenMax.killTweensOf(monster.pawBL.rotation);
+    TweenMax.killTweensOf(monster.pawBR.rotation);
+
+    TweenMax.killTweensOf(monster.tail.rotation);
+    TweenMax.killTweensOf(monster.head.rotation);
+    TweenMax.killTweensOf(monster.eyeL.scale);
+    TweenMax.killTweensOf(monster.eyeR.scale);
+
+    //TweenMax.killTweensOf(hero.head.rotation);
+
+    monster.tail.rotation.y = 0;
+
+    TweenMax.to(camera.position, 3, {
+        z: cameraPosGame,
+        x: 0,
+        y: 30,
+        ease: Power4.easeInOut,
+    });
+    TweenMax.to(monster.torso.rotation, 2, { x: 0, ease: Power4.easeInOut });
+    TweenMax.to(monster.torso.position, 2, { y: 0, ease: Power4.easeInOut });
+    TweenMax.to(monster.pawFL.rotation, 2, { x: 0, ease: Power4.easeInOut });
+    TweenMax.to(monster.pawFR.rotation, 2, { x: 0, ease: Power4.easeInOut });
+    TweenMax.to(monster.mouth.rotation, 2, { x: 0.5, ease: Power4.easeInOut });
+
+    TweenMax.to(monster.head.rotation, 2, {
+        y: 0,
+        x: -0.3,
+        ease: Power4.easeInOut,
+    });
+
+    TweenMax.to(hero.mesh.position, 2, { x: 20, ease: Power4.easeInOut });
+    TweenMax.to(hero.head.rotation, 2, { x: 0, y: 0, ease: Power4.easeInOut });
+    TweenMax.to(monster.mouth.rotation, 2, { x: 0.2, ease: Power4.easeInOut });
+    TweenMax.to(monster.mouth.rotation, 1, {
+        x: 0.4,
+        ease: Power4.easeIn,
+        delay: 1,
+        onComplete: function () {
+            resetGame();
+        },
+    });
+}
+
+Fir = function () {
+    var height = 200;
+    var truncGeom = new THREE.CylinderGeometry(2, 2, height, 6, 1);
+    truncGeom.applyMatrix(
+        new THREE.Matrix4().makeTranslation(0, height / 2, 0)
+    );
+    this.mesh = new THREE.Mesh(truncGeom, greenMat);
+    this.mesh.castShadow = true;
+};
+
+var firs = new THREE.Group();
+
+function createFirs() {
+    var nTrees = 100;
+    for (var i = 0; i < nTrees; i++) {
+        var phi = (i * (Math.PI * 2)) / nTrees;
+        var theta = Math.PI / 2;
+        //theta += .25 + Math.random()*.3;
+        theta +=
+            Math.random() > 0.05
+                ? 0.25 + Math.random() * 0.3
+                : -0.35 - Math.random() * 0.1;
+
+        var fir = new Tree();
+        fir.mesh.position.x = Math.sin(theta) * Math.cos(phi) * floorRadius;
+        fir.mesh.position.y =
+            Math.sin(theta) * Math.sin(phi) * (floorRadius - 10);
+        fir.mesh.position.z = Math.cos(theta) * floorRadius;
+
+        var vec = fir.mesh.position.clone();
+        var axis = new THREE.Vector3(0, 1, 0);
+        fir.mesh.quaternion.setFromUnitVectors(axis, vec.clone().normalize());
+        floor.add(fir.mesh);
+    }
+}
+
+function createCarrot() {
+    carrot = new Carrot();
+    scene.add(carrot.mesh);
+}
+
+function updateCarrotPosition() {
+    carrot.mesh.rotation.y += delta * 6;
+    carrot.mesh.rotation.z = Math.PI / 2 - (floorRotation + carrot.angle);
+    carrot.mesh.position.y =
+        -floorRadius +
+        Math.sin(floorRotation + carrot.angle) * (floorRadius + 50);
+    carrot.mesh.position.x =
+        Math.cos(floorRotation + carrot.angle) * (floorRadius + 50);
+}
+
+function updateObstaclePosition() {
+    if (obstacle.status == "flying") return;
+
+    // TODO fix this,
+    if (floorRotation + obstacle.angle > 2.5) {
+        obstacle.angle = -floorRotation + Math.random() * 0.3;
+        obstacle.body.rotation.y = Math.random() * Math.PI * 2;
+    }
+
+    obstacle.mesh.rotation.z = floorRotation + obstacle.angle - Math.PI / 2;
+    obstacle.mesh.position.y =
+        -floorRadius +
+        Math.sin(floorRotation + obstacle.angle) * (floorRadius + 3);
+    obstacle.mesh.position.x =
+        Math.cos(floorRotation + obstacle.angle) * (floorRadius + 3);
+}
+
+function updateFloorRotation() {
+    floorRotation += delta * 0.03 * speed;
+    floorRotation = floorRotation % (Math.PI * 2);
+    floor.rotation.z = floorRotation;
+}
+
+function createObstacle() {
+    obstacle = new Hedgehog();
+    obstacle.body.rotation.y = -Math.PI / 2;
+    obstacle.mesh.scale.set(1.1, 1.1, 1.1);
+    obstacle.mesh.position.y = floorRadius + 4;
+    obstacle.nod();
+    scene.add(obstacle.mesh);
+}
+
+function createBonusParticles() {
+    bonusParticles = new BonusParticles();
+    bonusParticles.mesh.visible = false;
+    scene.add(bonusParticles.mesh);
+}
+
+function checkCollision() {
+    var db = hero.mesh.position.clone().sub(carrot.mesh.position.clone());
+    var dm = hero.mesh.position.clone().sub(obstacle.mesh.position.clone());
+
+    if (db.length() < collisionBonus) {
+        getBonus();
+    }
+
+    if (dm.length() < collisionObstacle && obstacle.status != "flying") {
+        getMalus();
+    }
+}
+
+function getBonus() {
+    bonusParticles.mesh.position.copy(carrot.mesh.position);
+    bonusParticles.mesh.visible = true;
+    bonusParticles.explose();
+    carrot.angle += Math.PI / 2;
+    //speed*=.95;
+    monsterPosTarget += 0.025;
+}
+
+function getMalus() {
+    obstacle.status = "flying";
+    var tx =
+        Math.random() > 0.5 ? -20 - Math.random() * 10 : 20 + Math.random() * 5;
+    TweenMax.to(obstacle.mesh.position, 4, {
+        x: tx,
+        y: Math.random() * 50,
+        z: 350,
+        ease: Power4.easeOut,
+    });
+    TweenMax.to(obstacle.mesh.rotation, 4, {
+        x: Math.PI * 3,
+        z: Math.PI * 3,
+        y: Math.PI * 6,
+        ease: Power4.easeOut,
+        onComplete: function () {
+            obstacle.status = "ready";
+            obstacle.body.rotation.y = Math.random() * Math.PI * 2;
+            obstacle.angle = -floorRotation - Math.random() * 0.4;
+
+            obstacle.angle = obstacle.angle % (Math.PI * 2);
+            obstacle.mesh.rotation.x = 0;
+            obstacle.mesh.rotation.y = 0;
+            obstacle.mesh.rotation.z = 0;
+            obstacle.mesh.position.z = 0;
+        },
+    });
+    //
+    monsterPosTarget -= 0.04;
+    TweenMax.from(this, 0.5, {
+        malusClearAlpha: 0.5,
+        onUpdate: function () {
+            renderer.setClearColor(malusClearColor, malusClearAlpha);
+        },
+    });
+}
+
+function updateDistance() {
+    distance += delta * speed;
+    var d = distance / 2;
+    fieldDistance.innerHTML = Math.floor(d);
+}
+
+function updateLevel() {
+    if (speed >= maxSpeed) return;
+    level++;
+    speed += 2;
+}
+
+function loop() {
+    delta = clock.getDelta();
+    updateFloorRotation();
+
+    if (gameStatus == "play") {
+        if (hero.status == "running") {
+            hero.run();
+        }
+        updateDistance();
+        updateMonsterPosition();
+        updateCarrotPosition();
+        updateObstaclePosition();
+        checkCollision();
+    }
+
+    render();
+    requestAnimationFrame(loop);
+}
+
+function render() {
+    renderer.render(scene, camera);
+}
+
+window.addEventListener("load", init, false);
+
+function init(event) {
+    initScreenAnd3D();
+    createLights();
+    createFloor();
+    createHero();
+    createMonster();
+    createFirs();
+    createCarrot();
+    createBonusParticles();
+    createObstacle();
+    initUI();
+    resetGame();
+    loop();
+
+    //setInterval(hero.blink.bind(hero), 3000);
+}
+
+function resetGame() {
+    scene.add(hero.mesh);
+    hero.mesh.rotation.y = Math.PI / 2;
+    hero.mesh.position.y = 0;
+    hero.mesh.position.z = 0;
+    hero.mesh.position.x = 0;
+
+    monsterPos = 0.56;
+    monsterPosTarget = 0.65;
+    speed = initSpeed;
+    level = 0;
+    distance = 0;
+    carrot.mesh.visible = true;
+    obstacle.mesh.visible = true;
+    gameStatus = "play";
+    hero.status = "running";
+    hero.nod();
+    audio.play();
+    updateLevel();
+    levelInterval = setInterval(updateLevel, levelUpdateFreq);
+}
+
+function initUI() {
+    fieldDistance = document.getElementById("distValue");
+    fieldGameOver = document.getElementById("gameoverInstructions");
+}
+
+////////////////////////////////////////////////
+//                                        MODELS
+////////////////////////////////////////////////
+
+// TREE
+
+Tree = function () {
+    this.mesh = new THREE.Object3D();
+    this.trunc = new Trunc();
+    this.mesh.add(this.trunc.mesh);
+};
+
+Trunc = function () {
+    var truncHeight = 50 + Math.random() * 150;
+    var topRadius = 1 + Math.random() * 5;
+    var bottomRadius = 5 + Math.random() * 5;
+    var mats = [
+        blackMat,
+        brownMat,
+        pinkMat,
+        whiteMat,
+        greenMat,
+        lightBrownMat,
+        pinkMat,
+    ];
+    var matTrunc = blackMat; //mats[Math.floor(Math.random()*mats.length)];
+    var nhSegments = 3; //Math.ceil(2 + Math.random()*6);
+    var nvSegments = 3; //Math.ceil(2 + Math.random()*6);
+    var geom = new THREE.CylinderGeometry(
+        topRadius,
+        bottomRadius,
+        truncHeight,
+        nhSegments,
+        nvSegments
+    );
+    geom.applyMatrix(
+        new THREE.Matrix4().makeTranslation(0, truncHeight / 2, 0)
+    );
+
+    this.mesh = new THREE.Mesh(geom, matTrunc);
+
+    for (var i = 0; i < geom.vertices.length; i++) {
+        var noise = Math.random();
+        var v = geom.vertices[i];
+        v.x += -noise + Math.random() * noise * 2;
+        v.y += -noise + Math.random() * noise * 2;
+        v.z += -noise + Math.random() * noise * 2;
+
+        geom.computeVertexNormals();
+
+        // FRUITS
+
+        if (Math.random() > 0.7) {
+            var size = Math.random() * 3;
+            var fruitGeometry = new THREE.CubeGeometry(size, size, size, 1);
+            var matFruit = mats[Math.floor(Math.random() * mats.length)];
+            var fruit = new THREE.Mesh(fruitGeometry, matFruit);
+            fruit.position.x = v.x;
+            fruit.position.y = v.y + 3;
+            fruit.position.z = v.z;
+            fruit.rotation.x = Math.random() * Math.PI;
+            fruit.rotation.y = Math.random() * Math.PI;
+
+            this.mesh.add(fruit);
+        }
+
+        // BRANCHES
+
+        if (Math.random() > 0.5 && v.y > 10 && v.y < truncHeight - 10) {
+            var h = 3 + Math.random() * 5;
+            var thickness = 0.2 + Math.random();
+
+            var branchGeometry = new THREE.CylinderGeometry(
+                thickness / 2,
+                thickness,
+                h,
+                3,
+                1
+            );
+            branchGeometry.applyMatrix(
+                new THREE.Matrix4().makeTranslation(0, h / 2, 0)
+            );
+            var branch = new THREE.Mesh(branchGeometry, matTrunc);
+            branch.position.x = v.x;
+            branch.position.y = v.y;
+            branch.position.z = v.z;
+
+            var vec = new THREE.Vector3(v.x, 2, v.z);
+            var axis = new THREE.Vector3(0, 1, 0);
+            branch.quaternion.setFromUnitVectors(axis, vec.clone().normalize());
+
+            this.mesh.add(branch);
+        }
+    }
+
+    this.mesh.castShadow = true;
+};
diff --git a/Valorous Rabbit/style.scss b/Valorous Rabbit/style.scss
new file mode 100644
index 000000000..7ca25e49c
--- /dev/null
+++ b/Valorous Rabbit/style.scss	
@@ -0,0 +1,106 @@
+
+@import url('https://fonts.googleapis.com/css?family=Voltaire');
+
+
+#world{
+  position: absolute;
+  width:100%;
+  height: 100%;
+  background-color: #dbe6e6;
+  overflow: hidden;
+}
+
+
+#gameoverInstructions{
+  position:absolute;
+  font-family:'Voltaire', sans-serif;
+  font-weight:bold;
+  text-transform: uppercase;
+  font-size:120px;
+  text-align:center;
+  color:#ffc5a2;
+  opacity:0;
+  left:50%;
+  top:50%;
+  width:100%;
+  transform : translate(-50%,-100%);
+  user-select: none;
+  transition: all 500ms ease-in-out;
+  
+  &.show{
+    opacity:1;
+    transform : translate(-50%,-50%);
+    transition: all 500ms ease-in-out;
+  };
+}
+
+
+#dist{
+  position:absolute;
+  left:50%;
+  top:50px;
+  transform:translate(-50%,0%);
+  user-select: none;  
+}
+
+.label{
+  position:relative;
+  font-family:'Voltaire', sans-serif;
+  text-transform:uppercase;
+  color:#ffa873;//100707;
+  font-size:12px;
+  letter-spacing:2px;
+  text-align:center;
+  margin-bottom:5px;
+}
+
+
+#distValue{
+  position:relative;
+  text-transform:uppercase;
+  color:#dc5f45;//dc5f45;
+  font-size:40px;
+  font-family:'Voltaire';
+  text-align:center;
+}
+
+#credits{
+  position:absolute;
+  width:100%;
+  margin: auto;
+  bottom:0;
+  margin-bottom:20px;
+  font-family:'Voltaire', sans-serif;
+  color:#544027;
+  font-size:12px;
+  letter-spacing:0.5px;
+  text-transform: uppercase;
+  text-align : center;
+  user-select: none;  
+}
+#credits a {
+  color:#544027;
+  
+}
+
+#credits a:hover {
+  color:#dc5f45;
+}
+
+#instructions{
+  position:absolute;
+  width:100%;
+  bottom:0;
+  margin: auto;
+  margin-bottom:50px;
+  font-family:'Voltaire', sans-serif;
+  color:#dc5f45;
+  font-size:16px;
+  letter-spacing:1px;
+  text-transform: uppercase;
+  text-align : center;
+  user-select: none;
+}
+.lightInstructions {
+  color:#5f9042;
+}
diff --git a/Wall Reaction game/index.html b/Wall Reaction game/index.html
new file mode 100644
index 000000000..8ce9d04ae
--- /dev/null
+++ b/Wall Reaction game/index.html	
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Snippet Generator</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
+</head>
+<body>
+    %div.info
+  %div.time
+  %div.points
+%div.wall
+  - (1...101).each do |i|
+    %div.dot
+  %div.start
+    %button Start game!
+  %div.end
+    %div.score
+    %button Play again!
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Wall Reaction game/script.js b/Wall Reaction game/script.js
new file mode 100644
index 000000000..bb57ab5a3
--- /dev/null
+++ b/Wall Reaction game/script.js	
@@ -0,0 +1,56 @@
+$(document).ready(function() {
+    $(document).on("click", ".start button, .end button", function() {
+      App.start_game();
+    });
+    $(document).on("click", ".dot.active", function() {
+      App.add_point();
+    });
+  });
+  
+  App = {
+    current_active: "",
+    dot_selector: ".wall .dot",
+    points: 0,
+    time: 30,
+    time_interval: "",
+     
+    init_game: function() {
+      this.points = 0;
+      this.time = 30;
+    },
+     
+    start_game: function() {
+      this.init_game();
+      $(".start, .end").fadeOut("fast");
+      this.set_dot();
+      $(".info .time").html("00:" + this.time);
+      $(".info .points").html(this.points);
+      this.time_interval = setInterval("App.update_time()", 1000);
+    },
+     
+    update_time: function() {
+      this.time -= 1;
+      if (this.time > 0) {
+        if (String(this.time).length == 1) {
+          this.time = "0" + this.time;
+        }
+        $(".info .time").html("00:" + this.time);
+      } else {
+        $(".info .time").html("00:00");
+        clearInterval(this.time_interval);
+        $(".end .score").html("Game over!<br />You scored " + this.points + " points!").parent().fadeIn("fast");
+      }
+    },
+     
+    add_point: function() {
+      this.set_dot();
+      this.points += 1;
+      $(".info .points").html(this.points);
+    },
+    
+    set_dot: function() {
+      $(this.dot_selector).removeClass("active");
+      var active = Math.floor((Math.random() * ($(this.dot_selector).length - 1))+1);
+      $(this.dot_selector + ":eq("+active+")").addClass("active");
+    }
+  };
\ No newline at end of file
diff --git a/Wall Reaction game/styles.css b/Wall Reaction game/styles.css
new file mode 100644
index 000000000..4efa4a30c
--- /dev/null
+++ b/Wall Reaction game/styles.css	
@@ -0,0 +1,128 @@
+$size: 400px;
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  font-family: sans-serif;
+  background: #2c3e50;
+}
+
+.info {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  background: #ecf0f1;
+  border-radius: 0 0 5px 0;
+  height: auto;
+  width: auto;
+  padding: 20px;
+  color: #000;
+  .time {
+    &:before {
+      content: "Time left:";
+      margin-right: 5px;
+    }
+  }
+  .points {
+    &:before {
+      content: "Points:";
+      margin-right: 20px;
+    }
+  }
+}
+
+.wall {
+  width: $size;
+  height: $size;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  .dot {
+    height: 10%;
+    width: 10%;
+    background: #ecf0f1;
+    border-radius: 50%;
+    float: left;
+    &.active {
+      background: #e74c3c;
+      cursor: pointer;
+    }
+  }
+  .start {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: #ecf0f1;
+    border-radius: 5px;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    button {
+      width: $size / 2;
+      height: $size / 10;
+      font-size: $size / 20;
+      text-transform: uppercase;
+      background: #e74c3c;
+      border-radius: 5px;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      cursor: pointer;
+      &:hover {
+        background: darken(#e74c3c, 20%);
+      }
+    }
+  }
+  .end {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #ecf0f1;
+    z-index: 100;
+    border-radius: 5px;
+    display: none;
+    .score {
+      text-align: center;
+      color: #000;
+      font-size: $size / 15;
+      line-height: $size / 5;
+    }
+    button {
+      width: $size / 2;
+      height: $size / 10;
+      font-size: $size / 20;
+      text-transform: uppercase;
+      background: #e74c3c;
+      border-radius: 5px;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      cursor: pointer;
+      &:hover {
+        background: darken(#e74c3c, 20%);
+      }
+    }
+  }
+  &:after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+}
\ No newline at end of file
diff --git a/activity.css b/activity.css
new file mode 100644
index 000000000..503bf9f8c
--- /dev/null
+++ b/activity.css
@@ -0,0 +1,142 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    margin-left: 5px;
+  }
+  
+  body {
+    font-family: "Poppins", sans-serif;
+    background-attachment: fixed;
+    background-size: cover;
+    /* color: #333; */
+    background-color:#040423;
+  }
+  
+  header {
+    padding: 1em 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  header nav a {
+    color: #d0defa;
+    text-decoration: none;
+    font-size: 25px;
+    transition: color 0.3s;
+  }
+  
+  header nav a:hover {
+    color: #534141;
+  }
+  
+  .fa-home,
+  .fa-arrow-left {
+    color: #ffffff; 
+    padding: 0 15px;
+  }
+  
+  .fa-home:hover {
+    color: #be8f8f;
+  }
+  
+  .fa-arrow-left:hover {
+    color: #be8f8f;
+  }
+  
+  .fa-arrow-left {
+    position: absolute;
+    right: 5px;
+  }
+
+
+  main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2em 0;
+    color: #4b4646;
+  }
+  
+  h1 {
+    font-size: 2em;
+    color: #ffffff;
+    margin-bottom: 1em;
+  }
+  
+  .activity-feed {
+    background-color: #4a4444;
+    padding: 1.5em;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    max-width: 850px;
+  }
+  
+  .activity-feed ul {
+    list-style: none;
+  }
+  
+  .activity-feed li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+    padding: 1em;
+    background-color: #d0defa;
+    border-radius: 8px;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  
+  .activity-feed li:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  }
+  
+  .activity-feed i {
+    font-size: 1.5em;
+    margin-right: 15px;
+    color: #514f4f;
+  }
+  
+  .activity-feed p {
+    font-size: 1em;
+    color: #333;
+  }
+  
+  .fa-shopping-cart,
+  .fa-truck,
+  .fa-check {
+    color: #e74c3c;
+  }
+  
+  .fa-envelope {
+    color: #3498db;
+  }
+  
+  .fa-book,
+  .fa-exchange {
+    color: #f1c40f;
+  }
+  
+ 
+
+  
+  /* Responsive Design */
+  @media only screen and (max-width: 768px) {
+    main {
+      padding: 1em;
+    }
+    .activity-feed {
+      width: 90%;
+    }
+  }
+  
+  @media only screen and (max-width: 480px) {
+    header nav a {
+      font-size: 20px;
+    }
+    .activity-feed {
+      width: 100%;
+    }
+  }
\ No newline at end of file
diff --git a/activity.js b/activity.js
new file mode 100644
index 000000000..b85f5b97f
--- /dev/null
+++ b/activity.js
@@ -0,0 +1,80 @@
+const listItems = document.querySelectorAll('.activity-feed li');
+
+listItems.forEach((item, index) => {
+    item.addEventListener('click', () => {
+        const detailElement = item.querySelector('.detail');
+
+        // If details are already open, close them
+        if (detailElement) {
+            detailElement.remove();
+        } else {
+            // Close any open details
+            const openDetails = document.querySelectorAll('.detail');
+            openDetails.forEach((detail) => {
+                detail.remove();
+            });
+
+            // Open the clicked item's details
+            const detailHtml = getDetailHtml(index);
+            const detailContainer = document.createElement('div');
+            detailContainer.className = 'detail';
+            detailContainer.innerHTML = detailHtml;
+            item.appendChild(detailContainer);
+        }
+    });
+});
+
+function getDetailHtml(index) {
+    let detailHtml = '';
+    switch (index) {
+        case 0:
+            detailHtml = `
+                <h3>Profile Update</h3>
+                <p>Update ID: #1001</p>
+                <p>Date: 2024-11-05</p>
+                <p>Time: 13:30</p>
+                <p>Details: <strong>Profile information updated successfully</strong></p>
+            `;
+            break;
+        case 1:
+            detailHtml = `
+                <h3>Friend Request</h3>
+                <p>Request ID: #1002</p>
+                <p>Date: 2024-11-05</p>
+                <p>Time: 11:00</p>
+                <p>From: <strong>Ritu</strong></p>
+            `;
+            break;
+        case 2:
+            detailHtml = `
+                <h3>New Game Alert</h3>
+                <p>Game ID: #1003</p>
+                <p>Date: 2024-11-04</p>
+                <p>Time: 16:00</p>
+                <p>Game: <strong>Mystery Island</strong></p>
+            `;
+            break;
+        case 3:
+            detailHtml = `
+                <h3>Message from Divya</h3>
+                <p>Message ID: #1004</p>
+                <p>Date: 2024-11-04</p>
+                <p>Time: 15:00</p>
+                <p>Message: "Are you joining the game tonight?"</p>
+            `;
+            break;
+        case 4:
+            detailHtml = `
+                <h3>Message from Support</h3>
+                <p>Message ID: #1005</p>
+                <p>Date: 2024-11-03</p>
+                <p>Time: 10:30</p>
+                <p>Message: "Your issue has been resolved"</p>
+            `;
+            break;
+        default:
+            detailHtml = '';
+    }
+    return detailHtml;
+}
+
diff --git a/assets/image/1-yr-parrot.jpg b/assets/image/1-yr-parrot.jpg
new file mode 100644
index 000000000..81d74a0e5
Binary files /dev/null and b/assets/image/1-yr-parrot.jpg differ
diff --git a/assets/image/3year-cat.jpg b/assets/image/3year-cat.jpg
new file mode 100644
index 000000000..3043a0f85
Binary files /dev/null and b/assets/image/3year-cat.jpg differ
diff --git a/assets/image/4 year dog.jpg b/assets/image/4 year dog.jpg
new file mode 100644
index 000000000..27f5e2de2
Binary files /dev/null and b/assets/image/4 year dog.jpg differ
diff --git a/assets/image/Flames Game.png b/assets/image/Flames Game.png
new file mode 100644
index 000000000..910db6d62
Binary files /dev/null and b/assets/image/Flames Game.png differ
diff --git a/assets/image/High_Priestess-tarot.jpg b/assets/image/High_Priestess-tarot.jpg
new file mode 100644
index 000000000..d3f0d6e3b
Binary files /dev/null and b/assets/image/High_Priestess-tarot.jpg differ
diff --git a/assets/image/The-Fool-tarot.jpg b/assets/image/The-Fool-tarot.jpg
new file mode 100644
index 000000000..6b6e6bf75
Binary files /dev/null and b/assets/image/The-Fool-tarot.jpg differ
diff --git a/assets/image/The-Magician-tarot.jpg b/assets/image/The-Magician-tarot.jpg
new file mode 100644
index 000000000..63d9b9fe0
Binary files /dev/null and b/assets/image/The-Magician-tarot.jpg differ
diff --git a/assets/image/bella-dog.jpg b/assets/image/bella-dog.jpg
new file mode 100644
index 000000000..009a4e40e
Binary files /dev/null and b/assets/image/bella-dog.jpg differ
diff --git a/assets/image/fortune-teller.jpg b/assets/image/fortune-teller.jpg
new file mode 100644
index 000000000..4a9c2260e
Binary files /dev/null and b/assets/image/fortune-teller.jpg differ
diff --git a/assets/image/garden-planer.jpg b/assets/image/garden-planer.jpg
new file mode 100644
index 000000000..1592f93f1
Binary files /dev/null and b/assets/image/garden-planer.jpg differ
diff --git a/assets/image/mindful-breathing.jpg b/assets/image/mindful-breathing.jpg
new file mode 100644
index 000000000..d96815974
Binary files /dev/null and b/assets/image/mindful-breathing.jpg differ
diff --git a/assets/image/pet-adopt.png b/assets/image/pet-adopt.png
new file mode 100644
index 000000000..feee39593
Binary files /dev/null and b/assets/image/pet-adopt.png differ
diff --git a/assets/image/sketch-pad-img.jpg b/assets/image/sketch-pad-img.jpg
new file mode 100644
index 000000000..7a3dd220f
Binary files /dev/null and b/assets/image/sketch-pad-img.jpg differ
diff --git a/assets/image/story-builder.webp b/assets/image/story-builder.webp
new file mode 100644
index 000000000..7980b0c3d
Binary files /dev/null and b/assets/image/story-builder.webp differ
diff --git a/assets/image/tarot.jpg b/assets/image/tarot.jpg
new file mode 100644
index 000000000..45f891d8c
Binary files /dev/null and b/assets/image/tarot.jpg differ
diff --git a/assets/image/the-Empress-tarot.jpg b/assets/image/the-Empress-tarot.jpg
new file mode 100644
index 000000000..49fc9c3b8
Binary files /dev/null and b/assets/image/the-Empress-tarot.jpg differ
diff --git a/assets/image/the-emperor-tarot.jpg b/assets/image/the-emperor-tarot.jpg
new file mode 100644
index 000000000..a8cca94fb
Binary files /dev/null and b/assets/image/the-emperor-tarot.jpg differ
diff --git a/challenges/challengehtml.html b/challenges/challengehtml.html
index 7f437c05c..163a42a60 100644
--- a/challenges/challengehtml.html
+++ b/challenges/challengehtml.html
@@ -5,10 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="/faviconicon.png" type="image/x-icon">
     <title>HTML Quiz</title>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #08114c;
+            background-color: #1a1a2e;
+            color: #f5f5f5;
             margin: 0;
             padding: 20px;
             display: flex;
@@ -18,21 +20,32 @@
         }
 
         .quiz-container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            background: linear-gradient(145deg, #162447, #1f4068, #1b1b2f);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
             max-width: 600px;
             width: 100%;
+            color: #ffffff;
+            transition: transform 0.3s ease-in-out;
+        }
+
+        .quiz-container:hover {
+            transform: scale(1.02);
         }
 
         h1 {
             text-align: center;
             margin-bottom: 20px;
+            color: #e94560;
+            font-size: 2em;
+            text-shadow: 2px 2px #000;
         }
 
         .question {
-            margin-bottom: 15px;
+            margin-bottom: 20px;
+            font-size: 1.2em;
+            color: #f0f0f0;
         }
 
         .options {
@@ -41,38 +54,44 @@
         }
 
         .option {
-            background-color: #e7f3fe;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 5px 0;
+            background-color: #222831;
+            color: #f5f5f5;
+            padding: 12px;
+            border-radius: 8px;
+            margin: 8px 0;
             cursor: pointer;
-            transition: background-color 0.3s;
-            border: 2px solid transparent; /* Default border */
+            transition: background-color 0.3s, color 0.3s;
+            border: 2px solid transparent;
+            font-size: 1.1em;
         }
 
         .option:hover {
-            background-color: #d1e7fd;
+            background-color: #393e46;
         }
 
         .selected {
-            background-color: #b3e5fc;
-            border: 2px solid #007bff; /* Selected border color */
+            background-color: #e94560;
+            border: 2px solid #0f4c75;
+            color: #ffffff;
         }
 
         button {
-            background-color: #007bff;
+            background-color: #0f4c75;
             color: white;
             border: none;
-            padding: 10px;
-            border-radius: 5px;
+            padding: 12px;
+            border-radius: 8px;
             cursor: pointer;
             display: block;
             width: 100%;
-            margin-top: 10px;
+            margin-top: 15px;
+            font-size: 1.1em;
+            font-weight: bold;
+            transition: background-color 0.3s;
         }
 
         button:hover {
-            background-color: #0056b3;
+            background-color: #3282b8;
         }
 
         .hidden {
@@ -90,86 +109,16 @@ <h1>HTML Challenge</h1>
 
     <script>
         const questions = [
-            {
-                question: "1) HTML is used to create",
-                options: [
-                    "Web server",
-                    "Word document",
-                    "Web page",
-                    "Database"
-                ],
-                answer: 2
-            },
-            {
-                question: "2) Which attribute is used with <td> tag to merge two cells horizontally?",
-                options: [
-                    "Colspan = 2",
-                    "Rowspan = 2",
-                    "Mergerows",
-                    "mergecols"
-                ],
-                answer: 0
-            },
-            {
-                question: "3) What does the <tt> tag in HTML do?",
-                options: [
-                    "It renders fonts as teletype text font style",
-                    "It renders fonts as truetype text font style",
-                    "It renders fonts as truncate text font style",
-                    "None of these"
-                ],
-                answer: 0
-            },
-            {
-                question: "4) How many heading tags are supported by HTML?",
-                options: ["3", "4", "5", "6"],
-                answer: 3
-            },
-            {
-                question: "5) HTML supports",
-                options: [
-                    "Ordered list",
-                    "Unordered list",
-                    "Both type lists",
-                    "Does not support those types"
-                ],
-                answer: 2
-            },
-            {
-                question: "6) HTML is derived from",
-                options: ["URL", "SGML", "TCP/IP", "Browsers"],
-                answer: 1
-            },
-            {
-                question: "7) What is the meaning of increasing the cell padding?",
-                options: [
-                    "Increase the thickness of table border",
-                    "Increase the space between cells",
-                    "Increase the distance between cell and content",
-                    "Increase the number of cells"
-                ],
-                answer: 2
-            },
-            {
-                question: "8) Which property of cells defines how many rows a cell should span?",
-                options: [
-                    "Colspan = 5",
-                    "Rowspan = 5",
-                    "Cellspan = 5",
-                    "Span = 5"
-                ],
-                answer: 1
-            },
-            {
-                question: "9) What are the two main parts available in an HTML document?",
-                options: ["Title and Body", "Head and Title", "Head and Body", "Head and Document"],
-                answer: 2
-            },
-            {
-                question: "10) Which character in HTML is used to indicate an end tag?",
-                options: ["\\", "/", "!", "<#"],
-                answer: 1
-            }
+            { question: "1) HTML is used to create", options: ["Web server", "Word document", "Web page", "Database"], answer: 2 },
+            { question: "2) Which attribute is used with <td> tag to merge two cells horizontally?", options: ["Colspan = 2", "Rowspan = 2", "Mergerows", "mergecols"], answer: 0 },
+            { question: "3) What does the <tt> tag in HTML do?", options: ["It renders fonts as teletype text font style", "It renders fonts as truetype text font style", "It renders fonts as truncate text font style", "None of these"], answer: 0 },
+            { question: "4) How many heading tags are supported by HTML?", options: ["3", "4", "5", "6"], answer: 3 },
+            { question: "5) HTML supports", options: ["Ordered list", "Unordered list", "Both type lists", "Does not support those types"], answer: 2 },
+            { question: "6) HTML is derived from", options: ["URL", "SGML", "TCP/IP", "Browsers"], answer: 1 },
+            { question: "7) What is the meaning of increasing the cell padding?", options: ["Increase the thickness of table border", "Increase the space between cells", "Increase the distance between cell and content", "Increase the number of cells"], answer: 2 },
+            { question: "8) Which property of cells defines how many rows a cell should span?", options: ["Colspan = 5", "Rowspan = 5", "Cellspan = 5", "Span = 5"], answer: 1 },
+            { question: "9) What are the two main parts available in an HTML document?", options: ["Title and Body", "Head and Title", "Head and Body", "Head and Document"], answer: 2 },
+            { question: "10) Which character in HTML is used to indicate an end tag?", options: ["\\", "/", "!", "<#"], answer: 1 }
         ];
 
         let currentQuestionIndex = 0;
@@ -182,9 +131,7 @@ <h1>HTML Challenge</h1>
                 <div class="question">
                     <h3>${question.question}</h3>
                     <ul class="options">
-                        ${question.options.map((option, i) => `
-                            <li class="option" onclick="selectOption(this, ${i})">${option}</li>
-                        `).join('')}
+                        ${question.options.map((option, i) => `<li class="option" onclick="selectOption(this, ${i})">${option}</li>`).join('')}
                     </ul>
                 </div>
             `;
diff --git a/challenges/easycss.html b/challenges/easycss.html
index d01e027bb..ee511c551 100644
--- a/challenges/easycss.html
+++ b/challenges/easycss.html
@@ -5,10 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="/faviconicon.png" type="image/x-icon">
     <title>CSS EASY Quiz</title>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #08114c;
+            background-color: #e0e7ff;
+            color: #333;
             margin: 0;
             padding: 20px;
             display: flex;
@@ -18,21 +20,26 @@
         }
 
         .quiz-container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            background-color: #fdfbff;
+            color: #333;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
             max-width: 600px;
             width: 100%;
         }
 
         h1 {
             text-align: center;
-            margin-bottom: 20px;
+            margin-bottom: 25px;
+            color: #5a189a;
+            font-size: 1.8em;
         }
 
         .question {
+            font-weight: bold;
             margin-bottom: 15px;
+            color: #333;
         }
 
         .options {
@@ -41,38 +48,42 @@
         }
 
         .option {
-            background-color: #e7f3fe;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 5px 0;
+            background-color: #f1faff;
+            color: #333;
+            padding: 12px;
+            border-radius: 6px;
+            margin: 8px 0;
             cursor: pointer;
-            transition: background-color 0.3s;
-            border: 2px solid transparent; /* Default border */
+            transition: background-color 0.3s, transform 0.2s;
+            border: 2px solid transparent;
         }
 
         .option:hover {
-            background-color: #d1e7fd;
+            background-color: #e0f7fa;
+            transform: scale(1.02);
         }
 
         .selected {
-            background-color: #b3e5fc;
-            border: 2px solid #007bff; /* Selected border color */
+            background-color: #ffccd5;
+            border: 2px solid #ff577f;
+            color: #ff577f;
         }
 
         button {
-            background-color: #007bff;
+            background-color: #5a189a;
             color: white;
             border: none;
-            padding: 10px;
-            border-radius: 5px;
+            padding: 12px;
+            border-radius: 6px;
             cursor: pointer;
-            display: block;
             width: 100%;
-            margin-top: 10px;
+            font-size: 1em;
+            transition: background-color 0.3s;
+            margin-top: 15px;
         }
 
         button:hover {
-            background-color: #0056b3;
+            background-color: #4e148c;
         }
 
         .hidden {
@@ -135,7 +146,7 @@ <h1>CSS EASY CHALLENGE</h1>
                 options: [
                     "django",
                     "rails",
-                    "larawell",
+                    "laravel",
                     "bootstrap"
                 ],
                 answer: 3
@@ -238,10 +249,10 @@ <h3>${question.question}</h3>
 
         function submitAnswers() {
             alert(`You scored ${score} out of ${questions.length}`);
-            window.location.href = 'index.html'; // Redirect to main page after submitting
+            window.location.href = 'index.html';
         }
 
-        window.onload = showQuestion; // Show the first question when the page loads
+        window.onload = showQuestion;
     </script>
 </body>
 </html>
diff --git a/challenges/hardcss.html b/challenges/hardcss.html
index 93ff5d821..0f92bebb8 100644
--- a/challenges/hardcss.html
+++ b/challenges/hardcss.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="/faviconicon.png" type="image/x-icon">
     <title>Hard CSS Quiz</title>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -18,21 +19,24 @@
         }
 
         .quiz-container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            max-width: 600px;
+            background-color: #2b2b2b;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+            max-width: 700px;
             width: 100%;
+            color: #f5f5f5;
         }
 
         h1 {
             text-align: center;
-            margin-bottom: 20px;
+            color: #00c853;
+            font-size: 28px;
+            margin-bottom: 25px;
         }
 
         .question {
-            margin-bottom: 15px;
+            margin-bottom: 20px;
         }
 
         .options {
@@ -41,38 +45,43 @@
         }
 
         .option {
-            background-color: #e7f3fe;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 5px 0;
+            background-color: #3949ab;
+            color: #fff;
+            padding: 15px;
+            border-radius: 8px;
+            margin: 7px 0;
             cursor: pointer;
-            transition: background-color 0.3s;
-            border: 2px solid transparent; /* Default border */
+            transition: background-color 0.3s, transform 0.2s;
+            border: 2px solid transparent;
         }
 
         .option:hover {
-            background-color: #d1e7fd;
+            background-color: #1e88e5;
+            transform: scale(1.03);
         }
 
         .selected {
-            background-color: #b3e5fc;
-            border: 2px solid #007bff; /* Selected border color */
+            background-color: #ff5252;
+            border: 2px solid #ff1744;
         }
 
         button {
-            background-color: #007bff;
+            background-color: #00c853;
             color: white;
             border: none;
-            padding: 10px;
-            border-radius: 5px;
+            padding: 12px;
+            border-radius: 8px;
             cursor: pointer;
             display: block;
             width: 100%;
-            margin-top: 10px;
+            font-size: 16px;
+            font-weight: bold;
+            margin-top: 15px;
+            transition: background-color 0.3s;
         }
 
         button:hover {
-            background-color: #0056b3;
+            background-color: #00a844;
         }
 
         .hidden {
@@ -80,11 +89,14 @@
         }
 
         .code-block {
-            background-color: black;
-            color: white;
+            background-color: #333;
+            color: #8bc34a;
             padding: 10px;
-            border-radius: 5px;
-            overflow-x: auto; /* Adds horizontal scroll for long lines */
+            border-radius: 8px;
+            overflow-x: auto;
+            font-family: monospace;
+            font-size: 14px;
+            margin-bottom: 15px;
         }
     </style>
 </head>
@@ -108,96 +120,7 @@ <h1>Hard CSS Quiz</h1>
                 ],
                 answer: 0
             },
-            {
-                question: "2) Which of the following CSS property specifies the look and design of an outline?",
-                options: [
-                    "a) outline-style",
-                    "b) outline-format",
-                    "c) outline-font",
-                    "d) none of the mentioned"
-                ],
-                answer: 0
-            },
-            {
-                question: "3) What will be the output of the following CSS code snippet?<br><pre class='code-block'><code>span {\n\tborder: 1px solid red;\n\toutline: green dotted thick;\n}</code></pre>",
-                options: [
-                    "a) All span elements will have a green thick border and a red outline",
-                    "b) All span elements will have a red border and a green dotted outline",
-                    "c) All span elements will have an outer green dotted border and an inner red border",
-                    "d) All span elements will have an outer red border and inner green dotted border"
-                ],
-                answer: 1
-            },
-            {
-                question: "4) Which of the following CSS property sets the shadow for a box element?",
-                options: [
-                    "a) set-shadow",
-                    "b) box-shadow",
-                    "c) shadow",
-                    "d) canvas-shadow"
-                ],
-                answer: 1
-            },
-            {
-                question: "5) Which of the following CSS property is used to set the color of the text?",
-                options: [
-                    "a) text-decoration",
-                    "b) pallet",
-                    "c) colour",
-                    "d) color"
-                ],
-                answer: 3
-            },
-            {
-                question: "6) Which of the following CSS Property controls how an element is positioned?",
-                options: [
-                    "a) static",
-                    "b) position",
-                    "c) fix",
-                    "d) set"
-                ],
-                answer: 1
-            },
-            {
-                question: "7) Which of the following CSS selector selects the elements that are checked?",
-                options: [
-                    "a) :checked",
-                    "b) E ~ F",
-                    "c) ::after",
-                    "d) none of the mentioned"
-                ],
-                answer: 0
-            },
-            {
-                question: "8) Which of the following is an appropriate value for the overflow element?",
-                options: [
-                    "a) scroll",
-                    "b) hidden",
-                    "c) auto",
-                    "d) all of the mentioned"
-                ],
-                answer: 3
-            },
-            {
-                question: "9) Which of the following CSS property is used to specify table borders in CSS?",
-                options: [
-                    "a) table:border",
-                    "b) table",
-                    "c) border",
-                    "d) none of the mentioned"
-                ],
-                answer: 2
-            },
-            {
-                question: "10) Which of the following property is used to align the text in a table?",
-                options: [
-                    "a) text-align",
-                    "b) align",
-                    "c) text",
-                    "d) none of the mentioned"
-                ],
-                answer: 0
-            }
+            // More questions...
         ];
 
         let currentQuestionIndex = 0;
@@ -249,7 +172,7 @@ <h3>${question.question}</h3>
             window.location.href = 'index.html'; // Redirect to main page after submitting
         }
 
-        window.onload = showQuestion; // Show the first question when the page loads
+        window.onload = showQuestion;
     </script>
 </body>
 </html>
diff --git a/challenges/index.html b/challenges/index.html
index 95e63e34c..33e9c941d 100644
--- a/challenges/index.html
+++ b/challenges/index.html
@@ -5,41 +5,38 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="/faviconicon.png" type="image/x-icon">
     <title>Web Development Challenges</title>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
     <style>
         body {
             font-family: 'Arial', sans-serif;
             display: flex;
             flex-direction: column;
             align-items: center;
-            margin: 50px;
+            margin: 0;
             padding: 0;
-            background-color: #db1939;
-            
+            background-color: #040423;
+            overflow-x: hidden;
         }
 
-        .container{
+        .container {
             background-color: #161d2a;
-            padding: 30px;
-            overflow: hidden;
+            padding: 40px;
+            max-width: 1300px;
+            border-radius: 10px;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
         }
 
         h1 {
-            font-size: 70px;
-            text-align: center;
-            margin-bottom: 40px;
-            font-family:'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
-            color: transparent; 
-            -webkit-text-stroke: 1px rgb(255, 255, 255); 
+            font-size: 60px;
+            color: transparent;
+            -webkit-text-stroke: 1px #ffffff;
             animation: slideIn 15s linear infinite;
+            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
         }
-        /* use to make the title sliding from right to left */
+
         @keyframes slideIn {
-            0% {
-                transform: translateX(100%); 
-            }
-            100% {
-                transform: translateX(-100%); 
-            }
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(-100%); }
         }
 
         .quiz-container {
@@ -48,102 +45,145 @@
             gap: 30px;
             justify-content: center;
             padding: 20px;
-            max-width: 1250px;
         }
 
         .quiz-card {
             width: 250px;
-            height: 310px;
-            border-radius: 2px;
+            height: 330px;
+            border-radius: 8px;
             display: flex;
             flex-direction: column;
-            justify-content: flex-end;
             align-items: center;
             text-align: center;
-            background-color: #ffffff;
-            box-shadow: 0 4px 8px rgba(250, 247, 247, 0.14);
-            overflow: hidden;
-            position: relative;
-            transition: transform 0.1s ease, box-shadow 0.3s ease;
+            background: linear-gradient(135deg, #fff 40%, #db1939);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+            transition: transform 0.2s ease, box-shadow 0.3s ease;
         }
 
         .quiz-card:hover {
-            transform: translateY(-15px);
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+            transform: translateY(-10px) rotate(1deg);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
         }
 
         .quiz-card h2 {
-            font-size: 20px;
-            margin-bottom:5px;
-            color: #161d2a;
-            border: 1px solid #db1939;
-            border-radius: 4px;
+            font-size: 22px;
+            margin: 15px;
+            color: #fff;
             padding: 10px;
-            box-shadow: inset 0px 0px 10px rgba(255, 0, 0, 0.2);
+            background: #161d2a;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+        }
+
+        .quiz-card h2:hover {
+            background: #db1939;
+            color: #fff;
+            transform: scale(1.05);
         }
 
         img {
             width: 100%;
-            height: 70%;
+            height: 60%;
             object-fit: cover;
+            border-bottom: 2px solid #db1939;
         }
 
         button {
             margin: 15px 0;
-            padding: 10px 20px;
+            padding: 12px 25px;
             font-size: 1em;
             cursor: pointer;
-            background-color: #db1939;
+            background: linear-gradient(135deg, #db1939, #4a030f);
             color: #fff;
             border: none;
             border-radius: 5px;
-            transition: background-color 0.3s ease;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            transition: transform 0.2s ease, box-shadow 0.3s ease;
         }
 
         button:hover {
-            background-color: #4a030f ;
-            transform: translateY(-3px);
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+            transform: translateY(-4px);
+            background: linear-gradient(135deg, #4a030f, #db1939);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+        }
+
+        @keyframes backgroundAnimation {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        body {
+            background: linear-gradient(135deg, #040423, #db1939);
+            background-size: 400% 400%;
+            animation: backgroundAnimation 20s ease infinite;
+        }
+        .home {
+            display: inline-block;
+            background-color: #007acc; /* Vibrant blue */
+            color: #ffffff; /* White text */
+            padding: 10px 20px;
+            font-size: 20px;
+            font-weight: bold;
+            font-style: italic;
+            border-radius: 8px;
+            text-decoration: none;
+            border: none;
+            cursor: pointer;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+            transition: background-color 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .home:hover {
+
+            background-color: #03446f; /* Darker blue on hover */
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover */
+        }
+
+        .home a{
+            color: #ffffff;
+            text-decoration: none;
         }
     </style>
 </head>
 <body>
+
+    <button class="home"><a href="/index.html">Home</a></button>
     <div class="container">
         <h1>------ Web Development Challenges ------</h1>
-        <br>
         <div class="quiz-container">
             <div class="quiz-card">
-                <img src="html1.png" alt="Image 1">
+                <img src="html1.png" alt="HTML Quiz">
                 <h2>HTML Quiz</h2>
                 <button onclick="startQuiz()">Start</button>
             </div>
             <div class="quiz-card">
-                <img src="css1.png" alt="Image 1">
+                <img src="css1.png" alt="CSS Noob">
                 <h2>CSS Noob</h2>
                 <button onclick="csseasy()">Start</button>
             </div>
             <div class="quiz-card">
-                <img src="css2.png" alt="Image 1">
+                <img src="css2.png" alt="CSS Pro">
                 <h2>CSS Pro</h2>
                 <button onclick="cssmed()">Start</button>
             </div>
             <div class="quiz-card">
-                <img src="css3.png" alt="Image 1">
+                <img src="css3.png" alt="CSS Ultimate">
                 <h2>CSS Ultimate</h2>
                 <button onclick="csshard()">Start</button>
             </div>
             <div class="quiz-card">
-                <img src="js1.png" alt="Image 1">
+                <img src="js1.png" alt="JavaScript Noob">
                 <h2>JavaScript Noob</h2>
                 <button onclick="alert('Quiz not implemented yet')">Start</button>
             </div>
             <div class="quiz-card">
-                <img src="js2.png" alt="Image 1">
+                <img src="js2.png" alt="JavaScript Pro">
                 <h2>JavaScript Pro</h2>
                 <button onclick="alert('Quiz not implemented yet')">Start</button>
             </div>
             <div class="quiz-card">
-                <img src="js3.png" alt="Image 1">
+                <img src="js3.png" alt="JavaScript Ultimate">
                 <h2>JavaScript Ultimate</h2>
                 <button onclick="alert('Quiz not implemented yet')">Start</button>
             </div>
@@ -152,16 +192,16 @@ <h2>JavaScript Ultimate</h2>
 
     <script>
         function startQuiz() {
-            window.location.href = 'challengehtml.html'; // Redirect to the quiz page
+            window.location.href = 'challengehtml.html';
         }
         function csseasy() {
-            window.location.href = 'easycss.html'; // Redirect to the quiz page
+            window.location.href = 'easycss.html';
         }
         function cssmed() {
-            window.location.href = 'medcss.html'; // Redirect to the quiz page
+            window.location.href = 'medcss.html';
         }
         function csshard() {
-            window.location.href = 'hardcss.html'; // Redirect to the quiz page
+            window.location.href = 'hardcss.html';
         }
     </script>
 </body>
diff --git a/challenges/medcss.html b/challenges/medcss.html
index 6918e1a45..d75a098e0 100644
--- a/challenges/medcss.html
+++ b/challenges/medcss.html
@@ -3,12 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <link rel="shortcut icon" href="/faviconicon.png" type="image/x-icon">
+
     <title>CSS MEDIUM Quiz</title>
+    <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
+
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #08114c;
+            background-color: #0a153e;
+            color: #f0f0f0;
             margin: 0;
             padding: 20px;
             display: flex;
@@ -18,21 +23,25 @@
         }
 
         .quiz-container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            background-color: #ffffff;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
             max-width: 600px;
             width: 100%;
         }
 
         h1 {
             text-align: center;
+            color: #333;
+            font-size: 1.8em;
             margin-bottom: 20px;
         }
 
         .question {
             margin-bottom: 15px;
+            font-weight: bold;
+            color: #333;
         }
 
         .options {
@@ -41,33 +50,36 @@
         }
 
         .option {
-            background-color: #e7f3fe;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 5px 0;
+            background-color: #1e1e1e;
+            padding: 12px;
+            border-radius: 6px;
+            margin: 8px 0;
             cursor: pointer;
-            transition: background-color 0.3s;
-            border: 2px solid transparent; /* Default border */
+            transition: background-color 0.3s, transform 0.2s;
+            border: 2px solid transparent;
         }
 
         .option:hover {
-            background-color: #d1e7fd;
+            background-color: #e76705;
+            transform: scale(1.02);
         }
 
-        .selected {
+        .option.selected {
             background-color: #b3e5fc;
-            border: 2px solid #007bff; /* Selected border color */
+            border: 2px solid #007bff;
+            color: #007bff;
         }
 
         button {
             background-color: #007bff;
-            color: white;
+            color: #fff;
             border: none;
-            padding: 10px;
-            border-radius: 5px;
+            padding: 12px;
+            border-radius: 6px;
             cursor: pointer;
-            display: block;
             width: 100%;
+            font-size: 1em;
+            transition: background-color 0.3s;
             margin-top: 10px;
         }
 
@@ -80,17 +92,18 @@
         }
 
         .code-block {
-            background-color: black;
-            color: white;
+            background-color: #1e1e1e;
+            color: #ffffff;
             padding: 10px;
             border-radius: 5px;
-            overflow-x: auto; /* Adds horizontal scroll for long lines */
+            overflow-x: auto;
+            font-family: monospace;
         }
     </style>
 </head>
 <body>
     <div class="quiz-container">
-        <h1>CSS MEDIUM CHALLENGE</h1>
+        <h1>CSS Medium Challenge</h1>
         <div id="question-container"></div>
         <button id="next-button" class="hidden" onclick="nextQuestion()">Next Question</button>
         <button id="submit-button" class="hidden" onclick="submitAnswers()">Submit Answers</button>
@@ -111,7 +124,7 @@ <h1>CSS MEDIUM CHALLENGE</h1>
                     "c) color: red, text-decoration: underline and font-style: italic all works",
                     "d) text-decoration: underline and font-style: italic works"
                 ],
-                answer: 1
+                answer: 2
             },
             {
                 question: "2) Which of the following are the CSS Extension Prefixes for Webkit?",
@@ -124,15 +137,15 @@ <h1>CSS MEDIUM CHALLENGE</h1>
                 answer: 3
             },
             {
-    question: "3) Which of the following CSS property defines the space between cells in a table?",
-    options: [
-        "a) border-spacing",
-        "b) border-style",
-        "c) border",
-        "d) none of the mentioned"
-    ],
-    answer: 0 // Index of the correct answer (0 for 'a', 1 for 'b', etc.)
-},
+                question: "3) Which of the following CSS property defines the space between cells in a table?",
+                options: [
+                    "a) border-spacing",
+                    "b) border-style",
+                    "c) border",
+                    "d) none of the mentioned"
+                ],
+                answer: 0
+            },
             {
                 question: "4) Which of the following is the first CSS specification to become an official W3C Recommendation?",
                 options: [
@@ -212,16 +225,15 @@ <h1>CSS MEDIUM CHALLENGE</h1>
             const questionContainer = document.getElementById('question-container');
             const question = questions[currentQuestionIndex];
             questionContainer.innerHTML = `
-                <div class="question">
-                    <h3>${question.question}</h3>
-                    ${question.code ? `<pre class="code-block"><code>${question.code}</code></pre>` : ''}
-                    <ul class="options">
-                        ${question.options.map((option, i) => `
-                            <li class="option" onclick="selectOption(this, ${i})">${option}</li>
-                        `).join('')}
-                    </ul>
-                </div>
+                <div class="question">${question.question}</div>
+                ${question.code ? `<pre class="code-block"><code>${question.code}</code></pre>` : ''}
+                <ul class="options">
+                    ${question.options.map((option, i) => `
+                        <li class="option" onclick="selectOption(this, ${i})">${option}</li>
+                    `).join('')}
+                </ul>
             `;
+
             document.getElementById('next-button').classList.add('hidden');
             document.getElementById('submit-button').classList.add('hidden');
         }
@@ -246,16 +258,16 @@ <h3>${question.question}</h3>
             } else {
                 document.getElementById('next-button').classList.add('hidden');
                 document.getElementById('submit-button').classList.remove('hidden');
-                document.getElementById('question-container').innerHTML = `<h3>Challenge Complete! Your score is ${score} out of ${questions.length}</h3>`;
+                document.getElementById('question-container').innerHTML = `<h3>Quiz Complete! Your score is ${score} out of ${questions.length}</h3>`;
             }
         }
 
         function submitAnswers() {
             alert(`You scored ${score} out of ${questions.length}`);
-            window.location.href = 'index.html'; // Redirect to main page after submitting
+            window.location.href = 'index.html';
         }
 
-        window.onload = showQuestion; // Show the first question when the page loads
+        window.onload = showQuestion;
     </script>
 </body>
 </html>
diff --git a/chess game/img/chesspieces/wikipedia/bB.png b/chess game/img/chesspieces/wikipedia/bB.png
new file mode 100644
index 000000000..be3007dd0
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/bB.png differ
diff --git a/chess game/img/chesspieces/wikipedia/bK.png b/chess game/img/chesspieces/wikipedia/bK.png
new file mode 100644
index 000000000..de9880ce6
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/bK.png differ
diff --git a/chess game/img/chesspieces/wikipedia/bN.png b/chess game/img/chesspieces/wikipedia/bN.png
new file mode 100644
index 000000000..e31a6d022
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/bN.png differ
diff --git a/chess game/img/chesspieces/wikipedia/bP.png b/chess game/img/chesspieces/wikipedia/bP.png
new file mode 100644
index 000000000..afa0c9d44
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/bP.png differ
diff --git a/chess game/img/chesspieces/wikipedia/bQ.png b/chess game/img/chesspieces/wikipedia/bQ.png
new file mode 100644
index 000000000..4649bb8bd
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/bQ.png differ
diff --git a/chess game/img/chesspieces/wikipedia/bR.png b/chess game/img/chesspieces/wikipedia/bR.png
new file mode 100644
index 000000000..c7eb127ac
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/bR.png differ
diff --git a/chess game/img/chesspieces/wikipedia/wB.png b/chess game/img/chesspieces/wikipedia/wB.png
new file mode 100644
index 000000000..70e0e1408
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/wB.png differ
diff --git a/chess game/img/chesspieces/wikipedia/wK.png b/chess game/img/chesspieces/wikipedia/wK.png
new file mode 100644
index 000000000..bbf566495
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/wK.png differ
diff --git a/chess game/img/chesspieces/wikipedia/wN.png b/chess game/img/chesspieces/wikipedia/wN.png
new file mode 100644
index 000000000..237250c16
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/wN.png differ
diff --git a/chess game/img/chesspieces/wikipedia/wP.png b/chess game/img/chesspieces/wikipedia/wP.png
new file mode 100644
index 000000000..5f9315c75
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/wP.png differ
diff --git a/chess game/img/chesspieces/wikipedia/wQ.png b/chess game/img/chesspieces/wikipedia/wQ.png
new file mode 100644
index 000000000..c3dfc15e5
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/wQ.png differ
diff --git a/chess game/img/chesspieces/wikipedia/wR.png b/chess game/img/chesspieces/wikipedia/wR.png
new file mode 100644
index 000000000..cc6976030
Binary files /dev/null and b/chess game/img/chesspieces/wikipedia/wR.png differ
diff --git a/chess game/index.html b/chess game/index.html
new file mode 100644
index 000000000..c9a709ef3
--- /dev/null
+++ b/chess game/index.html	
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style2.css">
+    <title>Chess Game</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <h1>Chess Game</h1>
+        <div class="board" id="board"></div>
+        <div class="buttons">
+            <button class="play-again">Play Again</button>
+            <button class="set-pos">Set Position</button>
+            <button class="flip-board">Flip Board</button>
+        </div>
+        <div id="move-history" class="move-history"></div>
+    </div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="script2.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/chess game/script.js b/chess game/script.js
new file mode 100644
index 000000000..63e1a1962
--- /dev/null
+++ b/chess game/script.js	
@@ -0,0 +1,106 @@
+// Wait for the DOM to be fully loaded before executing code
+document.addEventListener('DOMContentLoaded', () => {
+    let board = null; // Initialize the chessboard
+    const game = new Chess(); // Create new Chess.js game instance
+    const moveHistory = document.getElementById('move-history'); // Get move history container
+    let moveCount = 1; // Initialize the move count
+    let userColor = 'w'; // Initialize the user's color as white
+
+    // Function to make a random move for the computer
+    const makeRandomMove = () => {
+        const possibleMoves = game.moves();
+
+        if (game.game_over()) {
+            alert("Checkmate!");
+        } else {
+            const randomIdx = Math.floor(Math.random() * possibleMoves.length);
+            const move = possibleMoves[randomIdx];
+            game.move(move);
+            board.position(game.fen());
+            recordMove(move, moveCount); // Record and display the move with move count
+            moveCount++; // Increament the move count
+        }
+    };
+
+    // Function to record and display a move in the move history
+    const recordMove = (move, count) => {
+        const formattedMove = count % 2 === 1 ? `${Math.ceil(count / 2)}. ${move}` : `${move} -`;
+        moveHistory.textContent += formattedMove + ' ';
+        moveHistory.scrollTop = moveHistory.scrollHeight; // Auto-scroll to the latest move
+    };
+
+    // Function to handle the start of a drag position
+    const onDragStart = (source, piece) => {
+        // Allow the user to drag only their own pieces based on color
+        return !game.game_over() && piece.search(userColor) === 0;
+    };
+
+    // Function to handle a piece drop on the board
+    const onDrop = (source, target) => {
+        const move = game.move({
+            from: source,
+            to: target,
+            promotion: 'q',
+        });
+
+        if (move === null) return 'snapback';
+
+        window.setTimeout(makeRandomMove, 250);
+        recordMove(move.san, moveCount); // Record and display the move with move count
+        moveCount++;
+    };
+
+    // Function to handle the end of a piece snap animation
+    const onSnapEnd = () => {
+        board.position(game.fen());
+    };
+
+    // Configuration options for the chessboard
+    const boardConfig = {
+        showNotation: true,
+        draggable: true,
+        position: 'start',
+        onDragStart,
+        onDrop,
+        onSnapEnd,
+        moveSpeed: 'fast',
+        snapBackSpeed: 500,
+        snapSpeed: 100,
+    };
+
+    // Initialize the chessboard
+    board = Chessboard('board', boardConfig);
+
+    // Event listener for the "Play Again" button
+    document.querySelector('.play-again').addEventListener('click', () => {
+        game.reset();
+        board.start();
+        moveHistory.textContent = '';
+        moveCount = 1;
+        userColor = 'w';
+    });
+
+    // Event listener for the "Set Position" button
+    document.querySelector('.set-pos').addEventListener('click', () => {
+        const fen = prompt("Enter the FEN notation for the desired position!");
+        if (fen !== null) {
+            if (game.load(fen)) {
+                board.position(fen);
+                moveHistory.textContent = '';
+                moveCount = 1;
+                userColor = 'w';
+            } else {
+                alert("Invalid FEN notation. Please try again.");
+            }
+        }
+    });
+
+    // Event listener for the "Flip Board" button
+    document.querySelector('.flip-board').addEventListener('click', () => {
+        board.flip();
+        makeRandomMove();
+        // Toggle user's color after flipping the board
+        userColor = userColor === 'w' ? 'b' : 'w';
+    });
+
+});
\ No newline at end of file
diff --git a/chess game/script2.js b/chess game/script2.js
new file mode 100644
index 000000000..017c2a307
--- /dev/null
+++ b/chess game/script2.js	
@@ -0,0 +1,2 @@
+/*! chessboard.js v1.0.0 | (c) 2019 Chris Oakman | MIT License chessboardjs.com/license */
+!function () { "use strict"; var z = window.jQuery, F = "abcdefgh".split(""), r = 20, A = "…", W = "1.8.3", e = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR", G = pe(e), n = 200, t = 200, o = 60, a = 30, i = 100, H = {}; function V(e, r, n) { function t() { o = 0, a && (a = !1, s()) } var o = 0, a = !1, i = [], s = function () { o = window.setTimeout(t, r), e.apply(n, i) }; return function (e) { i = arguments, o ? a = !0 : s() } } function Z() { return "xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx".replace(/x/g, function (e) { return (16 * Math.random() | 0).toString(16) }) } function _(e) { return JSON.parse(JSON.stringify(e)) } function s(e) { var r = e.split("."); return { major: parseInt(r[0], 10), minor: parseInt(r[1], 10), patch: parseInt(r[2], 10) } } function ee(e, r) { for (var n in r) if (r.hasOwnProperty(n)) for (var t = "{" + n + "}", o = r[n]; -1 !== e.indexOf(t);)e = e.replace(t, o); return e } function re(e) { return "string" == typeof e } function ne(e) { return "function" == typeof e } function p(e) { return "number" == typeof e && isFinite(e) && Math.floor(e) === e } function c(e) { return "fast" === e || "slow" === e || !!p(e) && 0 <= e } function te(e) { if (!re(e)) return !1; var r = e.split("-"); return 2 === r.length && (oe(r[0]) && oe(r[1])) } function oe(e) { return re(e) && -1 !== e.search(/^[a-h][1-8]$/) } function u(e) { return re(e) && -1 !== e.search(/^[bw][KQRNBP]$/) } function ae(e) { if (!re(e)) return !1; var r = (e = function (e) { return e.replace(/8/g, "11111111").replace(/7/g, "1111111").replace(/6/g, "111111").replace(/5/g, "11111").replace(/4/g, "1111").replace(/3/g, "111").replace(/2/g, "11") }(e = e.replace(/ .+$/, ""))).split("/"); if (8 !== r.length) return !1; for (var n = 0; n < 8; n++)if (8 !== r[n].length || -1 !== r[n].search(/[^kqrnbpKQRNBP1]/)) return !1; return !0 } function ie(e) { if (!z.isPlainObject(e)) return !1; for (var r in e) if (e.hasOwnProperty(r) && (!oe(r) || !u(e[r]))) return !1; return !0 } function se() { return typeof window.$ && z.fn && z.fn.jquery && function (e, r) { e = s(e), r = s(r); var n = 1e5 * e.major * 1e5 + 1e5 * e.minor + e.patch; return 1e5 * r.major * 1e5 + 1e5 * r.minor + r.patch <= n }(z.fn.jquery, W) } function pe(e) { if (!ae(e)) return !1; for (var r, n = (e = e.replace(/ .+$/, "")).split("/"), t = {}, o = 8, a = 0; a < 8; a++) { for (var i = n[a].split(""), s = 0, p = 0; p < i.length; p++) { if (-1 !== i[p].search(/[1-8]/)) s += parseInt(i[p], 10); else t[F[s] + o] = (r = i[p]).toLowerCase() === r ? "b" + r.toUpperCase() : "w" + r.toUpperCase(), s += 1 } o -= 1 } return t } function ce(e) { if (!ie(e)) return !1; for (var r, n, t = "", o = 8, a = 0; a < 8; a++) { for (var i = 0; i < 8; i++) { var s = F[i] + o; e.hasOwnProperty(s) ? t += (r = e[s], n = void 0, "w" === (n = r.split(""))[0] ? n[1].toUpperCase() : n[1].toLowerCase()) : t += "1" } 7 !== a && (t += "/"), o -= 1 } return t = function (e) { return e.replace(/11111111/g, "8").replace(/1111111/g, "7").replace(/111111/g, "6").replace(/11111/g, "5").replace(/1111/g, "4").replace(/111/g, "3").replace(/11/g, "2") }(t) } function ue(e, r, n) { for (var t = function (e) { for (var r = [], n = 0; n < 8; n++)for (var t = 0; t < 8; t++) { var o = F[n] + (t + 1); e !== o && r.push({ square: o, distance: (a = e, i = o, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, s = a.split(""), p = F.indexOf(s[0]) + 1, c = parseInt(s[1], 10), u = i.split(""), f = F.indexOf(u[0]) + 1, d = parseInt(u[1], 10), h = Math.abs(p - f), l = Math.abs(c - d), l <= h ? h : l) }) } var a, i, s, p, c, u, f, d, h, l; r.sort(function (e, r) { return e.distance - r.distance }); var v = []; for (n = 0; n < r.length; n++)v.push(r[n].square); return v }(n), o = 0; o < t.length; o++) { var a = t[o]; if (e.hasOwnProperty(a) && e[a] === r) return a } return !1 } function fe(e) { return "black" !== e.orientation && (e.orientation = "white"), !1 !== e.showNotation && (e.showNotation = !0), !0 !== e.draggable && (e.draggable = !1), "trash" !== e.dropOffBoard && (e.dropOffBoard = "snapback"), !0 !== e.sparePieces && (e.sparePieces = !1), e.sparePieces && (e.draggable = !0), e.hasOwnProperty("pieceTheme") && (re(e.pieceTheme) || ne(e.pieceTheme)) || (e.pieceTheme = "img/chesspieces/wikipedia/{piece}.png"), c(e.appearSpeed) || (e.appearSpeed = n), c(e.moveSpeed) || (e.moveSpeed = t), c(e.snapbackSpeed) || (e.snapbackSpeed = o), c(e.snapSpeed) || (e.snapSpeed = a), c(e.trashSpeed) || (e.trashSpeed = i), function (e) { return p(e) && 1 <= e }(e.dragThrottleRate) || (e.dragThrottleRate = r), e } H.alpha = "alpha-d2270", H.black = "black-3c85d", H.board = "board-b72b1", H.chessboard = "chessboard-63f37", H.clearfix = "clearfix-7da63", H.highlight1 = "highlight1-32417", H.highlight2 = "highlight2-9c5d2", H.notation = "notation-322f9", H.numeric = "numeric-fc462", H.piece = "piece-417db", H.row = "row-5277c", H.sparePieces = "spare-pieces-7492f", H.sparePiecesBottom = "spare-pieces-bottom-ae20f", H.sparePiecesTop = "spare-pieces-top-4028b", H.square = "square-55d63", H.white = "white-1e1d7", window.Chessboard = function (e, f) { if (!function () { if (se()) return !0; var e = "Chessboard Error 1005: Unable to find a valid version of jQuery. Please include jQuery " + W + " or higher on the page\n\nExiting" + A; return window.alert(e), !1 }()) return null; var n = function (e) { if ("" === e) { var r = "Chessboard Error 1001: The first argument to Chessboard() cannot be an empty string.\n\nExiting" + A; return window.alert(r), !1 } re(e) && "#" !== e.charAt(0) && (e = "#" + e); var n = z(e); if (1 === n.length) return n; var t = "Chessboard Error 1003: The first argument to Chessboard() must be the ID of a DOM node, an ID query selector, or a single DOM node.\n\nExiting" + A; return window.alert(t), !1 }(e); if (!n) return null; f = fe(f = function (e) { return "start" === e ? e = { position: _(G) } : ae(e) ? e = { position: pe(e) } : ie(e) && (e = { position: _(e) }), z.isPlainObject(e) || (e = {}), e }(f)); var r = null, a = null, t = null, o = null, i = {}, s = 2, p = "white", c = {}, u = null, d = null, h = null, l = !1, v = {}, g = {}, w = {}, b = 16; function m(e, r, n) { if (!0 === f.hasOwnProperty("showErrors") && !1 !== f.showErrors) { var t = "Chessboard Error " + e + ": " + r; return "console" === f.showErrors && "object" == typeof console && "function" == typeof console.log ? (console.log(t), void (2 <= arguments.length && console.log(n))) : "alert" === f.showErrors ? (n && (t += "\n\n" + JSON.stringify(n)), void window.alert(t)) : void (ne(f.showErrors) && f.showErrors(e, r, n)) } } function P(e) { return ne(f.pieceTheme) ? f.pieceTheme(e) : re(f.pieceTheme) ? ee(f.pieceTheme, { piece: e }) : (m(8272, "Unable to build image source for config.pieceTheme."), "") } function y(e, r, n) { var t = '<img src="' + P(e) + '" '; return re(n) && "" !== n && (t += 'id="' + n + '" '), t += 'alt="" class="{piece}" data-piece="' + e + '" style="width:' + b + "px;height:" + b + "px;", r && (t += "display:none;"), ee(t += '" />', H) } function x(e) { var r = ["wK", "wQ", "wR", "wB", "wN", "wP"]; "black" === e && (r = ["bK", "bQ", "bR", "bB", "bN", "bP"]); for (var n = "", t = 0; t < r.length; t++)n += y(r[t], !1, v[r[t]]); return n } function O(e, r, n, t) { var o = z("#" + g[e]), a = o.offset(), i = z("#" + g[r]), s = i.offset(), p = Z(); z("body").append(y(n, !0, p)); var c = z("#" + p); c.css({ display: "", position: "absolute", top: a.top, left: a.left }), o.find("." + H.piece).remove(); var u = { duration: f.moveSpeed, complete: function () { i.append(y(n)), c.remove(), ne(t) && t() } }; c.animate(s, u) } function S(e, r, n) { var t = z("#" + v[e]).offset(), o = z("#" + g[r]), a = o.offset(), i = Z(); z("body").append(y(e, !0, i)); var s = z("#" + i); s.css({ display: "", position: "absolute", left: t.left, top: t.top }); var p = { duration: f.moveSpeed, complete: function () { o.find("." + H.piece).remove(), o.append(y(e)), s.remove(), ne(n) && n() } }; s.animate(a, p) } function T() { for (var e in r.find("." + H.piece).remove(), c) c.hasOwnProperty(e) && z("#" + g[e]).append(y(c[e])) } function q() { r.html(function (e) { "black" !== e && (e = "white"); var r = "", n = _(F), t = 8; "black" === e && (n.reverse(), t = 1); for (var o = "white", a = 0; a < 8; a++) { r += '<div class="{row}">'; for (var i = 0; i < 8; i++) { var s = n[i] + t; r += '<div class="{square} ' + H[o] + " square-" + s + '" style="width:' + b + "px;height:" + b + 'px;" id="' + g[s] + '" data-square="' + s + '">', f.showNotation && (("white" === e && 1 === t || "black" === e && 8 === t) && (r += '<div class="{notation} {alpha}">' + n[i] + "</div>"), 0 === i && (r += '<div class="{notation} {numeric}">' + t + "</div>")), r += "</div>", o = "white" === o ? "black" : "white" } r += '<div class="{clearfix}"></div></div>', o = "white" === o ? "black" : "white", "white" === e ? t -= 1 : t += 1 } return ee(r, H) }(p, f.showNotation)), T(), f.sparePieces && ("white" === p ? (t.html(x("black")), o.html(x("white"))) : (t.html(x("white")), o.html(x("black")))) } function k(e) { var r = _(c), n = _(e); ce(r) !== ce(n) && (ne(f.onChange) && f.onChange(r, n), c = e) } function E(e, r) { for (var n in w) if (w.hasOwnProperty(n)) { var t = w[n]; if (e >= t.left && e < t.left + b && r >= t.top && r < t.top + b) return n } return "offboard" } function C() { r.find("." + H.square).removeClass(H.highlight1 + " " + H.highlight2) } function B() { C(); var e = _(c); delete e[h], k(e), T(), a.fadeOut(f.trashSpeed), l = !1 } function I(e, r, n, t) { ne(f.onDragStart) && !1 === f.onDragStart(e, r, _(c), p) || (l = !0, u = r, d = "spare" === (h = e) ? "offboard" : e, function () { for (var e in w = {}, g) g.hasOwnProperty(e) && (w[e] = z("#" + g[e]).offset()) }(), a.attr("src", P(r)).css({ display: "", position: "absolute", left: n - b / 2, top: t - b / 2 }), "spare" !== e && z("#" + g[e]).addClass(H.highlight1).find("." + H.piece).css("display", "none")) } function M(e, r) { a.css({ left: e - b / 2, top: r - b / 2 }); var n = E(e, r); n !== d && (oe(d) && z("#" + g[d]).removeClass(H.highlight2), oe(n) && z("#" + g[n]).addClass(H.highlight2), ne(f.onDragMove) && f.onDragMove(n, d, h, u, _(c), p), d = n) } function N(e) { var r = "drop"; if ("offboard" === e && "snapback" === f.dropOffBoard && (r = "snapback"), "offboard" === e && "trash" === f.dropOffBoard && (r = "trash"), ne(f.onDrop)) { var n = _(c); "spare" === h && oe(e) && (n[e] = u), oe(h) && "offboard" === e && delete n[h], oe(h) && oe(e) && (delete n[h], n[e] = u); var t = _(c), o = f.onDrop(h, e, u, n, t, p); "snapback" !== o && "trash" !== o || (r = o) } "snapback" === r ? function () { if ("spare" !== h) { C(); var e = z("#" + g[h]).offset(), r = { duration: f.snapbackSpeed, complete: function () { T(), a.css("display", "none"), ne(f.onSnapbackEnd) && f.onSnapbackEnd(u, h, _(c), p) } }; a.animate(e, r), l = !1 } else B() }() : "trash" === r ? B() : "drop" === r && function (e) { C(); var r = _(c); delete r[h], r[e] = u, k(r); var n = z("#" + g[e]).offset(), t = { duration: f.snapSpeed, complete: function () { T(), a.css("display", "none"), ne(f.onSnapEnd) && f.onSnapEnd(h, e, u) } }; a.animate(n, t), l = !1 }(e) } function j(e) { e.preventDefault() } function D(e) { if (f.draggable) { var r = z(this).attr("data-square"); oe(r) && c.hasOwnProperty(r) && I(r, c[r], e.pageX, e.pageY) } } function R(e) { if (f.draggable) { var r = z(this).attr("data-square"); oe(r) && c.hasOwnProperty(r) && (e = e.originalEvent, I(r, c[r], e.changedTouches[0].pageX, e.changedTouches[0].pageY)) } } function Q(e) { f.sparePieces && I("spare", z(this).attr("data-piece"), e.pageX, e.pageY) } function X(e) { f.sparePieces && I("spare", z(this).attr("data-piece"), (e = e.originalEvent).changedTouches[0].pageX, e.changedTouches[0].pageY) } i.clear = function (e) { i.position({}, e) }, i.destroy = function () { n.html(""), a.remove(), n.unbind() }, i.fen = function () { return i.position("fen") }, i.flip = function () { return i.orientation("flip") }, i.move = function () { if (0 !== arguments.length) { for (var e = !0, r = {}, n = 0; n < arguments.length; n++)if (!1 !== arguments[n]) if (te(arguments[n])) { var t = arguments[n].split("-"); r[t[0]] = t[1] } else m(2826, "Invalid move passed to the move method.", arguments[n]); else e = !1; var o = function (e, r) { var n = _(e); for (var t in r) if (r.hasOwnProperty(t) && n.hasOwnProperty(t)) { var o = n[t]; delete n[t], n[r[t]] = o } return n }(c, r); return i.position(o, e), o } }, i.orientation = function (e) { return 0 === arguments.length ? p : "white" === e || "black" === e ? (p = e, q(), p) : "flip" === e ? (p = "white" === p ? "black" : "white", q(), p) : void m(5482, "Invalid value passed to the orientation method.", e) }, i.position = function (e, r) { if (0 === arguments.length) return _(c); if (re(e) && "fen" === e.toLowerCase()) return ce(c); (re(e) && "start" === e.toLowerCase() && (e = _(G)), ae(e) && (e = pe(e)), ie(e)) ? (!1 !== r && (r = !0), r ? (function (e, r, n) { if (0 !== e.length) for (var t = 0, o = 0; o < e.length; o++) { var a = e[o]; "clear" === a.type ? z("#" + g[a.square] + " ." + H.piece).fadeOut(f.trashSpeed, i) : "add" !== a.type || f.sparePieces ? "add" === a.type && f.sparePieces ? S(a.piece, a.square, i) : "move" === a.type && O(a.source, a.destination, a.piece, i) : z("#" + g[a.square]).append(y(a.piece, !0)).find("." + H.piece).fadeIn(f.appearSpeed, i) } function i() { (t += 1) === e.length && (T(), ne(f.onMoveEnd) && f.onMoveEnd(_(r), _(n))) } }(function (e, r) { e = _(e), r = _(r); var n = [], t = {}; for (var o in r) r.hasOwnProperty(o) && e.hasOwnProperty(o) && e[o] === r[o] && (delete e[o], delete r[o]); for (o in r) if (r.hasOwnProperty(o)) { var a = ue(e, r[o], o); a && (n.push({ type: "move", source: a, destination: o, piece: r[o] }), delete e[a], delete r[o], t[o] = !0) } for (o in r) r.hasOwnProperty(o) && (n.push({ type: "add", square: o, piece: r[o] }), delete r[o]); for (o in e) e.hasOwnProperty(o) && (t.hasOwnProperty(o) || (n.push({ type: "clear", square: o, piece: e[o] }), delete e[o])); return n }(c, e), c, e), k(e)) : (k(e), T())) : m(6482, "Invalid value passed to the position method.", e) }, i.resize = function () { b = function () { var e = parseInt(n.width(), 10); if (!e || e <= 0) return 0; for (var r = e - 1; r % 8 != 0 && 0 < r;)r -= 1; return r / 8 }(), r.css("width", 8 * b + "px"), a.css({ height: b, width: b }), f.sparePieces && n.find("." + H.sparePieces).css("paddingLeft", b + s + "px"), q() }, i.start = function (e) { i.position("start", e) }; var Y = V(function (e) { l && M(e.pageX, e.pageY) }, f.dragThrottleRate), K = V(function (e) { l && (e.preventDefault(), M(e.originalEvent.changedTouches[0].pageX, e.originalEvent.changedTouches[0].pageY)) }, f.dragThrottleRate); function L(e) { l && N(E(e.pageX, e.pageY)) } function U(e) { l && N(E(e.originalEvent.changedTouches[0].pageX, e.originalEvent.changedTouches[0].pageY)) } function $(e) { if (!l && ne(f.onMouseoverSquare)) { var r = z(e.currentTarget).attr("data-square"); if (oe(r)) { var n = !1; c.hasOwnProperty(r) && (n = c[r]), f.onMouseoverSquare(r, n, _(c), p) } } } function J(e) { if (!l && ne(f.onMouseoutSquare)) { var r = z(e.currentTarget).attr("data-square"); if (oe(r)) { var n = !1; c.hasOwnProperty(r) && (n = c[r]), f.onMouseoutSquare(r, n, _(c), p) } } } return p = f.orientation, f.hasOwnProperty("position") && ("start" === f.position ? c = _(G) : ae(f.position) ? c = pe(f.position) : ie(f.position) ? c = _(f.position) : m(7263, "Invalid value passed to config.position.", f.position)), function () { !function () { for (var e = 0; e < F.length; e++)for (var r = 1; r <= 8; r++) { var n = F[e] + r; g[n] = n + "-" + Z() } var t = "KQRNBP".split(""); for (e = 0; e < t.length; e++) { var o = "w" + t[e], a = "b" + t[e]; v[o] = o + "-" + Z(), v[a] = a + "-" + Z() } }(), n.html(function (e) { var r = '<div class="{chessboard}">'; return e && (r += '<div class="{sparePieces} {sparePiecesTop}"></div>'), r += '<div class="{board}"></div>', e && (r += '<div class="{sparePieces} {sparePiecesBottom}"></div>'), ee(r += "</div>", H) }(f.sparePieces)), r = n.find("." + H.board), f.sparePieces && (t = n.find("." + H.sparePiecesTop), o = n.find("." + H.sparePiecesBottom)); var e = Z(); z("body").append(y("wP", !0, e)), a = z("#" + e), s = parseInt(r.css("borderLeftWidth"), 10), i.resize() }(), function () { z("body").on("mousedown mousemove", "." + H.piece, j), r.on("mousedown", "." + H.square, D), n.on("mousedown", "." + H.sparePieces + " ." + H.piece, Q), r.on("mouseenter", "." + H.square, $).on("mouseleave", "." + H.square, J); var e = z(window); e.on("mousemove", Y).on("mouseup", L), "ontouchstart" in document.documentElement && (r.on("touchstart", "." + H.square, R), n.on("touchstart", "." + H.sparePieces + " ." + H.piece, X), e.on("touchmove", K).on("touchend", U)) }(), i }, window.ChessBoard = window.Chessboard, window.Chessboard.fenToObj = pe, window.Chessboard.objToFen = ce }();
\ No newline at end of file
diff --git a/chess game/style.css b/chess game/style.css
new file mode 100644
index 000000000..be3f6e6a1
--- /dev/null
+++ b/chess game/style.css	
@@ -0,0 +1,67 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body{
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f2f2f2;
+}
+
+.container{
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+h1{
+    text-align: center;
+    font-weight: 500;
+}
+
+.board{
+    width: 400px;
+    margin: 20px auto;
+}
+
+.buttons{
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+button{
+    color: #fff;
+    background-color: #000;
+    border: none;
+    width: 120px;
+    height: 40px;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+button:hover{
+    background-color: #434343;
+}
+
+.move-history{
+    margin-top: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 5px;
+    height: 100px;
+    width: 400px;
+    overflow-y: scroll;
+    background-color: #f2f2f2;
+}
\ No newline at end of file
diff --git a/chess game/style2.css b/chess game/style2.css
new file mode 100644
index 000000000..c652f4088
--- /dev/null
+++ b/chess game/style2.css	
@@ -0,0 +1,52 @@
+/*! chessboard.js v1.0.0 | (c) 2019 Chris Oakman | MIT License chessboardjs.com/license */
+.clearfix-7da63 {
+    clear: both
+}
+
+.board-b72b1 {
+    border: 2px solid #404040;
+    box-sizing: content-box
+}
+
+.square-55d63 {
+    float: left;
+    position: relative;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.white-1e1d7 {
+    background-color: #f0d9b5;
+    color: #b58863
+}
+
+.black-3c85d {
+    background-color: #b58863;
+    color: #f0d9b5
+}
+
+.highlight1-32417,
+.highlight2-9c5d2 {
+    box-shadow: inset 0 0 3px 3px #ff0
+}
+
+.notation-322f9 {
+    cursor: default;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    position: absolute
+}
+
+.alpha-d2270 {
+    bottom: 1px;
+    right: 3px
+}
+
+.numeric-fc462 {
+    top: 2px;
+    left: 2px
+}
\ No newline at end of file
diff --git a/contact.html b/contact.html
index c82a69142..4cfa3a320 100644
--- a/contact.html
+++ b/contact.html
@@ -1,126 +1,171 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="icon" href="./faviconicon.png" type="image/png">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Contact Us</title>
+
     <title>Contact Us Page</title>
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
     </head>
+
     <style>
+        body {
+            font-family: 'Arial', sans-serif; /* Clean font */
+            background-color: #f0f0f0; /* Light background for contrast */
+            color: #333; /* Default text color */
+            margin: 0; /* Reset margins */
+            padding: 0; /* Reset padding */
+            transition: background-color 0.3s; /* Smooth background transition */
+        }
+
         .card {
-           
-            width: 50%; /* Set a specific width */
-            margin: 10px auto; /* Center horizontally with automatic margins */
-            padding: 20px; /* Add padding */
-            margin-bottom: 70px;
-        
-        
-            border: 1px solid #ccc; /* Optional: Add a border */
-            border-radius: 8px; /* Optional: Add rounded corners */
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
-           
-            background-color: #c2c4c7;
+            width: 50%; /* Original width */
+            margin: 10px auto; /* Center horizontally */
+            padding: 20px; /* Padding inside card */
+            margin-bottom: 70px; /* Space below the card */
+            border: 1px solid #ddd; /* Card border */
+            border-radius: 8px; /* Rounded corners */
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
+            background-color: #ffffff; /* White background */
+            transition: transform 0.3s; /* Card hover effect */
+        }
+
+        .card:hover {
+            transform: translateY(-5px); /* Lift card on hover */
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
         }
+
         .card-header {
-             
-            color: #080808;
-            padding:1px 10px 1px 10px;
-            margin:1px 10px 6px 10px;
-           
-            text-align: center;
-            width: 90%;
-            border-bottom: px solid #ddd;
-            border-radius: 6px;
-          }
-          .card-header h1 {
-             
-           font-size: 40px;
-          }
+            text-align: center; /* Center header text */
+            padding: 10px; /* Header padding */
+            background-color: #fa2b4d; /* Header background color */
+            color: white; /* White text */
+            border-radius: 8px 8px 0 0; /* Round top corners */
+        }
+
+        .card-header h1 {
+            font-size: 32px; /* Original font size */
+            margin: 0; /* Remove default margin */
+        }
+
         .card-body {
-            display: flex;
-            justify-content: space-between; /* Form on the left and image on the right */
-            align-items: flex-start; /* Align content to the top */
-            background-color: #c2c4c7;
+            display: flex; /* Flexbox for layout */
+            justify-content: space-between; /* Space between form and image */
+            align-items: flex-start; /* Align items at the top */
+            padding: 20px; /* Body padding */
         }
-        
+
         .form-section {
-            width: 50%; /* Width for the form section */
+            width: 50%; /* Form section width */
+            padding-right: 10px; /* Space between form and image */
         }
-        
+
         .image-section {
-            width: 50%; /* Width for the image section */
-            display: flex;
+            width: 50%; /* Image section width */
+            display: flex; /* Flexbox for centering */
             justify-content: center; /* Center the image */
-            align-items: center;
+            align-items: center; /* Align image vertically */
         }
-        
+
         .image-section img {
-            max-width: 100%; /* Make sure image does not exceed its container width */
-            height: auto;
+            max-width: 90%; /* Responsive image */
+            height: auto; /* Maintain aspect ratio */
+            border-radius: 5px; /* Slight rounding */
+            transition: transform 0.3s; /* Image hover effect */
         }
-        
+
+        .image-section img:hover {
+            transform: scale(1.05); /* Scale image on hover */
+        }
+
         .form-group {
-            margin-bottom: 20px;
+            margin-bottom: 20px; /* Space between form groups */
         }
-        
+
         label {
-            display: block;
-            margin-bottom: 10px;
+            display: block; /* Block for better layout */
+            margin-bottom: 5px; /* Space below label */
+            font-weight: bold; /* Bold labels for visibility */
+            color: #555; /* Slightly lighter color for labels */
+            transition: color 0.3s, transform 0.3s; /* Transition for label hover effect */
         }
-        
+
+        label:hover {
+            color: #fa2b4d; /* Change label color on hover */
+            transform: scale(1.05); /* Slightly scale label */
+        }
+
         input, textarea {
-            width: 100%; /* Adjust width for better alignment */
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
+            width: 100%; /* Full width inputs */
+            padding: 10px; /* Padding for inputs */
+            border: 1px solid #ccc; /* Border for inputs */
+            border-radius: 5px; /* Rounded corners */
+            font-size: 16px; /* Font size for inputs */
+            transition: border-color 0.3s, box-shadow 0.3s; /* Transition for inputs */
         }
-        
+
+        input:focus, textarea:focus {
+            border-color: #fa2b4d; /* Change border color on focus */
+            box-shadow: 0 0 5px rgba(250, 43, 77, 0.5); /* Shadow on focus */
+            outline: none; /* Remove outline */
+        }
+
         textarea {
-            height: 100px; /* Adjust height for textarea */
+            height: 100px; /* Height for textarea */
+            resize: vertical; /* Allow vertical resizing only */
         }
-        
+
         button[type="submit"] {
-            background-color: fa2b4d;
-            color: #fff;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        
+            background-color: #fa2b4d; /* Button color */
+            color: #fff; /* White text */
+            padding: 10px 20px; /* Padding for button */
+            border: none; /* No border */
+            border-radius: 5px; /* Rounded corners */
+            cursor: pointer; /* Pointer cursor */
+            font-size: 16px; /* Font size for button */
+            transition: background-color 0.3s, transform 0.2s; /* Button transitions */
+        }
+
         button[type="submit"]:hover {
-            background-color: #ff032d;
+            background-color: #ff032d; /* Darker shade on hover */
+            transform: translateY(-2px); /* Lift button on hover */
         }
     </style>
-    <body>
-        <section id="contact us" style="padding-top:30px">
-
-            <div class="card pb-5 pt-1">
-                <div class="card-header">
-                    <h1>Contact Us</h1>
+</head>
+<body>
+    <section id="contact" style="padding-top:30px;">
+        <div class="card">
+            <div class="card-header">
+                <h1>Contact Us</h1>
+            </div>
+            <div class="card-body">
+                <div class="form-section">
+                    <form>
+                        <div class="form-group">
+                            <label for="name">Name</label>
+                            <input type="text" id="name" name="name" placeholder="Your name" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="email">Email</label>
+                            <input type="email" id="email" name="email" placeholder="Your email" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="message">Message</label>
+                            <textarea id="message" name="message" placeholder="Your message" required></textarea>
+                        </div>
+                        <button type="submit">Send</button>
+                    </form>
                 </div>
-                <div class="card-body">
-                    <div class="form-section">
-                        <form>
-                            <div class="form-group">
-                                <label for="name">Name</label>
-                                <input type="text" id="name" name="name" placeholder="Your name" required>
-                            </div>
-                            <div class="form-group">
-                                <label for="email">Email</label>
-                                <input type="email" id="email" name="email" placeholder="Your email" required>
-                            </div>
-                            <div class="form-group">
-                                <label for="message">Message</label>
-                                <textarea id="message" name="message" placeholder="Your message"></textarea>
-                            </div>
-                            <button type="submit">Send</button>
-                        </form>
-                    </div>
-                    <div class="image-section">
-                        <img src="./7725176.jpg" alt="Contact Image"style="max-width: 80%; height: auto; max-height: 500px;">
-                    </div>
+                <div class="image-section">
+                    <img src="./7725176.jpg" alt="Contact Image">
                 </div>
             </div>
-        </section>
-    </body>
-    </html>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/contactus.html b/contactus.html
new file mode 100644
index 000000000..bd0858048
--- /dev/null
+++ b/contactus.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Arial, sans-serif;
+        }
+
+        body {
+            background-color: #f4f7fc;  /* Light background color */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            flex-direction: column;
+        }
+
+        .container {
+            width: 90%;
+            max-width: 1200px;
+        }
+
+        .contact-container {
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+            flex-wrap: wrap; /* Ensure responsive layout */
+            background-color: #ffffff; /* White background for contact container */
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        }
+
+        .form-container,
+        .map-container {
+            width: 48%; /* Adjusting to 48% width to place side by side */
+        }
+
+        h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #333;  /* Dark text color */
+        }
+
+        .input-field {
+            margin-bottom: 15px;
+        }
+
+        .input-field label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+            color: #555;  /* Slightly lighter color for labels */
+        }
+
+        .input-field input,
+        .input-field textarea {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid black;
+            border-radius: 5px;
+            font-size: 16px;
+            transition: border-color 0.3s ease;
+        }
+
+        .input-field input:focus,
+        .input-field textarea:focus {
+            border-color: #6c63ff;  /* Highlighted border on focus */
+            outline: none;
+            box-shadow: 0 0 8px rgba(108, 99, 255, 0.2);
+        }
+
+        textarea {
+            resize: none;
+        }
+
+        .submit-btn {
+            background-color: #6c63ff;  /* Purple background for button */
+            color: #fff;
+            border: none;
+            padding: 12px;
+            width: 100%;
+            border-radius: 5px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .submit-btn:hover {
+            background-color: #5a54d8;  /* Darker purple on hover */
+        }
+
+        .map-container iframe {
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .map-container {
+            background-color: #f9f9f9;  /* Light background for the map */
+            padding: 100px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Contact Section -->
+        <div class="contact-container">
+            <!-- Contact Form -->
+            <div class="form-container">
+                <h2>Contact Us</h2>
+                <form action="#" method="post">
+                    <div class="input-field">
+                        <label for="name">Name</label>
+                        <input type="text" id="name" name="name" placeholder="Enter your name" required>
+                    </div>
+                    <div class="input-field">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" name="email" placeholder="Enter your email" required>
+                    </div>
+                    <div class="input-field">
+                        <label for="phone">Phone</label>
+                        <input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required>
+                    </div>
+                    <div class="input-field">
+                        <label for="message">Message</label>
+                        <textarea id="message" name="message" rows="5" placeholder="Your message..." required></textarea>
+                    </div>
+                    <button type="submit" class="submit-btn">Send Message</button>
+                </form>
+            </div>
+
+            <!-- Map Section inside Contact -->
+            <div class="map-container">
+                <h2>Our Location</h2>
+                <iframe 
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31109.065519603888!2d77.594563!3d12.971599!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1670cc33f761%3A0x73d7e725a3dcebed!2sBangalore%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1699635202177!5m2!1sen!2sin" 
+                    width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/css/style.css b/css/style.css
index 711194d4d..6524d55cf 100644
--- a/css/style.css
+++ b/css/style.css
@@ -19,6 +19,7 @@
 html {
   scrollbar-width: thin;
   scrollbar-color: #08ecbb #3c0751;
+  scroll-behavior: smooth;
 }
 
 * {
@@ -31,6 +32,82 @@ html {
     
     
 }
+/* Navbar Styles */
+.navbar {
+  width: 100%;
+  background-color: #333;
+  color: #fff;
+  padding: 1rem;
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.navbar-logo {
+  display: flex;
+  align-items: flex-start;
+  color: #35a8e2;
+  text-decoration: none;
+  font-size: 1.75rem;
+  font-weight: 800;
+  margin-left: -161px;
+  margin-right: 182px;
+ justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-content: flex-start;
+}
+
+.navbar-menu {
+  list-style: none;
+  display: flex;
+  gap: 1rem;
+}
+
+.navbar-menu li {
+  display: inline;
+}
+
+.navbar-menu a {
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.navbar-menu a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .navbar-menu {
+      display: none;
+  }
+}
+
+.navbar-container {
+  display: flex;
+  align-items: center;
+}
+
+.logo-image {
+  height: 40px;         /* Adjust the size as needed */
+  width: auto;           /* Keep aspect ratio */
+  margin-right: 10px;    /* Add some space between logo and text */
+}
+
+/* .navbar-logo {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  text-decoration: none;
+  font-size: 1.5rem;
+} */
+
 #progress-container {
   position: fixed ;
   top: 0px;
@@ -75,7 +152,7 @@ html [data-theme="dark"] {
     --btn-text: #1e293b;
     --head: #fff;
     --card: #192333;
-    --p: #94A3B8;
+    --p: #2b1714;
 
     --input-bg: #2c3a4b;  /* Input background color */
     --input-border: #3b4a5a;  /* Input border color */
@@ -651,7 +728,7 @@ body {
     flex-grow: 1;
 }
 [data-theme="dark"] .card-description {
-  color: #cdd2d8;
+  color: #1e2c3c;
 }
 .counter-cover-color {
     background: rgba(255, 206, 0, 0.2);
@@ -1017,6 +1094,20 @@ body {
     margin: 20px auto; /* Centering the section */
     text-align: center; /* Center text */
 }
+.container [data-theme="dark"] {
+    --bg: #1e293b;
+    --btn-color: #fecdd3;
+    --btn-text: #1e293b;
+    --head: #fff;
+    --card: #192333;
+    --p: #94A3B8;
+
+    --input-bg: #2c3a4b;  /* Input background color */
+    --input-border: #3b4a5a;  /* Input border color */
+    --input-text: #ffffff;  /* Input text color */
+    --input-placeholder: #fffff0; /* Placeholder text color */
+}
+
 
 #feedback-section h1 {
     font-family: 'Arial', sans-serif; /* Font family */
@@ -1182,7 +1273,7 @@ input:focus {
 }
 
 footer{
-  background-color: #141d2b;
+  background-color: #2b1714;
   height: 20vh;
   width: 100vw;
 }
diff --git a/faq.html b/faq.html
index d34e9885a..0329c950e 100644
--- a/faq.html
+++ b/faq.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
     <title>FAQ Page</title>
     <style>
        body {
@@ -136,6 +136,9 @@ <h3 class="faq-question">Can I play the games in any device?
                 // Toggle the visibility of the corresponding answer
                 const answer = question.nextElementSibling;
                 answer.style.display = (answer.style.display === 'block') ? 'none' : 'block';
+
+                // Toggle active class for rotation of the arrow
+                question.classList.toggle('active');
             });
         });
     </script>   
diff --git a/feedback.html b/feedback.html
index b7282d70f..c08de3cf3 100644
--- a/feedback.html
+++ b/feedback.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Feedback Form</title>
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
     <link rel="stylesheet" href="style1.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
diff --git a/footer.css b/footer.css
index eb05a6250..5572cf32f 100644
--- a/footer.css
+++ b/footer.css
@@ -1,236 +1,322 @@
 /* General styles for the footer */
 footer {
-    background-color: #f7f7f7; /* Light gray background */
-    padding: 30px 15px;
-    text-align: center;
-    color: #000;
-    font-family: Arial, sans-serif;
+  background-color: #f7f7f7; /* Light gray background */
+  /* padding: 30px 15px; */
+  text-align: center;
+  color: #000;
+  font-family: Arial, sans-serif;
+  height: auto;
+  width: 100vw;
+  /* border: 1px solid black; */
+  height: 100vh;
+  margin: 0;
+}
+
+.dark-change{
+  color:white !important;
+  background-color: black;
 }
 
 .footer-content {
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-start;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #eaeaea;
+  display: flex;
+  /* justify-content: space-between; Use space-between for horizontal alignment */
+  justify-content: space-evenly;
+  align-items: flex-start;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eaeaea;
+  /* border:1px solid black; */
+  width:100%;
 }
 
 .footer-section {
-    flex: 1;
-    margin: 0 15px;
+  flex: 1;
+  /* border:1px solid black; */
+  margin: 0 15px;
 }
 
 .footer-section h3 {
-    margin-bottom: 15px;
-    color: #000;
-    font-size: 18px;
-    font-weight: bold;
-    position: relative;
-    transition: text-shadow 0.3s ease, color 0.3s ease;
+  margin-bottom: 15px;
+  color: #000;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 .footer-section p {
-    color: #666;
-    font-size: 14px;
+  color: #666;
+  font-size: 14px;
 }
 
 /* Quick Links styling */
 .footer-section ul {
-    list-style: none;
-    padding: 0;
+  list-style: none;
+  padding: 0;
+  display: flex; /* Change to flex for horizontal layout */
+  flex-wrap: wrap; /* Allow wrapping */
+  justify-content: space-between; /* Space items evenly */
 }
 
 .footer-section ul li {
-    margin-bottom: 8px;
+  margin: 0 10px; /* Horizontal margin between links */
 }
 
 .footer-section ul li a {
-    text-decoration: none;
-    color: #000;
-    font-size: 14px;
-    transition: color 0.3s ease;
+  text-decoration: none;
+  color: #000;
+  font-size: 14px;
+  transition: color 0.3s ease;
 }
 
 /* Hover effect on links */
 .footer-section ul li a:hover {
-    color: #f8c5c5;
+  color: #f8c5c5;
 }
 
+
+
 /* Subscribe form */
 .newsletter form {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  width:100%;
+  
 }
 
 .newsletter input[type="email"] {
-    padding: 10px;
-    width: 70%;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    margin-right: 10px;
+  padding: 10px;
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  /* margin-left: 5px; */
 }
 
-.newsletter button {
-    padding: 10px 20px;
-    background-color: #f8c5c5;
-    color: #000;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
+.newsletter .subscribe {
+   color:black;
+   border:none;
+   border-radius:5px;
+   cursor:pointer;
+   padding:10px 20px;
+   background-color: #f8c5c5;
+   transition: background-color 0.3s ease;
+   /* margin-left:100px; */
 }
 
 /* Hover effect on the subscribe button */
 .newsletter button:hover {
-    background-color: #e39a9a;
-}
-
-/* Footer bottom links */
-.footer-links-bottom {
-    display: flex;
-    justify-content: space-around;
-    padding: 15px 0;
-    background-color: #eaeaea;
-}
-
-.footer-links-bottom a {
-    text-decoration: none;
-    color: #00b894;
-    font-size: 14px;
-    margin: 0 10px;
-    transition: color 0.3s ease;
-}
-
-/* Hover effect on footer bottom links */
-.footer-links-bottom a:hover {
-    color: #0984e3;
+  /* A darker shade for hover effect */
+    background-color:#e59e9e;
 }
 
 /* Footer bottom section */
 .footer-bottom {
-    padding-top: 10px;
-    padding-bottom: 10px; /* Add some bottom padding */
-    background-color: #eaeaea; /* Background color for the footer bottom */
-    text-align: center; /* Center the text */
-    margin-top: 20px; /* Add margin to prevent overlap */
+  padding-top: 10px;
+  padding-bottom: 10px; /* Add some bottom padding */
+  background-color: #eaeaea; /* Background color for the footer bottom */
+  text-align: center; /* Center the text */
+  margin-top: 20px; /* Add margin to prevent overlap */
+  /* border:5px solid red; */
+  color:white;
+  height:10rem;
 }
 
-.footer-bottom .social-icons {
-    margin: 10px 0;
-}
-
-.footer-bottom .social-icons a {
-    margin: 0 8px;
-    color: #000;
-    font-size: 20px;
-    transition: color 0.3s ease;
-}
-
-/* Hover effect on social icons */
-.footer-bottom .social-icons a:hover {
-    color: #f8c5c5;
+.footer-bottom p {
+  margin-top:20px; /* Remove default margin */
+  color: #666; /* Dark gray color for the text */
+  font-size: 14px; /* Font size */
+  font-family: Arial, sans-serif; /* Font family */
 }
 
 /* Mobile view adjustments */
 @media (max-width: 768px) {
-    .footer-content {
-        flex-direction: column;
-        align-items: center;
-    }
-}
-    .newsletter input[type="email"], .newsletter button {
-        width: 100%;
-        margin-bottom: 10px;
-    }
-    /* Hover effect on the subscribe button */
-.newsletter button:hover {
-    background-color: #e39a9a;
-    transform: scale(1.05); /* Slightly enlarge the button */
-}
-/* Footer bottom section */
-.footer-bottom {
-    padding-top: 10px;
-    padding-bottom: 10px; /* Add some bottom padding */
-    background-color: #eaeaea; /* Background color for the footer bottom */
-    text-align: center; /* Center the text */
+  .footer-content {
+      flex-direction: column;
+      align-items: center;
+  }
+  .footer-section ul {
+      flex-direction: column; /* Stack links vertically on smaller screens */
+  }
+  .footer-section ul li {
+      margin: 5px 0; /* Adjust margin for vertical alignment */
+  }
 }
 
-.footer-bottom p {
-    margin: 0; /* Remove default margin */
-    color: #666; /* Dark gray color for the text */
-    font-size: 14px; /* Font size */
-    font-family: Arial, sans-serif; /* Font family */
+.footer-bottom .social-icons{
+  margin-top:20px;
 }
 
-/* Media Query for responsive design */
-@media (max-width: 768px) {
-    .footer-bottom p {
-        font-size: 12px; /* Adjust font size for smaller screens */
-    }
-}
 .footer-bottom .social-icons a {
-    margin: 0 8px;
-    color: #000; /* Default color */
-    font-size: 20px;
-    transition: color 0.3s ease;
+  margin: 0 8px;
+  color: #000; /* Default color */
+  font-size: 20px;
+  transition: color 0.3s ease;
 }
 
 /* Hover effects for each social media icon */
 .footer-bottom .social-icons a:hover {
-    color: #000; /* Default hover color */
+  color: #000; /* Default hover color */
 }
 
 /* Specific hover colors for each icon */
-.footer-bottom .social-icons a:hover .fab.fa-facebook-f {
-    color: #3b5998; /* Facebook Blue */
+.footer-bottom .social-icons .fab.fa-facebook-f:hover {
+  color: #3b5998; /* Facebook Blue */
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-twitter {
-    color: #1da1f2; /* Twitter Blue */
+  color: #1da1f2; /* Twitter Blue */
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-instagram {
-    color: #e1306c; /* Instagram Red */
+  color: #e1306c; /* Instagram Red */
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-linkedin-in {
-    color: #0077b5; /* LinkedIn Blue */
+  color: #0077b5; /* LinkedIn Blue */
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-youtube {
-    color: #ff0000; /* YouTube Red */
+  color: #ff0000; /* YouTube Red */
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-pinterest {
-    color: #e60023; /* Pinterest Red */
+  color: #e60023; /* Pinterest Red */
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-snapchat-ghost {
-     color: #fffc00;; /* Snapchat Yellow */
+   color: #fffc00;; /* Snapchat Yellow */
+   
 }
+
 .gridbox {
-    list-style: none; /* Remove bullet points */
-    padding: 0; /* Remove default padding */
-    display: grid; /* Use grid for layout */
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive columns */
-    gap: 15px; /* Space between items */
+  list-style: none; /* Remove bullet points */
+  padding: 0; /* Remove default padding */
+  display: grid; /* Use grid for layout */
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive columns */
+  gap: 15px; /* Space between items */
 }
 
 .gridbox li {
-    text-align: center; /* Center text */
+  text-align: center; /* Center text */
 }
 
 .gridbox a {
-    text-decoration: none; /* Remove underline */
-    color: #000; /* Default text color */
-    font-size: 14px; /* Adjust font size */
-    transition: color 0.3s ease, text-decoration 0.3s ease; /* Transition effects */
+  text-decoration: none; /* Remove underline */
+  color: #000; /* Default text color */
+  font-size: 14px; /* Adjust font size */
+  transition: color 0.3s ease, text-decoration 0.3s ease; /* Transition effects */
 }
 
 /* Hover effect for links */
 .gridbox a:hover {
-    color: #f8c5c5; /* Change color on hover */
-    text-decoration: underline; /* Add underline on hover */
-}
\ No newline at end of file
+  color: #f8c5c5; /* Change color on hover */
+  text-decoration: underline; /* Add underline on hover */
+}
+
+
+
+
+.social-media a {
+  border:1px solid black;
+  color: black;
+  margin: 0 10px; /* Adjusts horizontal spacing between icons */
+}
+
+.social-media {
+  display: flex; /* Aligns icons in a row */
+  justify-content: center; /* Centers the icons */
+}
+
+.social-media a {
+  margin: 0 10px; /* Adjusts horizontal spacing between icons */
+  color: white; /* Change color as needed */
+  text-decoration: none; /* Removes underline from links */
+}
+
+.social-media a:hover {
+  color: #007bff; /* Change color on hover */
+}
+
+.share-section {
+  display: flex; /* Align buttons in a row */
+  justify-content: center; /* Center the buttons */
+  margin-top: 20px; /* Space above the buttons */
+}
+
+button {
+  background-color: #007bff; /* Blue background for buttons */
+  color: white; /* Text color */
+  border: none; /* Removes border */
+  border-radius: 5px; /* Rounds corners */
+  padding: 10px 20px; /* Padding for buttons */
+  margin: 0 10px; /* Space between buttons */
+  cursor: pointer; /* Changes cursor to pointer on hover */
+  transition: background-color 0.3s; /* Smooth transition for hover effect */
+}
+
+button:hover {
+  background-color: #0056b3; /* Darker blue on hover */
+}
+
+
+.quick-links ul{
+  display:flex;
+  flex-direction: column;
+  max-width:25rem;
+} 
+
+.quick-links ul li{
+  margin-bottom:10px;
+}
+
+.footer-main-bottom{
+  
+}
+
+
+/* =========================================FOOTER DARK THEME=============================================*/
+
+/* Footer content and footer bottom for dark theme */
+[data-theme="dark"] .footer-content,
+[data-theme="dark"] .footer-bottom {
+    background-color: #121212; 
+    color: white; 
+    /* border-top: 1px solid #333;  */
+}
+
+[data-theme="dark"] .footer-content{
+    border-top:1px solid #333;
+}
+
+/*Footer content heading color */
+[data-theme="dark"] .footer-content h3,
+[data-theme="dark"] .footer-section h3 {
+    background-color: #121212; 
+    color: white; 
+    /* border-top: 1px solid #333;  */
+}
+
+[data-theme="dark"] .footer-section img{
+    filter: invert(100%);
+}
+
+/* Dark theme specific link colors */
+[data-theme="dark"] .footer-section ul li a,
+[data-theme="dark"] .footer-links-bottom a,
+[data-theme="dark"] .footer-bottom p {
+    color: #aaa; 
+}
+
+[data-theme="dark"] .footer-section ul li a:hover,
+[data-theme="dark"] .footer-links-bottom a:hover {
+    color: #f8c5c5; 
+}
+
+/* Dark mode styling for social icons */
+[data-theme="dark"] .social-icons a {
+    color: #aaa; 
+}
+
+[data-theme="dark"] .social-icons a:hover {
+    color: #f8c5c5;
+}
diff --git a/fortune-teller.html b/fortune-teller.html
new file mode 100644
index 000000000..11eb2b598
--- /dev/null
+++ b/fortune-teller.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Digital Fortune Teller</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Arial, sans-serif;
+        }
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: #121212;
+            color: #ffffff;
+        }
+        .fortune-teller-container {
+            width: 90%;
+            max-width: 500px;
+            background: #282828;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+            text-align: center;
+        }
+        h2 {
+            color: #ffd700;
+            margin-bottom: 15px;
+        }
+        .input-group {
+            margin-bottom: 15px;
+        }
+        .input-group input {
+            width: 100%;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+            color: #000;
+            outline: none;
+        }
+        .generate-btn {
+            padding: 12px 20px;
+            background: #ffd700;
+            color: #121212;
+            border: none;
+            border-radius: 5px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: background 0.3s ease;
+        }
+        .generate-btn:hover {
+            background: #ffae42;
+        }
+        .fortune-display {
+            margin-top: 20px;
+            padding: 15px;
+            background: #333333;
+            border-radius: 5px;
+            color: #ffffff;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="fortune-teller-container">
+        <h2>Digital Fortune Teller</h2>
+        <div class="input-group">
+            <input type="text" id="question" placeholder="Ask your question...">
+        </div>
+        <button class="generate-btn" onclick="tellFortune()">Reveal My Fortune</button>
+        
+        <div class="fortune-display" id="fortuneDisplay">
+            <!-- Fortune will appear here -->
+        </div>
+    </div>
+
+    <script>
+        function tellFortune() {
+            const fortunes = [
+                "Good things are coming your way!",
+                "Be prepared for a pleasant surprise.",
+                "Challenges may come, but you will overcome them.",
+                "A fresh start will bring you happiness.",
+                "You will find joy in the simplest of things.",
+                "Success is just around the corner.",
+                "Take a leap of faith and good fortune will follow.",
+                "An old friend will bring you new opportunities.",
+                "Expect a journey full of growth and learning.",
+                "Trust your intuition, it will guide you well."
+            ];
+            
+            const question = document.getElementById('question').value;
+            const fortuneDisplay = document.getElementById('fortuneDisplay');
+
+            if (question.trim()) {
+                const randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
+                fortuneDisplay.innerHTML = `<p>${randomFortune}</p>`;
+            } else {
+                fortuneDisplay.innerHTML = "<p>Please ask a question to reveal your fortune!</p>";
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/garden-planner.html b/garden-planner.html
new file mode 100644
index 000000000..405fddd02
--- /dev/null
+++ b/garden-planner.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Virtual Gardening Planner</title>
+  <style>
+    /* Basic styling for the layout */
+    body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-family: Arial, sans-serif;
+    }
+
+    h1 {
+      color: #2d6a4f;
+    }
+
+    .planner-container {
+      display: flex;
+      flex-direction: row;
+      gap: 20px;
+      margin-top: 20px;
+    }
+
+    /* Sidebar with garden items */
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+
+    .sidebar-item {
+      padding: 10px;
+      background-color: #b7e4c7;
+      text-align: center;
+      border-radius: 5px;
+      cursor: grab;
+      user-select: none;
+    }
+
+    /* Garden grid */
+    .garden-grid {
+      display: grid;
+      grid-template-columns: repeat(8, 60px);
+      grid-template-rows: repeat(8, 60px);
+      gap: 5px;
+      background-color: #d8f3dc;
+      padding: 10px;
+      border-radius: 10px;
+    }
+
+    .garden-cell {
+      width: 60px;
+      height: 60px;
+      border: 1px solid #95d5b2;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f0f4ef;
+    }
+
+    /* Dragging styles */
+    .dragging {
+      opacity: 0.5;
+    }
+  </style>
+</head>
+<body>
+
+<h1>Virtual Gardening Planner</h1>
+<div class="planner-container">
+  <!-- Sidebar for garden elements -->
+  <div class="sidebar">
+    <div class="sidebar-item" draggable="true" id="plant">🌱 Plant</div>
+    <div class="sidebar-item" draggable="true" id="flower">🌸 Flower</div>
+    <div class="sidebar-item" draggable="true" id="tree">🌳 Tree</div>
+    <div class="sidebar-item" draggable="true" id="path">🪴 Path</div>
+  </div>
+
+  <!-- Garden grid where elements are placed -->
+  <div class="garden-grid" id="gardenGrid">
+    <!-- 8x8 grid of empty cells -->
+    <div class="garden-cell" data-index="0"></div>
+    <div class="garden-cell" data-index="1"></div>
+    <div class="garden-cell" data-index="2"></div>
+    <div class="garden-cell" data-index="3"></div>
+    <div class="garden-cell" data-index="4"></div>
+    <div class="garden-cell" data-index="5"></div>
+    <div class="garden-cell" data-index="6"></div>
+    <div class="garden-cell" data-index="7"></div>
+    <!-- Repeat cells for a full 8x8 grid -->
+    <!-- Generate cells dynamically for simplicity -->
+    <script>
+      const gardenGrid = document.getElementById('gardenGrid');
+      for (let i = 8; i < 64; i++) {
+        const cell = document.createElement('div');
+        cell.classList.add('garden-cell');
+        cell.dataset.index = i;
+        gardenGrid.appendChild(cell);
+      }
+    </script>
+  </div>
+</div>
+
+<script>
+  // Make sidebar items draggable
+  const sidebarItems = document.querySelectorAll('.sidebar-item');
+
+  sidebarItems.forEach(item => {
+    item.addEventListener('dragstart', (event) => {
+      event.dataTransfer.setData('text/plain', item.id);
+      item.classList.add('dragging');
+    });
+
+    item.addEventListener('dragend', () => {
+      item.classList.remove('dragging');
+    });
+  });
+
+  // Garden grid setup for dragging elements
+  const gardenCells = document.querySelectorAll('.garden-cell');
+
+  gardenCells.forEach(cell => {
+    // Prevent default to allow dropping
+    cell.addEventListener('dragover', (event) => {
+      event.preventDefault();
+    });
+
+    // Handle drop event for each cell
+    cell.addEventListener('drop', (event) => {
+      const itemId = event.dataTransfer.getData('text');
+      const itemElement = document.getElementById(itemId);
+
+      // Clone the dragged item and add it to the cell
+      const newItem = itemElement.cloneNode(true);
+      newItem.setAttribute('draggable', 'false'); // Remove draggable property from cloned item
+      cell.innerHTML = ''; // Clear cell before placing new item
+      cell.appendChild(newItem);
+    });
+  });
+</script>
+
+</body>
+</html>
diff --git a/images/home_logo.png b/images/home_logo.png
new file mode 100644
index 000000000..d686c816b
Binary files /dev/null and b/images/home_logo.png differ
diff --git a/index.html b/index.html
index f4069f595..8cf07c3d2 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
         rel="stylesheet"
     />
     <link
-        href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css"
+        href="https://cdn.jsdelivr.net/npm/remix@4.3.0/fonts/remixicon.css"
         rel="stylesheet"
     />
 
@@ -39,6 +39,54 @@
     min-height: 100vh;
     margin: 0;
 }
+/* Basic Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+}
+
+/* Navbar Styling */
+.navbar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #E4405F;
+    color: white;
+    padding: 1rem 2rem;
+}
+
+.navbar .logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #fff;
+    text-decoration: none;
+    margin-right: 2rem;
+}
+
+/* Center the links by making the navbar-links container a flexbox */
+.navbar-links {
+    list-style: none;
+    display: flex;
+    gap: 1.5rem;
+    flex-grow: 1; /* Center by taking full width */
+    justify-content: center;
+}
+
+.navbar-links li a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 1rem;
+}
+
+.navbar-links li a:hover {
+    text-decoration: underline;
+}
+
 
 #root {
     flex: 1;
@@ -117,6 +165,41 @@
 }
 
 </style>
+    <!-- Navbar Component with Centered Links and Title Update -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Master Web Development</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <nav class="navbar">
+            <a href="#" class="logo">
+                Master-Web<br>
+                <span>Development</span>
+            </a>
+
+            <ul class="navbar-links">
+                <li><a href="./welcometestimonials.html">Testimonials</a></li>
+                <li><a href="./about.html">About Us</a></li>
+                <li><a href="#">Account</a></li>
+                <li><a href="./terms.html">Terms of Use</a></li>
+                <li><a href="#">Media Centre</a></li>
+                <li><a href="./contact.html">Contact Us</a></li>
+                <li><a href="#">Projects</a></li>
+                <li><a href="./feedback.html">Feedback</a></li>
+            </ul>
+        </nav>
+    </header>
+</body>
+</html>
+
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remix.css" rel="stylesheet" />
+    <link rel="stylesheet" href="styles.css">
+
 
 
         <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
@@ -134,214 +217,34 @@
 </main>
     <title>Master web development</title>
     <link rel="icon" href="./faviconicon.png" type="image/png">
-    <style>
-        @media (max-width: 1200px) {
-            .footer-container {
-                padding: 20px;
-            }
-
-            .mwd-footer-content {
-                text-align: center;
-            }
-
-            .tags.social {
-                justify-content: center;
-            }
-
-            .btn {
-                margin-top: 10px;
-                border-radius: 5px;
-            }
-
-            .btn-primary:hover {
-                background-color: #0056b3;
-            }
-
-            .btn-secondary:hover {
-                background-color: #6c757d;
-            }
-        }
-
-        .circle {
-            position: absolute;
-            width: 25px;
-            height: 25px;
-            border-radius: 50%;
-            pointer-events: none;
-            background: radial-gradient(circle, rgb(244, 63, 94), rgb(253, 91, 118));
-            transition: transform 0.1s, left 0.1s, top 0.1s;
-            background-color: #f43f5e;
-        }
-
-        .circle-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 9999;
-
-        }
-
-        /* Chatbot Container */
-
-        .chatbot-container {
-            position: fixed;
-            bottom: 34px;
-            /* Adjust as needed */
-            right: 100px;
-            /* Adjust as needed */
-            z-index: 1000;
-            /* Ensure it appears above other elements */
-        }
-
-        /* Chatbot Button */
-        .chatbot-button {
-            background-color: #007bff;
-            /* Change to your preferred color */
-            border: none;
-            border-radius: 50%;
-            padding: 5px;
-            /* Smaller padding */
-            cursor: pointer;
-            position: relative;
-            width: 50px;
-            /* Adjusted size */
-            height: 50px;
-            /* Adjusted size */
-        }
-
-        /* Button Image */
-        .chatbot-button img {
-            width: 30px;
-            /* Adjusted image size */
-            height: 30px;
-            /* Adjusted image size */
-        }
-
-        /* Tooltip Text */
-        .tooltip-text {
-            display: none;
-            /* Hide by default */
-            position: absolute;
-            bottom: 100%;
-            /* Position above the button */
-            right: 50%;
-            transform: translateX(50%);
-            background-color: #333;
-            /* Background color for tooltip */
-            color: #fff;
-            /* Tooltip text color */
-            padding: 5px;
-            border-radius: 5px;
-            white-space: nowrap;
-            /* Prevent text from wrapping */
-        }
-
-        /* Show Tooltip on Hover */
-        .chatbot-button:hover .tooltip-text {
-            display: block;
-            /* Show on hover */
-        }
-
-        /* Chat Window Styles */
-        .chat-window {
-            position: fixed;
-            bottom: 90px;
-            /* Adjust based on the button size */
-            right: 20px;
-            /* Same as the button */
-            width: 400px;
-            /* Smaller width */
-            height: 500px;
-            /* Fixed height for compactness */
-            border: 1px solid #ccc;
-            background-color: white;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            display: none;
-            /* Hidden by default */
-            z-index: 1000;
-            /* Ensure it appears above other elements */
-        }
-
-        /* Iframe for Chatbot HTML */
-        #chat-iframe {
-            width: 100%;
-            /* Full width of the chat window */
-            height: calc(100% - 40px);
-            /* Height minus header */
-            border: none;
-            /* Remove border */
-        }
-
-        @keyframes appear {
-            from {
-                opacity: 0;
-                scale: 0.4;
-            }
 
-            to {
-                opacity: 1;
-                scale: 1;
-            }
-        }
 
         .card {
             animation: appear 5s linear;
             animation-timeline: view();
             animation-range: entry 0% cover 40%;
         }
-        body {
-            font-family: 'Poppins', sans-serif;
-            min-height: 2000px; /* Add some height to enable scrolling */
-            margin: 0;
-            padding: 0;
-        }
-
-        /* Scroll to Top Button Styles */
-        .top-btn {
-            display: none;
-            width: 50px;
-            height: 50px;
-            position: fixed;
-            bottom: 23px;
-            right: 44px;
-            background-color: #ab45e7;
-            color: #ffffff;
-            border: none;
-            border-radius: 50%;
-            cursor: pointer;
-            font-size: 18px;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .top-btn:hover {
-            background-color: #c91e57;
-        }
-        .source-code-btn {
-    color: #333;
-    background-color: #f5f5dc;
-    padding: 10px 20px;
-    border: 2px solid #d4d4aa;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-}
 
-.source-code-btn:hover {
-    background-color: #e0e0c1;
-    color: #222;
-    border-color: #c1c17d;
-    transform: translateY(-2px);
-}
     </style>
+
 </head>
 
 <body>
+    <!-- Navbar Start -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="#home" class="navbar-logo">
+                <img src="./images/home_logo.png" alt="Logo" class="logo-image"> Master Web Dev
+            </a>
+            <ul class="navbar-menu">
+                <li><a href="#">Home</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#feedback">Feedback</a></li>
+                <li><a href="#faq">FAQ</a></li>
+                <li><a href="contactus.html">Contact</a></li>
+            </ul>
+        </div>
+    </nav>
     <div id="progress-container">
         <div id="progress-bar"></div>
       </div>
@@ -377,40 +280,30 @@
         <!-- Profile Icon -->
         <li class="nav-item no-underline">
             <a href="./profile.html" class="profile-link" style="display: flex; align-items: center; text-decoration: none;">
-            <img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
-        </a>
+                <img id="homeProfileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" 
+                    alt="Profile Icon" 
+                    style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
+            </a>
         </li>
 
-        <style>
-
-        /* Override the existing hover styles */
-        .navbar-nav .nav-item .profile-link:hover {
-            background-color: transparent !important; /* Remove background color */
-            border-radius: 0 !important; /* Reset border radius */
-            transform: none !important; /* Prevent scaling */
-        }
-
-        </style>
-
         <script>
-
-            function toggleMenu() {
-                const menu = document.getElementById('profileMenu');
-                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
-            }
-
-            // Close the dropdown if the user clicks outside of it
-            window.onclick = function(event) {
-                if (!event.target.matches('.profile-icon img')) {
-                    const menu = document.getElementById('profileMenu');
-                    if (menu.style.display === 'block') {
-                        menu.style.display = 'none';
-                    }
+            
+            document.addEventListener("DOMContentLoaded", function() {
+            // Retrieve the saved avatar from localStorage
+            const savedAvatar = localStorage.getItem("selectedAvatar");
+
+            // If an avatar is saved, update the profile image
+            if (savedAvatar) {
+                const homeProfileImage = document.getElementById("homeProfileImage");
+                if (homeProfileImage) {
+                    homeProfileImage.src = savedAvatar;
                 }
             }
+        });
 
         </script>
 
+        
     </div>
 
     <section id="projects">
@@ -441,14 +334,7 @@ <h3><span>Open</span> Projects</h3>
             </div> -->
 
             
-            <div class="search-container">
-                <input type="text" id="search-input" placeholder="Search games by Title/Description..."
-                oninput="filterCards()" style="margin-bottom: 10px;">
-              <button class="search-btn" onclick="filterCards()">
-                <span class="search-icon"></span>
-                Search
-              </button>
-            </div>
+
           </div>
 
        
@@ -470,7 +356,7 @@ <h3><span>Open</span> Projects</h3>
                             A simple air balloon game.......
                         </div>
                         <div class="button">
-                            <button>SLIDE MORE</button>
+                            <button  style="color:white;width:10rem;">SLIDE MORE</button>
                         </div>
                     </div>
                 </div>
@@ -565,11 +451,12 @@ <h3><span>Open</span> Projects</h3>
         <div class="projects-heading">
             <p>Master web development</p>
             <h3><span>Organize</span> Projects</h3>
+            <!--
 <div class="nextPrevArrows">
     <button class="prev"> < </button>
     <button class="next"> > </button>
 </div>
-
+-->
 
             </div>
 
@@ -578,7 +465,6 @@ <h3><span>Organize</span> Projects</h3>
 
 
 
-            <!-- Category Buttons -->
             <div class="btn-container">
                 <button class="source-code-btn" onclick="filterCategory('All')">All</button>
                 <button class="source-code-btn" onclick="filterCategory('Games')">Games</button>
@@ -588,19 +474,36 @@ <h3><span>Organize</span> Projects</h3>
                 <button class="source-code-btn" onclick="filterCategory('Security')">Security Tools</button>
                 <button class="source-code-btn" onclick="filterCategory('Miscellaneous')">Miscellaneous</button>
 
-        
-
-        
-            <div class="nextPrevArrows">
-                <button class="prev"> < </button>
-                <button class="next"> > </button>
+            
+                <!-- <div class="nextPrevArrows">
+                    <button class="prev"> < </button>
+                    <button class="next"> > </button>
+                </div> -->
+                <br />
+            </div>
 
+            <div class="search-container">
+                <input type="text" id="search-input" placeholder="Search games by Title/Description..."
+                oninput="filterCards()" style="margin-bottom: 10px;">
+              <button class="search-btn" onclick="filterCards()">
+                <span class="search-icon"></span>
+                Search
+              </button>
             </div>
-            <br />
-        </div>
 
 
         <div class="projects-container">
+            <a href="./projects/Diwali_Wish/index.html" class="card Generators" target="_blank">
+                <div class="card-cover">
+                    <img src="./projects/Diwali_Wish/image.png" alt="Diwali Wish">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Animated Diwali Wish</h3>
+                    <p class="card-description">
+                        An animated website to wish Happy Diwali.
+                    </p>
+                </div>
+            </a>
             <a href="./projects/GenerateGradientColor/index.html" class="card Generators" target="_blank">
                 <div class="card-cover">
                     <img src="https://cssgradient.io/images/css-gradient-examples-ba7f335a.svg" alt="Generate Gradient">
@@ -613,6 +516,18 @@ <h3 class="card-heading">Generate Gradient</h3>
                 </div>
             </a>
 
+            <a href="./pet.html" class="card Generators" target="_blank">
+                <div class="card-cover">
+                    <img src="assets/image/pet-adopt.png" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Adopt-a-Pet Gallery </h3>
+                    <p class="card-description">
+                        Lets befriend a cute pet.
+                    </p>
+                </div>
+            </a>
+
             <a href="./projects/iRadio/index.html" class="card Generators" target="_blank">
                 <div class="card-cover">
                     <img src="https://img.freepik.com/free-photo/retro-microphone-isolated-color-background_1387-912.jpg?t=st=1730179005~exp=1730182605~hmac=d159adfba6c053946368bf47299cc468447ac975a45dcab478adc7dac4d252fb&w=740" alt="Generate Gradient">
@@ -624,7 +539,78 @@ <h3 class="card-heading">iRadio</h3>
                     </p>
                 </div>
             </a>
+
+            <a href="./mindful-breating.html" class="card Generators" target="_blank">
+                <div class="card-cover">
+                    <img src="assets/image/mindful-breathing.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Mindfulness Breathing App</h3>
+                    <p class="card-description">
+                        Lets inhale positivity and exhale negativty.
+                    </p>
+                </div>
+            </a>
+
+            <a href="./fortune-teller.html" class="card Generators" target="_blank">
+                <div class="card-cover">
+                    <img src="assets/image/fortune-teller.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Fortune Teller App</h3>
+                    <p class="card-description">
+                        What does your fortune say about you?
+                    </p>
+                </div>
+            </a>
+
+            <a href="./sketchpad.html" class="card Generators" target="_blank">
+                <div class="card-cover">
+                    <img src="assets/image/sketch-pad-img.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Digital Sketchpad with Colors & Brushes</h3>
+                    <p class="card-description">
+                        Lets explore world of artistic creativity.
+                    </p>
+                </div>
+            </a>
+
+            <a href="./garden-planner.html" class="card Generators" target="_blank">
+                <div class="card-cover">
+                    <img src="assets/image/garden-planer.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Virtual Garden Planner</h3>
+                    <p class="card-description">
+                        Lets get your garden structured.
+                    </p>
+                </div>
+            </a>
+
+            <a href="./story-builder.html" class="card Generators" target="_blank">
+                <div class="card-cover">
+                    <img src="assets/image/story-builder.webp" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Story Builder</h3>
+                    <p class="card-description">
+                        Lets create some amazing tales.
+                    </p>
+                </div>
+            </a>
             
+            <a href="./tarot.html" class="card Generators" target="_blank">
+                <div class="card-cover">
+                    <img src="assets/image/tarot.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Virtual Tarot Card Reading</h3>
+                    <p class="card-description">
+                        What does your fate says?
+                    </p>
+                </div>
+            </a>
 
             <a href="./projects/box connet game/box.html" class="card Games " target="_blank">
                 <div class="card-cover ">
@@ -835,6 +821,21 @@ <h3 class="card-heading">Love Calculator</h3>
                     </p>
                 </div>
             </a>
+
+            <a href="./Flames/flames.html" class="card Mathematical " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/Flames Game.png" alt="Flames Game">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Flames Game Calculator</h3>
+                    <p class="card-description">
+                        Check the relationship between two persons.
+                    </p>
+                </div>
+            </a>
+
+
+
             <a href="./projects/Magic Square/index.html" class="card Mathematical " target="_blank">
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/magicsquare.png" alt="Magic Square">
@@ -950,7 +951,7 @@ <h3 class="card-heading">Snake Game</h3>
                 </div>
             </a>
 
-            <a href="./projects/GamingTools website/index.html" class="card Websites" target="_blank">
+            <a href="https://gaming.tools/newworld/" class="card Websites" target="_blank">
                 <div class="card-cover">
                     <img src="./assets/image/4444.png" alt="">
                 </div>
@@ -960,6 +961,17 @@ <h3 class="card-heading">Gaming Tools Website</h3>
                         A responsive website for Gaming lovers
                     </p>
                 </div>
+                <a href="./projects/3D room decorator/index.html" class="card" target="_blank">
+                    <div class="card-cover counter-cover-color">
+                        <img src="https://roomtodo.com/public/files/seo/room_planer/mini/room_planner_1__380_prop.png" alt="3D Room Decorator">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">3D Room Decorator</h3>
+                        <p class="card-description">
+                            Design and decorate a 3D room layout to visualize your space.
+                        </p>
+                    </div>
+                </a>
             </a>
             <a href="./projects/SpaceHuggers/index.html" class="card Games " target="_blank">
                 <div class="card-cover">
@@ -983,17 +995,7 @@ <h3 class="card-heading">Zero Line Game</h3>
                     </p>
                 </div>
             </a>
-            <a href="./projects/3D room decorator/index.html" class="card" target="_blank">
-                <div class="card-cover counter-cover-color">
-                    <img src="https://roomtodo.com/public/files/seo/room_planer/mini/room_planner_1__380_prop.png" alt="3D Room Decorator">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">3D Room Decorator</h3>
-                    <p class="card-description">
-                        Design and decorate a 3D room layout to visualize your space.
-                    </p>
-                </div>
-            </a>
+            
             <a href="./projects/Microblog/index.html" class="card" target="_blank">
                 <div class="card-cover counter-cover-color">
                     <img src="https://miro.medium.com/v2/resize:fit:1200/1*df8EnrIPBYLB0rOWTFVIzQ.jpeg" alt="Microblog with Customizable Animated Text">
@@ -1038,19 +1040,9 @@ <h3 class="card-heading">Quantum Themed Maze Game</h3>
                     </p>
                 </div>
             </a>
-            <a href="./projects/virtual memory/index.html" class="card" target="_blank">
-                <div class="card-cover counter-cover-color ">
-                    <img src="https://platform.vox.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/23165626/memory2final.jpg?quality=90&strip=all&crop=0%2C0%2C100%2C100&w=2400" alt="">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Virtual Memory Jar</h3>
-                    <p class="card-description">
 
-                        Virtual Memory Jar
-
-                    </p>
-                </div>
             </a>
+
             <a href="./projects/Password Generator/index.html" class="card Generators" target="_blank">
                 <div class="card-cover counter-cover-color">
                     <img src="./assets/image/lock.png" alt="">
@@ -1058,24 +1050,74 @@ <h3 class="card-heading">Virtual Memory Jar</h3>
                 <div class="card-content">
                     <h3 class="card-heading">Password Generator</h3>
                     <p class="card-description">
-            Generate secure passwords easily!
+                        Generate secure passwords easily!
                     </p>
                 </div>
-       </a>
+            </a>
+            
             <a href="./projects/memeGen/index.html" class="card" target="_blank">
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/images.png" alt="">
+
                 </div>
                 <div class="card-content">
-                    <h3 class="card-heading">Meme Generator</h3>
+                    <h3 class="card-heading">Generative Mandala Creator</h3>
                     <p class="card-description">
-                        A meme generator.
+                        Create intricate, generative mandala designs with this creative tool.
                     </p>
                 </div>
             </a>
-        
 
-            <a href="./projects/Physics-Based Particle-sandbox/index.html" class="card" target="_blank">
+                <a href="./projects/lofi room/index.html" class="card" target="_blank">
+                    <div class="card-cover counter-cover-color">
+                        <img src="https://classicentouragemag.com/wp-content/uploads/2024/02/ai-generated-8274619_1280.png?w=1024" alt="Lofi Room Ambience Generator">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Customizable “Lofi Room” Ambience Generator</h3>
+                        <p class="card-description">
+                            Create a personalized ambiance with customizable sounds for relaxation and focus.
+                        </p>
+                    </div>
+                </a>
+                <a href="./projects/Quantum Themed Maze Game/index.html" class="card" target="_blank">
+                    <div class="card-cover counter-cover-color">
+                        <img src="https://cdn.mos.cms.futurecdn.net/R8Bfi2Thwq7cnTabi4J2pE.jpg" alt="Quantum Themed Maze Game">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Quantum Themed Maze Game</h3>
+                        <p class="card-description">
+                            Navigate through a maze filled with quantum puzzles and challenges.
+                        </p>
+                    </div>
+                </a>
+            <a href="./projects/virtual memory/index.html" class="card" target="_blank">
+                    <div class="card-cover counter-cover-color ">
+                        <img src="https://platform.vox.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/23165626/memory2final.jpg?quality=90&strip=all&crop=0%2C0%2C100%2C100&w=2400" alt="">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Virtual Memory Jar</h3>
+                        <p class="card-description">
+                
+                            Virtual Memory Jar
+                
+                        </p>
+                    </div>
+            </a>
+            <a href="./projects/Password Generator/index.html" class="card Generators" target="_blank">
+                <div class="card-cover counter-cover-color">
+                    <img src="path/to/password-generator/image.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Password Generator</h3>
+                    <p class="card-description">
+               Generate secure passwords easily!
+                    </p>
+                </div>
+            </a>
+
+        
+
+            <a href="./projects/Physics-Based Particle-sandbox/index.html" class="card" target="_blank">
                 <div class="card-cover counter-cover-colour">
                     <img src="https://www.sandbox.game/img/00_General/seo/home.png" alt="">
                 </div>
@@ -1123,29 +1165,7 @@ <h3 class="card-heading">Memory Tiles</h3>
                 </div>
             </a>
 
-            <a href="./projects/Digital Scrapbook with Animated Stickers/index.html" class="card" target="_blank">
-                <div class="card-cover counter-cover-colour">
-                    <img src="https://www.liene-life.com/cdn/shop/articles/scrapbook-with-assortment-home-decorations_1_a5864cc4-8de7-478d-a1db-095da8373f23.jpg?v=1723013345&width=1024" alt="Digital Scrapbook">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Digital Scrapbook with Animated Stickers</h3>
-                    <p class="card-description">
-                        Create your digital scrapbook with fun, animated stickers!
-
-                    </p>
-                </div>
-            </a>
-            <a href="./projects/Style picker/index.html" class="card" target="_blank">
-                <div class="card-cover counter-cover-colour">
-                    <img src="https://www.panaprium.com/cdn/shop/articles/different_fashion_styles_up.jpg?v=1712222301" alt="AI-Powered Style Picker">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">AI-Powered Style Picker</h3>
-                    <p class="card-description">
-                        Customize your style with AI-powered suggestions!
-                    </p>
-                </div>
-            </a>
+            
             <a href="./projects/Style picker/index.html" class="card" target="_blank">
                 <div class="card-cover counter-cover-colour">
                     <img src="https://www.panaprium.com/cdn/shop/articles/different_fashion_styles_up.jpg?v=1712222301" alt="AI-Powered Style Picker">
@@ -1157,6 +1177,7 @@ <h3 class="card-heading">AI-Powered Style Picker</h3>
                     </p>
                 </div>
             </a>
+            
             <a href="./projects/random user generator/index.html" class="card Generators" target="_blank">
 
                 <div class="card-cover counter-cover-colour">
@@ -1164,48 +1185,109 @@ <h3 class="card-heading">AI-Powered Style Picker</h3>
 
                 </div>
                 <div class="card-content">
-                    <h3 class="card-heading">Random User Generator</h3>
+                    <h3 class="card-heading">Password Generator</h3>
                     <p class="card-description">
+
+                        A random password generator.
                         Generate random user profiles with this tool.
                     </p>
                 </div>
             </a>
-
-            <a href="./projects/Ping Pong Game/index.html" class="card Games " target="_blank">
+            <a href="./projects/Physics-Based Particle-sandbox/index.html" class="card" target="_blank">
                 <div class="card-cover counter-cover-colour">
-                    <img src="./assets/image/ping_pong.png" alt="">
+                    <img src="https://www.sandbox.game/img/00_General/seo/home.png" alt="">
                 </div>
                 <div class="card-content">
-                    <h3 class="card-heading">Ping Pong Game</h3>
+                    <h3 class="card-heading">Physics-Based Particle Sandbox</h3>
                     <p class="card-description">
-                        A simple Ping Pong Game.
+                        Physics-Based Particle Sandbox
                     </p>
                 </div>
             </a>
 
-            <a href="./projects/Todo List/index.html" class="card Websites " target="_blank">
-                <div class="card-cover counter-cover-colour">
-                    <img src="./assets/image/todo-list.png" alt="">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Todo List</h3>
-                    <p class="card-description">
-                        A simple Todo list.
-                    </p>
-                </div>
-            </a>
-            <a href="./projects/Linktree clone/index.html" class="card Websites " target="_blank">
+            <a href="./projects/Real-Time Heatmap with Mouse Interactions/index.html" class="card" target="_blank">
                 <div class="card-cover counter-cover-colour">
-                    <img src="./assets/image/linktree.webp" alt="link tree icon">
+                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSg3AyPZ2vwkck-Vgv59NJhxjXF5Tl6Wl4_0g&s" alt="Real-Time Heatmap">
                 </div>
                 <div class="card-content">
-                    <h3 class="card-heading">Linktree Clone</h3>
+                    <h3 class="card-heading">Real-Time Heatmap with Mouse Interactions</h3>
                     <p class="card-description">
-                        Linktree clone made using HTML & CSS.
+                        Create a real-time heatmap based on mouse movements!
                     </p>
                 </div>
             </a>
-            <!-- Adding some Feature in Tic Tac Toe -->
+
+                <a href="./projects/Digital Scrapbook with Animated Stickers/index.html" class="card" target="_blank">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="https://www.liene-life.com/cdn/shop/articles/scrapbook-with-assortment-home-decorations_1_a5864cc4-8de7-478d-a1db-095da8373f23.jpg?v=1723013345&width=1024" alt="Digital Scrapbook">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Digital Scrapbook with Animated Stickers</h3>
+                        <p class="card-description">
+                            Create your digital scrapbook with fun, animated stickers!
+                
+                        </p>
+                    </div>
+                </a>
+                                                        
+                <a href="./projects/random user generator/index.html" class="card Generators" target="_blank">
+
+                    <div class="card-cover counter-cover-colour">
+                        <img src="https://example.com/random-user-generator-image.jpg" alt="Random User Generator">
+                
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Random User Generator</h3>
+                        <p class="card-description">
+                            Generate random user profiles with this tool.
+                        </p>
+                    </div>
+                </a>
+                <a href="./projects/random user generator/index.html" class="card" target="_blank">
+                    <div class="card-cover">
+                                      <img src="./assets/image/screenshot.png" alt="">
+                                  </div>
+                                  <div class="card-content">
+                                      <h3 class="card-heading">Random User Generator</h3>
+                                      <p class="card-description">
+                                          A Web-app to generate information of users
+                                      </p>
+                                  </div>
+                  </a>
+                  <a href="./projects/Ping Pong Game/index.html" class="card Games " target="_blank">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/ping_pong.png" alt="">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Ping Pong Game</h3>
+                        <p class="card-description">
+                            A simple Ping Pong Game.
+                        </p>
+                    </div>
+                </a>
+                <a href="./projects/Todo List/index.html" class="card Websites " target="_blank">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/todo-list.png" alt="">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Todo List</h3>
+                        <p class="card-description">
+                            A simple Todo list.
+                        </p>
+                    </div>
+                </a>
+                <a href="./projects/Linktree clone/index.html" class="card Websites " target="_blank">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/linktree.webp" alt="link tree icon">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Linktree Clone</h3>
+                        <p class="card-description">
+                            Linktree clone made using HTML & CSS.
+                        </p>
+                    </div>
+                </a>
+                <!-- Adding some Feature in Tic Tac Toe -->
             <a href="./projects/Tic-tac-toe/index.html" class="card Games " target="_blank">
                 <div class="card-cover counter-cover-colour">
                     <img src="./projects/Tic-tac-toe/gametic.png" alt="link tree icon">
@@ -1217,7 +1299,6 @@ <h3 class="card-heading">Tic Tac Toe</h3>
                     </p>
                 </div>
             </a>
-
             <a href="./projects/Number guessing/index.html" class="card Guess " target="_blank">
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/numbers.png" alt="number guessing">
@@ -1297,17 +1378,6 @@ <h3 class="card-heading">Emotion Detection for Feedback Forms</h3>
                     </p>
                 </div>
             </a>
-            <a href="./projects/Sudoku Solver/index.html" class="card Games" target="_blank">
-                <div class="card-cover">
-                    <img src="path_to_sudoku_image.jpg" alt="Sudoku Solver">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Sudoku Solver</h3>
-                    <p class="card-description">
-                        A tool for solving Sudoku puzzles easily.
-                    </p>
-                </div>
-            </a>
 
             <a href="./projects/Simon/index.html" class="card Games " target="_blank">
                 <div class="card-cover counter-cover-colour">
@@ -1353,7 +1423,9 @@ <h3 class="card-heading">Wordle Game</h3>
                     </p>
                 </div>
             </a>
+
             <a href="./projects/sudoku/index.html" class="card Games " target="_blank">
+
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/pastime.png" alt="">
                 </div>
@@ -1388,6 +1460,23 @@ <h3 class="card-heading">Time Capsule Website</h3>
                 </div>
             </a>
 
+<!--============================== End =========================================== -->
+            
+
+            <a href="./projects/Internet_Speed_checker/index.html" class="card Miscellaneous" target="_blank">
+                <div class="card-cover">
+                    <img src="path_to_internet_speed_checker_image.jpg" alt="Internet Speed Checker">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Internet Speed Checker</h3>
+                    <p class="card-description">
+                        Check your internet speed with this simple tool.
+                    </p>
+                </div>
+            </a>
+            <!-- <a>
+
+            -->
             <!--============================== Certificate Generator =========================================== -->
             <a href="./projects/Certificate Generator/index.html" class="card Generators" target="_blank">
                 <div class="card-cover">
@@ -1402,22 +1491,64 @@ <h3 class="card-heading">Certificate Generator</h3>
             </a>
             <!--============================== End =========================================== -->
 
-            <a href="./projects/Internet_Speed_checker/index.html" class="card Miscellaneous" target="_blank">
+            <a href="./projects/Patern logic/index.html" class="card" target="_blank">
                 <div class="card-cover">
-                    <img src="path_to_internet_speed_checker_image.jpg" alt="Internet Speed Checker">
+                    <img src="https://i.pinimg.com/474x/82/4f/13/824f1320464df90f1d12e1ad8de36ab6.jpg" alt="pattern logo">
                 </div>
                 <div class="card-content">
-                    <h3 class="card-heading">Internet Speed Checker</h3>
+                    <h3 class="card-heading">Mind Match: Pattern Logic Game</h3>
                     <p class="card-description">
-                        Check your internet speed with this simple tool.
+                        Mind Match: Pattern Logic Game
+                    </p>
+                </div>
+            </a>
+            <a href="./projects/Color puzzle/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="https://play-lh.googleusercontent.com/ExTusrE6tBOXwC1uzd3EFHYSrlTv1UabD-rMMA2D3Q5WOTNZtAK5LomyqPI5O7LP774" alt="color logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Colorblind Mode: Puzzle Through Perspective</h3>
+                    <p class="card-description">
+                        Colorblind Mode: Puzzle Through Perspective
+                    </p>
+                </div>
+            </a>
+            <a href="./projects/Horoscope/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="https://www.vedicmatters.com/images/article/article-2019-12-23-04-14-14_5e003f1650b23.horoscope.png" alt="horoscope logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Personalized Horoscope & Star Map Viewer</h3>
+                    <p class="card-description">
+                        Personalized Horoscope & Star Map Viewer
+                    </p>
+                </div>
+            </a>
+            <!-- <a href="./projects/Horoscope/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="https://www.vedicmatters.com/images/article/article-2019-12-23-04-14-14_5e003f1650b23.horoscope.png" alt="horoscope logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Personalized Horoscope & Star Map Viewer</h3>
+                    <p class="card-description">
+                        Personalized Horoscope & Star Map Viewer
+                    </p>
+                </div>
+            </a> -->
+            <a href="./projects/Fabric tool/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="https://saroj.in/cdn/shop/files/WhatsAppImage2023-03-10at5.14.43PM.jpg?v=1728304625" alt="Fabric logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Fabric Tool</h3>
+                    <p class="card-description">
+                        Creates innovative designs with fabric
                     </p>
                 </div>
             </a>
-
             <a href="./projects/Poetry generator/index.html" class="card" target="_blank">
                 <div class="card-cover">
-                    <img src="https://cdn.i-scmp.com/sites/default/files/d8/yp/images/shutterstock_339411857.jpg"
-                        alt="Poem logo">
+                    <img src="https://cdn.i-scmp.com/sites/default/files/d8/yp/images/shutterstock_339411857.jpg" alt="Poem logo">
                 </div>
                 <div class="card-content">
                     <h3 class="card-heading">Poetry generator</h3>
@@ -1427,6 +1558,7 @@ <h3 class="card-heading">Poetry generator</h3>
                 </div>
             </a>
 
+
             <a href="./projects/Patern logic/index.html" class="card" target="_blank">
                 <div class="card-cover">
                     <img src="https://i.pinimg.com/474x/82/4f/13/824f1320464df90f1d12e1ad8de36ab6.jpg" alt="pattern logo">
@@ -1517,18 +1649,19 @@ <h3 class="card-heading">Responsive Fractal Generator</h3>
                 </div>
             </a>
 
-            <a href="./projects/Travel destination/index.html" class="card" target="_blank">
+            <a href="./projects/Memory Match Game/index.html" class="card" target="_blank">
                 <div class="card-cover">
-                    <img src="https://img.freepik.com/premium-photo/full-shot-travel-concept-with-landmarks_1174912-5236.jpg?semt=ais_hybrid"
-                        alt="Travel logo">
+                    <img src="./projects/Memory Match Game/images/memory match logo.png" alt="Memory Match Game logo">
                 </div>
                 <div class="card-content">
-                    <h3 class="card-heading">Travel Destination Generator</h3>
+                    <h3 class="card-heading">Memory Match Game</h3>
                     <p class="card-description">
-                        Generates destinations for travel
+                        Match the pairs of cards.
                     </p>
                 </div>
-            </a>
+             </a>
+
+        
 
             <a href="./projects/Color Personality Analyser/index.html" class="card" target="_blank">
                 <div class="card-cover">
@@ -1544,7 +1677,7 @@ <h3 class="card-heading">Color Personality Analyser</h3>
             </a>
 
             <a href="./projects/weather-outfit-finder/index.html" class="card" target="_blank">
-                <div class="card-cover">
+  <div class="card-cover">
                     <img src="weather-outfit" alt="Weather Outfit Finder logo">
                     <!-- Ensure to provide a valid image source -->
                 </div>
@@ -1556,6 +1689,22 @@ <h3 class="card-heading">Weather Outfit Finder</h3>
                 </div>
             </a>
 
+                <a href="./projects/Fractal generator/index.html" class="card" target="_blank">
+                    <div class="card-cover">
+                        <img src="https://cdn.pixabay.com/photo/2021/09/01/20/19/fractal-6592133_1280.jpg"
+                            alt="Fractal Generator logo">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Responsive Fractal Generator</h3>
+                        <p class="card-description">
+                            Generates fractal images
+                        </p>
+                    </div>
+                </a>
+
+                                      
+
+
             <a href="./projects/interactive-storybook/index.html" class="card" target="_blank">
                 <div class="card-cover">
                     <img src="story-book" alt="Interactive Storybook logo">
@@ -1582,59 +1731,7 @@ <h3 class="card-heading">Travel Destination Generator</h3>
                     </p>
                 </div>
             </a>
-
-            <a href="./projects/Color Personality Analyser/index.html" class="card" target="_blank">
-                <div class="card-cover">
-                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQG8gnBRRpeEHOscwRfAD8l6A_BvueOpFGDUQ&s"
-                        alt="Color logo">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Color Personality Analyser</h3>
-                    <p class="card-description">
-                        Analyzes personality using color!
-                    </p>
-                </div>
-            </a>
-
-            <a href="./projects/weather-outfit-finder/index.html" class="card" target="_blank">
-                <div class="card-cover">
-                    <img src="path/to/weather-outfit-image" alt="Weather Outfit Finder logo">
-                    <!-- Add a valid image source here -->
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Weather Outfit Finder</h3>
-                    <p class="card-description">
-                        Finds the outfit that suits the weather.
-                    </p>
-                </div>
-            </a>
-
-            <a href="./projects/Color Personality Analyser/index.html" class="card" target="_blank">
-                <div class="card-cover">
-                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQG8gnBRRpeEHOscwRfAD8l6A_BvueOpFGDUQ&s"
-                        alt="Color Personality Analyzer logo">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Color Personality Analyzer</h3>
-                    <p class="card-description">
-                        Analyze your personality based on color!
-                    </p>
-                </div>
-            </a>
-
-            <a href="./projects/Travel destination/index.html" class="card" target="_blank">
-                <div class="card-cover">
-                    <img src="https://img.freepik.com/premium-photo/full-shot-travel-concept-with-landmarks_1174912-5236.jpg?semt=ais_hybrid"
-                        alt="Travel logo">
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Travel Destination Generator</h3>
-                    <p class="card-description">
-                        Generates destinations for travel.
-                    </p>
-                </div>
-            </a>
-
+        
             <a href="./projects/Color Personality Analyser/index.html" class="card" target="_blank">
                 <div class="card-cover">
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQG8gnBRRpeEHOscwRfAD8l6A_BvueOpFGDUQ&s"
@@ -1647,7 +1744,7 @@ <h3 class="card-heading">Color Personality Analyser</h3>
                     </p>
                 </div>
             </a>
-
+        
             <a href="./projects/weather-outfit-finder/index.html" class="card" target="_blank">
                 <div class="card-cover">
                     <img src="path/to/weather-outfit-image" alt="Weather Outfit Finder logo">
@@ -1660,7 +1757,7 @@ <h3 class="card-heading">Weather Outfit Finder</h3>
                     </p>
                 </div>
             </a>
-
+        
             <a href="./projects/interactive-storybook/index.html" class="card" target="_blank">
                 <div class="card-cover">
                     <img src="path/to/storybook-image" alt="Interactive Storybook logo">
@@ -1673,7 +1770,7 @@ <h3 class="card-heading">Interactive Storybook</h3>
                     </p>
                 </div>
             </a>
-
+        
             <a href="./projects/recipe-finder/index.html" class="card" target="_blank">
                 <div class="card-cover">
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiYt51LrHpxjoSZvimoMyjpFEReWGN1qxYzA&s"
@@ -1687,19 +1784,6 @@ <h3 class="card-heading">Recipe Finder</h3>
                 </div>
             </a>
 
-            <a href="./projects/Random-QR-generator/index.html" class="card" target="_blank">
-                <div class="card-cover">
-                    <img src="path/to/qr-generator-image" alt="QR Generator logo">
-                    <!-- Add a valid image source here -->
-                </div>
-                <div class="card-content">
-                    <h3 class="card-heading">Random QR Generator</h3>
-                    <p class="card-description">
-                        Generate random QR codes quickly!
-                    </p>
-                </div>
-            </a>
-
             <a href="./projects/QR-generator/index.html" class="card" target="_blank">
                 <div class="card-cover">
                     <img src="path/to/qr-generator-image" alt="QR Generator logo">
@@ -1714,11 +1798,13 @@ <h3 class="card-heading">Random QR Generator</h3>
             </a>
 
         <a href="./projects/Age calculator/index.html" class="card Mathematical " target="_blank">
+
             <div class="card-cover">
-                <img src="https://play-lh.googleusercontent.com/20EpPSOwFTiDv-ntlpR017NmHJsB1E5eGFIu9BMT_j7RC_IiHsJuuNq2V-8h6wM42d_a"
+                <img src="https://upload.wikimedia.org/wikipedia/commons/d/d0/QR_code_for_mobile_English_Wikipedia.svg"
                     alt="Image Generator logo">
             </div>
             <div class="card-content">
+
                 <h3 class="card-heading">Age calculator</h3>
                 <p class="card-description">
                     Calculates age
@@ -1764,1462 +1850,1645 @@ <h3 class="card-heading">Creative writing</h3>
             </div>
         </a>
 
-        <a href="./projects/Plant care/index.html" class="card" target="_blank">
+        <a href="./projects/githubProfileViewer/index.html" class="card Miscellaneous " target="_blank">
             <div class="card-cover">
-                <img src="data:image/jpeg;base64,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"
-                    alt="plant">
+                <img src="./assets/image/logo.png" alt="">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Interactive Virtual Plant Care Guide</h3>
-                <p class="card-description">
-                    The best guide for your gardening journey!
-                </p>
-            </div>
-        </a>
+                <h3 class="card-heading">Github Profile Viewer</h3>
 
-        <a href="./projects/Data visualisation/index.html" class="card" target="_blank">
-            <div class="card-cover">
-                <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUSEhMWFRUXFxYWFRgVFxcYFxYYFxUXGBcXFRcYHSggGBolHRUWITEhJSkrLi4uFx8zODMsNygtMCsBCgoKDg0OGxAQGy0lICYtLS8tLS8tLS0tLS8tLS0tLystLS0tLS0tLS0tLi0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAKgBLAMBEQACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAADBAECBQYAB//EAEMQAAEDAgQDBQYCBwYGAwAAAAEAAhEDIQQSMUEFUWEicYGRoQYTMkKx8FLBByNigtHh8RQzcpKisiRTY7PC4jRkk//EABsBAAIDAQEBAAAAAAAAAAAAAAECAAMEBQYH/8QAOxEAAQMCAwUHAwMDBAIDAQAAAQACEQMhBBIxQVFhcfAFE4GRobHBIjLRUuHxFDNCBiNiknLCNILSJf/aAAwDAQACEQMRAD8A+GoqKUVFMKKKYRUUwiophFRSAoophRRTCKisAogphRRSAigi0xYpwq3m4XmtPVREwn8TwmsymHuova28vIkXiJEdnfXWVmp4mi+oWNeCd3Wqvq0alNgzMIPPytshI5e5asqy5ivZUCEQ5RCCaVMKIL0KKKYUUXoUUXoUhBTCKimFIUJhdO3hNB3D6b2UnuxdSqWNIfDCA55jKTHwMPiuXTq4l/aZoNIyBsxF5gbea2VqTKOBGKeYExt3rma9BzHFjwWuBgg6grrOaWmCucyoHtDmmQUOEsJ5UQpCK9CiiiEFJUQoivQopKqQgjKghRGVUtURVCFEVWEIRQwqkykIqKyKimFFFMIqKYUUUgIoKQFFFYBRRWAUUlSAilJUgIoIlN0bJgUrmynuAs/XWu8MqGmOdQU3Fg75FusLNi47qDpInlIn014LbgXf707QDHODC1OJ4inQ93WwtcveR+sBeX5xE/rWk6G4LTz6LoY3BYZ9IMAHCNRxG4hcHCYnGVajxiARx/fbzWdxPA5az2sHZmWgEEgOAcGxM2zRpssmDc6rQa83O3wt66qyhiA+mHO18dluSTfSI1BHeCPqr3ArQxwJsZ8UOEitKkBRBaPB+FGu8NnKDm7WvwgEgDc9pvmrqFLvX5J49eSy43EHDUu9ibx4onE+CuovyEySAWmLOEx4RvPhKNagaboKrw2PZXp5x48FmvZBI5EhUrY10iVWFEZUwpCEpupRp+6a5ufPMPnLl+aMsX2vKsyjLKyio81S0xl2azs12LqMAz/hcEP/ALDj/wB9cvAie2X/APiP/VdjtV0dgt5n3KxOOcOqGpWrBs02vILszbQQ34ZzaxtuuzXY4vc7ZK8/g8RSbTp0ifqI0g89Yj1WMWHWFnhdCRsVYUUlehRRRCkKKCEIRlRCEIyohRSVBCEJpUEKIyqOCCKGQiihBUKxWCKikIqKUVFKiikIoKwCiCe4ZlkhwYZFs4Ma7EAwraYBtbxWfEFwAInwTmIwzHA5GU80WyYgGDzLXwm7q1o8CqhioP1ZgOLT7iUk7h9Ua03+DSR5hL3bhsVoxNF2jx5/lCLCDBBB5EXSwrQ4ESCruoOGrSIiZBGumqkISDoVUBFRXBg2sQbEWIjQhHgoDBkJ1nEBmzvpU3v1zODrmZl7WuDXnvF95VPcCMrXOA3CPSRI8DyVWJa6sZzEb4i/jEg8Qpq4tjyXVGBziZc7M4Ek7wLLUzu2NDA2wWdtGpTGWm6ANBY/ug1XD5C8DkSCPQ6eCjiNisZmn6wJ3oBCrhXgryikpnC4kstqJzWJaQQIlrhoYt18BCwQ7MwwetR0fVO17ILKjczTs08j+xHDRXr43M7MQTylziQOWY3KtlxAzmTvWZ7KWY923K0nTchl7I+EzGubf80CEzSAEBSEC5P8QwApspPa8u940uILYykZbamfi9Fa+llAO9ZqGIdVc9pEZTGszr+FOFwj6rQyk0vdMwI2zcz1RDSRZJUrMpOL6hgb/JdRw9v6nAN/6tUnwbWXI7Nv2xVPAewXY7ZMdhM6/wAv3WTiHf8AD4t34sS7/uMXcmWVD/yPwvPgRiKA3Ux7FN4zhT6uFwrGvaCW5+2crQMkm9/xDzXPo40Yis7DNEZNsro4rAjAU/617p7zYBcet1ymIpFjnMJEtcWmDIJaSDB3FlcRBhRj87Q4bQD5ocIJ5XoUhSUWnhHuGZrHOAMEtBN+Vu8IhpNwEpqMaYJCA9pBggg8jYpYTgyJCiFFFBCEIqIQIRBVHBBPKGQimCCAqArVIRUUhFRFfRcLEG2vkD9CEAQU7qT26jrX5VcqZVwpARQVgFEEzgx2hrvpmnT9gSnZcqiv9n8fNlsezTKDa5GIDDmb2Pedps5hIdmAgkbnqtuHDA454uubj3V3UQaM2N4sY4R8KvFKdFteqKBaGSLgkAGASGlp0mVXVFMVDk0TYc1nUWGsDN93qCs/EPcQJcXDaX5wJ5XkaKlxK20WtBMCDyhXpYt7QQDYxr00hKHFO6m0r1atm1F+YgedpKJMoNblQHj8vogmlQAioSrik7kR32+qICQ1G717L9/0UhTvFFvuVIRz8FBcEEJK86qIU0KNyFX3reaOYJcjtyu0g6FEJTIWvwKhh3Ct78VDFJzqfuy0EOG7s2rdFh7QrVqQpmlF3AGZ04RtW7AYE4svAIGVpdfh4FexdRjmYZr3+7ApE5spfJinaBpvddWu8ZWcvwuLQpuD6xaJ+rSY3pnhfE3Pq4eTanTeGxItlaLqUnS9nI+yqxGGZToVo1c5vuVocJrS3Azt793+lw/8ly+yh/8A0qzuXsvQ/wCohl7HotG3/wDQWZV/+C92zsQ7/fP5LrN/sk73H3XnzH9c1u5g9locVr5aeCb/ANEA+IpX/wBJ81weyf8A5WId/wAo9SvT9utnB4dv/GfQKvDo/sWNJA+N0GBaY0PivQMvTeeJXjsRIxlADcFykLKu0vQpCi2eGYY5MwbigJ+LDluXQasJuVopskTDuYWDEVRmyzT00dM670fEvBaWPxdRjSIIxGGI/wBYAhFwBEF5H/k35VdOWnM2kCR+l/wszFYUNPZfQqiJmmSN4gibHwVL2gaEHktdOqXC7XN4H+NElVZGxHeZ8rKshaGmdqGQlhOqEIQmBQyFITApcKgLQrZTyRRgqQilTDK/Vw8Q7aNCOSbKw6hEVaw/y6047EZmIMgzMEntNt2mhpmDyaEppMIi/RlWNxVaQSAYn1AHDYFYPbeWNuI7Li3cGYd3Kd2djke9YfuZ5GPyl/dnkmhZ0bDPDXAmfCJ9RCZhgyq6rC5sBOYrENqNAzEQZh7OWkFpOsm2XYK4vkLHToupumPI/n8rSw7qLgBLWuj5DlE9A4jfoFa3IsVQVmkmCRxv7SszFUSLkGOo/wDISDpzWd4XQw72m3z8a+iXAShaCU8zhj4zPIpt2z/Ee5mpVopHU2WN2MZOVn1Hhp56K7aVAA3JcBYukNcRtDbjx9E+RqqL65I3cNR4myBWrOaS2MsagAD6IGydrA4Tqly8lLKtgBDJKWU8BUJQlPCvSZO4FwLzvN7DS3qOqUk7lABvRRhiY0gmxnUZssgG5uDbVVmoIJ3bPCYV4oGwJsdvDSUs9ltbxJHLtZY79D4p80pSyEvUpxt47d4KSQU/dvA0VqGJe0nI4iRlO8g7QUlRjXiHaC6toValJxNKxIi20HYj1sYS1gcPgBZMQAbWmTJgDYap3VXOgGLaclSMKKYcRNzedJ3BN8HxTWvaZFmlurRcx+IjkraVZrXAnYD8LLiMO6oxzRtIPutPAuyGhmBbkY8OJBABOX5jb+iTAU206xqF33ei09rV6mJwjKIpkZNuszttpog1a4/sFJkiTWJIm4/vNRtstTXf7DRx/K5eQ/1z3bMo/wDVb+Jw7amKw1J05RSk5YBsHRE9Wheaw2Idh8NWrtic9p5j8r2GNwoxWIo4Zxtk2cj+AkaNaOH4oj5qrQJ5F1PXwXqKc9w6dp/C8LWaHdoUgNA0/wDsqe2HA6OFdSbRfUfnp53e8DQWmYgZdRYrj9mY52La9zgBDosu7isK7DkBxFxK5+F0oWVOMq5QCCQd8rntPfLTHorGuIFvlUObmMEegPuE5R4tWGlapHIupv8A97QfVWitU/UfQ+6zuwlE6sHkR7FVxOIL/jbTO8mhld/npkpXHNrHl+EadMM+wn/vI8ikqzWHRo/dqX8niVUQFoYXjb5j8JIhVrRKqQlTIZCiYFKhUBakanRLiAP2b8pIbPmQiSALp6VN1R0N4epA+VWTv6opCXAwVIPQffcjCGbgi03AbfmipLdyKH/d1JRlquIg6adEZshAJVWsPJAJHCAohFVlWATJVpcP4W57c7iKdLd7tD0a3V5V1Ok519AsWIxbGOytGZ24fJ2Jp+KZStRbB/5j4NQ/4RowK36Wfas/d1K16xngNPHes19VzjNyTvqT4qsuJWprWtCr7sDU+Vz/AAQTZidArUcO55imxz+jWlxHkoQlfUawS9wHMwtbC+yWMqfJkHN7g0eQk+iWyw1O1sJT/wAp5CfwPVY2PwTqTy14hzXFrhycIPiCCCDvKpa4Zyzcu0C2rQZiKZlrvQj8+8jYlKjYTlK0zZEogZZ3DhvqIMACOhvO4slBObhHXUJy0ZZ29cPlQHyIygwCBc3lwgm8WJHfuq3fPwr6d7cPleqU5JgdmWgXIOkNuZ1kEjpslLgOd0zGF3K37KzMA8wXAjNEE7C3qdgq+8DRbYrHUy5wzWnTl1s2KamF5GeszeLwfmMCe4RzivOZVhDW6ddfsk6ryPmIja0AGxgWv011nS7BA1HCL6aDYPDo7+IiZud80REzAiRsNPWE1xYJCQbu46RM8eHQU0MU5hsY7v481YHRrdUXmWkg8FpUccXDWf8AEA4jzlXsDDpb0SPxFYWcZ5gO9wU7TxzmODxZ0RIJBiSIF49EtSiKgLXXG4wf39VZTxfdEPawAxqCQdo3x6KW40e6NHtBhcHEDKbiL6DkPJXCpUAy2I8vysfdYQ1BVhwcBEyHW5fSmvaLjAxNUVMsAUwwCeWYyfF2nRYuzMEMJRLCZJJPn/C09o4kYiqHM0AAuPiTHmVkALcsKMD18jH1RBskN1M/cA+oTSgoJA28iR9UJRglBe4nUk96Q3TgAaKkIJlUhBEFUcFITgpMLOFrTOHfGu7HDxuW/wCoNQc2QOfXorqFQMcZ2g+cW9QFoe6oPzkPDSS+JkTLmuab6akeCztNZpaCJFvCxB+CunVbgarajw6HfURre7SLcsw4qanAKmVrmFr5Ju0iIDWkEE6yS4fuojG0pIdYjYfHdwg+KwOwVTKHMgjf/PGR4JSvgKjPiYY5gSPMaLQyqx/2lZHsLHQUEBOkVwFFESmLojVB/wBpXoRSytzBcOZSYKuIbmJ/u6Whd+0/k376LXTogDM/wC5NfFPquNKgYA+527gN5QMVxSq9xOYybANsxo/CxmnibouqEpqeFpsbEeep4k/CA2mDc69ND989O9JCtLiLBXpUXPOUQ0TBJ08YuUQ0nRI57WCTcrreF+y9EAOcfenn8ngBr4oEQuFiO1KxJa0ZfddLgmtp2AAbyAAA7gFWVx6xNS5N1pNG6ELIVyv6QOBipTOJYO0wRU6sFw89WSf3S7olrsMCq3Ueo2hem/0z2kKdQ4OsfoqaH9Lth5HQ/uvmZbqDrp4qSHCQvUvYabyHajVThHbGPibr4gpANvA/CuB+mOI+USiYGUloEPJ59pgda+gyNHe7dVEQZjqVeLiJAEe9/wBlLKRc6LgCc17dq7h3xY+HJK0CJUquLSQ7x8euoTxpaaNaPXpJteY/zbEyjtOfX7+W3RGPg7Ovz+dmqWK1nkSBG0bM62Eu2tvogAiOvH8bfeyTM9dcUn7rzBF50uZI5uMAzPppYGk8uvRI6o1pvr11K8MJ335a+P35pwFQaszbkh1aAvAdAEnUi1pJFhqkLmg3N1e3vC3SAl/fGwFgCSB1MT36BRtjm2oFoK1S7L7sVBDi0OibFpuL7HW2yto1+8Lo5ePXmkr0cjWkg/tP8qx1tYfe61AWusRibL0IoSrMbdRRQVEF6FFF5RRQUEV5rZKGxEXMKrgpCO2yE4IpgkgFlW1E2HefyTBQ6KQikXRcM47TZTbTeHDKIkAEfWVrY+i5obUaD4ArlVsLiA8vpOib6kLTp8Rw9QQajYNiHdm24OaEzMLgswcABHgqH1Me0EGT6+yZqezuHqsPusocR2XNcSB3tBgra7CUXt+jVYG9p4mi8d5JG0EQfOFyfEMEaNV1JxktIE6TIBBHgVyatM03lpXo8NXFekKg2/wgtCQK46Lc4bhW0wa9UTf9Wz8Ttiei2UqQH1OXHxNd1T/YpmP1HcEjjsS6o4lxkn4jtA2HJoTPcXFW0ababQBp1fmpoUdABme4w1vM9en33ANQe/boBqeuvncr+ylSARUaXR2gQQJ5AibeC1nBujW65rO1qcwWmOtiUfgq9Kz6LiB8zO2O8huirLHt1CvFahVu14ncbe6Nw7ijmGabu9p/NuoQsUlfCteIePH911fC+KtrWiHRJH5gql9Oy4eJwjqN9QtehWix0+ioH0lYHsnmn2OHeD6q+mRpsKzEFfPuMfo7xfvycPSmifhLntbAOje0QbXFgbBp3KyNpljy0aaj5C+i0O0m18HTqV5FQfSZB+qNHeVjyQm/o6xgmRhwC5pj327QQdtySdUwovmwO1WM7UwgbBMGR6SDt4oeJ9hsa0n/AIYls60nMfAk6Bji6SA3bdZ6jHtAMXXSw1ehVeW5hHx17rJq0C0uY5paQQHNjK6XXDcpuHHryPIpXODLdc+Q61CDgaxmIG4enX7paq4ktaLxoGiL7kdI3Ow20CtLSC53mfn8DU25jIQ4Btz1p+V4smBAzEQY0IBEW2aIHSyAjabTt38+PnyQqPdH0CTBmJiOXDy+F62NpMBHxOiwAkAyNTNt73/gznbAsdGlUfJdYHzWViMY9wMmByEj+vikmVvZSaxsD90Muc6wNgI5WmdJ8UIAurTmfYbPZVe2BFiTlIIOgg277juhEXQc3KIsdDY+n53Ks7lWAJDdaOCxE9k67df5rTTdNisdWnFwnIVqzyrUhcd6h0UGqNh8JIzOcGMBguO55NAu4/SRJEqqpUynKBJ3fJOwdAFWMp5hmJgb/wAb+pVziWMtTpyfx1IcfBnwjxzd6Xu3u+90cBb118o5JxUYz7RPE/jTzlEp42m//wCQ1ziNH0y1rz+y6QQRyMSOosENGoz+wQOBkjmLyOWh4aqwVqdT+8PEQD47EHGYdsCpTk03W7UFzHfgeRY8wYEjkQQLKT3EllT7hu0I3j5Gw+BNVRgAzs09juPxvQKTb91/K6sf9qSn9wQyEYSyhuCMJwVnhZAtyINPEeoP8EURdq8FEq1eFVGBpD6DqvaHaa3MRazfQnXmrqL2NdDhM6Das2Kp1XMzU3ZQNSdL6X9k+52AMy19N8GARUF4ta4WonDEaEHxXNA7QBEEOHgfwViMasK7PBGMkyST3qEk6pQA3ROcNwfvHhu2rjyA1VlJmZ0KjFV+6pl23ZzTnEMeSTl00Hd47laXPJNlhpYVrGDML7UmX2kgW5Wvr6fWEJTReB117Lp/Y/hstOIeLukM/ZaLE+OncOq34SnbvD4Ljdq4mHdw3Qa8T11ZdGKPL0W2VyM6h7Xjr3j80ICILClcVhadT+9ohx2MCR3GxHgldSDtQr6dWpT/ALb468lbhGGpUHEsvmAGWpJiD8rjfznQKr+nahiqtWu0B2zaPkaey3qdEP8AhkRrNx5rJVwoBsuaS5uuiMcTTojtOyjd0AnvAJCIptYE9Caj4HnElc5xT2u/AZM6uv5BR1ZrbNC6dLs2pUOasZWLi/auq4WeARAADG3F5JMfcqh2JeLAro0+yqJuRpzWa3j1faq4Re7vu6qOIftK1N7OpzIatXB+2DquWnjabcTTFhnEVGSIJp1R2mmFlqNY8XXQour0SMpkcfz+UH2h9lhTpf2zCOdXw0kGW5q1Bxi1VrfimwD7CAOk46ry0xp16Dlfkuvh8tQAkX3a+m087c1w2LxNR1vhG4Gp7zz7z3Roq2tbrr1s65zqtTnP0FuXXueUaJP3UC8i8d06E89D5K3VUlmW/V1UR8szNucyL9Jk89AjfakEf46+vR8V4N5kwZJiTcc/6qcgmET9btddv4916mXDQc/lnXv7kxYDqkbULdPZSygeR8laAqpRmUHA3BGh7twU7RuVT3bCtrA4hze0ACYLSHCR5LSLhYScpsrgg/KAYNxPI7KEKBwJ0QXFzoFzFmjlfQDvPqlgNk+aOYmAmcdwitRANWk9gJIBcIBI1Cpo4mjWJFN4JG471ZUo1KYl7SEuMI8gODHEGYIaYMawd4V2dsxInnvSBromFbC18hMjM1whzfxDv2I1B2KWpTz8CNDu/beE1Ork4g6hFfhsoL2mWEHK70yuGzhmEjxuCChnzfSbG1vWeVuimyZZcNIN/SOd+glC1WqkFCc1GEwKzQFiXRRW6HwPrH5oojQrzQolWtwSq8FwZWbSnKYcGkPjNHxcpOnNQEseKjdRPqsuMqltI0y0ua7WOGi0+INxNRmR/unNkGW5musZtqFfUx73tyvC5OHOGpVM7cwO4wR8FNVfY0j4KoPLM2PUH8ltd2fuclZ283/Nnkf2WdjOA1aXxFh1+FxOhAvIHMLFWpmkQDt3cF1cJi2YoEsBERrbWdN+hTGFpFlJ3N5y+AkH8/NWs+lk71S5vfYkN2Nv49eyRcy8oAq+o1BxdhHIeup9T6JnLPT1JXWYVwYxgvZrRbuXVZDWgLhVAajyeJTdDiH7TvVOHhUPw/AJunxYj5mnvATSCqHYQHYU4OLA6ta7uP8AVQDcVn/pCNCQjitSPyEWmxB2lT6t6ryVRtWnxF7cNRI5Nzu6uiQPAWWPPml/ki+m+pUbR3xPM/hfLOK8WfVdmcT3cu7n3rHUqyvWYXs8UxlAWXUxCyueupTwzRZAdiFWXrQKAVDiEmZWCiisxRJkmTzKVzpuUzKAaIAsvoX6OOMZaopPh1Kt+pqsNw5r7SRpYn1Kw4gx9S106Utgc1xPtTwcYbF1sPmP6uo8MA1LblhAAscpZe95T0nZhIVjmy0OJ8PwBpzusV7ACSGixmSRrePHS0K4XtKV2USQOMzz5cLQquY7WdzYHQSCJLesaDZQAadeqrc52s/xIi447goNF5iZ3gXjwnVX0mg6LLXqPH3T6/KYocNcdlpbSJWB+JaFt8G9mKlZ+RgkxNyGwJib96pxmIpYOn3tcwNNCb7rJKLqmJfkpCT8La4p7B1qDPeHK9vzZJ7PfI06rD2f23hMbVNJhIdsDoE8rny1VmLwmIw7M74jhJjnospvDzkNrx9NPzC73d2XJOIGZKsZr3H+H5qshamG6M1zKV2uzv8AlcAQxh/EM0Oc4bWEG91lLH1rOGVu0ak8LWA33Mi1lqDqdK4OZ3oON7k+Ag71OF4vWYT23PaRD2Pc5zHt5ObNx6jZM/B0XaNAOwgAEcj1O1BmLqtNzI3G4Whw72uxNJ3xB7L/AKtwGUA7MiC0DYCw5LFiOw8JWvBDv1A38ZmTxN+K00e1K9I2gjcRZZfFKDRUJYIY8Cozo13y/unM391dCgSWw7UWPht8RB8VlrgB0t0Nx+PA2QmEhj7mDlBGxvmBPdlPmi9oLmnaJ/HylY4hjtxgfPwlyE6RDITBOFlBYF0UWnv3fSD+SKLdvL914IoIgURRqLiPhJHcSPojKDmtd9wldrg8e9jKJmcwp5p3kRM87BW08RUp1iAbEC3GwXKr4PD1sPDhBaXgEWsM7o3apJ2JNWkXuiSc1ubi0n6JA4vaXu1n3DVufRZh6raVPQNj/q6oPlWxbIa3/DPnA/JaH2aAs+AGZ9V3H9/lIe7VYN1rrthspPEAEm3M7q8iVzW/TEJl2OqGRNptYaK41X71QKFMXhUONqc/RqXvX703c093upGOq27X+1TvH70O4pbvdWZjam7vQfwTCq7egaLNyI3GuEOmYg6DbuCneu3pe5abQu6/SAxxy1AczHt94yDZzS2CR4EHucgXBzQ0cR6W+Vn7PoGk97nC9j4Tf4Xy7F1O0RBFzAOo5T1XPIIEHVenLW5jlBA3HXxSb6qrKsagmolKsCgOSFOEakUhVoC7n2Bwzn4ik39pp8AZP0XPxz8tIrdhgLk7AUp+kTFitxDE1GHs+8ygwTJYxtIkc+0J7gr8M2KY62z7LMfsE9dEgnlC5kwO1B6TfUkkQSJMSI6AhaMpNuutvoqy5rRmv4+JO3dIjgCFaneABmiG9YGYEmZA1kmNupUsyS63Q/gKkZnw1hBJty1/k8Oafw3EMOHdt2U9WuP0C6NGtRyjYuDi8Lig4jU8/wArqeGVsGYjEUpPN4ab9HQVtbUo/qC4FdmMB/tu8p9pS3tjUNI4Y0Hw7M94fTdcZQ0CCOeYrn9rFjqYYbg6ruf6Tpvq1aj3AiIHnM+wXScM49iauHPvXz2SDDWtmRF4C8d2fgKA7TphjdDPkCV7XtxlOh2XVqEXIjzIHysdkl3avY7Dv2X0ML5WYDbLnq9PK57TsSPJ38lQ4QV2KT5bO8JY0+RHqlVkqppHv7kUcwVSyNVFJTje3RI+amcw6scQHDwdlP7ziqD9FUHY63iLjzEjwC0NOekRtbfwOvrHql3CGd7v9o/9k5H1+Hv/AAkFqfM+w/dAITJAhOCZOFkhYF0kWnr6edlEzdVZgUUAlEyHkpKMFEYpKYBPNxjoAJdDYyibCNIBUm8oCk2CItf1180xQxRAyg2iLtBt4EJhYR4qVGZnh51Aj1ndvK38QxpY0km7W8tCf6q5xJA62lYOzg4d4ANHH2CQqMbsTryUaFrxZOUW6IKzarBmIncjRaYXHDiWgwgtp9CgAmLlUi385+iiYFei23qoorDp3iIHqigjAjz+x9wokhdx7N8WpYjDjAYp3u8p/wCGrz/du2Y87C9pOhi1lWXFhnzUDCYI1Gi5j2h9lqlB9RuJljzek4CadUzs/a22o5JxTY8S0q12KrNeHETJ+reuWqYJ8kZT2ZmBpG56LK+k4LezEsMX1QfcFVZDuWgVWzqiU8IVU5aWXW3wjgTqxysDnVPlY1s5hIGvyxMybdUpyhpJKJLw8ANkHbOnhtXW4/itLhNE4dtRrsdUGVxb2m4Zp2J/Hew5kE2AnntwwxNYOqWYNm9PXxBpUy2ncrjhh80ZRMxp2tvl57+a7RwoDMxOk7YF95XLb2gS7K1tyRskiNw8/iEucEYzAXnWevTeZvqoKGybdT8WQdjQRJF+ezZ4zN5kpDE4NzZgEAiDv9ETSgQkZWDrrPMi2vqqC0habFSANSLdP4FLlG1EtdEhb3CMIJGW4tfrF9Fkxz2tMN2ALu9kUXd3mcNSV9J4bQy0NNVi7AHeY9ztzT6kBY/9a1+77Naz9TwPIE/CXZQ7S9sBdfLzU+lc/wAQrBtWp2Gm5BJnUmZ6EaWWN4Ocmeut67uFqDuWjKNNd/8AHCEq7EUyb0wO6bd10sOA1WnO0m4StRwk5RA25phMXSuibKA9RLCsyrGkbjzEH0JQIB1UEt0VKztBGl/OP4KReU4d9IbzQCiihuCKcLICwLpojCoiDBBVmqIppgbFnEGOusaWHNLeVrayllnNB/blvRQzk9ptvrrEX6XS5jtCtGHDvteDztt48LqGP6eUp1TATFNw6pgVMq6ttKaFM/siO6LfQp2uDmSNhIPv7LnUP9rF1KZ/yAcPY+qz8idpgytdemX0yBqs7FsIMzGx2uFqErg/TeyF7sEyXa6WJv1+90VJgRCoWfhJ5SbIJp3oYH8+neSjCYqfvp/NRBWY8ff3oggQm8LUAvYxqSLdMo/kqnyrabRtXS8M9p69JnunZa1I60q4942OTZMg9JyiVncct1pDA5EdiuFVAS7D4nDOcO0cNUa9hDtZFSOzacoGgTDE1Rax5qHC033I0uq4bA8LaHGnjMU0FuR4/s4JLXRLZFr2Qe95F2jzVjKTWmQT5I2EwfCQbf2usRs4MptsY2hyrbRqVDAgJq+OZhWhzgTNtmxRxnjtVtN1HBsbg6ZEE0b1Xd9U38RB6q1mAZ/mZKxntd9SC0QF8yr8KqSSe0bmby7rfdE4cjRXNxbChYXGVaDrT1adPDl3hVhz6WnkrH0qdYTt3hdXwnjNOuQwwx+ga82/dd+S0YerSjKBHBcnG0MQ36iS4b9t+uSdxGGYAXvaS1sEhpDSRNwCQYPWE9cd3Sc8aqvATiMQyjNiYXdcE9k+D4/DEUacHVzs5Fek6N5JHPYtK8TW7RxtKrme70GU9ea9e7BNpfSQlfZngvD8OamGrUqdQBzme+ewEugx25nLcbWHTVc/GYvFV3h7Xlu4AwOua7dTsrLh2OotklokanmPx5JHjvsvh8LWYMO7NTe3M1s5sl9A75mnab23TU8dWrMPe6jbv8NhV3ZwPd5S2IstigGtYA5szyMRC9D/AKYpnLVqg6kDyv8AIXiP9dYpvfUaDrgAu87D2KGKdMmW5gRMzHLVetplxN14Kq6mGSJXAY4hz3uB1c43HMlZ3EyvRUWhrAJ0ASdRsGEouriIMIlHAVHtzNYSJiRH0TBpSOqsaYJQ6uFe34mOHeCEITh7TtQEEy8VEVVRFUcEUwWM1YF1FcKIptuGJyADtP8AhuO1cgb203RVHfAOdJsNeCoxnO0fXklJhbGDNfYncNw57wSxjyACZymDGwOk9JSuJAmD4CVa19HMWuqNaYn6nAe51Q6lFzDDgQRYyIg9UGva4S0yrnUy0B2w6HYiU06rX0ThOHD8DRd0ex3hVflPgfqsGAxYHaNbCP8A84Lf/INHuPZZO06DmUKWNYPskO4tJv5LGxFAgldWIsVpY4PaCNCk8dhDEusN59HAamNO5aKTwRC4uPo92/O3b77vHXmsowLev5gbq0rIL3Q6g8T6d4HJSE7SoInW55fe6IR00UER8XkPu31UU10UltpNhsBqe7+KVEK1BxnkB/pG5H3dQhMDdOscCAA4Cdeg/D1e7zuVkeyLnr9gt7HZrTHWnMqoeZEa/EdNToO7I0+ZSlouTy/Pr7Jg4yAOZ+B/191ZteWETp7s+jmEeTx5Jgy/n8H4U75thwHyPlaGBrAPFx2jPg4Bo9fd+qsokteB4LJ2kG1MM+ODh7exWvi6Etndvq3ceGvmtb7GV57B1J+g+C5biOIp0zD3ATfr3jr03VbqrW/cV02UXvuwSmOD8Jw+Lf7upUDXRmaBq9u5pu0269y4/bHaJwlMOazNO3YOe3rVdrsjAmu4y/LGyLn491k+2Xsc/BkPa7PRcYa7RzTBIa8c4BuLGNtFz+z+0qeMERDxqPkLo4rBOoGRcJDhvF6uU0XuzMI+a5EGbHl3rpVa1TujTOhWfs3B0BjW1ogieVwR8ru/0UMniVODYMqE9RkIvzEkeS4ePA7kzwXpMcQKVt6x+Je09T3lTIG3e8gmTq4lIzAsN3LoP7Rc1ga1osB7Ld43xQU8XQoPdcYegJO7iCT4mQslPCHuXvb+pyxYXHte/K8wTed8rqMRsOTR63/Nes7Ao93gWzqZPmbegC+U/wCrcQa3atQbGw3yE+5KNg8NFKtVIsylUf4hhyD/ADfRdio7K2N642Bp97Xvo2/jsXzKoFWV32oFbU95StFle77ijYd+UTA83tP+ZpCaVS4Sf4+VqV8Q6nbNVsBHbafin5Xgk/CN1RRxAq2HH0jlvWjEYF1G5i0bI37iRsWdxPEmpBcbidaYYTOpJBM6LRlVNORaPWfhMV8Y0sqHM8hw7NMjsUyXDLlIMdkAgQAfVcxmFqNc36WyDd83dztMnbcjyC6z8TRId9RuIDYsDwvs5SsQresCo5FOFhtcsC6sK4cojCcw9aA0y05HAhpiTeZkCYTjSbWOizvYCSLiRrs/lMYis11UPjsZmB0AiOY0FyAUKha6pwsnwwezD5Z+oAx8eq1uEe0bqtcMrECg4Ob7oBoZEENaZE/zjuWfG16ppODLfAVnZXYuCNdoqCT+ok3d5pzH8Oo/rmtqw1jG1KIf8YFw9lvlnLHKbBc+jiKmUHLJJuRp4rtVOz/6PE5c4DHatvqbAjcd+/bpK5gYiF0Q9VOogGJX0n2JxwdhAwi01Ab83E/mvJ9rMe3Gd8wwRlI8P4XZwWGbUw2Q3FwRvnZ6qccwkEt+Jvxc42P3+S9nhcQ3G0e+H3f5Djv5FeMr0ndlYn+kq/23Xpu4fpPEaeW8Ln6rjM/firRa4V1UNe0tdokK9IC/y+eTv5t+n10teHBcWrTdTdHR/f39guZHxWGxG/8AhjVG4SNINwquqQIAA6i8/wAO5K5mbU23K5r8otr11KHlAu7wHPqen31TwludFWCTzJsI9AIRhNKtU/CNNzzP8AopMIzXgMAIBk91p7R7zAaD/iVb2EmQeurq2nVAblcJHX8cL70TD1zDi4izXxbV1QZT/pJj/CkNIQAOHorKeIu4uN4PiTb5VcNTlroyjsgXcNfeNMkaxG+llHEC3joq6YJh0gXA1HtrHGIXm1HZmkm9u69xA2i3ko1saKuu/MCTtF12tN8gPG4B8xothAcF5cF1N9tQVyntTwoEFo27VM9DoPqD3LFUZnbB1HXqvQ4Wv3bw4fa7r0K4qi5zYIJBabQSC0jlyMrnkSIK9JS0kLfbxTEYprm1ajqhBp5QYAAAqAkAQJuJOvPRY6eDpUT/ALTYmfjrcFup4vV1Z1uPju/kouA9nc7nhj2OqNY53umdp7spbmDANXAEmBeGmE+MqijTBeRqBrpO8qjB4qi+vLWODYNyLHkNbp32D42MLin1Q1z4pVGtEx2jlEmdBqqn4M4luSY2qzH4xtJua8Ss3CcKqe8Yx7fidEi7TF3CecAmDyUpltR+VpvKuxGINDDOq1LQ0kcbWC+l8W4NTq13vqU2OgNBLmgk5WNEXHRdCjhmfawQJJ8zK8nV7Qfh8O0vdLso9tq0cLh80ACwgADyAAXXpU2saGiwC8ViK9XEVXVX3c4+ZXSe1OD/ALNwutMZ3hrT++9ojwbPqsRrd7WEaL1eG7P/AKPCGfuOvM/hfFni401C0uNlXTBkJNyMKxMYVokb6ff2VW8wCVGjM8A70xxg6AzHWdoAuWkbFY8GwAk8t3PZ4arqdoVCYaN537LbY4iyQZ0/0/8AqT9F0AVyjx68491OLgSP2yPl+QQOomT0PWLKdVKRMDl7pQoK5DciE4XOB65eZdhTnUzIqzaiIdCmWUQ1iT36pHOJKtpw0QvaqZk3dz9qM0kTrJULxEBFtFxcHO2XXsyRapXV+x2Py03tnR4P+YR/4Fc3tCjne08Pb+V1+zKv0ObuM+f8LYxPES1we3UeRG4Ks7Pc7DulqXtfBUsdQNKqLb9oO8cf4VqtNlZpq0dvjZu093JemAbWbnp+I3L58albAVf6bGf/AFfscOPH227zlOdlvAPfceW/doqgtNaCISbjM79D+R2WlpXPiF4tDJ/F+F3y94+Y9PPkjyR116/CA5s6yDvN/wCaicGNFYtLRA1OvQcuh++aKk71WkyTH339yKDjAlXqvnSIHw2gx1+9ykRU5OyOpnUaCw+rlCLJM10XCgiYscroI7p/JQCUrnQQRvCGQSZJ9UAITueXarruE1M1EHlM/X848Fcw2XBxTctXmsn2g4xhw3L7wOe0khrO1b5mkiw2Nzt1Was9jTI1XVwGHrvYWubA1BNr+8H4XB4rENe8loyzz3XPqODnSF6fCtLKeRxkrR4NhKhhzJnNBj5bb+fdsdUrHAOkmNx66NwrMQ090WwCDqOGz13XBgp5/s9iGVBWaDUh2YmlIe10zLWi8A6QsXe03yw8r6ELXTb3ZDn3Ht+V9KxHA6dU067mhtU02+9cBBeSASXC3anfVNgMGcM0gOlp0H6eA4LkdpYtlZ2QCIcfFM+zvsw2mXRUc9riIFSCWifxAX8U9PDtZV7yLoYzGPxVBtAuBbMkHXgOW3nF09UoF7ydi4+MnQc13KTAAvF46sXvMb+guy9nOBCnFSoO18rfwdT+0suJxGb6G6beK7fZHZXcxWq/dsH6f3WD+mTFRhqVKbvq5u8MaZ9XtS4NsvJ4LodovimG7yvi73wZ5FbHaQuayypUxMiC1tgACBBsIEkalIBBmVfmkRCNhT2h977KVPtKWkPrEL3FT+sPMQPwmdT8wO+xKz4O9PNv/gbltxzj3mQ7OB57c2/el6TZIBnUa9/NzfzWsLA4wDHXkfhUxD5a3qXu33dHKPl2QKLBDj4Drz2pYlLKuQ3FME4XNLkLrryiikIohXaUCnBVw08vK/0SyrQ125S0qJmuViVE8rQ4HislSNnjL46t9RH7yqrMzN5LXga2SrB0Nvx628Vu1ayrY2F1qhlLUcW+k8PpuyuHqORG46LXSqOYczTBXKxmEpYmmaVZstPUjcVuUeIUMTZ5FGtzP9289+x7/VdWniKdaz/pd6HrqV4vE9m4vAXpzUpbv8m/kcvIJPG4KpRd2mlp2Ox6ghWupluqyUsRTrXYUoGoBWyrNtffbcDqmlQG6GGA/wAj+RupKJcUbLlbrd1hI23566eaJKSZPLrrwQxT6Dz/AJoJi5GrU7gZTYAekn1JUKra60yvUKd9D8Lv9p6KAKPdbXaPdQKX7J+/BSFC7iox9I+6nKTBiLxfS3mlqCyag4d5E+y5nETPyN8QT5CSsTiV2KcRaT5/sl30dDrPK194m/puqS1Xhy3fZrhVaq4Gjcgw7N8IEbnXWLjQbKqtRD25SOvzu3q6jjjh3h5dbdc+g2bzsX2vhOFaxrRlaCAJjSYuZjnuhSw7GAQAuficY+q8kuMEm06DcnMVTC2MaSuVXeG3VcExxMMEn0HetIpNAl65f9ZUc7LQEnfsHXQW7wzh7aZzOu7nsO4fmkqVC4QNFrwuEbSOZ13b/wAdStyliVkcxdinXIC+RfpV4t77E5AezSbk/eJl5+g/dW6hT7tk71gxOI76pA0FlwNei4atNwCLbESExMohpCVKCdXZiS24F+8/ldK8ZmlvXqiwZXByipiyXEkamTB/LfxJQZ9DQ0aBM8Z3FxNz1xU0qzQZ03Ft9vhgi/VOCq3McRHXrPsg1njsgRZoFtzqZtrePBRxTtabzvQSUqsAQyUZTALnVyl1l5RReUUVgonCsEE4VgUEwKmVEZV6ahVlMTZbWFxWdt/iFnfx8VXELrUa3eNvqNfz4qXlOExS1ROFmfZP8N9oa1EZARUp706gzMjpN2+C1UcRUp2BtuOi4eO7IwuKOcjK/wDU2x8dh8Vp0uI4Ktrmwr+s1KR7iO03xEBbG4mk/wC76T5hefq9nY7D/bFVv/V3lofAymXcGqFuenlqs/FScHj0v6K8MkS0zyWL+rYHZaktO5whIvpkGCIPI6pSCNVoDgRIUm/oLdEEV4IoK7zJJ0kkxyQSgQIV6LoM3OvqIRFkrhIXh92CiiJYtLSJBjYag6/XzRN9UuhkIZwTdm/fgEuROK7puV7DcKYXSWBwdGt4POPHVKKQmYT1MXUywHQR6hdfwbCuZADYA0NhCZ2HJ2LnjtFjPuN10NOvNhE/fgEn9Kxt3HySv7TrPtSZHE266stHCYafjJ7v5qOeG/YEaWGfUvWf4Dr2ha1ABohojoqSSbldFjW0xlaITLClKsQONcSFCkY+NwIYOXNx6D6wnoUTVfw2qrFYoYenO06L4lxyrLzzla6pus2EH0yVjtrEH4iB0OyzFdFqOyrRILfdun5XZ79MwiNVXlqFwOYRtEfKvLqQYRlM75+FVuEBGp8lpyrEapB0Q34Hk4ffdKQtTCtvCVrUi3WPA/lqlIhXtcHaIJKCshUJQRAQy5GU4CwVzF015RReUUUgqIgqwKCsBVpQRleURRaWqBV1LVHDi05h/UckFoMsdman2VQ4SP6dCotjKjajZCpUH34E/knBSPQKgixEHr3wnBWeoIEFBJTLGVNGs5hzMc5rubSWnzCIMGQqatNtRuV4BG4iVr0fazFCzntqt5VmNf6kZvVaW4qqNs81yanYuEcZa0tP/Ekemnomme1TD/eYSmTzpvfT9O0rhjP1NHt+Vmd2O8f26x8QHfhGbx3BnWliG/4XU3D1AKf+qp/pPoqT2djG6PYeYcPaURnFcEfmxDe+mw/7XphWpHeq3YTGDYw+J+Qitx2D/wCbU/8Ax/8AZN3tLefJVGhi/wBDf+37IzMVhP8AmVT3Uo+rke8pcfJIaWK/S3/t+yMzF4XYV3f5Gj6ym7ynxVZo4naWjzKZpY6l8tCer3n6RCPfN2NVLsPVP3VPIJylxB/yhjB+w2/mf4I967YqnYVn+RJ5n8JzD1C74iXd5t/l09EjnOOpTNpMboFs4F3RVlWtA2Lbou++XckV0wIT9NyWFZnML3EOL08OzM8y4/A0fE89OQ5nZAUy4wFYarWNklcrja73h1Wqe04eDRs1vICfqd106VMU2wF5qviDiK87Ni+dcVfLisdQ3XosMIatfhOGo+7qOIDm3DiL5WaNJAuAb9rmsVN1I1QzEGJAy3Il182mpFoHjy6GMdVp082EAJzGTAJDRGXXfcnf781WDBUIaSWyYO5EmD9Fe0QYS1HZgHAQYEjZMXR2OgDuG38VcsxElL4nEkRCRxVtOkNqUPaJmZ7/AEuk1V4hosqVWQAb35i3gZQKZpkwgFyRWQhFyKcBYy5y6C8oovKKLyiikFREFWBQTgqQUEy0qkSTfT5om3uz8wnQ7x06kp6RgpplAOg5dS3STYuE+jgPBVldJgzRI1j3/dVZgCO00mYBIIn5Sbx1BjX0uZVbabmwWax8L1dsGDrcWvrlEyBp2t4TC6sruLbHrT8pcttaYyzbT43ctoadeSYBZQ8EEDq5KA8EGCIPVOFS8EWKrKZVEqEUhXkUpVgikKKwJwqHpqkE4WZyeohOFmcU7RThZnrQoKwLM5P0SnCzPWjhiiqZutvBJSFY1y2sKkVklZ/F/allGWUoqVdIHwsP7ZGp/ZHjCIbKZsgSdFj4Br6tQ1azi553OgGwA2A5LZSYAFzMbiCbBN8ZqxTKtNgsWEbLwvmvEnGTC5tTVevw4ELPdUI1VWYhaw0FQMR9hQPRNNGZjiN/MBMKirNAFUr1s5m2kW/moXSmYzIIVajiZJMmd9e9QotAEAIWIIm0R0n80rinYDF0u5ySVaAgucpKsAWflWQBa5XsimVSV7IplUlRlQyoqIQhRehSFFMoEJgVohuw5c2g6DZrgTOTz70pVtNwHX7hPYXEZYL7gAEy1x0NM7zaQbjr3JS2Vup4hoidnPhz4rSa9sEEi4A1bsTq0HqLpYKt7+kWws3iVVrqmUAzmaL/AOISQYM/DqPCU7AQFTjMRTqQG7P2/HBKNmACNhrcwBUOhzGPAfmrVz2vEwevdLPMQPS/MnfwRCbNaAqyigolFKpBUQKsCmVZRWJwqHJykU4WZydolOFmcnqJThZnp+gnCyvWjQVgWV60sOE4CzlwBRH+0FGl82d34WX83aDzSOhaadKo68RxNv39Fm4v2gxFfsj9VTPysNyP2nanwgIBsrTDaYVsDgwIVzQsFasSujwVgtDdFya1ysr2gxXZIS1XQFtwNK8rhMW+657jdempNslCUivAVCgmVHAJYCYSqEBCEygvRlTKhvelJVgCC9yCcBCJQlWAL//Z"
-                    alt="data">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Interactive Data Visualization Dashboard</h3>
                 <p class="card-description">
-                    Visualises the data
+                    Generates QR code
                 </p>
             </div>
-        </a>
 
-        <a href="./projects/3D product showcase/index.html" class="card" target="_blank">
-            <div class="card-cover">
-                <img src="data:image/jpeg;base64,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"
-                    alt="Product display">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">3D product display</h3>
-                <p class="card-description">
-                    Displays the product in third dimension
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/githubProfileViewer/index.html" class="card Miscellaneous " target="_blank">
-            <div class="card-cover">
-                <img src="./assets/image/logo.png" alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Github Profile Viewer</h3>
-                <p class="card-description">
-                    GitHub Profile Viewer enables users to effortlessly explore and analyze GitHub profiles,
-                    highlighting key statistics and contributions.
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Rolling Triumph/index.html" class="card Games " target="_blank">
-            <div class="card-cover">
-                <img src="./assets/image/Rolling_Triumph.jpg" alt="Rolling Triumph">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Rolling Triumph</h3>
-                <p class="card-description">
-                    Dice game web app for strategic scoring.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Saveman Game/index.html" class="card Games " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Saveman.png" class="weather-img" alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Saveman</h3>
-                <p class="card-description">
-                    Guess the word
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Connect4Dot/index.html" class="card Games " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/connect4-dot.png" alt="link tree icon">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Connect-4-Dot</h3>
-                <p class="card-description">
-                    Connect dots and win the game.
-                </p>
-            </div>
-        </a>
-
-
-        <a href="./projects/Dictionary/index.html" class="card Miscellaneous ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/DICT.jpg" alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Dictionary</h3>
-                <p class="card-description">
-                    Dictionary app
-                </p>
-            </div>
-        </a>
-
-
-        <a href="./projects/FlashCard Quiz App/index.html" class="card Games " target="_blank">
-            <div class="card-cover">
-                <img src="./projects/Flashcard Quiz App/image/image.png" alt="Flashcard Quiz App logo">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Flashcard Quiz App</h3>
-                <p class="card-description">
-                    Create and review flashcards for effective learning.
-                </p>
-            </div>
-        </a>
-
-
-
-        <a href="./projects/weather/index.html" class="card Miscellaneous " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/weather.jpg" class="weather-img" alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Weather</h3>
-                <p class="card-description">
-                    Check weather
-                </p>
-            </div>
-        </a>
-
-
-        <a href="./projects/Currency Convertor/index.html" class="card Mathematical " target="_blank">
-            <div class="card-cover ">
-                <img src="./assets/image/currency.jpg" alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Currency Convertor</h3>
-                <p class="card-description">
-                    Convert currencies from different countries
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Brick Breaker/index.html" class="card Games " target="_blank">
-            <div class="card-cover">
-                <img src="assets/image/brick.png" alt="Brick Breaker">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Brick Breaker</h3>
-                <p class="card-description">
-                    A Brick Breaker Game.
-                </p>
-            </div>
-        </a>
-
-        <a href="projects\TRIVIA\index.html" class="card Miscellaneous " target="_blank">
-            <div class="card-cover">
-                <img src="./assets/image/TRIVIA.png" alt="trivia">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">TRIVIA</h3>
-                <p class="card-description">
-                    Test Your Knowledge
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/geography quiz/index.html" class="card Miscellaneous " target="_blank">
-            <div class="card-cover">
-                <img src="./assets/image/geography.png" alt="wordle logo">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">GeoQuest</h3>
-                <p class="card-description">
-                    Explore the World, One Chenge at a Time! </p>
-            </div>
-        </a>
-
-        <a href="./projects/Lorem_ipsum/index.html" class="card Generators ">
-            <div class="card-cover">
-                <img src="./assets/image/lorem_ipsum.png" alt="Lorem_ipsum">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Lorem Ipsum Generator</h3>
-                <p class="card-description">
-                    Guess the word in 6 attempts
-                </p>
-            </div>
-        </a>
-
-        <!-- Cow and Bull Game -->
-        <a href="./projects/Cow and Bull Game/index.html" class="card Games " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/cow.png" alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Cow and Bull Game</h3>
-                <p class="card-description">
-                    A classic number-guessing game.
-                </p>
-            </div>
-        </a>
-
-        <a href="projects\Whack a mole\index.html" class="card Games ">
-            <div class="card-cover">
-                <img src="assets\image\mole logo.png" alt="Whac a mole logo">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Whack a Mole</h3>
-                <p class="card-description">
-                    Smash moles, score big fun!
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Pokedex/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Pokedex.jpg" alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Pokedex</h3>
-                <p class="card-description">
-                    Find Details of your favorite Pokemon
-                </p>
-            </div>
-
-        </a>
-
-        <a href="./projects/Super Mario/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/supermario.png" alt="Super Mario">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Super Mario</h3>
-                <p class="card-description">
-                    A Popular Game.
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Magic8B/index.html" class="card Miscellaneous " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./projects/Magic8Ball/magic8ball.png" alt="magic8ball">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Magic 8 Ball</h3>
-                <p class="card-description">
-                    Think of a question and let Magic 8 Ball decide the answer for you.
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Rock Paper Scissors/index.html" class="card Games " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Rock-paper-scissor.png" alt="Rock paper scissor icon">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Rock Paper Scissors</h3>
-                <p class="card-description">
-                    Choose your move Tie!
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Password manager/index.html" class="card Security ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Password-manager.png" \ alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Password manager</h3>
-                <p class="card-description">
-                    Manage your passwords
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/eye that follow/index.html" class="card Miscellaneous ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/ETE.jpg" \ alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Eye that follow</h3>
-                <p class="card-description">
-                    EYE THAT FOLLOW YPOUR MOUSE
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Notes Taking Website/index.html" class="card Websites ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Notes.webp" alt="Notes Taking">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Notes Taking</h3>
-                <p class="card-description">
-                    To write notes.
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Dice Game/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/dice_game.png" alt="Dice Game">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Dice Game</h3>
-                <p class="card-description">
-                    The Player who gets the more number on the dice wins.(Just Refresh Me!!)
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Slide Puzzle/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/slide.png" alt="Slide puzzle">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Slide Puzzle</h3>
-                <p class="card-description">
-                    A Slide Puzzle game
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Flappy Bird/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/flappybird.png" alt="Flappy Bird">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Flappy Bird</h3>
-                <p class="card-description">
-                    A fun game.
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Doodle Jump/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/doodle.png" alt="Doodle Jump">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Doodle Jump</h3>
-                <p class="card-description">
-                    Enjoy and Jump.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Email Validator/index.html" class="card Security ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/email.png" alt="Email Validator">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Email Validator</h3>
-                <p class="card-description">
-                    Validate E-MAIL
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Maze/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/maze.jpg" alt="maze game'">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Maze Game</h3>
-                <p class="card-description">
-                    Play exciting maze game
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Tetris_Game/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/tetrsis.jpg" alt="Doodle Jump">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Tetris Game</h3>
-                <p class="card-description">
-                    Arrange fing blocks to clear lines.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Connect4/index.html" class="card Games " target="_blank">
-            <div class="card-cover ">
-                <img src="./projects/Connect4/Connectfour.png" alt="">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Connect4(Two player)</h3>
-                <p class="card-description">
-                    Connect4: Where Strategy Meets Fun, One Disc at a Time!
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Candy Game/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/candy.png" alt="Candy Game">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Candy Game</h3>
-                <p class="card-description">
-                    A Candy game.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Stick Hero/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/stick-hero.png" alt="Stick Hero">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Stick Hero</h3>
-                <p class="card-description">
-                    A fun popular game.
-                </p>
-            </div>
-        </a>
-
-
-
-        <a href="./projects/Among Us/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/amongus.png" alt="Among Us">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Among Us</h3>
-                <p class="card-description">
-                    Find who is imposter.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Joke Generator/index.html" class="card Generators ">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/jokeGenerator.jpeg" alt="Joke Generator">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Joke Generator</h3>
-                <p class="card-description">
-                    Find who is imposter.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Train Track Game/index.html" class="card Games ">
-
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/traintrack.png" alt="Train Track Game">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Train Track Game</h3>
-                <p class="card-description">
-                    A Train Track Game which is created by Three Js.
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Building Block/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/buildingblock.png" alt="Building Block">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Building Block</h3>
-                <p class="card-description">
-                    A Building Block Game.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Lamb Lane/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/lamblane.png" alt="Lamb Lane">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Lamb Lane</h3>
-                <p class="card-description">
-                    A Lamb Lane Game.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Cut The Rope/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/cutrope.png" alt="Cut The Rope">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Cut The Rope</h3>
-                <p class="card-description">
-                    Cut the rope in game.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/url shortener/index.html" class="card Security ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/url.png" alt=" Url Shortner">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading"> Url Shortner</h3>
-                <p class="card-description">
-                    Url Shortner
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Email Validator/index.html" class="card Security ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/email.png" alt="Email Validator">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Email Validator</h3>
-                <p class="card-description">
-                    Validate E-MAIL
-                </p>
-            </div>
-        </a>
-        <a href="./projects/New Year Countdown/index.html" class="card Mathematical ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/n.jpg" alt="new">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">New Year Countdown</h3>
-                <p class="card-description">
-                    New year countdown
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Bill Splitter/index.html" class="card Mathematical ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/sew.jpg" alt="bil ">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Bill Splitter</h3>
-                <p class="card-description">
-                    Split your bills
-                </p>
-            </div>
-        </a>
-
-
-        <a href="./projects/Password Strength/index.html" class="card Security ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/password.png" alt="Email Validator">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Password Strength</h3>
-                <p class="card-description">
-                    Check Your Password's Strength.
-
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Mole Bop/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/mole-bop.png" alt="Mole Bop">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Mole Bop</h3>
-                <p class="card-description">
-                    Catch the Bop.
-                </p>
-            </div>
-        </a>
-        <a href="./projects/Virtual Keyboard/index.html" class="card Miscellaneous ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/vc.jpg" alt="Virtual Keyboard'">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Virtual Keyboard</h3>
-                <p class="card-description">
-                    Virtual Keyboard
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/2048 Game/index.html" class="card Games " target="_blank">
-            <div class="card-cover">
-                <img src="./assets/image/2048.png" alt="2048">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">2048</h3>
-                <p class="card-description">
-                    2048 is an easy and fun puzzle game.
-                </p>
-            </div>
-        </a>
-
-        </a>
-
-        <a href="./projects/wordle/index.html" class="card Games ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/w.png" alt="wordle'">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Wordle</h3>
-                <p class="card-description">
-                    Enjoy the popular game
-                </p>
-            </div>
-        </a>
-
-
-        <a href="./projects/Minesweeper/index.html" class="card Games " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/minesweeper.jpeg" alt="Minesweeper">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Minesweeper</h3>
-                <p class="card-description">
-                    Classic Minesweeper game.
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Space Collision Game/index.html" class="card Games " target="_blank">
-            <div class="card-cover ">
-                <img src="./projects/Space Collision Game/img/pixel-art-coin-money-icon-game.png"
-                    alt="a coin representing how to win the game">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Space Collision Game</h3>
-                <p class="card-description">
-                    Space Collision: Catch Coins and avoid Enemies to Score
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/pionoGame/index.html" class="card Miscellaneous " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/piano.png" alt="pianoImage">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Piano</h3>
-                <p class="card-description">
-                    Experience the most realistic virtual piano.
-                </p>
-            </div>
-        </a>
-
-        <a href="./projects/Word Scramble Game/index.html" class="card Games " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/word scramble.png" alt="Word Scrable Image">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Word Scramble</h3>
-                <p class="card-description">
-                    A fun Word Scramble Game where players rearrange jumbled letters to form correct words within a time
-                    limit.
-                </p>
-            </div>
-        </a>
-
-        <!-- =========================== Bubble Hit Game ================================= -->
-        <a href="./projects/Bubble Hit  Game/" class="card Games " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/bubbleposter.png" alt="bubblePoster">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Bubble Hit Game</h3>
-                <p class="card-description">
-                    Tap the Right Bubble, Beat the Clock!"
-                </p>
-            </div>
-        </a>
-        <!--============================== End =========================================== -->
-
-        <a href="./projects/Chatbot/index.html" class="card Miscellaneous " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/chat-7767693_1280.jpg" alt="chatbot">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Chatbot</h3>
-                <p class="card-description">
-                    A simple chatbot. <br>
-                    <strong> Please use your own google gemini api key for the chatbot to work. </strong>
-                </p>
-            </div>
-        </a>
-            <!--============================== End =========================================== -->
-            <a href="./projects/Random Image Gen/index.html" class="card Generators ">
+        </a> 
+            
+            <a href="./projects/Age calculator/index.html" class="card Mathematical " target="_blank">
+                <div class="card-cover">
+                    <img src="https://play-lh.googleusercontent.com/20EpPSOwFTiDv-ntlpR017NmHJsB1E5eGFIu9BMT_j7RC_IiHsJuuNq2V-8h6wM42d_a"
+                        alt="Image Generator logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Age calculator</h3>
+                    <p class="card-description">
+                        Calculates age
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Password Toggle/index.html" class="card Security " target="_blank">
+                <div class="card-cover">
+                    <img src="https://cdn-icons-png.flaticon.com/512/5582/5582931.png" alt="Password Generator logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Password Toggle</h3>
+                    <p class="card-description">
+                        Toggles password
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Habit tracker/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="https://png.pngtree.com/png-clipart/20220922/ourmid/pngtree-orange-habits-lettering-png-image_238400.png"
+                        alt="habits logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Habit tracker</h3>
+                    <p class="card-description">
+                        Tracks habits
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Creative writing/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS325y5j-qCXu3eyEupAGOLRpuzNwnlukvjGw&s"
+                        alt="creative writing logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Creative writing</h3>
+                    <p class="card-description">
+                        Generates creative writing prompts
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Plant care/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="data:image/jpeg;base64,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"
+                        alt="plant">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Interactive Virtual Plant Care Guide</h3>
+                    <p class="card-description">
+                        The best guide for your gardening journey!
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Data visualisation/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="data:image/jpeg;base64,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"
+                        alt="data">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Interactive Data Visualization Dashboard</h3>
+                    <p class="card-description">
+                        Visualises the data
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/3D product showcase/index.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="data:image/jpeg;base64,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"
+                        alt="Product display">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">3D product display</h3>
+                    <p class="card-description">
+                        Displays the product in third dimension
+                    </p>
+                </div>
+            </a>
+            
+            
+            <!-- START -->
+            <a href="./projects/githubProfileViewer/index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover">
+                    <img src="./assets/image/logo.png" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Github Profile Viewer</h3>
+                    <p class="card-description">
+                        GitHub Profile Viewer enables users to effortlessly explore and analyze GitHub profiles,
+                        highlighting key statistics and contributions.
+                    </p>
+                </div>
+            </a>
+            
+            
+            <a href="./projects/Rolling Triumph/index.html" class="card Games " target="_blank">
+                <div class="card-cover">
+                    <img src="./assets/image/Rolling_Triumph.jpg" alt="Rolling Triumph">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Rolling Triumph</h3>
+                    <p class="card-description">
+                        Dice game web app for strategic scoring.
+                    </p>
+                </div>
+            </a>
+            <a href="./projects/Saveman Game/index.html" class="card Games " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/Saveman.png" class="weather-img" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Saveman</h3>
+                    <p class="card-description">
+                        Guess the word
+                    </p>
+                </div>
+            </a>
+            <a href="./projects/Connect4Dot/index.html" class="card Games " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/connect4-dot.png" alt="link tree icon">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Connect-4-Dot</h3>
+                    <p class="card-description">
+                        Connect dots and win the game.
+                    </p>
+                </div>
+            </a>
+            
+            
+            <a href="./projects/Dictionary/index.html" class="card Miscellaneous ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/DICT.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Dictionary</h3>
+                    <p class="card-description">
+                        Dictionary app
+                    </p>
+                </div>
+            </a>
+            
+            
+            <a href="./projects/FlashCard Quiz App/index.html" class="card Games " target="_blank">
+                <div class="card-cover">
+                    <img src="./projects/Flashcard Quiz App/image/image.png" alt="Flashcard Quiz App logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Flashcard Quiz App</h3>
+                    <p class="card-description">
+                        Create and review flashcards for effective learning.
+                    </p>
+                </div>
+            </a>
+            
+            
+            
+            <a href="./projects/weather/index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/weather.jpg" class="weather-img" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Weather</h3>
+                    <p class="card-description">
+                        Check weather
+                    </p>
+                </div>
+            </a>
+            
+            
+            <a href="./projects/Currency Convertor/index.html" class="card Mathematical " target="_blank">
+                <div class="card-cover ">
+                    <img src="./assets/image/currency.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Currency Convertor</h3>
+                    <p class="card-description">
+                        Convert currencies from different countries
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Brick Breaker/index.html" class="card Games " target="_blank">
+                <div class="card-cover">
+                    <img src="assets/image/brick.png" alt="Brick Breaker">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Brick Breaker</h3>
+                    <p class="card-description">
+                        A Brick Breaker Game.
+                    </p>
+                </div>
+            </a>
+            
+            <a href="projects\TRIVIA\index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover">
+                    <img src="./assets/image/TRIVIA.png" alt="trivia">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">TRIVIA</h3>
+                    <p class="card-description">
+                        Test Your Knowledge
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/geography quiz/index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover">
+                    <img src="./assets/image/geography.png" alt="wordle logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">GeoQuest</h3>
+                    <p class="card-description">
+                        Explore the World, One Chenge at a Time! </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Lorem_ipsum/index.html" class="card Generators ">
+                <div class="card-cover">
+                    <img src="./assets/image/lorem_ipsum.png" alt="Lorem_ipsum">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Lorem Ipsum Generator</h3>
+                    <p class="card-description">
+                        Guess the word in 6 attempts
+                    </p>
+                </div>
+            </a>
+            
+            <!-- Cow and Bull Game -->
+            <a href="./projects/Cow and Bull Game/index.html" class="card Games " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/cow.png" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Cow and Bull Game</h3>
+                    <p class="card-description">
+                        A classic number-guessing game.
+                    </p>
+                </div>
+            </a>
+            
+            <a href="projects\Whack a mole\index.html" class="card Games ">
+                <div class="card-cover">
+                    <img src="assets\image\mole logo.png" alt="Whac a mole logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Whack a Mole</h3>
+                    <p class="card-description">
+                        Smash moles, score big fun!
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Pokedex/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/Pokedex.jpg" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Pokedex</h3>
+                    <p class="card-description">
+                        Find Details of your favorite Pokemon
+                    </p>
+                </div>
+            
+            </a>
+            
+            <a href="./projects/Super Mario/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/supermario.png" alt="Super Mario">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Super Mario</h3>
+                    <p class="card-description">
+                        A Popular Game.
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Magic8B/index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./projects/Magic8Ball/magic8ball.png" alt="magic8ball">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Magic 8 Ball</h3>
+                    <p class="card-description">
+                        Think of a question and let Magic 8 Ball decide the answer for you.
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Rock Paper Scissors/index.html" class="card Games " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/Rock-paper-scissor.png" alt="Rock paper scissor icon">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Rock Paper Scissors</h3>
+                    <p class="card-description">
+                        Choose your move Tie!
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Password manager/index.html" class="card Security ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/Password-manager.png" \ alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Password manager</h3>
+                    <p class="card-description">
+                        Manage your passwords
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/eye that follow/index.html" class="card Miscellaneous ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/ETE.jpg" \ alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Eye that follow</h3>
+                    <p class="card-description">
+                        EYE THAT FOLLOW YPOUR MOUSE
+                    </p>
+                </div>
+            </a>
+            
+            
+            <a href="./projects/Notes Taking Website/index.html" class="card Websites ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/Notes.webp" alt="Notes Taking">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Notes Taking</h3>
+                    <p class="card-description">
+                        To write notes.
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Dice Game/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/dice_game.png" alt="Dice Game">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Dice Game</h3>
+                    <p class="card-description">
+                        The Player who gets the more number on the dice wins.(Just Refresh Me!!)
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Slide Puzzle/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/slide.png" alt="Slide puzzle">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Slide Puzzle</h3>
+                    <p class="card-description">
+                        A Slide Puzzle game
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Doodle Jump/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/doodle.png" alt="Doodle Jump">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Doodle Jump</h3>
+                    <p class="card-description">
+                        Enjoy and Jump.
+                    </p>
+                </div>
+            </a>
+            <a href="./projects/Email Validator/index.html" class="card Security ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/email.png" alt="Email Validator">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Email Validator</h3>
+                    <p class="card-description">
+                        Validate E-MAIL
+                    </p>
+                </div>
+            </a>
+            <a href="./projects/Maze/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/maze.jpg" alt="maze game'">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Maze Game</h3>
+                    <p class="card-description">
+                        Play exciting maze game
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Tetris_Game/index.html" class="card Games ">
                 <div class="card-cover counter-cover-colour">
-                    <img src="assets/image/randomi.png" alt="Brick Breaker">
+                    <img src="./assets/image/tetrsis.jpg" alt="Doodle Jump">
                 </div>
                 <div class="card-content">
-                    <h3 class="card-heading">Random Image Generator</h3>
+                    <h3 class="card-heading">Tetris Game</h3>
                     <p class="card-description">
-                        A Random Image Generator Website
+                        Arrange fing blocks to clear lines.
                     </p>
                 </div>
             </a>
+            
 
-<!-- =========================== Shooter Game ================================= -->
-<a href="./projects/Shooter_Game/index.html" class="card Games ">
-    <div class="card-cover counter-cover-colour">
-        <img src="./assets/image/Shooter_game.png" alt="Shooter Game" style="width: 10rem; height: auto;">
-    </div>
-    <div class="card-content">
-        <h3 class="card-heading">Shooter Game</h3>
-        <p class="card-description">
-            Take aim and unleash your skills in shooter experience!
-        </p>
-    </div>
-</a>
-<!-- =========================== End Shooter Game ================================= -->
-
-        <a href="./projects/Relaxio" class="card Miscellaneous ">
-            <div class="card-cover">
-                <img src="./projects/Relaxio/images/icon128.png" alt="relaxio image">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Relaxio Stress Buster</h3>
-                <p class="card-description">
-                    Keep calm and just relax.
-                </p>
-            </div>
-        </a>
+            <a href="./projects/Candy Game/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/candy.png" alt="Candy Game">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Candy Game</h3>
+                    <p class="card-description">
+                        A Candy game.
+                    </p>
+                </div>
+            </a>
 
-        <a href="./projects/leet_code/index.html" class="card Generators " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/leetcode.png" alt="LeetCode Question Generator">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">LeetCode Question Generator</h3>
-                <p class="card-description">
-                    Generate random LeetCode questions for practice.
-                </p>
-            </div>
-        </a>
+            <a href="./projects/Stick Hero/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/stick-hero.png" alt="Stick Hero">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Stick Hero</h3>
+                    <p class="card-description">
+                        A fun popular game.
+                    </p>
+                </div>
+            </a>
 
-        <a href="./projects/Photo Gallery/index.html" class="card Miscellaneous ">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/photo-gallery.jpg" alt="chatbot">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Photo Gallery</h3>
-                <p class="card-description">
-                    List all the random Photos.
-                </p>
-            </div>
-        </a>
+            <a href="./projects/Among Us/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/amongus.png" alt="Among Us">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Among Us</h3>
+                    <p class="card-description">
+                        Find who is imposter.
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Lamb Lane/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/lamblane.png" alt="Lamb Lane">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Lamb Lane</h3>
+                    <p class="card-description">
+                        A Lamb Lane Game.
+                    </p>
+                </div>
+            </a>
 
-        <a href="./projects/netflix-clone/index.html" class="card Websites " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/netflix-clone.jpg" alt="chatbot">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Netflix Clone</h3>
-                <p class="card-description">
-                    A UI-based Clone of the popular mainstream service "NETFLIX".
-                </p>
-            </div>
-        </a>
-                
+            <a href="./projects/Cut The Rope/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/cutrope.png" alt="Cut The Rope">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Cut The Rope</h3>
+                    <p class="card-description">
+                        Cut the rope in game.
+                    </p>
+                </div>
+            </a>
 
-    
- <!-- =========================== Recipe Book ================================= -->
-     <a href="./projects/Recipe Book/index.html" class="card" target="_blank">
-        <div class="card-cover counter-cover-colour">
-            <img src="./assets/image/recipe.webp" alt="recipebook">
-        </div>
-        <div class="card-content">
-            <h3 class="card-heading">Recipe Book</h3>
-            <p class="card-description">
-                Gather Delicious Secret Recipes!
-            </p>
-        </div>
-    </a>
-<!-- =========================== ================================= -->
-    <!-- </section> -->
-    
-    <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
+            <a href="./projects/url shortener/index.html" class="card Security ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/url.png" alt=" Url Shortner">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading"> Url Shortner</h3>
+                    <p class="card-description">
+                        Url Shortner
+                    </p>
+                </div>
+            </a>
 
-            <!-- =========================== Recipe Book ================================= -->
+            <a href="./projects/Email Validator/index.html" class="card Security ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/email.png" alt="Email Validator">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Email Validator</h3>
+                    <p class="card-description">
+                        Validate E-MAIL
+                    </p>
+                </div>
+            </a>
 
-            <a href="projects/Tennis Game/index.html" class="card Games " target="_blank">
+            <a href="./projects/New Year Countdown/index.html" class="card Mathematical ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/n.jpg" alt="new">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">New Year Countdown</h3>
+                    <p class="card-description">
+                        New year countdown
+                    </p>
+                </div>
+            </a>
 
+            <a href="./projects/Bill Splitter/index.html" class="card Mathematical ">
                 <div class="card-cover counter-cover-colour">
-                    <img src="/assets/image/Tennis game.png" alt="Tennis" style="width: 10rem; height: auto;">
+                    <img src="./assets/image/sew.jpg" alt="bil ">
                 </div>
                 <div class="card-content">
-                    <h3 class="card-heading">Tennis Game</h3>
+                    <h3 class="card-heading">Bill Splitter</h3>
                     <p class="card-description">
-                        multiplayers Tennis Game
+                        Split your bills
                     </p>
-                      </div>
+                </div>
             </a>
             
- 
+            <a href="./projects/wordle/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/w.png" alt="wordle'">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Wordle</h3>
+                    <p class="card-description">
+                        Enjoy the popular game
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/Space Collision Game/index.html" class="card Games " target="_blank">
+                <div class="card-cover ">
+                    <img src="./projects/Space Collision Game/img/pixel-art-coin-money-icon-game.png"
+                        alt="a coin representing how to win the game">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Space Collision Game</h3>
+                    <p class="card-description">
+                        Space Collision: Catch Coins and avoid Enemies to Score
+                    </p>
+                </div>
+            </a>
+
+            <a href="./projects/Word Scramble Game/index.html" class="card Games " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/word scramble.png" alt="Word Scrable Image">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Word Scramble</h3>
+                    <p class="card-description">
+                        A fun Word Scramble Game where players rearrange jumbled letters to form correct words within a time
+                        limit.
+                    </p>
+                </div>
+            </a>
+
+            <a href="./projects/Bubble Hit  Game/" class="card Games " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/bubbleposter.png" alt="bubblePoster">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Bubble Hit Game</h3>
+                    <p class="card-description">
+                        Tap the Right Bubble, Beat the Clock!"
+                    </p>
+                </div>
+            </a>
+
+
+<a href="./projects/Chatbot/index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/chat-7767693_1280.jpg" alt="chatbot">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Chatbot</h3>
+                    <p class="card-description">
+                        A simple chatbot. <br>
+                        <strong> Please use your own google gemini api key for the chatbot to work. </strong>
+                    </p>
+                </div>
+             </a>
+
+                <a href="./projects/Random Image Gen/index.html" class="card Generators ">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="assets/image/randomi.png" alt="Brick Breaker">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Random Image Generator</h3>
+                        <p class="card-description">
+                            A Random Image Generator Website
+                        </p>
+                    </div>
+                </a>
+
+                <a href="./projects/Rolling Triumph/index.html" class="card Games " target="_blank">
+                    <div class="card-cover">
+                        <img src="./assets/image/Rolling_Triumph.jpg" alt="Rolling Triumph">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Rolling Triumph</h3>
+                        <p class="card-description">
+                            Dice game web app for strategic scoring.
+                        </p>
+                    </div>
+                </a>
+                <a href="./projects/Saveman Game/index.html" class="card Games " target="_blank">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/Saveman.png" class="weather-img" alt="">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Saveman</h3>
+                        <p class="card-description">
+                            Guess the word
+                        </p>
+                    </div>
+                </a>
+                <a href="./projects/Connect4Dot/index.html" class="card Games " target="_blank">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/connect4-dot.png" alt="link tree icon">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Connect-4-Dot</h3>
+                        <p class="card-description">
+                            Connect dots and win the game.
+                        </p>
+                    </div>
+                </a>
+        
+        
+                <a href="./projects/Dictionary/index.html" class="card Miscellaneous ">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/DICT.jpg" alt="">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Dictionary</h3>
+                        <p class="card-description">
+                            Dictionary app
+                        </p>
+                    </div>
+                </a>
+        
+        
+                <a href="./projects/FlashCard Quiz App/index.html" class="card Games " target="_blank">
+                    <div class="card-cover">
+                        <img src="./projects/Flashcard Quiz App/image/image.png" alt="Flashcard Quiz App logo">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Flashcard Quiz App</h3>
+                        <p class="card-description">
+                            Create and review flashcards for effective learning.
+                        </p>
+                    </div>
+                </a>
+        
+        
+        
+                <a href="./projects/weather/index.html" class="card Miscellaneous " target="_blank">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/weather.jpg" class="weather-img" alt="">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Weather</h3>
+                        <p class="card-description">
+                            Check weather
+                        </p>
+                    </div>
+                </a>
+        
+        
+                <a href="./projects/Currency Convertor/index.html" class="card Mathematical " target="_blank">
+                    <div class="card-cover ">
+                        <img src="./assets/image/currency.jpg" alt="">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Currency Convertor</h3>
+                        <p class="card-description">
+                            Convert currencies from different countries
+                        </p>
+                    </div>
+                </a>
+
+                <a href="./projects/Brick Breaker/index.html" class="card Games " target="_blank">
+                    <div class="card-cover">
+                        <img src="assets/image/brick.png" alt="Brick Breaker">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Brick Breaker</h3>
+                        <p class="card-description">
+                            A Brick Breaker Game.
+                        </p>
+                    </div>
+                </a>
+        
+                <a href="projects\TRIVIA\index.html" class="card Miscellaneous " target="_blank">
+                    <div class="card-cover">
+                        <img src="./assets/image/TRIVIA.png" alt="trivia">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">TRIVIA</h3>
+                        <p class="card-description">
+                            Test Your Knowledge
+                        </p>
+                    </div>
+                </a>
+        
+                <a href="./projects/geography quiz/index.html" class="card Miscellaneous " target="_blank">
+                    <div class="card-cover">
+                        <img src="./assets/image/geography.png" alt="wordle logo">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">GeoQuest</h3>
+                        <p class="card-description">
+                            Explore the World, One Chenge at a Time! </p>
+                    </div>
+                </a>
+        
+                <a href="./projects/Lorem_ipsum/index.html" class="card Generators ">
+                    <div class="card-cover">
+                        <img src="./assets/image/lorem_ipsum.png" alt="Lorem_ipsum">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Lorem Ipsum Generator</h3>
+                        <p class="card-description">
+                            Guess the word in 6 attempts
+                        </p>
+                    </div>
+                </a>
 
 
-        <a href="./projects/3D Music Visualizer/index.html" class="card Miscellaneous " target="_blank">
+<a href="./projects/Cow and Bull Game/index.html" class="card Games " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/3D_music_visualizer.jpg" alt="music visualizer">
+                <img src="./assets/image/cow.png" alt="">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">3D Music Visualizer</h3>
+                <h3 class="card-heading">Cow and Bull Game</h3>
                 <p class="card-description">
-                    Experience the most realistic 3D music visualizer.
+                    A classic number-guessing game.
                 </p>
             </div>
         </a>
 
-        <!-- =========================== Tip calculator ================================= -->
-        <a href="projects/Tip calculator/index.html" class="card Mathematical " target="_blank">
-
+        
+        <a href="./projects/Pokedex/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/calculator.png" alt="Calculator" style="width: 10rem; height: auto;">
+                <img src="./assets/image/Pokedex.jpg" alt="">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Tip Calculator</h3>
+                <h3 class="card-heading">Pokedex</h3>
                 <p class="card-description">
-                    Quickly calculate tips and total bills with ease.
+                    Find Details of your favorite Pokemon
                 </p>
             </div>
+
         </a>
-        <!--============================== End =========================================== -->
-        <a href="./projects/Random Image Gen/index.html" class="card Generators ">
+
+        <a href="./projects/Super Mario/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="assets/image/randomi.png" alt="Brick Breaker">
+                <img src="./assets/image/supermario.png" alt="Super Mario">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Random Image Generator</h3>
+                <h3 class="card-heading">Super Mario</h3>
                 <p class="card-description">
-                    A Random Image Generator Website
+                    A Popular Game.
                 </p>
             </div>
         </a>
-        <!-- =========================== Shooter Game ================================= -->
-        <a href="./projects/Shooter_Game/index.html" class="card Games ">
+
+        <a href="./projects/Magic8B/index.html" class="card Miscellaneous " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Shooter_game.png" alt="Shooter Game" style="width: 10rem; height: auto;">
+                <img src="./projects/Magic8Ball/magic8ball.png" alt="magic8ball">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Shooter Game</h3>
+                <h3 class="card-heading">Magic 8 Ball</h3>
                 <p class="card-description">
-                    Take aim and unleash your skills in shooter experience!
+                    Think of a question and let Magic 8 Ball decide the answer for you.
                 </p>
             </div>
         </a>
-        <!-- =========================== End Shooter Game ================================= -->
 
-        <!-- =========================== Simple Drawing App ================================= -->
-        <a href="projects/Simple Drawing app/index.html" class="card Miscellaneous " target="_blank">
+        <a href="./projects/Rock Paper Scissors/index.html" class="card Games " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/drawing app.png" alt="Drawing App" style="width: 10rem; height: auto;">
+                <img src="./assets/image/Rock-paper-scissor.png" alt="Rock paper scissor icon">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Drawing App</h3>
+                <h3 class="card-heading">Rock Paper Scissors</h3>
                 <p class="card-description">
-                    Unleash Your Creativity with Every Stroke!
+                    Choose your move Tie!
                 </p>
             </div>
         </a>
-        <!-- =========================== End Simple Drawing App ================================= -->
 
-
-        <!-- =========================== Othello Game ================================= -->
-        <a href="projects/Othello/index.html" class="card Games " target="_blank">
+        <a href="./projects/eye that follow/index.html" class="card Miscellaneous ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Othello.png" alt="Othello Game" style="width: 10rem; height: auto;">
+                <img src="./assets/image/ETE.jpg" \ alt="">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Othello Game</h3>
+                <h3 class="card-heading">Eye that follow</h3>
                 <p class="card-description">
-                    Othello is a strategic board game where players aim to flip their opponent's discs to their color.
+                    EYE THAT FOLLOW YPOUR MOUSE
+                </p>
+            </div>
+        </a>
+        <a href="./projects/Notes Taking Website/index.html" class="card Websites ">
+            <div class="card-cover counter-cover-colour">
+                <img src="./assets/image/Notes.webp" alt="Notes Taking">
+            </div>
+            <div class="card-content">
+                <h3 class="card-heading">Notes Taking</h3>
+                <p class="card-description">
+                    To write notes.
                 </p>
             </div>
         </a>
-        <!-- =========================== Card Validator ================================= -->
-        <a href="projects/Card-Validator/index.html" class="card Security " target="_blank">
 
+        <a href="./projects/Dice Game/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/credit_card_validator.jpg" alt="Credit Card Validator"
-                    style="width: 10rem; height: auto;">
+                <img src="./assets/image/dice_game.png" alt="Dice Game">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Credit Card Validator</h3>
+                <h3 class="card-heading">Dice Game</h3>
                 <p class="card-description">
-                    Validate your credit card number with ease.
+                    The Player who gets the more number on the dice wins.(Just Refresh Me!!)
                 </p>
             </div>
         </a>
 
-
-        <a href="projects/Tennis Game/index.html" class="card Games " target="_blank">
+        <a href="./projects/Slide Puzzle/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="/assets/image/Tennis game.png" alt="Tennis" style="width: 10rem; height: auto;">
+                <img src="assets/image/slide.png" alt="Slide puzzle">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Tennis Game</h3>
+                <h3 class="card-heading">Slide Puzzle</h3>
                 <p class="card-description">
-                    multiplayers Tennis Game
+                    A Slide Puzzle game
                 </p>
             </div>
         </a>
 
-
-
-        <!-- =========================== Recipe Book ================================= -->
-        <a href="./projects/Recipe Book/index.html" class="card Miscellaneous " target="_blank">
+        <a href="./projects/Doodle Jump/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/recipe.webp" alt="recipebook">
+                <img src="./assets/image/doodle.png" alt="Doodle Jump">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Recipe Book</h3>
-                <p class="card-description">Gather Delicious Secret Recipes!</p>
+                <h3 class="card-heading">Doodle Jump</h3>
+                <p class="card-description">
+                    Enjoy and Jump.
+                </p>
             </div>
         </a>
-        <!-- ============================ Sudoku Solver ================================== -->
-        <a href="projects/Sudoku_Solver/index.html" class="card Games " target="_blank">
+        <a href="./projects/Email Validator/index.html" class="card Security ">
             <div class="card-cover counter-cover-colour">
-                <img src="./projects/Sudoku_Solver/image.png" alt="Sudoku_Solver" style="width: 10rem; height: auto;">
+                <img src="./assets/image/email.png" alt="Email Validator">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Sudoku Solver</h3>
+                <h3 class="card-heading">Email Validator</h3>
                 <p class="card-description">
-                    Solve any valid Sudoku in just 1 click
+                    Validate E-MAIL
                 </p>
             </div>
         </a>
-        <a href="projects/Bus Reservation System/index.html" class="card Miscellaneous " target="_blank">
+        <a href="./projects/Maze/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/bus-stop.png" alt="Bus image" style="width: 10rem; height: auto;">
+                <img src="./assets/image/maze.jpg" alt="maze game'">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Bus Reservation System</h3>
-                <p class="card-description">Fast, Easy, and Reliable Bus Reservations.</p>
+                <h3 class="card-heading">Maze Game</h3>
+                <p class="card-description">
+                    Play exciting maze game
+                </p>
             </div>
         </a>
 
-        <!-- =========================== Tower of Hanoi ================================= -->
-        <a href="projects/Tower of Hanoi/index.html" class="card Games " target="_blank">
+        <a href="./projects/Tetris_Game/index.html" class="card Games">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Tower-of-Hanoi.png" alt="Tower of Hanoi" style="width: 10rem; height: auto;">
+                <img src="./assets/image/tetrsis.jpg" alt="Tetris Game">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Tower of Hanoi</h3>
-                <p class="card-description">Solve the classic Tower of Hanoi puzzle.</p>
+                <h3 class="card-heading">Tetris Game</h3>
+                <p class="card-description">
+                    Arrange falling blocks to clear lines.
+                </p>
             </div>
         </a>
-
-<!-- =========================== Tower of Hanoi ================================= -->
-<a href="projects/Tower of Hanoi/index.html" class="card Games " target="_blank">
-    <div class="card-cover counter-cover-colour">
-        <img src="./assets/image/Tower-of-Hanoi.png" alt="Tower of Hanoi" style="width: 10rem; height: auto;">
-    </div>
-    <div class="card-content">
-        <h3 class="card-heading">Tower of Hanoi</h3>
-        <p class="card-description">Solve the classic Tower of Hanoi puzzle.</p>
-    </div>
-</a>
-
-        <!-- =========================== Odd Even Game ================================= -->
-        <a href="projects/Odd_even_game/odd_even_game.html" class="card Games " target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/odd_even.jpg" alt="Odd Even Game" style="width: 10rem; height: auto;">
+        
+        <a href="./projects/Connect4/index.html" class="card Games" target="_blank">
+            <div class="card-cover">
+                <img src="./projects/Connect4/Connectfour.png" alt="Connect4 Game">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Odd Even Game</h3>
-                <p class="card-description">Try your luck with the odd or even game.</p>
+                <h3 class="card-heading">Connect4 (Two player)</h3>
+                <p class="card-description">
+                    Connect4: Where Strategy Meets Fun, One Disc at a Time!
+                </p>
             </div>
         </a>
 
 
-<!-- =========================== Odd Even Game ================================= -->
-<a href="projects/Odd_even_game/odd_even_game.html" class="card Games " target="_blank">
-    <div class="card-cover counter-cover-colour">
-        <img src="./assets/image/odd_even.jpg" alt="Odd Even Game" style="width: 10rem; height: auto;">
-    </div>
-    <div class="card-content">
-        <h3 class="card-heading">Odd Even Game</h3>
-        <p class="card-description">Try your luck with the odd or even game.</p>
-    </div>
-</a>
-       
-    <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
-
-        <a href="./projects/Flappy Bird/index.html" class="card Games">
+        <a href="./projects/Candy Game/index.html" class="card Games">
             <div class="card-cover counter-cover-colour">
-                <img src="assets/image/flappybird.png" alt="Flappy Bird" />
+                <img src="./assets/image/candy.png" alt="Candy Game">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Flappy Bird</h3>
-                <p class="card-description">A fun game.</p>
+                <h3 class="card-heading">Candy Game</h3>
+                <p class="card-description">
+                    A Candy game.
+                </p>
             </div>
         </a>
 
-        <a href="./projects/Doodle Jump/index.html" class="card Games">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/doodle.png" alt="Doodle Jump" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Doodle Jump</h3>
-                <p class="card-description">Enjoy and Jump.</p>
-            </div>
-        </a>
-        <a href="./projects/Email Validator/index.html" class="card">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/email.png" alt="Email Validator" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Email Validator</h3>
-                <p class="card-description">Validate E-MAIL</p>
-            </div>
-        </a>
-        <a href="./projects/Maze/index.html" class="card">
+        <a href="./projects/Building Block/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/maze.jpg" alt="maze game'" />
+                <img src="./assets/image/buildingblock.png" alt="Building Block">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Maze Game</h3>
-                <p class="card-description">Play exciting maze game</p>
+                <h3 class="card-heading">Building Block</h3>
+                <p class="card-description">
+                    A Building Block Game.
+                </p>
             </div>
         </a>
-        <a href="./projects/Minesweeper/index.html" class="card" target="_blank">
+        <a href="./projects/url shortener/index.html" class="card Security ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/minesweeper.jpeg" alt="Minesweeper" />
+                <img src="./assets/image/url.png" alt=" Url Shortner">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Minesweeper</h3>
-                <p class="card-description">Classic Minesweeper game.</p>
+                <h3 class="card-heading"> Url Shortner</h3>
+                <p class="card-description">
+                    Url Shortner
+                </p>
             </div>
         </a>
-        <a href="./projects/Tetris_Game/index.html" class="card Games">
+        <a href="./projects/Email Validator/index.html" class="card Security ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/tetrsis.jpg" alt="Doodle Jump" />
+                <img src="./assets/image/email.png" alt="Email Validator">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Tetris Game</h3>
+                <h3 class="card-heading">Email Validator</h3>
                 <p class="card-description">
-                    Arrange falling blocks to clear lines.
+                    Validate E-MAIL
                 </p>
             </div>
         </a>
-        <a href="./projects/Connect4/index.html" class="card Games" target="_blank">
-            <div class="card-cover">
-                <img src="./projects/Connect4/Connectfour.png" alt="" />
+        <a href="./projects/New Year Countdown/index.html" class="card Mathematical ">
+            <div class="card-cover counter-cover-colour">
+                <img src="./assets/image/n.jpg" alt="new">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Connect4(Two player)</h3>
+                <h3 class="card-heading">New Year Countdown</h3>
                 <p class="card-description">
-                    Connect4: Where Strategy Meets Fun, One Disc at a Time!
+                    New year countdown
                 </p>
             </div>
         </a>
 
-        <a href="./projects/Among Us Game/index.html" class="card Games">
+        <a href="./projects/Bill Splitter/index.html" class="card Mathematical ">
             <div class="card-cover counter-cover-colour">
-                <img src="assets/image/amongus.png" alt="Flappy Bird" />
+                <img src="./assets/image/sew.jpg" alt="bil ">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Among us</h3>
-                <p class="card-description">Find who is imposter.</p>
+                <h3 class="card-heading">Bill Splitter</h3>
+                <p class="card-description">
+                    Split your bills
+                </p>
             </div>
         </a>
 
-        <a href="./projects/Joke Generator/index.html" class="card">
+
+        <a href="./projects/Password Strength/index.html" class="card Security ">
             <div class="card-cover counter-cover-colour">
-                <img src="assets/image/jokeGenerator.jpeg" alt="Joke Generator" />
+                <img src="./assets/image/password.png" alt="Email Validator">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Joke Generator</h3>
-                <p class="card-description">Find who is imposter.</p>
+                <h3 class="card-heading">Password Strength</h3>
+                <p class="card-description">
+                    Check Your Password's Strength.
+
+                </p>
             </div>
         </a>
 
-        <a href="./projects/Email Validator/index.html" class="card">
+        <a href="./projects/Mole Bop/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/email.png" alt="Email Validator" />
+                <img src="assets/image/mole-bop.png" alt="Mole Bop">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Email Validator</h3>
-                <p class="card-description">Validate E-MAIL</p>
+                <h3 class="card-heading">Mole Bop</h3>
+                <p class="card-description">
+                    Catch the Bop.
+                </p>
             </div>
         </a>
-        <a href="./projects/Maze/index.html" class="card Games">
+        <a href="./projects/Virtual Keyboard/index.html" class="card Miscellaneous ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/maze.jpg" alt="maze game'" />
+                <img src="./assets/image/vc.jpg" alt="Virtual Keyboard'">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Maze Game</h3>
-                <p class="card-description">Play exciting maze game</p>
+                <h3 class="card-heading">Virtual Keyboard</h3>
+                <p class="card-description">
+                    Virtual Keyboard
+                </p>
             </div>
         </a>
-        <a href="./projects/Minesweeper/index.html" class="card" target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/minesweeper.jpeg" alt="Minesweeper" />
+
+        <a href="./projects/2048 Game/index.html" class="card Games " target="_blank">
+            <div class="card-cover">
+                <img src="./assets/image/2048.png" alt="2048">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Minesweeper</h3>
-                <p class="card-description">Classic Minesweeper game.</p>
+                <h3 class="card-heading">2048</h3>
+                <p class="card-description">
+                    2048 is an easy and fun puzzle game.
+                </p>
             </div>
         </a>
-        <a href="./projects/Tetris_Game/index.html" class="card Games">
+
+        </a>
+
+        <a href="./projects/wordle/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/tetrsis.jpg" alt="Doodle Jump" />
+                <img src="./assets/image/w.png" alt="wordle'">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Tetris Game</h3>
+                <h3 class="card-heading">Wordle</h3>
                 <p class="card-description">
-                    Arrange falling blocks to clear lines.
+                    Enjoy the popular game
                 </p>
             </div>
         </a>
-        <a href="./projects/Connect4/index.html" class="card Games" target="_blank">
-            <div class="card-cover">
-                <img src="./projects/Connect4/Connectfour.png" alt="" />
+
+        <a href="./projects/Space Collision Game/index.html" class="card Games " target="_blank">
+            <div class="card-cover ">
+                <img src="./projects/Space Collision Game/img/pixel-art-coin-money-icon-game.png"
+                    alt="a coin representing how to win the game">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Connect4(Two player)</h3>
+                <h3 class="card-heading">Space Collision Game</h3>
                 <p class="card-description">
-                    Connect4: Where Strategy Meets Fun, One Disc at a Time!
+                    Space Collision: Catch Coins and avoid Enemies to Score
                 </p>
             </div>
         </a>
 
-        <a href="./projects/Candy Game/index.html" class="card Games">
+        <a href="./projects/pionoGame/index.html" class="card Miscellaneous " target="_blank">
+
             <div class="card-cover counter-cover-colour">
-                <img src="assets/image/candy.png" alt="Candy Game" />
+            <img src="./assets/image/Shooter_game.png" alt="Shooter Game" style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Candy Game</h3>
-                <p class="card-description">A Candy game.</p>
+            <h3 class="card-heading">Shooter Game</h3>
+            <p class="card-description">
+                Take aim and unleash your skills in shooter experience!
+            </p>
             </div>
-        </a>
-        <a href="./projects/Stick Hero/index.html" class="card Games">
+            </a>
+
+            <a href="./projects/Relaxio" class="card Miscellaneous ">
+                <div class="card-cover">
+                    <img src="./projects/Relaxio/images/icon128.png" alt="relaxio image">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Relaxio Stress Buster</h3>
+                    <p class="card-description">
+                        Keep calm and just relax.
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/leet_code/index.html" class="card Generators " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/leetcode.png" alt="LeetCode Question Generator">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">LeetCode Question Generator</h3>
+                    <p class="card-description">
+                        Generate random LeetCode questions for practice.
+                    </p>
+                </div>
+            </a>
+            
+            
+            
+            <a href="./projects/Photo Gallery/index.html" class="card Miscellaneous ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/photo-gallery.jpg" alt="chatbot">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Photo Gallery</h3>
+                    <p class="card-description">
+                        List all the random Photos.
+                    </p>
+                </div>
+            </a>
+            
+            <a href="./projects/netflix-clone/index.html" class="card Websites " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/netflix-clone.jpg" alt="chatbot">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Netflix Clone</h3>
+                    <p class="card-description">
+                        A UI-based Clone of the popular mainstream service "NETFLIX".
+                    </p>
+                </div>
+            </a>
+            
+            
+                <a href="projects/Tennis Game/index.html" class="card Games " target="_blank">
+            
+                    <div class="card-cover counter-cover-colour">
+                        <img src="/assets/image/Tennis game.png" alt="Tennis" style="width: 10rem; height: auto;">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Tennis Game</h3>
+                        <p class="card-description">
+                            multiplayers Tennis Game
+                        </p>
+                          </div>
+                </a>
+                
+            
+            
+            
+            <a href="./projects/3D Music Visualizer/index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/3D_music_visualizer.jpg" alt="music visualizer">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">3D Music Visualizer</h3>
+                    <p class="card-description">
+                        Experience the most realistic 3D music visualizer.
+                    </p>
+                </div>
+            </a>
+
+
+            <a href="./projects/Shooter_Game/index.html" class="card Games ">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/Shooter_game.png" alt="Shooter Game" style="width: 10rem; height: auto;">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Shooter Game</h3>
+                    <p class="card-description">
+                        Take aim and unleash your skills in shooter experience!
+                    </p>
+                </div>
+            </a>
+
+            <a href="projects/Simple Drawing app/index.html" class="card Games " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/drawing app.png" alt="Drawing App" style="width: 10rem; height: auto;">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Drawing App</h3>
+                    <p class="card-description">
+                        Unleash Your Creativity with Every Stroke!
+                    </p>
+                </div>
+            </a>
+
+
+            
+            <!-- =========================== Card Validator ================================= -->
+            <a href="projects/Card-Validator/index.html" class="card Security " target="_blank">
+            
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/credit_card_validator.jpg" alt="Credit Card Validator"
+                        style="width: 10rem; height: auto;">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Credit Card Validator</h3>
+                    <p class="card-description">
+                        Validate your credit card number with ease.
+                    </p>
+                </div>
+            </a>
+            
+            
+            
+            <!-- =========================== Recipe Book ================================= -->
+            <a href="./projects/Recipe Book/index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/recipe.webp" alt="recipebook">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Recipe Book</h3>
+                    <p class="card-description">Gather Delicious Secret Recipes!</p>
+                </div>
+            </a>
+            <!-- =========================== END ================================= -->
+            
+            
+            <!-- =========================== Bus Reservation System ================================= -->
+            <a href="projects/Bus Reservation System/index.html" class="card Miscellaneous " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/bus-stop.png" alt="Bus image" style="width: 10rem; height: auto;">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Bus Reservation System</h3>
+                    <p class="card-description">Fast, Easy, and Reliable Bus Reservations.</p>
+                </div>
+            </a>
+                            
+            <!-- =========================== Tower of Hanoi ================================= -->
+            <a href="projects/Tower of Hanoi/index.html" class="card Games " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="assets/image/stick-hero.png" alt="Stick Hero" />
+            <img src="./assets/image/Tower-of-Hanoi.png" alt="Tower of Hanoi" style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Stick Hero</h3>
-                <p class="card-description">A fun popular game.</p>
+            <h3 class="card-heading">Tower of Hanoi</h3>
+            <p class="card-description">Solve the classic Tower of Hanoi puzzle.</p>
             </div>
-        </a>
+            </a>
+            
+            <!-- =========================== Odd Even Game ================================= -->
+            <a href="projects/Odd_even_game/odd_even_game.html" class="card Games " target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/odd_even.jpg" alt="Odd Even Game" style="width: 10rem; height: auto;">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Odd Even Game</h3>
+                    <p class="card-description">Try your luck with the odd or even game.</p>
+                </div>
+            </a>
 
-        <a href="./projects/Among Us/index.html" class="card Games">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/amongus.png" alt="Among Us" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Among Us</h3>
-                <p class="card-description">Find who is imposter.</p>
-            </div>
-        </a>
-        <a href="./projects/Joke Generator/index.html" class="card Games">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/jokeGenerator.jpeg" alt="Joke Generator" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Joke Generator</h3>
-                <p class="card-description">Find who is imposter.</p>
-            </div>
-        </a>
-        <a href="./projects/Train Track Game/index.html" class="card Games">
+
+            <a href="./projects/Doodle Jump/index.html" class="card Games">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/doodle.png" alt="Doodle Jump" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Doodle Jump</h3>
+                    <p class="card-description">Enjoy and Jump.</p>
+                </div>
+            </a>
+            <a href="./projects/Email Validator/index.html" class="card">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/email.png" alt="Email Validator" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Email Validator</h3>
+                    <p class="card-description">Validate E-MAIL</p>
+                </div>
+            </a>
+            <a href="./projects/Maze/index.html" class="card">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/maze.jpg" alt="maze game'" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Maze Game</h3>
+                    <p class="card-description">Play exciting maze game</p>
+                </div>
+            </a>
+            <a href="./projects/Minesweeper/index.html" class="card" target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/minesweeper.jpeg" alt="Minesweeper" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Minesweeper</h3>
+                    <p class="card-description">Classic Minesweeper game.</p>
+                </div>
+            </a>
+            <a href="./projects/Tetris_Game/index.html" class="card Games">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/tetrsis.jpg" alt="Doodle Jump" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Tetris Game</h3>
+                    <p class="card-description">
+                        Arrange falling blocks to clear lines.
+                    </p>
+                </div>
+            </a>
+            <!-- <a href="./projects/Connect4/index.html" class="card Games" target="_blank">
+                <div class="card-cover">
+                    <img src="./projects/Connect4/Connectfour.png" alt="" /> -->
+
+        <a href="./projects/Chatbot/index.html" class="card Miscellaneous " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/traintrack.png" alt="Train Track Game" />
+                <img src="./assets/image/chat-7767693_1280.jpg" alt="chatbot">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Train Track Game</h3>
+                <h3 class="card-heading">Chatbot</h3>
                 <p class="card-description">
-                    A Train Track Game which is created by Three Js.
+                    A simple chatbot. <br>
+                    <strong> Please use your own google gemini api key for the chatbot to work. </strong>
                 </p>
             </div>
         </a>
-        <a href="./projects/Building Block/index.html" class="card Games">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/buildingblock.png" alt="Building Block" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Building Block</h3>
-                <p class="card-description">A Building Block Game.</p>
-            </div>
-        </a>
-        <a href="./projects/Lamb Lane/index.html" class="card Games">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/lamblane.png" alt="Lamb Lane" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Lamb Lane</h3>
-                <p class="card-description">A Lamb Lane Game.</p>
-            </div>
-        </a>
-        <a href="./projects/Cut The Rope/index.html" class="card Games">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/cutrope.png" alt="Cut The Rope" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Cut The Rope</h3>
-                <p class="card-description">Cut the rope in game.</p>
-            </div>
-        </a>
-        <a href="./projects/url shortener/index.html" class="card">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/url.png" alt=" Url Shortner" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Url Shortner</h3>
-                <p class="card-description">Url Shortner</p>
-            </div>
-        </a>
-        <a href="./projects/Email Validator/index.html" class="card">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/email.png" alt="Email Validator" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Email Validator</h3>
-                <p class="card-description">Validate E-MAIL</p>
-            </div>
-        </a>
-        <a href="./projects/New Year Countdown/index.html" class="card">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/n.jpg" alt="new" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">New Year Countdown</h3>
-                <p class="card-description">New year countdown</p>
-            </div>
-        </a>
 
+    
+    <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
 
-        <a href="./projects/Bill Splitter/index.html" class="card">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/sew.jpg" alt="bil " />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Bill Splitter</h3>
-                <p class="card-description">Split your bills</p>
-            </div>
-        </a>
+ <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
 
-        <a href="./projects/Password Strength/index.html" class="card">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/password.png" alt="Email Validator" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Password Strength</h3>
-                <p class="card-description">Check Your Password's Strength.</p>
-            </div>
-        </a>
 
+        <!-- =========================== Tip calculator ================================= -->
+        <a href="projects/Tip calculator/index.html" class="card Mathematical " target="_blank">
 
-        <!-- =========================== Othello Game ================================= -->
-        <a href="projects/Othello/index.html" class="card Games" target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Othello.png" alt="Othello Game" style="width: 10rem; height: auto;">
+                <img src="./assets/image/calculator.png" alt="Calculator" style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Othello Game</h3>
+                <h3 class="card-heading">Tip Calculator</h3>
                 <p class="card-description">
-                    Othello is a strategic board game where players aim to flip their opponent's discs to their color.
+                    Quickly calculate tips and total bills with ease.
                 </p>
             </div>
         </a>
-
-
-        <a href="./projects/Mole Bop/index.html" class="card Games">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/mole-bop.png" alt="Mole Bop" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Mole Bop</h3>
-                <p class="card-description">Catch the Bop.</p>
-            </div>
-        </a>
-        <a href="./projects/Virtual Keyboard/index.html" class="card">
+        <!--============================== End =========================================== -->
+        <a href="./projects/Random Image Gen/index.html" class="card Generators ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/vc.jpg" alt="Virtual Keyboard'" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Virtual Keyboard</h3>
-                <p class="card-description">Virtual Keyboard</p>
-            </div>
-        </a>
-
-        <a href="./projects/2048 Game/index.html" class="card Games" target="_blank">
-            <div class="card-cover">
-                <img src="./assets/image/2048.png" alt="2048" />
+                <img src="assets/image/randomi.png" alt="Brick Breaker">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">2048</h3>
+                <h3 class="card-heading">Random Image Generator</h3>
                 <p class="card-description">
-                    2048 is an easy and fun puzzle game.
+                    A Random Image Generator Website
                 </p>
             </div>
         </a>
-        </a>
-
-        <a href="./projects/wordle/index.html" class="card">
+        <!-- =========================== Shooter Game ================================= -->
+        <a href="./projects/Shooter_Game/index.html" class="card Games ">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/w.png" alt="wordle'" />
+                <img src="./assets/image/Shooter_game.png" alt="Shooter Game" style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Wordle</h3>
-                <p class="card-description">Enjoy the popular game</p>
+                <h3 class="card-heading">Shooter Game</h3>
+                <p class="card-description">
+                    Take aim and unleash your skills in shooter experience!
+                </p>
             </div>
         </a>
+        <!-- =========================== End Shooter Game ================================= -->
 
-        <a href="./projects/Minesweeper/index.html" class="card" target="_blank">
+        <!-- =========================== Simple Drawing App ================================= -->
+        <a href="projects/Simple Drawing app/index.html" class="card Miscellaneous " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/minesweeper.jpeg" alt="Minesweeper" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Minesweeper</h3>
-                <p class="card-description">Classic Minesweeper game.</p>
-            </div>
-        </a>
-
-        <a href="./projects/Space Collision Game/index.html" class="card Games" target="_blank">
-            <div class="card-cover">
-                <img src="./projects/Space Collision Game/img/pixel-art-coin-money-icon-game.png"
-                    alt="a coin representing how to win the game" />
+                <img src="./assets/image/drawing app.png" alt="Drawing App" style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Space Collision Game</h3>
+                <h3 class="card-heading">Drawing App</h3>
                 <p class="card-description">
-                    Space Collision: Catch Coins and avoid Enemies to Score
+                    Unleash Your Creativity with Every Stroke!
                 </p>
             </div>
         </a>
+        <!-- =========================== End Simple Drawing App ================================= -->
+
 
-        <a href="./projects/pionoGame/index.html" class="card" target="_blank">
+        <!-- =========================== Othello Game ================================= -->
+        <a href="projects/Othello/index.html" class="card Games " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/piano.png" alt="pianoImage" />
+                <img src="./assets/image/Othello.png" alt="Othello Game" style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Piano</h3>
+                <h3 class="card-heading">Othello Game</h3>
                 <p class="card-description">
-                    Experience the most realistic virtual piano.
+                    Othello is a strategic board game where players aim to flip their opponent's discs to their color.
                 </p>
             </div>
         </a>
+        <!-- =========================== Card Validator ================================= -->
+        <a href="projects/Card-Validator/index.html" class="card Security " target="_blank">
 
-        <a href="./projects/Word Scramble Game/index.html" class="card" target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/word scramble.png" alt="Word Scrable Image" />
+                <img src="./assets/image/credit_card_validator.jpg" alt="Credit Card Validator"
+                    style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Word Scramble</h3>
+                <h3 class="card-heading">Credit Card Validator</h3>
                 <p class="card-description">
-                    A fun Word Scramble Game where players rearrange jumbled letters
-                    to form correct words within a time limit.
+                    Validate your credit card number with ease.
                 </p>
             </div>
         </a>
 
-        <!-- =========================== Bubble Hit Game ================================= -->
-        <a href="./projects/Bubble Hit  Game/" class="card Games" target="_blank">
+        
+        <!-- ============================ Sudoku Solver ================================== -->
+        <a href="projects/Sudoku_Solver/index.html" class="card Games " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/bubbleposter.png" alt="bubblePoster" />
+                <img src="./projects/Sudoku_Solver/image.png" alt="Sudoku_Solver" style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Bubble Hit Game</h3>
+                <h3 class="card-heading">Sudoku Solver</h3>
                 <p class="card-description">
-                    Tap the Right Bubble, Beat the Clock!"
+                    Solve any valid Sudoku in just 1 click
                 </p>
             </div>
         </a>
-
-        <!--============================== End =========================================== -->
-        <a href="./projects/Chatbot/index.html" class="card" target="_blank">
+        <a href="projects/Bus Reservation System/index.html" class="card Miscellaneous " target="_blank">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/chat-7767693_1280.jpg" alt="chatbot" />
+                <img src="./assets/image/bus-stop.png" alt="Bus image" style="width: 10rem; height: auto;">
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Chatbot</h3>
-                <p class="card-description">
-                    A simple chatbot.<b>Please use your own google gemini api key for the chatbot to
-                        work</b>
-                </p>
+                <h3 class="card-heading">Bus Reservation System</h3>
+                <p class="card-description">Fast, Easy, and Reliable Bus Reservations.</p>
             </div>
         </a>
 
-        <a href="./projects/Relaxio" class="card">
-            <div class="card-cover">
-                <img src="./projects/Relaxio/images/icon128.png" alt="relaxio image" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Relaxio Stress Buster</h3>
-                <p class="card-description">Keep calm and just relax.</p>
-            </div>
-        </a>
 
-        <a href="./projects/leet_code/index.html" class="card" target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/leetcode.png" alt="LeetCode Question Generator" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">LeetCode Question Generator</h3>
-                <p class="card-description">
-                    Generate random LeetCode questions for practice.
-                </p>
-            </div>
-        </a>
+            <a href="./projects/Candy Game/index.html" class="card Games">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/candy.png" alt="Candy Game" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Candy Game</h3>
+                    <p class="card-description">A Candy game.</p>
+                </div>
+            </a>
+
+            <a href="./projects/Joke Generator/index.html" class="card Games">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/jokeGenerator.jpeg" alt="Joke Generator" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Joke Generator</h3>
+                    <p class="card-description">Find who is imposter.</p>
+                </div>
+            </a>
+            <a href="./projects/Train Track Game/index.html" class="card Games">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/traintrack.png" alt="Train Track Game" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Train Track Game</h3>
+                    <p class="card-description">
+                        A Train Track Game which is created by Three Js.
+                    </p>
+                </div>
+            </a>
+            <a href="./projects/Building Block/index.html" class="card Games">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/buildingblock.png" alt="Building Block" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Building Block</h3>
+                    <p class="card-description">A Building Block Game.</p>
+                </div>
+            </a>
+        
+            <a href="./projects/url shortener/index.html" class="card">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/url.png" alt=" Url Shortner" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Url Shortner</h3>
+                    <p class="card-description">Url Shortner</p>
+                </div>
+            </a>
+            <a href="./projects/Email Validator/index.html" class="card">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/email.png" alt="Email Validator" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Email Validator</h3>
+                    <p class="card-description">Validate E-MAIL</p>
+                </div>
+            </a>
+            <a href="./projects/New Year Countdown/index.html" class="card">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/n.jpg" alt="new" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">New Year Countdown</h3>
+                    <p class="card-description">New year countdown</p>
+                </div>
+            </a>
+
+
+<!-- =========================== Tower of Hanoi ================================= -->
+<a href="projects/Tower of Hanoi/index.html" class="card Games " target="_blank">
+    <div class="card-cover counter-cover-colour">
+        <img src="./assets/image/Tower-of-Hanoi.png" alt="Tower of Hanoi" style="width: 10rem; height: auto;">
+    </div>
+    <div class="card-content">
+        <h3 class="card-heading">Tower of Hanoi</h3>
+        <p class="card-description">Solve the classic Tower of Hanoi puzzle.</p>
+    </div>
+</a>
+
+
+            <a href="./projects/Bill Splitter/index.html" class="card">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/sew.jpg" alt="bil " />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Bill Splitter</h3>
+                    <p class="card-description">Split your bills</p>
+                </div>
+            </a>
+            </a>
+
+            <a href="./projects/wordle/index.html" class="card">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/w.png" alt="wordle'" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Wordle</h3>
+                    <p class="card-description">Enjoy the popular game</p>
+                </div>
+            </a>
 
+            <a href="./projects/Space Collision Game/index.html" class="card Games" target="_blank">
+                <div class="card-cover">
+                    <img src="./projects/Space Collision Game/img/pixel-art-coin-money-icon-game.png"
+                        alt="a coin representing how to win the game" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Space Collision Game</h3>
+                    <p class="card-description">
+                        Space Collision: Catch Coins and avoid Enemies to Score
+                    </p>
+                </div>
+            </a>
+    <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
 
-        <a href="./projects/Photo Gallery/index.html" class="card">
+        <a href="./projects/Flappy Bird/index.html" class="card Games">
             <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/photo-gallery.jpg" alt="chatbot" />
+                <img src="assets/image/flappybird.png" alt="Flappy Bird" />
             </div>
             <div class="card-content">
-                <h3 class="card-heading">Photo Gallery</h3>
-                <p class="card-description">List all the random Photos.</p>
+                <h3 class="card-heading">Flappy Bird</h3>
+                <p class="card-description">A fun game.</p>
             </div>
         </a>
 
-        <a href="./projects/netflix-clone/index.html" class="card" target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/netflix-clone.jpg" alt="chatbot" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Netflix Clone</h3>
-                <p class="card-description">
-                    A UI-based Clone of the popular mainstream service "NETFLIX".
-                </p>
-            </div>
-        </a>
-        <a href="projects/TESLA-clone/tesla.html" class="card" target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="assets/image/Tesla_T_symbol.svg.png" alt="chatbot" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">TESLA CLONE</h3>
-                <p class="card-description">
-                    A UI-based Clone of the popular car company TESLA.
-                </p>
-            </div>
-        </a>
 
-        <a href="./projects/3D Music Visualizer/index.html" class="card" target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/3D_music_visualizer.jpg" alt="music visualizer" />
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">3D Music Visualizer</h3>
-                <p class="card-description">
-                    Experience the most realistic 3D music visualizer.
-                </p>
-            </div>
-        </a>
+            <a href="./projects/pionoGame/index.html" class="card" target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/piano.png" alt="pianoImage" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Piano</h3>
+                    <p class="card-description">
+                        Experience the most realistic virtual piano.
+                    </p>
+                </div>
+            </a>
+
+            <a href="./projects/Word Scramble Game/index.html" class="card" target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/word scramble.png" alt="Word Scrable Image" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Word Scramble</h3>
+                    <p class="card-description">
+                        A fun Word Scramble Game where players rearrange jumbled letters
+                        to form correct words within a time limit.
+                    </p>
+                </div>
+            </a>
 
+            <!-- =========================== Bubble Hit Game ================================= -->
+            <a href="./projects/Bubble Hit  Game/" class="card Games" target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/bubbleposter.png" alt="bubblePoster" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Bubble Hit Game</h3>
+                    <p class="card-description">
+                        Tap the Right Bubble, Beat the Clock!"
+                    </p>
+                </div>
+            </a>
 
-        <!-- =========================== Recipe Book ================================= -->
-        <a href="./projects/Recipe Book/index.html" class="card" target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/recipe.webp" alt="recipebook">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Recipe Book</h3>
-                <p class="card-description">
-                    Gather Delicious Secret Recipes!
-                </p>
-            </div>
-        </a>
+            <!--============================== End =========================================== -->
+            <a href="./projects/Chatbot/index.html" class="card" target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/chat-7767693_1280.jpg" alt="chatbot" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Chatbot</h3>
+                    <p class="card-description">
+                        A simple chatbot.<b>Please use your own google gemini api key for the chatbot to
+                            work</b>
+                    </p>
+                </div>
+            </a>
+
+            <a href="./projects/Relaxio" class="card">
+                <div class="card-cover">
+                    <img src="./projects/Relaxio/images/icon128.png" alt="relaxio image" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Relaxio Stress Buster</h3>
+                    <p class="card-description">Keep calm and just relax.</p>
+                </div>
+            </a>
 
-        <!-- =========================== ================================= -->
+            <a href="projects/TESLA-clone/tesla.html" class="card" target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/Tesla_T_symbol.svg.png" alt="chatbot" />
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">TESLA CLONE</h3>
+                    <p class="card-description">
+                        A UI-based Clone of the popular car company TESLA.
+                    </p>
+                </div>
+            </a>
+
+            <a href="./projects/bookstore/home.html" class="card" target="_blank">
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/online_bookstore.jpg" alt="recipebook">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Online Bookstore</h3>
+                    <p class="card-description">
+                        For the love of reading-Anytime Anywhere
+                    </p>
+                </div>
+            </a>
 
-        <a href="projects/Othello/index.html" class="card" target="_blank">
-            <div class="card-cover counter-cover-colour">
-                <img src="./assets/image/Othello.png" alt="Othello Game">
-            </div>
-            <div class="card-content">
-                <h3 class="card-heading">Othello Game</h3>
-                <p class="card-description">
-                    Othello is a strategic board game where players aim to flip their opponent's discs to their color.
-                </p>
-            </div>
-        </a>
         <a href="projects/Eigen Value and Vector Calculator/index.html" class="card" target="_blank">
             <div class="card-cover counter-cover-colour">
                 <img src="./assets/image/Eigen-Value-and-Vector-Calculator.png" alt="Eigen Value and Vector Calculator">
@@ -3243,89 +3512,30 @@ <h3 class="card-heading">Bhagvad Gita Quote Generator</h3>
                 Discover timeless wisdom with Bhagavad Gita quotes.
           </p>
         </div>
-    </a>
-
-
-        <a
-          href="./projects/3D Music Visualizer/index.html"
-          class="card"
-          target="_blank"
-        >
-          <div class="card-cover counter-cover-colour">
-            <img
-              src="./assets/image/3D_music_visualizer.jpg"
-              alt="music visualizer"
-            />
-          </div>
-          <div class="card-content">
-            <h3 class="card-heading">3D Music Visualizer</h3>
-            <p class="card-description">
-              Experience the most realistic 3D music visualizer.
-            </p>
-          </div>
-        </a>               
-
-    
- <!-- =========================== Recipe Book ================================= -->
-     <a href="./projects/Recipe Book/index.html" class="card" target="_blank">
-        <div class="card-cover counter-cover-colour">
-            <img src="./assets/image/recipe.webp" alt="recipebook">
-        </div>
-        <div class="card-content">
-            <h3 class="card-heading">Recipe Book</h3>
-            <p class="card-description">
-                Gather Delicious Secret Recipes!
-            </p>
-        </div>
-    </a>
-    
-<!-- =========================== ================================= -->
-
-    <a href="projects/Othello/index.html" class="card" target="_blank">
-        <div class="card-cover counter-cover-colour">
-            <img src="./assets/image/Othello.png" alt="Othello Game">
-        </div>
-        <div class="card-content">
-            <h3 class="card-heading">Othello Game</h3>
-            <p class="card-description">
-                Othello is a strategic board game where players aim to flip their opponent's discs to their color.
-            </p>
-        </div>
-    </a>
+    </a>      
 
-     
-    <a href="./projects/bookstore/home.html" class="card" target="_blank">
-        <div class="card-cover counter-cover-colour">
-            <img src="./assets/image/online_bookstore.jpg" alt="recipebook">
-        </div>
-        <div class="card-content">
-            <h3 class="card-heading">Online Bookstore</h3>
-            <p class="card-description">
-                For the love of reading-Anytime Anywhere
-            </p>
-        </div>
-    </a>
+  <!-- =========================== Fund tracking ================================= -->
 
+        <a href="projects/Fund-tracking/index.html" class="card" target="_blank">
+            <div class="card-cover counter-cover-colour" style="background-image: url('projects/Fund-tracking/design/desktop-design.jpg'); background-size: cover; background-position: center; height: 10rem;">
+            </div>
+            <div class="card-content">
+                <h3 class="card-heading">Fund Tracking</h3>
+                <p class="card-description">
+                    This project helps visually represent government funding and tracking.
+                </p>
+            </div>
+        </a>
 
+        
 
-    <a href="projects/Eigen Value and Vector Calculator/index.html" class="card" target="_blank">
-        <div class="card-cover counter-cover-colour">
-            <img src="./assets/image/Eigen-Value-and-Vector-Calculator.png" alt="Eigen Value and Vector Calculator">
-        </div>
-        <div class="card-content">
-            <h3 class="card-heading">Eigen Value and Vector Calculator</h3>
-            <p class="card-description">
-                Eigen Value and Vector Calculator
-            </p>
-        </div>
-    </a>
-        </div>
+<!-- </div> -->
 
     </section>
     <!--============================== End =========================================== -->
 
     <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
-    <div>
+    <div class="feedback-form">
 
         <section id="feedback">
             <div class="container">
@@ -3360,8 +3570,8 @@ <h2>We Value Your Feedback!</h2>
         <p id="rating-value">Rating: 0</p>
     
         <div class="form-group">
-            <label for="feedback">Your Feedback</label>
-            <textarea id="feedback" name="feedback" rows="5" placeholder="Tell us about your experience..." required></textarea>
+            <label for="feedback-content">Your Feedback</label>
+            <textarea id="feedback-content" name="feedback" rows="5" placeholder="Tell us about your experience..." required></textarea>
           </div>
     
         <style>
@@ -3399,6 +3609,9 @@ <h2>We Value Your Feedback!</h2>
             });
         }
     });
+
+
+
     </script>
 
 
@@ -3432,7 +3645,6 @@ <h2>We Value Your Feedback!</h2>
     <style>
         /* Feedback Form Section */
         #feedback {
-            background: linear-gradient(to right, #faf9fa, #fefefe);
             padding: 50px 20px;
             display: flex;
             justify-content: center;
@@ -3441,6 +3653,34 @@ <h2>We Value Your Feedback!</h2>
             color: black;
         }
 
+
+        /* Dark theme of the Fedback Section */
+        [data-theme="dark"] .feedback-form input,
+        [data-theme="dark"] .feedback-form textarea,
+        [data-theme="dark"] .form-group textarea
+        [data-theme="dark"] .form-group #feedback-content{
+            background-color:#000327;
+            color:white;
+        }
+        
+        [data-theme="dark"] #feedback{
+            background:#000327;
+            border-top:1px solid #333;
+        }
+
+        [data-theme="dark"] .dark-change{
+            color:white !important;;
+            background-color: #000327;
+        }
+
+        [data-theme="dark"] .quickLinks{
+            color:white !important;;
+            background-color: #000327;
+        }
+
+
+
+
         #feedback h2 {
             font-size: 2rem;
             margin-bottom: 10px;
@@ -3514,12 +3754,9 @@ <h2>We Value Your Feedback!</h2>
             padding: 0;
         }
     </style>
-    <!-- Footer -->
 
-    <!-- Footer -->
-    <footer>
+    <!-- <footer>
         <div class="footer-content">
-            <!-- Quick Links Section -->
             <div class="footer-section quick-links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -3530,12 +3767,10 @@ <h3>Quick Links</h3>
                     <li><a href="#">Contact</a></li>
                 </ul>
             </div>
-            <!-- About Us Section -->
-            <div class="footer-section about-us">
+            <div class="footer-section about-us" id="about">
                 <h3>About Us</h3>
                 <p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
             </div>
-            <!-- Newsletter Section -->
             <div class="footer-section newsletter">
                 <h3>Subscribe to Our Newsletter</h3>
                 <form>
@@ -3545,6 +3780,7 @@ <h3>Subscribe to Our Newsletter</h3>
             </div>
         </div>
 
+    </footer>  -->
 
 
     <!-- Added FAQ Section -->
@@ -3590,6 +3826,18 @@ <h3 class="faq-question">Where can I find the source code?</h3>
             margin-bottom: 20px;
             font-size: 2rem;
         }
+
+        /*Dark Mode theme styling adjustments*/
+        [data-theme="dark"] #faq,
+        [data-theme="dark"] #faq h2{
+            background-color:#000327;
+            color:white;
+        }
+
+        [data-theme="dark"] .faq-item h3,
+        [data-theme="dark"] .faq-item p{
+            color:white;
+        }
         
         .faq-item {
             margin-bottom: 15px;
@@ -3616,21 +3864,44 @@ <h3 class="faq-question">Where can I find the source code?</h3>
             font-size: 1rem;
             color: #666;
         }
-    </style>
+        
+        </style>
     
     <script>
-        document.querySelectorAll('.faq-question').forEach(question => {
-            question.addEventListener('click', () => {
-                const answer = question.nextElementSibling;
-                answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+        document.addEventListener('DOMContentLoaded', function () {
+    const faqQuestions = document.querySelectorAll('.faq-question');
+
+    faqQuestions.forEach(question => {
+        question.addEventListener('click', (event) => {
+            // Prevent event from bubbling up to the document click handler
+            event.stopPropagation();
+
+            // Close all answers
+            faqQuestions.forEach(q => {
+                const answer = q.nextElementSibling;
+                answer.style.display = 'none'; // Hide all answers
             });
+
+            // Toggle the clicked question's answer
+            const answer = question.nextElementSibling;
+            answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+        });
+    });
+
+    // Close answers when clicking outside
+    document.addEventListener('click', () => {
+        faqQuestions.forEach(q => {
+            const answer = q.nextElementSibling;
+            answer.style.display = 'none'; // Hide all answers
         });
+    });
+});
     </script>
     
     
 
 <!-- Footer -->
-<footer>
+<footer id="footer1">
     <div class="footer-content">
         <!-- Quick Links Section -->
         <div class="footer-section quick-links">
@@ -3643,22 +3914,24 @@ <h3>Quick Links</h3>
                 <li><a href="./contact.html">Contact</a></li>
             </ul>
         </div>
+
         <!-- About Us Section -->
         <div class="footer-section about-us">
             <h3>About Us</h3>
             <p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
         </div>
-        
 
         <!-- Newsletter Section -->
         <div class="footer-section newsletter">
             <h3>Subscribe to Our Newsletter</h3>
             <form>
                 <input type="email" placeholder="Enter your email" required>
-                <button type="submit">Subscribe</button>
+               <button type="submit" class="subscribe">Subscribe</button>
+               
             </form>
         </div>
-        <div class="follow-us">
+
+        <div class="footer-section follow-us" id="footer-section">
             <DIV>
                 <h3>Follow Us</h3>
             <a href="https://www.linkedin.com/in/berajeevkumar/" target="_blank">
@@ -3672,10 +3945,76 @@ <h3>Follow Us</h3>
             </a>
             </DIV>
         </div>
-    </div><a href=""> <style>
+
+    </div>
+
+
+     <!-- Bottom Links Section  -->
+<ul class="gridbox">
+        <li><a href="#">Help Centre</a></li>
+        <li><a href="./welcometestimonials.html">Testimonials</a></li>
+        <li><a href="#">Account</a></li>
+        <li><a href="#">Media Centre</a></li>
+        <li><a href="./terms.html">Terms of Use</a></li>
+        <li><a href="./privacy.html">Privacy</a></li>
+        <li><a href="#">Cookie Preferences</a></li>
+        <li><a href="./contact.html">Contact Us</a></li>
+    </ul>
+    <!-- Share Section -->
+    <div class="share-section">
+        <button id="shareBtn">Share Us</button>
+    </div>
+    <!-- Social Media Icons -->
+    
+    <div class="footer-bottom" id="footer-bottom">
+        <div class="social-icons">
+            <a href="#"><i class="fab fa-facebook-f"></i></a>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+            <a href="#"><i class="fab fa-instagram"></i></a>
+            <a href="#"><i class="fab fa-linkedin-in"></i></a> 
+            <a href="#"><i class="fab fa-youtube"></i></a> 
+            <a href="#"><i class="fab fa-pinterest"></i></a> 
+            <a href="#"><i class="fab fa-snapchat-ghost"></i></a>
+        </div>
+        <p>© 2024 Open Projects. All Rights Reserved. </p>
+    </div>
+
+    <link rel="stylesheet" href="visi.css">
+<!-- ############### Footer ############### -->
+<!-- Footer Visitor Counter -->
+<div class="visitor-counter-container">
+    <div class="visitor-counter">
+        <div>Visitor Count: </div>
+        <div class="website-counter"></div>
+    </div>
+</div>
+
+<script src="visi.js"></script>
+</footer>
+
+
+
+<script>
+    document.getElementById('shareBtn').addEventListener('click', function () {
+        if (navigator.share) {
+            navigator.share({
+                title: 'Contact Us',
+                text: 'Check out this Contact Us page!',
+                url: window.location.href
+            }).then(() => {
+                console.log('Thanks for sharing!');
+            }).catch((error) => {
+                console.error('Error sharing:', error);
+            });
+        } else {
+            alert('Web Share API is not supported in your browser.');
+        }
+    });
+</script>
+
+    <style>
         .share-section {
             text-align: center;
-            margin-top: 20px;
         }
         #shareBtn {
             background-color: #f71257;
@@ -3684,72 +4023,11 @@ <h3>Follow Us</h3>
             border: none;
             border-radius: 5px;
             cursor: pointer;
-        }
-        #shareBtn:hover {
-            background-color: #f8bab5;
+
         }
     </style>
-</head>
-<body>
-            <div class="share-section">
-                <button id="shareBtn">Share Us</button>
-            </div>
-        </div>
-    </section>
-    <script>
-        document.getElementById('shareBtn').addEventListener('click', function() {
-            if (navigator.share) {
-                navigator.share({
-                    title: 'Contact Us',
-                    text: 'Check out this Contact Us page!',
-                    url: window.location.href
-                }).then(() => {
-                    console.log('Thanks for sharing!');
-                }).catch((error) => {
-                    console.error('Error sharing:', error);
-                });
-            } else {
-                alert('Web Share API is not supported in your browser.');
-            }
-        });
-    </script>
-</a></li>
-
-        <!-- Bottom Links Section -->
-        <ul class="gridbox">
-            <li><a href="#">Help Centre</a></li>
-            <li><a href="./welcometestimonials.html">Testimonials</a></li>
-            <li><a href="#">Account</a></li>
-            <li><a href="#">Media Centre</a></li>
-            <li><a href="./terms.html">Terms of Use</a></li>
-            <li><a href="./privacy.html">Privacy</a></li>
-            
-            <li><a href="#">Cookie Preferences</a></li>
-            <li><a href="./contact.html">Contact Us</a></li>
-            
-        </ul>
-        
-        <!-- Footer Bottom -->
-        <div class="footer-bottom">
-            <div class="social-icons">
-                <a href="#"><i class="fab fa-facebook-f"></i></a>
-                <a href="#"><i class="fab fa-twitter"></i></a>
-                <a href="#"><i class="fab fa-instagram"></i></a>
-                <a href="#"><i class="fab fa-linkedin-in"></i></a> <!-- LinkedIn -->
-                <a href="#"><i class="fab fa-youtube"></i></a> <!-- YouTube -->
-                <a href="#"><i class="fab fa-pinterest"></i></a> <!-- Pinterest -->
-                <a href="#"><i class="fab fa-snapchat-ghost"></i></a>
-            </div>
-            <p>© 2024 Open Projects. All Rights Reserved. </p>
-        </div>
-    </footer>
-
-</body>
-
-</html>
-
+    
 
-</section>
 
 <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
 
@@ -3759,8 +4037,8 @@ <h3>Follow Us</h3>
 <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
+<!-- visitor -->
 
-visitor
 
 <script>
     // Function to redirect to quiz.html
@@ -3779,30 +4057,15 @@ <h3>Follow Us</h3>
     
 
 <br /><br />
-<link rel="stylesheet" href="visi.css">
-<!-- ############### Footer ############### -->
-<div class="visitor-counter">
-    <div>Visitor</div>
-    <div class="website-counter"></div>
-</div>
-<script src="path/to/visitorCounter.js"></script>
-<script src="./assets/css/visitors.css"></script>
-<script src="visi.js"></script>
-
-
-main
- main
-
-
 
  
 
   
-    <style>
+<style>
 
 body {
-
 font-family: Arial, sans-serif;
+height: auto;
 
 }
 
@@ -3822,7 +4085,7 @@ <h3>Follow Us</h3>
 
 }
 .source-code-btn {
-    background-color:#f74b67 ;
+    background-color:#f02647 ;
 }
 .popup-content {
 
@@ -3964,8 +4227,9 @@ <h3>Follow Us</h3>
   
             font-size: 24px;
             background: linear-gradient(to right, #913700, #ff6000, #913700); 
-            -webkit-text-fill-color: transparent; 
-            -webkit-background-clip: text; 
+            -webkit-text-fill-color: transparent;
+            background-clip: text; 
+            -webkit-background-clip: text;
             text-align: center;
             margin-bottom: 12px;
             margin-top: 35px;
@@ -4076,7 +4340,7 @@ <h3>Follow Us</h3>
         }
   
   
-      </style>
+</style>
       <div id="popup-nl" class="popup-nl">
         <div class="popup-content-nl">
             <div class="popup-left-nl">
@@ -4212,8 +4476,6 @@ <h2 class="uppercase">What coding language do you prefer for web development?</h
     console.log("Poll script initialized and ready!");
 
 </script>
-
-
       <script>
 
         window.addEventListener('scroll', function() {
@@ -4223,7 +4485,19 @@ <h2 class="uppercase">What coding language do you prefer for web development?</h
             document.getElementById('progress-bar').style.width = scrolled + '%';
         });
         </script>
+        <script>
+            window.embeddedChatbotConfig = {
+            chatbotId: "o-lDohBc94uxdbXEgdlEU",
+            domain: "www.chatbase.co"
+            }
+            </script>
+            <script
+            src="https://www.chatbase.co/embed.min.js"
+            chatbotId="o-lDohBc94uxdbXEgdlEU"
+            domain="www.chatbase.co"
+            defer>
+            </script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/js/app.js b/js/app.js
index 752d6a2dd..55ae93f02 100644
--- a/js/app.js
+++ b/js/app.js
@@ -6,6 +6,15 @@ const savedTheme = localStorage.getItem("theme");
 function setTheme(theme) {
   document.documentElement.setAttribute("data-theme", theme);
   localStorage.setItem("theme", theme);
+
+const footer = document.getElementById("footer1");
+  if (theme === "dark") {
+    // footerBottom.classList.add("dark-change");
+    footer.classList.add("dark-change");
+  } else {
+    // footerBottom.classList.remove("dark-change");
+    footer.classList.remove("dark-change");
+  }
 }
 
 if (savedTheme == "dark") {
@@ -16,6 +25,7 @@ if (savedTheme == "dark") {
   setTheme("light");
 }
 
+
 toggleModeBtn.onclick = () => {
   const currentTheme = document.documentElement.getAttribute("data-theme");
   const newTheme = currentTheme === "light" ? "dark" : "light";
diff --git a/mindful-breating.html b/mindful-breating.html
new file mode 100644
index 000000000..c89f7df1d
--- /dev/null
+++ b/mindful-breating.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mindfulness Breathing App</title>
+    <style>
+        /* Reset */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Arial, sans-serif;
+        }
+
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background-color: #eefec7;
+            color: #333;
+        }
+
+        .app-container {
+            text-align: center;
+        }
+
+        .circle {
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            background-color: #87ceeb;
+            margin: 0 auto;
+            transition: transform 4s ease-in-out;
+        }
+
+        .text {
+            margin-top: 20px;
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+
+        .small-text {
+            margin-top: 10px;
+            font-size: 1rem;
+            color: #555;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <div class="circle" id="breathingCircle"></div>
+        <br>
+        <br>
+        <div class="text" id="breathingText">Breathe In</div>
+        <div class="small-text">Follow the circle for a calming experience</div>
+    </div>
+
+    <script>
+        const circle = document.getElementById('breathingCircle');
+        const text = document.getElementById('breathingText');
+        
+        const totalTime = 10000; // Total time for one cycle (12 seconds)
+        const breatheInTime = (totalTime / 6) * 2; // 4 seconds for inhale
+        const holdTime = totalTime / 6; // 2 seconds for hold
+        const breatheOutTime = (totalTime / 6) * 3; // 6 seconds for exhale
+
+        function breathAnimation() {
+            text.innerText = 'Breathe In';
+            circle.style.transform = 'scale(1.5)';
+            
+            setTimeout(() => {
+                text.innerText = 'Hold';
+                
+                setTimeout(() => {
+                    text.innerText = 'Breathe Out';
+                    circle.style.transform = 'scale(1)';
+                }, holdTime);
+            }, breatheInTime);
+        }
+
+        // Run the animation in a loop
+        setInterval(breathAnimation, totalTime);
+    </script>
+</body>
+</html>
diff --git a/movie recommendation app/app.js b/movie recommendation app/app.js
new file mode 100644
index 000000000..3718c75ad
--- /dev/null
+++ b/movie recommendation app/app.js	
@@ -0,0 +1,35 @@
+const arrows = document.querySelectorAll(".arrow");
+const movieLists = document.querySelectorAll(".movie-list");
+
+arrows.forEach((arrow, i) => {
+  const itemNumber = movieLists[i].querySelectorAll("img").length;
+  let clickCounter = 0;
+  arrow.addEventListener("click", () => {
+    const ratio = Math.floor(window.innerWidth / 270);
+    clickCounter++;
+    if (itemNumber - (4 + clickCounter) + (4 - ratio) >= 0) {
+      movieLists[i].style.transform = `translateX(${
+        movieLists[i].computedStyleMap().get("transform")[0].x.value - 300
+      }px)`;
+    } else {
+      movieLists[i].style.transform = "translateX(0)";
+      clickCounter = 0;
+    }
+  });
+
+  console.log(Math.floor(window.innerWidth / 270));
+});
+
+//TOGGLE
+
+const ball = document.querySelector(".toggle-ball");
+const items = document.querySelectorAll(
+  ".container,.movie-list-title,.navbar-container,.sidebar,.left-menu-icon,.toggle"
+);
+
+ball.addEventListener("click", () => {
+  items.forEach((item) => {
+    item.classList.toggle("active");
+  });
+  ball.classList.toggle("active");
+});
\ No newline at end of file
diff --git a/movie recommendation app/img/1.jpeg b/movie recommendation app/img/1.jpeg
new file mode 100644
index 000000000..5315c04e3
Binary files /dev/null and b/movie recommendation app/img/1.jpeg differ
diff --git a/movie recommendation app/img/10.jpg b/movie recommendation app/img/10.jpg
new file mode 100644
index 000000000..df10ac987
Binary files /dev/null and b/movie recommendation app/img/10.jpg differ
diff --git a/movie recommendation app/img/11.jpg b/movie recommendation app/img/11.jpg
new file mode 100644
index 000000000..5ffbc31ab
Binary files /dev/null and b/movie recommendation app/img/11.jpg differ
diff --git a/movie recommendation app/img/12.jpg b/movie recommendation app/img/12.jpg
new file mode 100644
index 000000000..711e470d9
Binary files /dev/null and b/movie recommendation app/img/12.jpg differ
diff --git a/movie recommendation app/img/13.jpg b/movie recommendation app/img/13.jpg
new file mode 100644
index 000000000..f742a7d94
Binary files /dev/null and b/movie recommendation app/img/13.jpg differ
diff --git a/movie recommendation app/img/14.jpg b/movie recommendation app/img/14.jpg
new file mode 100644
index 000000000..3f654a388
Binary files /dev/null and b/movie recommendation app/img/14.jpg differ
diff --git a/movie recommendation app/img/15.jpg b/movie recommendation app/img/15.jpg
new file mode 100644
index 000000000..d534c5fb7
Binary files /dev/null and b/movie recommendation app/img/15.jpg differ
diff --git a/movie recommendation app/img/16.jpg b/movie recommendation app/img/16.jpg
new file mode 100644
index 000000000..760872876
Binary files /dev/null and b/movie recommendation app/img/16.jpg differ
diff --git a/movie recommendation app/img/17.jpg b/movie recommendation app/img/17.jpg
new file mode 100644
index 000000000..e69457fdd
Binary files /dev/null and b/movie recommendation app/img/17.jpg differ
diff --git a/movie recommendation app/img/18.jpg b/movie recommendation app/img/18.jpg
new file mode 100644
index 000000000..2185ac2c5
Binary files /dev/null and b/movie recommendation app/img/18.jpg differ
diff --git a/movie recommendation app/img/19.jpg b/movie recommendation app/img/19.jpg
new file mode 100644
index 000000000..ba489aa27
Binary files /dev/null and b/movie recommendation app/img/19.jpg differ
diff --git a/movie recommendation app/img/2.jpeg b/movie recommendation app/img/2.jpeg
new file mode 100644
index 000000000..e8a9cfda1
Binary files /dev/null and b/movie recommendation app/img/2.jpeg differ
diff --git a/movie recommendation app/img/3.jpg b/movie recommendation app/img/3.jpg
new file mode 100644
index 000000000..98d86d8a6
Binary files /dev/null and b/movie recommendation app/img/3.jpg differ
diff --git a/movie recommendation app/img/4.jpg b/movie recommendation app/img/4.jpg
new file mode 100644
index 000000000..27c6e6cbc
Binary files /dev/null and b/movie recommendation app/img/4.jpg differ
diff --git a/movie recommendation app/img/5.jpg b/movie recommendation app/img/5.jpg
new file mode 100644
index 000000000..a947f118c
Binary files /dev/null and b/movie recommendation app/img/5.jpg differ
diff --git a/movie recommendation app/img/6.jpg b/movie recommendation app/img/6.jpg
new file mode 100644
index 000000000..612536e6b
Binary files /dev/null and b/movie recommendation app/img/6.jpg differ
diff --git a/movie recommendation app/img/7.jpg b/movie recommendation app/img/7.jpg
new file mode 100644
index 000000000..ee9fd350a
Binary files /dev/null and b/movie recommendation app/img/7.jpg differ
diff --git a/movie recommendation app/img/8.jpg b/movie recommendation app/img/8.jpg
new file mode 100644
index 000000000..10209ac1c
Binary files /dev/null and b/movie recommendation app/img/8.jpg differ
diff --git a/movie recommendation app/img/9.jpg b/movie recommendation app/img/9.jpg
new file mode 100644
index 000000000..d5f75d387
Binary files /dev/null and b/movie recommendation app/img/9.jpg differ
diff --git a/movie recommendation app/img/f-1.jpg b/movie recommendation app/img/f-1.jpg
new file mode 100644
index 000000000..e67e51ef1
Binary files /dev/null and b/movie recommendation app/img/f-1.jpg differ
diff --git a/movie recommendation app/img/f-2.jpg b/movie recommendation app/img/f-2.jpg
new file mode 100644
index 000000000..a54fd7f8a
Binary files /dev/null and b/movie recommendation app/img/f-2.jpg differ
diff --git a/movie recommendation app/img/f-t-1.png b/movie recommendation app/img/f-t-1.png
new file mode 100644
index 000000000..123c7c622
Binary files /dev/null and b/movie recommendation app/img/f-t-1.png differ
diff --git a/movie recommendation app/img/f-t-2.png b/movie recommendation app/img/f-t-2.png
new file mode 100644
index 000000000..77c585e4a
Binary files /dev/null and b/movie recommendation app/img/f-t-2.png differ
diff --git a/movie recommendation app/img/profile.jpg b/movie recommendation app/img/profile.jpg
new file mode 100644
index 000000000..ce5dc150a
Binary files /dev/null and b/movie recommendation app/img/profile.jpg differ
diff --git a/movie recommendation app/index.html b/movie recommendation app/index.html
new file mode 100644
index 000000000..0f45656ea
--- /dev/null
+++ b/movie recommendation app/index.html	
@@ -0,0 +1,304 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Sen:wght@400;700;800&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
+    <title>Movie Design</title>
+</head>
+
+<body>
+    <div class="navbar">
+        <div class="navbar-container">
+            <div class="logo-container">
+                <h1 class="logo">flakes</h1>
+            </div>
+            <div class="menu-container">
+                <ul class="menu-list">
+                    <li class="menu-list-item active">Home</li>
+                    <li class="menu-list-item">Movies</li>
+                    <li class="menu-list-item">Series</li>
+                    <li class="menu-list-item">Popular</li>
+                    <li class="menu-list-item">Trends</li>
+
+                </ul>
+            </div>
+            <div class="profile-container">
+                <img class="profile-picture" src="img/profile.jpg" alt="">
+                <div class="profile-text-container">
+                    <span class="profile-text">Profile</span>
+                    <i class="fas fa-caret-down"></i>
+                </div>
+                <div class="toggle">
+                    <i class="fas fa-moon toggle-icon"></i>
+                    <i class="fas fa-sun toggle-icon"></i>
+                    <div class="toggle-ball"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="sidebar">
+        <i class="left-menu-icon fas fa-search"></i>
+        <i class="left-menu-icon fas fa-home"></i>
+        <i class="left-menu-icon fas fa-users"></i>
+        <i class="left-menu-icon fas fa-bookmark"></i>
+        <i class="left-menu-icon fas fa-tv"></i>
+        <i class="left-menu-icon fas fa-hourglass-start"></i>
+        <i class="left-menu-icon fas fa-shopping-cart"></i>
+    </div>
+    <div class="container">
+        <div class="content-container">
+            <div class="featured-content"
+                style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('img/f-1.jpg');">
+                <img class="featured-title" src="img/f-t-1.png" alt="">
+                <p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
+                    deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
+                    minima voluptatibus incidunt. Accusamus, provident.</p>
+                <button class="featured-button">WATCH</button>
+            </div>
+            <div class="movie-list-container">
+                <h1 class="movie-list-title">NEW RELEASES</h1>
+                <div class="movie-list-wrapper">
+                    <div class="movie-list">
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/1.jpeg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">in this film tells all about the condition of rural area ,how a person can phase a difficult conditon in village and adopt the bad environment.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/2.jpeg" alt="">
+                            <span class="movie-list-item-title">Star Wars</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/3.jpg" alt="">
+                            <span class="movie-list-item-title">Storm</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/4.jpg" alt="">
+                            <span class="movie-list-item-title">1917</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/5.jpg" alt="">
+                            <span class="movie-list-item-title">Avengers</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/6.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/7.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                    </div>
+                    <i class="fas fa-chevron-right arrow"></i>
+                </div>
+            </div>
+            <div class="movie-list-container">
+                <h1 class="movie-list-title">NEW RELEASES</h1>
+                <div class="movie-list-wrapper">
+                    <div class="movie-list">
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/8.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/9.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/10.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/11.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/12.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/1.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/1.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                    </div>
+                    <i class="fas fa-chevron-right arrow"></i>
+                </div>
+            </div>
+            <div class="featured-content"
+                style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('img/f-2.jpg');">
+                <img class="featured-title" src="img/f-t-2.png" alt="">
+                <p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
+                    deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
+                    minima voluptatibus incidunt. Accusamus, provident.</p>
+                <button class="featured-button">WATCH</button>
+            </div>
+            <div class="movie-list-container">
+                <h1 class="movie-list-title">NEW RELEASES</h1>
+                <div class="movie-list-wrapper">
+                    <div class="movie-list">
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/1.jpeg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/2.jpeg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/15.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/3.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/4.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/5.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/1.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                    </div>
+                    <i class="fas fa-chevron-right arrow"></i>
+                </div>
+            </div>
+            <div class="movie-list-container">
+                <h1 class="movie-list-title">NEW RELEASES</h1>
+                <div class="movie-list-wrapper">
+                    <div class="movie-list">
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/17.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/18.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/19.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/7.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/1.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img/1.jpg" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                        <div class="movie-list-item">
+                            <img class="movie-list-item-img" src="img\1.jpg.url" alt="">
+                            <span class="movie-list-item-title">Her</span>
+                            <p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
+                                hic fugit similique accusantium.</p>
+                            <button class="movie-list-item-button">Watch</button>
+                        </div>
+                    </div>
+                    <i class="fas fa-chevron-right arrow"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/movie recommendation app/style.css b/movie recommendation app/style.css
new file mode 100644
index 000000000..064311379
--- /dev/null
+++ b/movie recommendation app/style.css	
@@ -0,0 +1,274 @@
+* {
+  margin: 0;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+}
+
+.navbar {
+  width: 100%;
+  height: 50px;
+  background-color: black;
+  position: sticky;
+  top: 0;
+}
+
+.navbar-container {
+  display: flex;
+  align-items: center;
+  padding: 0 50px;
+  height: 100%;
+  color: white;
+  font-family: "Sen", sans-serif;
+}
+
+.logo-container {
+  flex: 1;
+}
+
+.logo {
+  font-size: 30px;
+  color: #4dbf00;
+}
+
+.menu-container {
+  flex: 6;
+}
+
+.menu-list {
+  display: flex;
+  list-style: none;
+}
+
+.menu-list-item {
+  margin-right: 30px;
+}
+
+.menu-list-item.active {
+  font-weight: bold;
+}
+.profile-container {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.profile-text-container {
+  margin: 0 20px;
+}
+
+.profile-picture {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.toggle {
+  width: 40px;
+  height: 20px;
+  background-color: white;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: relative;
+}
+
+.toggle-icon {
+  color: goldenrod;
+}
+
+.toggle-ball {
+  width: 18px;
+  height: 18px;
+  background-color: black;
+  position: absolute;
+  right: 1px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: 1s ease all;
+}
+
+.sidebar {
+  width: 50px;
+  height: 100%;
+  background-color: black;
+  position: fixed;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 60px;
+}
+
+.left-menu-icon {
+  color: white;
+  font-size: 20px;
+  margin-bottom: 40px;
+}
+
+.container {
+  background-color: #151515;
+  min-height: calc(100vh - 50px);
+  color: white;
+}
+
+.content-container {
+  margin-left: 50px;
+}
+
+.featured-content {
+  height: 50vh;
+  padding: 50px;
+}
+
+.featured-title {
+  width: 200px;
+}
+
+.featured-desc {
+  width: 500px;
+  color: lightgray;
+  margin: 30px 0;
+}
+
+.featured-button {
+  background-color: #4dbf00;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 10px;
+  border: none;
+  outline: none;
+  font-weight: bold;
+}
+
+.movie-list-container {
+  padding: 0 20px;
+}
+
+.movie-list-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.movie-list {
+  display: flex;
+  align-items: center;
+  height: 300px;
+  transform: translateX(0);
+  transition: all 1s ease-in-out;
+}
+
+.movie-list-item {
+  margin-right: 30px;
+  position: relative;
+}
+
+.movie-list-item:hover .movie-list-item-img {
+  transform: scale(1.2);
+  margin: 0 30px;
+  opacity: 0.5;
+}
+
+.movie-list-item:hover .movie-list-item-title,
+.movie-list-item:hover .movie-list-item-desc,
+.movie-list-item:hover .movie-list-item-button {
+  opacity: 1;
+}
+
+.movie-list-item-img {
+  transition: all 1s ease-in-out;
+  width: 270px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 20px;
+}
+
+.movie-list-item-title {
+  background-color: #333;
+  padding: 0 10px;
+  font-size: 32px;
+  font-weight: bold;
+  position: absolute;
+  top: 10%;
+  left: 50px;
+  opacity: 0;
+  transition: 1s all ease-in-out;
+}
+
+.movie-list-item-desc {
+  background-color: #333;
+  padding: 10px;
+  font-size: 14px;
+  position: absolute;
+  top: 30%;
+  left: 50px;
+  width: 230px;
+  opacity: 0;
+  transition: 1s all ease-in-out;
+}
+
+.movie-list-item-button {
+  padding: 10px;
+  background-color: #4dbf00;
+  color: white;
+  border-radius: 10px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  bottom: 20px;
+  left: 50px;
+  opacity: 0;
+  transition: 1s all ease-in-out;
+}
+
+.arrow {
+  font-size: 120px;
+  position: absolute;
+  top: 90px;
+  right: 0;
+  color: lightgray;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.container.active {
+  background-color: white;
+}
+
+.movie-list-title.active {
+  color: black;
+}
+
+.navbar-container.active {
+  background-color: white;
+
+  color: black;
+}
+
+.sidebar.active{
+    background-color: white;
+}
+
+.left-menu-icon.active{
+    color: black;
+}
+
+.toggle.active{
+    background-color: black;
+}
+
+.toggle-ball.active{
+    background-color: white;
+    transform: translateX(-20px);
+}
+
+@media only screen and (max-width: 940px){
+    .menu-container{
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/navbar.css b/navbar.css
new file mode 100644
index 000000000..c9456edad
--- /dev/null
+++ b/navbar.css
@@ -0,0 +1,330 @@
+@media (max-width: 1200px) {
+  .footer-container {
+    padding: 20px;
+  }
+
+  .mwd-footer-content {
+    text-align: center;
+  }
+
+  .tags.social {
+    justify-content: center;
+  }
+
+  .btn {
+    margin-top: 10px;
+    border-radius: 5px;
+  }
+
+  .btn-primary:hover {
+    background-color: #0056b3;
+  }
+
+  .btn-secondary:hover {
+    background-color: #6c757d;
+  }
+}
+
+.circle {
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(circle, rgb(244, 63, 94), rgb(253, 91, 118));
+  transition: transform 0.1s, left 0.1s, top 0.1s;
+  background-color: #f43f5e;
+}
+
+.circle-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+/* Chatbot Container */
+
+.chatbot-container {
+  position: fixed;
+  bottom: 34px;
+  /* Adjust as needed */
+  right: 100px;
+  /* Adjust as needed */
+  z-index: 1000;
+  /* Ensure it appears above other elements */
+}
+
+/* Chatbot Button */
+.chatbot-button {
+  background-color: #007bff;
+  /* Change to your preferred color */
+  border: none;
+  border-radius: 50%;
+  padding: 5px;
+  /* Smaller padding */
+  cursor: pointer;
+  position: relative;
+  width: 50px;
+  /* Adjusted size */
+  height: 50px;
+  /* Adjusted size */
+}
+
+/* Button Image */
+.chatbot-button img {
+  width: 30px;
+  /* Adjusted image size */
+  height: 30px;
+  /* Adjusted image size */
+}
+
+/* Tooltip Text */
+.tooltip-text {
+  display: none;
+  /* Hide by default */
+  position: absolute;
+  bottom: 100%;
+  /* Position above the button */
+  right: 50%;
+  transform: translateX(50%);
+  background-color: #333;
+  /* Background color for tooltip */
+  color: #fff;
+  /* Tooltip text color */
+  padding: 5px;
+  border-radius: 5px;
+  white-space: nowrap;
+  /* Prevent text from wrapping */
+}
+
+/* Show Tooltip on Hover */
+.chatbot-button:hover .tooltip-text {
+  display: block;
+  /* Show on hover */
+}
+
+/* Chat Window Styles */
+.chat-window {
+  position: fixed;
+  bottom: 90px;
+  /* Adjust based on the button size */
+  right: 20px;
+  /* Same as the button */
+  width: 400px;
+  /* Smaller width */
+  height: 500px;
+  /* Fixed height for compactness */
+  border: 1px solid #ccc;
+  background-color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  display: none;
+  /* Hidden by default */
+  z-index: 1000;
+  /* Ensure it appears above other elements */
+}
+
+/* Iframe for Chatbot HTML */
+#chat-iframe {
+  width: 100%;
+  /* Full width of the chat window */
+  height: calc(100% - 40px);
+  /* Height minus header */
+  border: none;
+  /* Remove border */
+}
+
+@keyframes appear {
+  from {
+    opacity: 0;
+    scale: 0.4;
+  }
+
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+.card {
+  animation: appear 5s linear;
+  animation-timeline: view();
+  animation-range: entry 0% cover 40%;
+}
+body {
+  font-family: "Poppins", sans-serif;
+  min-height: 2000px; /* Add some height to enable scrolling */
+  margin: 0;
+  padding: 0;
+}
+
+/* Scroll to Top Button Styles */
+.top-btn {
+  display: none;
+  width: 50px;
+  height: 50px;
+  position: fixed;
+  bottom: 23px;
+  right: 44px;
+  background-color: #ab45e7;
+  color: #ffffff;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+}
+
+.top-btn:hover {
+  background-color: #c91e57;
+}
+.source-code-btn {
+  color: white;
+  background-color: #f5f5dc;
+  padding: 10px 20px;
+  border: 2px solid #d4d4aa;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+}
+
+.source-code-btn:hover {
+  background-color: #e0e0c1;
+  color: #222;
+  border-color: #c1c17d;
+  transform: translateY(-2px);
+}
+
+:root {
+  /* Light theme colors */
+  --bg-color-light: #ffffff;
+  --text-color-light: #333;
+  --accent-color-light: #ffa500; /* light orange */
+  /* Dark theme colors */
+  --bg-color-dark: #1c1c1c;
+  --text-color-dark: #f5f5f5;
+  --accent-color-dark: #ffcc80; /* lighter orange */
+  /* Default theme */
+  --bg-color: var(--bg-color-light);
+  --text-color: var(--text-color-light);
+  --accent-color: var(--accent-color-light);
+}
+/* Theme styles based on data-theme attribute */
+[data-theme="dark"] {
+  --bg-color: var(--bg-color-dark);
+  --text-color: var(--text-color-dark);
+  --accent-color: var(--accent-color-dark);
+}
+/* Navbar container */
+.navbar {
+  width: 100%;
+  padding: 15px 0;
+  background-color: var(--bg-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid var(--accent-color);
+}
+/* Navbar list */
+.navbar ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
+}
+/* Navbar items */
+.navbar ul li {
+  position: relative;
+}
+/* Navbar links */
+.navbar ul li a {
+  font-family: "Poppins", sans-serif;
+  color: var(--text-color);
+  text-decoration: none;
+  padding: 8px 16px;
+  font-weight: 500;
+  font-size: 16px;
+  transition: color 0.3s ease, transform 0.3s ease;
+  position: relative;
+}
+
+/* Hover effect with futuristic line animation */
+.navbar ul li a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -5px;
+  height: 2px;
+  background-color: var(--accent-color);
+  width: 0%;
+  transition: width 0.3s ease;
+}
+
+.navbar ul li a:hover {
+  color: var(--accent-color);
+  transform: scale(1.05);
+}
+
+.navbar ul li a:hover::after {
+  width: 100%;
+  animation: underlineAnimation 0.3s forwards;
+}
+
+@keyframes underlineAnimation {
+  from {
+      width: 0%;
+  }
+  to {
+      width: 100%;
+  }
+}
+
+/* Toggle theme button */
+.theme-toggle {
+  position: absolute;
+  right: 20px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--accent-color);
+  transition: transform 0.3s ease;
+}
+.theme-toggle:hover {
+  transform: scale(1.1);
+}
+
+.btn-container {
+  text-align: center; /* Center the buttons */
+  margin: 20px 0; /* Add some margin for spacing */
+}
+
+.nextPrevArrows {
+  display: flex; /* Use flexbox for next/prev buttons */
+  justify-content: center; /* Center the arrows */
+  margin-top: 10px; /* Margin for spacing */
+}
+
+.nextPrevArrows button {
+  background: #ff4d4d; /* Red background */
+  color: white; /* Text color */
+  border: none; /* Remove border */
+  border-radius: 5px; /* Rounded corners */
+  padding: 10px; /* Padding for size */
+  margin: 0 5px; /* Spacing between arrows */
+  cursor: pointer; /* Pointer cursor on hover */
+  font-size: 16px; /* Font size */
+  transition: background 0.3s ease; /* Smooth transition */
+}
+
+.nextPrevArrows button:hover {
+  background: #ff3333; /* Darker red on hover */
+}
diff --git a/path/to/visitorCounter.js b/path/to/visitorCounter.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/pet.html b/pet.html
new file mode 100644
index 000000000..3a9a58125
--- /dev/null
+++ b/pet.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Adopt-a-Pet Gallery</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Arial, sans-serif;
+        }
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: #f3f4f6;
+            color: #333;
+        }
+        .gallery-container {
+            width: 90%;
+            max-width: 800px;
+            padding: 20px;
+            background: #ffffff;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #007bff;
+        }
+        .pet-card {
+            background: #f8f9fa;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .pet-image {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid #007bff;
+        }
+        .pet-info {
+            flex-grow: 1;
+        }
+        .pet-name {
+            font-size: 1.3em;
+            color: #007bff;
+            margin-bottom: 5px;
+        }
+        .pet-details {
+            color: #666;
+            font-size: 0.9em;
+            margin-bottom: 10px;
+        }
+        .adopt-btn {
+            padding: 8px 12px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .adopt-btn:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <div class="gallery-container">
+        <h1>Adopt-a-Pet Gallery</h1>
+        <div id="petGallery"></div>
+    </div>
+
+    <script>
+        const pets = [
+            {
+                name: "Bella",
+                type: "Dog",
+                age: "2 years",
+                description: "A friendly Labrador who loves playing fetch.",
+                image: "./assets/image/bella-dog.jpg"
+            },
+            {
+                name: "Whiskers",
+                type: "Cat",
+                age: "3 years",
+                description: "A calm and cuddly Persian cat.",
+                image: "./assets/image/3year-cat.jpg"
+            },
+            {
+                name: "Charlie",
+                type: "Dog",
+                age: "4 years",
+                description: "An energetic Beagle with a big heart.",
+                image: "./assets/image/4 year dog.jpg"
+            },
+            {
+                name: "Polly",
+                type: "Parrot",
+                age: "1 year",
+                description: "A chatty parrot who loves company.",
+                image: "./assets/image/1-yr-parrot.jpg"
+            }
+        ];
+
+        function loadPets() {
+            const gallery = document.getElementById("petGallery");
+
+            pets.forEach((pet) => {
+                const petCard = document.createElement("div");
+                petCard.classList.add("pet-card");
+
+                petCard.innerHTML = `
+                    <img src="${pet.image}" alt="${pet.name}" class="pet-image">
+                    <div class="pet-info">
+                        <h2 class="pet-name">${pet.name}</h2>
+                        <p class="pet-details">Type: ${pet.type} | Age: ${pet.age}</p>
+                        <p>${pet.description}</p>
+                    </div>
+                    <button class="adopt-btn" onclick="adoptPet('${pet.name}')">Adopt Me!</button>
+                `;
+
+                gallery.appendChild(petCard);
+            });
+        }
+
+        function adoptPet(name) {
+            alert(`Thank you for showing interest in adopting ${name}!`);
+        }
+
+        window.onload = loadPets;
+    </script>
+</body>
+</html>
diff --git a/pokemon game/index.html b/pokemon game/index.html
new file mode 100644
index 000000000..6695bdaf5
--- /dev/null
+++ b/pokemon game/index.html	
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pokémon Battle Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <h1>Pokémon Battle Game</h1>
+  </header>
+  
+  <div class="game-container">
+    <div class="pokemon">
+      <img id="pokemon-image" src="pikachu.jpg" alt="Pikachu">
+      <h2 id="pokemon-name">Pikachu</h2>
+      <p id="pokemon-health">Health: <span>100</span></p>
+    </div>
+
+    <div class="battle-controls">
+      <button id="attack-button">Attack</button>
+      <p id="battle-log">The battle begins!</p>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/pokemon game/pikachu.jpg b/pokemon game/pikachu.jpg
new file mode 100644
index 000000000..5ca745a38
Binary files /dev/null and b/pokemon game/pikachu.jpg differ
diff --git a/pokemon game/script.js b/pokemon game/script.js
new file mode 100644
index 000000000..6ee9d3b5a
--- /dev/null
+++ b/pokemon game/script.js	
@@ -0,0 +1,31 @@
+// Game logic
+let pokemonHealth = 100;
+const pokemonImage = document.getElementById('pokemon-image');
+const pokemonName = document.getElementById('pokemon-name');
+const pokemonHealthDisplay = document.getElementById('pokemon-health');
+const battleLog = document.getElementById('battle-log');
+const attackButton = document.getElementById('attack-button');
+
+// Define the attack function
+function attack() {
+  // Random damage between 5 and 20
+  const damage = Math.floor(Math.random() * 16) + 5;
+  pokemonHealth -= damage;
+
+  // Update health display
+  pokemonHealthDisplay.querySelector('span').textContent = pokemonHealth;
+
+  // Log the battle event
+  battleLog.textContent = `You attacked! ${pokemonName.textContent} took ${damage} damage!`;
+
+  // Check if Pokémon is defeated
+  if (pokemonHealth <= 0) {
+    pokemonHealth = 0;
+    pokemonHealthDisplay.querySelector('span').textContent = pokemonHealth;
+    battleLog.textContent = `${pokemonName.textContent} has fainted! Game over.`;
+    attackButton.disabled = true;  // Disable attack button after faint
+  }
+}
+
+// Add event listener for attack button
+attackButton.addEventListener('click', attack);
diff --git a/pokemon game/style.css b/pokemon game/style.css
new file mode 100644
index 000000000..fe5500db2
--- /dev/null
+++ b/pokemon game/style.css	
@@ -0,0 +1,67 @@
+/* Global styles */
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f1f1f1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+
+header {
+  background-color: #ffcb05;
+  width: 100%;
+  text-align: center;
+  padding: 20px 0;
+}
+
+h1 {
+  margin: 0;
+  font-size: 36px;
+}
+
+.game-container {
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px;
+  width: 300px;
+}
+
+.pokemon {
+  text-align: center;
+}
+
+.pokemon img {
+  width: 150px;
+  height: 150px;
+}
+
+.battle-controls {
+  margin-top: 20px;
+  text-align: center;
+}
+
+button {
+  background-color: #ffcb05;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #ffdd41;
+}
+
+#battle-log {
+  margin-top: 10px;
+  font-style: italic;
+  color: #555;
+}
diff --git a/pokemon-wikipedia/assets/back-to-home.svg b/pokemon-wikipedia/assets/back-to-home.svg
new file mode 100644
index 000000000..d1f912699
--- /dev/null
+++ b/pokemon-wikipedia/assets/back-to-home.svg
@@ -0,0 +1,18 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1496_200)">
+<path d="M13.8999 23.9666L4.63325 14.6999C4.52214 14.5888 4.44436 14.4777 4.39992 14.3666C4.35547 14.2555 4.33325 14.1333 4.33325 13.9999C4.33325 13.8666 4.35547 13.7444 4.39992 13.6333C4.44436 13.5222 4.52214 13.4111 4.63325 13.2999L13.9333 3.99994C14.111 3.82216 14.3333 3.73328 14.5999 3.73328C14.8666 3.73328 15.0999 3.83328 15.2999 4.03328C15.4999 4.23328 15.5999 4.46661 15.5999 4.73328C15.5999 4.99994 15.4999 5.23328 15.2999 5.43328L7.73325 12.9999H24.2666C24.5555 12.9999 24.7944 13.0944 24.9833 13.2833C25.1721 13.4722 25.2666 13.7111 25.2666 13.9999C25.2666 14.2888 25.1721 14.5277 24.9833 14.7166C24.7944 14.9055 24.5555 14.9999 24.2666 14.9999H7.73325L15.3333 22.5999C15.511 22.7777 15.5999 22.9999 15.5999 23.2666C15.5999 23.5333 15.4999 23.7666 15.2999 23.9666C15.0999 24.1666 14.8666 24.2666 14.5999 24.2666C14.3333 24.2666 14.0999 24.1666 13.8999 23.9666Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1496_200" x="0.333252" y="0.733276" width="28.9333" height="28.5333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_1496_200"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1496_200"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1496_200" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/pokemon-wikipedia/assets/chevron_left.svg b/pokemon-wikipedia/assets/chevron_left.svg
new file mode 100644
index 000000000..39c498bf2
--- /dev/null
+++ b/pokemon-wikipedia/assets/chevron_left.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.9501 34.9L17.0501 25C16.8834 24.8333 16.7668 24.6667 16.7001 24.5C16.6334 24.3333 16.6001 24.15 16.6001 23.95C16.6001 23.75 16.6334 23.5667 16.7001 23.4C16.7668 23.2333 16.8834 23.0667 17.0501 22.9L27.0001 12.95C27.3001 12.65 27.6584 12.5 28.0751 12.5C28.4918 12.5 28.8501 12.65 29.1501 12.95C29.4501 13.25 29.5918 13.6167 29.5751 14.05C29.5584 14.4833 29.4001 14.85 29.1001 15.15L20.3001 23.95L29.1501 32.8C29.4501 33.1 29.6001 33.45 29.6001 33.85C29.6001 34.25 29.4501 34.6 29.1501 34.9C28.8501 35.2 28.4834 35.35 28.0501 35.35C27.6168 35.35 27.2501 35.2 26.9501 34.9Z" fill="#1D1D1D"/>
+</svg>
diff --git a/pokemon-wikipedia/assets/chevron_right.svg b/pokemon-wikipedia/assets/chevron_right.svg
new file mode 100644
index 000000000..0e2780956
--- /dev/null
+++ b/pokemon-wikipedia/assets/chevron_right.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6999 34.9C17.4332 34.5667 17.2916 34.2 17.2749 33.8C17.2582 33.4 17.3999 33.05 17.6999 32.75L26.4999 23.95L17.6499 15.1C17.3832 14.8333 17.2582 14.475 17.2749 14.025C17.2916 13.575 17.4332 13.2167 17.6999 12.95C18.0332 12.6167 18.3916 12.4583 18.7749 12.475C19.1582 12.4917 19.4999 12.65 19.7999 12.95L29.7499 22.9C29.9166 23.0667 30.0332 23.2333 30.0999 23.4C30.1666 23.5667 30.1999 23.75 30.1999 23.95C30.1999 24.15 30.1666 24.3333 30.0999 24.5C30.0332 24.6667 29.9166 24.8333 29.7499 25L19.8499 34.9C19.5499 35.2 19.1999 35.3417 18.7999 35.325C18.3999 35.3083 18.0332 35.1667 17.6999 34.9Z" fill="#1D1D1D"/>
+</svg>
diff --git a/pokemon-wikipedia/assets/cross.svg b/pokemon-wikipedia/assets/cross.svg
new file mode 100644
index 000000000..53b50a1da
--- /dev/null
+++ b/pokemon-wikipedia/assets/cross.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.9999 5.70002L1.4999 9.20002C1.3999 9.30002 1.28324 9.35002 1.1499 9.35002C1.01657 9.35002 0.899902 9.30002 0.799902 9.20002C0.699902 9.10002 0.649902 8.98336 0.649902 8.85002C0.649902 8.71669 0.699902 8.60002 0.799902 8.50002L4.2999 5.00002L0.799902 1.50002C0.699902 1.40002 0.649902 1.28336 0.649902 1.15002C0.649902 1.01669 0.699902 0.900024 0.799902 0.800024C0.899902 0.700024 1.01657 0.650024 1.1499 0.650024C1.28324 0.650024 1.3999 0.700024 1.4999 0.800024L4.9999 4.30002L8.4999 0.800024C8.5999 0.700024 8.71657 0.650024 8.8499 0.650024C8.98324 0.650024 9.0999 0.700024 9.1999 0.800024C9.2999 0.900024 9.3499 1.01669 9.3499 1.15002C9.3499 1.28336 9.2999 1.40002 9.1999 1.50002L5.6999 5.00002L9.1999 8.50002C9.2999 8.60002 9.3499 8.71669 9.3499 8.85002C9.3499 8.98336 9.2999 9.10002 9.1999 9.20002C9.0999 9.30002 8.98324 9.35002 8.8499 9.35002C8.71657 9.35002 8.5999 9.30002 8.4999 9.20002L4.9999 5.70002Z" fill="#DC0A2D"/>
+</svg>
diff --git a/pokemon-wikipedia/assets/height.svg b/pokemon-wikipedia/assets/height.svg
new file mode 100644
index 000000000..e5a0bbcb4
--- /dev/null
+++ b/pokemon-wikipedia/assets/height.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="straighten">
+  <path d="M7 36C6.2 36 5.5 35.7 4.9 35.1C4.3 34.5 4 33.8 4 33V15C4 14.2333 4.3 13.5417 4.9 12.925C5.5 12.3083 6.2 12 7 12H41C41.8 12 42.5 12.3083 43.1 12.925C43.7 13.5417 44 14.2333 44 15V33C44 33.8 43.7 34.5 43.1 35.1C42.5 35.7 41.8 36 41 36H7ZM7 33H41V15H34.5V24H31.5V15H25.5V24H22.5V15H16.5V24H13.5V15H7V33ZM13.5 24H16.5H13.5ZM22.5 24H25.5H22.5ZM31.5 24H34.5H31.5Z" fill="#1D1D1D"></path>
+</svg>
\ No newline at end of file
diff --git a/pokemon-wikipedia/assets/pokeball.svg b/pokemon-wikipedia/assets/pokeball.svg
new file mode 100644
index 000000000..99c3555c0
--- /dev/null
+++ b/pokemon-wikipedia/assets/pokeball.svg
@@ -0,0 +1,18 @@
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M29.7144 24C29.7144 27.1559 27.156 29.7143 24.0001 29.7143C20.8442 29.7143 18.2858 27.1559 18.2858 24C18.2858 20.8441 20.8442 18.2857 24.0001 18.2857C27.156 18.2857 29.7144 20.8441 29.7144 24Z"
+                fill="#ffffff"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M24.0001 48C36.0909 48 46.0934 39.0593 47.7571 27.4286H33.7006C32.2885 31.4235 28.4786 34.2857 24.0001 34.2857C19.5217 34.2857 15.7117 31.4235 14.2997 27.4286H0.243164C1.90681 39.0593 11.9094 48 24.0001 48ZM14.2997 20.5714H0.243164C1.90681 8.94071 11.9094 0 24.0001 0C36.0909 0 46.0934 8.94071 47.7571 20.5714H33.7006C32.2885 16.5765 28.4786 13.7143 24.0001 13.7143C19.5217 13.7143 15.7117 16.5765 14.2997 20.5714ZM29.7144 24C29.7144 27.1559 27.156 29.7143 24.0001 29.7143C20.8442 29.7143 18.2858 27.1559 18.2858 24C18.2858 20.8441 20.8442 18.2857 24.0001 18.2857C27.156 18.2857 29.7144 20.8441 29.7144 24Z"
+                fill="#ffffff"
+              />
+            </svg>
\ No newline at end of file
diff --git a/pokemon-wikipedia/assets/pokedex.svg b/pokemon-wikipedia/assets/pokedex.svg
new file mode 100644
index 000000000..62539f876
--- /dev/null
+++ b/pokemon-wikipedia/assets/pokedex.svg
@@ -0,0 +1,4 @@
+<svg width="206" height="208" viewBox="0 0 206 208" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M127.762 104C127.762 117.676 116.676 128.762 103 128.762C89.3244 128.762 78.2381 117.676 78.2381 104C78.2381 90.3244 89.3244 79.2381 103 79.2381C116.676 79.2381 127.762 90.3244 127.762 104Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103 208C155.393 208 198.738 169.257 205.947 118.857H145.035C138.917 136.169 122.407 148.571 103 148.571C83.5933 148.571 67.0835 136.169 60.9648 118.857H0.0532227C7.26235 169.257 50.6067 208 103 208ZM60.9648 89.1429H0.0532227C7.26235 38.7431 50.6067 0 103 0C155.393 0 198.738 38.7431 205.947 89.1429H145.035C138.917 71.8314 122.407 59.4286 103 59.4286C83.5933 59.4286 67.0835 71.8314 60.9648 89.1429ZM127.762 104C127.762 117.676 116.676 128.762 103 128.762C89.3244 128.762 78.2381 117.676 78.2381 104C78.2381 90.3244 89.3244 79.2381 103 79.2381C116.676 79.2381 127.762 90.3244 127.762 104Z" fill="white"/>
+</svg>
diff --git a/pokemon-wikipedia/assets/search.svg b/pokemon-wikipedia/assets/search.svg
new file mode 100644
index 000000000..69fc7a7e3
--- /dev/null
+++ b/pokemon-wikipedia/assets/search.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9 12.6167L6.88333 8.6C6.55 8.88889 6.16111 9.11389 5.71667 9.275C5.27222 9.43612 4.8 9.51667 4.3 9.51667C3.1 9.51667 2.08333 9.1 1.25 8.26667C0.416667 7.43334 0 6.42778 0 5.25C0 4.07223 0.416667 3.06667 1.25 2.23334C2.08333 1.4 3.09444 0.983337 4.28333 0.983337C5.46111 0.983337 6.46389 1.4 7.29167 2.23334C8.11944 3.06667 8.53333 4.07223 8.53333 5.25C8.53333 5.72778 8.45555 6.18889 8.3 6.63334C8.14444 7.07778 7.91111 7.49445 7.6 7.88334L11.65 11.9C11.75 11.9889 11.8 12.1028 11.8 12.2417C11.8 12.3806 11.7444 12.5056 11.6333 12.6167C11.5333 12.7167 11.4111 12.7667 11.2667 12.7667C11.1222 12.7667 11 12.7167 10.9 12.6167ZM4.28333 8.51667C5.18333 8.51667 5.95 8.19723 6.58333 7.55834C7.21667 6.91945 7.53333 6.15 7.53333 5.25C7.53333 4.35 7.21667 3.58056 6.58333 2.94167C5.95 2.30278 5.18333 1.98334 4.28333 1.98334C3.37222 1.98334 2.59722 2.30278 1.95833 2.94167C1.31944 3.58056 1 4.35 1 5.25C1 6.15 1.31944 6.91945 1.95833 7.55834C2.59722 8.19723 3.37222 8.51667 4.28333 8.51667Z" fill="#DC0A2D"/>
+</svg>
diff --git a/pokemon-wikipedia/assets/sorting.svg b/pokemon-wikipedia/assets/sorting.svg
new file mode 100644
index 000000000..685553c2b
--- /dev/null
+++ b/pokemon-wikipedia/assets/sorting.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.833252 10.6667C0.688808 10.6667 0.569363 10.6195 0.474919 10.525C0.380474 10.4306 0.333252 10.3111 0.333252 10.1667C0.333252 10.0222 0.380474 9.9028 0.474919 9.80835C0.569363 9.71391 0.688808 9.66669 0.833252 9.66669H9.16659C9.31103 9.66669 9.43047 9.71391 9.52492 9.80835C9.61936 9.9028 9.66659 10.0222 9.66659 10.1667C9.66659 10.3111 9.61936 10.4306 9.52492 10.525C9.43047 10.6195 9.31103 10.6667 9.16659 10.6667H0.833252ZM3.54992 5.26669H6.44992L5.03325 1.56669H4.96659L3.54992 5.26669ZM2.28325 8.00002C2.10547 8.00002 1.98881 7.94169 1.93325 7.82502C1.8777 7.70835 1.8777 7.56669 1.93325 7.40002L4.26659 1.18335C4.32214 1.03891 4.41936 0.916687 4.55825 0.816687C4.69714 0.716687 4.84436 0.666687 4.99992 0.666687C5.15547 0.666687 5.3027 0.716687 5.44159 0.816687C5.58047 0.916687 5.6777 1.03891 5.73325 1.18335L8.06659 7.40002C8.12214 7.56669 8.12214 7.70835 8.06659 7.82502C8.01103 7.94169 7.89436 8.00002 7.71659 8.00002C7.6277 8.00002 7.54714 7.97502 7.47492 7.92502C7.4027 7.87502 7.35547 7.81669 7.33325 7.75002L6.68325 6.01669H3.29992L2.64992 7.75002C2.6277 7.81669 2.58047 7.87502 2.50825 7.92502C2.43603 7.97502 2.36103 8.00002 2.28325 8.00002Z" fill="#DC0A2D"/>
+</svg>
diff --git a/pokemon-wikipedia/assets/weight.svg b/pokemon-wikipedia/assets/weight.svg
new file mode 100644
index 000000000..a58c0e9d2
--- /dev/null
+++ b/pokemon-wikipedia/assets/weight.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.85 39H37.15L34 17H14L10.85 39ZM24 14C24.8667 14 25.5833 13.7083 26.15 13.125C26.7167 12.5417 27 11.8333 27 11C27 10.1333 26.7167 9.41667 26.15 8.85C25.5833 8.28333 24.8667 8 24 8C23.1667 8 22.4583 8.28333 21.875 8.85C21.2917 9.41667 21 10.1333 21 11C21 11.8333 21.2917 12.5417 21.875 13.125C22.4583 13.7083 23.1667 14 24 14ZM29.2 14H34C34.7667 14 35.4333 14.2417 36 14.725C36.5667 15.2083 36.9 15.8333 37 16.6L40.1 38.6C40.2333 39.5 40.0083 40.2917 39.425 40.975C38.8417 41.6583 38.0833 42 37.15 42H10.85C9.91667 42 9.15834 41.6583 8.575 40.975C7.99167 40.2917 7.76667 39.5 7.9 38.6L11 16.6C11.1 15.8333 11.4333 15.2083 12 14.725C12.5667 14.2417 13.2333 14 14 14H18.8C18.5333 13.5333 18.3333 13.0583 18.2 12.575C18.0667 12.0917 18 11.5667 18 11C18 9.33333 18.5833 7.91667 19.75 6.75C20.9167 5.58333 22.3333 5 24 5C25.6667 5 27.0833 5.58333 28.25 6.75C29.4167 7.91667 30 9.33333 30 11C30 11.5667 29.9333 12.0917 29.8 12.575C29.6667 13.0583 29.4667 13.5333 29.2 14ZM10.85 39H37.15H10.85Z" fill="#1D1D1D"></path>
+</svg>
\ No newline at end of file
diff --git a/pokemon-wikipedia/detail.html b/pokemon-wikipedia/detail.html
new file mode 100644
index 000000000..58398f2de
--- /dev/null
+++ b/pokemon-wikipedia/detail.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pokemon Detail</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="./pokemon-detail.js" defer></script>
+  </head>
+  <body>
+    <main class="detail-main main">
+      <header class="header">
+        <div class="header-wrapper">
+          <div class="header-wrap">
+            <a href="./index.html" class="back-btn-wrap">
+              <img
+                src="./assets/back-to-home.svg"
+                alt="back to home"
+                class="back-btn"
+                id="back-btn"
+              />
+            </a>
+            <div class="name-wrap">
+              <h1 class="name"></h1>
+            </div>
+          </div>
+          <div class="pokemon-id-wrap">
+            <p class="body2-fonts"></p>
+          </div>
+        </div>
+      </header>
+      <div class="featured-img">
+        <a href="#" class="arrow left-arrow" id="leftArrow">
+          <img src="./assets/chevron_left.svg" alt="back" />
+        </a>
+        <div class="detail-img-wrapper">
+          <img src="" alt="" />
+        </div>
+        <a href="#" class="arrow right-arrow" id="rightArrow">
+          <img src="./assets/chevron_right.svg" alt="forward" />
+        </a>
+      </div>
+      <div class="detail-card-detail-wrapper">
+        <div class="power-wrapper">
+          <p class="body3-fonts type grass"></p>
+          <p class="body3-fonts type poison"></p>
+        </div>
+        <p class="body2-fonts about-text">About</p>
+        <div class="pokemon-detail-wrapper">
+          <div class="pokemon-detail-wrap">
+            <div class="pokemon-detail">
+              <img src="./assets/weight.svg" alt="weight" />
+              <p class="body3-fonts weight"></p>
+            </div>
+            <p class="caption-fonts">Weight</p>
+          </div>
+          <div class="pokemon-detail-wrap">
+            <div class="pokemon-detail">
+              <img src="./assets/height.svg" alt="height" class="straighten" />
+              <p class="body3-fonts height"></p>
+            </div>
+            <p class="caption-fonts">Height</p>
+          </div>
+          <div class="pokemon-detail-wrap">
+            <div class="pokemon-detail move"></div>
+            <p class="caption-fonts">Move</p>
+          </div>
+        </div>
+        <p class="body3-fonts pokemon-description"></p>
+        <p class="body2-fonts about-text">Base Stats</p>
+        <div class="stats-wrapper">
+          <div class="stats-wrap" data-stat="hp">
+            <p class="body3-fonts stats">HP</p>
+            <p class="body3-fonts"></p>
+            <progress value="" max="100" class="progress-bar"></progress>
+          </div>
+          <div class="stats-wrap" data-stat="ATK">
+            <p class="body3-fonts stats">ATK</p>
+            <p class="body3-fonts"></p>
+            <progress value="" max="100" class="progress-bar"></progress>
+          </div>
+          <div class="stats-wrap" data-stat="DEF">
+            <p class="body3-fonts stats">DEF</p>
+            <p class="body3-fonts"></p>
+            <progress value="" max="100" class="progress-bar"></progress>
+          </div>
+          <div class="stats-wrap" data-stat="SATK">
+            <p class="body3-fonts stats">SATK</p>
+            <p class="body3-fonts"></p>
+            <progress value="" max="100" class="progress-bar"></progress>
+          </div>
+        </div>
+      </div>
+      <img src="./assets/pokedex.svg" alt="pokedex" class="detail-bg" />
+    </main>
+  </body>
+</html>
diff --git a/pokemon-wikipedia/index.html b/pokemon-wikipedia/index.html
new file mode 100644
index 000000000..6ad58b645
--- /dev/null
+++ b/pokemon-wikipedia/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pokemon - Wikipedia</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="./pokemon.js" defer></script>
+    <script src="./search.js" defer></script>
+  </head>
+  <body>
+    <main class="main">
+      <header class="header home">
+        <div class="container">
+          <div class="logo-wrapper">
+            <img src="./assets/pokeball.svg" alt="pokeball" />
+            <h1>Pokemon - Wikipedia</h1>
+          </div>
+          <div class="search-wrapper">
+            <div class="search-wrap">
+              <img
+                src="./assets/search.svg"
+                alt="search icon"
+                class="search-icon"
+              />
+              <input
+                type="text"
+                class="search-input body3-fonts"
+                placeholder="Search"
+                id="search-input"
+              />
+              <img
+                src="./assets/cross.svg"
+                alt="cross icon"
+                class="search-close-icon"
+                id="search-close-icon"
+              />
+            </div>
+            <div class="sort-wrapper">
+              <div class="sort-wrap">
+                <img
+                  src="./assets/sorting.svg"
+                  alt="sorting"
+                  class="sort-icon"
+                  id="sort-icon"
+                />
+              </div>
+              <div class="filter-wrapper">
+                <p class="body2-fonts">Sort by:</p>
+                <div class="filter-wrap">
+                  <div>
+                    <input
+                      type="radio"
+                      id="number"
+                      name="filters"
+                      value="number"
+                      checked
+                    />
+                    <label for="number" class="body3-fonts">Number</label>
+                  </div>
+                  <div>
+                    <input type="radio" id="name" name="filters" value="name" />
+                    <label for="name" class="body3-fonts">Name</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <section class="pokemon-list">
+        <div class="container">
+          <div class="list-wrapper"></div>
+        </div>
+        <div id="not-found-message">Pokemon not found</div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/pokemon-wikipedia/pokemon-detail.js b/pokemon-wikipedia/pokemon-detail.js
new file mode 100644
index 000000000..62c74a82c
--- /dev/null
+++ b/pokemon-wikipedia/pokemon-detail.js
@@ -0,0 +1,253 @@
+let currentPokemonId = null;
+
+document.addEventListener("DOMContentLoaded", () => {
+  const MAX_POKEMONS = 151;
+  const pokemonID = new URLSearchParams(window.location.search).get("id");
+  const id = parseInt(pokemonID, 10);
+
+  if (id < 1 || id > MAX_POKEMONS) {
+    return (window.location.href = "./index.html");
+  }
+
+  currentPokemonId = id;
+  loadPokemon(id);
+});
+
+async function loadPokemon(id) {
+  try {
+    const [pokemon, pokemonSpecies] = await Promise.all([
+      fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) =>
+        res.json()
+      ),
+      fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) =>
+        res.json()
+      ),
+    ]);
+
+    const abilitiesWrapper = document.querySelector(
+      ".pokemon-detail-wrap .pokemon-detail.move"
+    );
+    abilitiesWrapper.innerHTML = "";
+
+    if (currentPokemonId === id) {
+      displayPokemonDetails(pokemon);
+      const flavorText = getEnglishFlavorText(pokemonSpecies);
+      document.querySelector(".body3-fonts.pokemon-description").textContent =
+        flavorText;
+
+      const [leftArrow, rightArrow] = ["#leftArrow", "#rightArrow"].map((sel) =>
+        document.querySelector(sel)
+      );
+      leftArrow.removeEventListener("click", navigatePokemon);
+      rightArrow.removeEventListener("click", navigatePokemon);
+
+      if (id !== 1) {
+        leftArrow.addEventListener("click", () => {
+          navigatePokemon(id - 1);
+        });
+      }
+      if (id !== 151) {
+        rightArrow.addEventListener("click", () => {
+          navigatePokemon(id + 1);
+        });
+      }
+
+      window.history.pushState({}, "", `./detail.html?id=${id}`);
+    }
+
+    return true;
+  } catch (error) {
+    console.error("An error occured while fetching Pokemon data:", error);
+    return false;
+  }
+}
+
+async function navigatePokemon(id) {
+  currentPokemonId = id;
+  await loadPokemon(id);
+}
+
+const typeColors = {
+  normal: "#A8A878",
+  fire: "#F08030",
+  water: "#6890F0",
+  electric: "#F8D030",
+  grass: "#78C850",
+  ice: "#98D8D8",
+  fighting: "#C03028",
+  poison: "#A040A0",
+  ground: "#E0C068",
+  flying: "#A890F0",
+  psychic: "#F85888",
+  bug: "#A8B820",
+  rock: "#B8A038",
+  ghost: "#705898",
+  dragon: "#7038F8",
+  dark: "#705848",
+  steel: "#B8B8D0",
+  dark: "#EE99AC",
+};
+
+function setElementStyles(elements, cssProperty, value) {
+  elements.forEach((element) => {
+    element.style[cssProperty] = value;
+  });
+}
+
+function rgbaFromHex(hexColor) {
+  return [
+    parseInt(hexColor.slice(1, 3), 16),
+    parseInt(hexColor.slice(3, 5), 16),
+    parseInt(hexColor.slice(5, 7), 16),
+  ].join(", ");
+}
+
+function setTypeBackgroundColor(pokemon) {
+  const mainType = pokemon.types[0].type.name;
+  const color = typeColors[mainType];
+
+  if (!color) {
+    console.warn(`Color not defined for type: ${mainType}`);
+    return;
+  }
+
+  const detailMainElement = document.querySelector(".detail-main");
+  setElementStyles([detailMainElement], "backgroundColor", color);
+  setElementStyles([detailMainElement], "borderColor", color);
+
+  setElementStyles(
+    document.querySelectorAll(".power-wrapper > p"),
+    "backgroundColor",
+    color
+  );
+
+  setElementStyles(
+    document.querySelectorAll(".stats-wrap p.stats"),
+    "color",
+    color
+  );
+
+  setElementStyles(
+    document.querySelectorAll(".stats-wrap .progress-bar"),
+    "color",
+    color
+  );
+
+  const rgbaColor = rgbaFromHex(color);
+  const styleTag = document.createElement("style");
+  styleTag.innerHTML = `
+    .stats-wrap .progress-bar::-webkit-progress-bar {
+        background-color: rgba(${rgbaColor}, 0.5);
+    }
+    .stats-wrap .progress-bar::-webkit-progress-value {
+        background-color: ${color};
+    }
+  `;
+  document.head.appendChild(styleTag);
+}
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+}
+
+function createAndAppendElement(parent, tag, options = {}) {
+  const element = document.createElement(tag);
+  Object.keys(options).forEach((key) => {
+    element[key] = options[key];
+  });
+  parent.appendChild(element);
+  return element;
+}
+
+function displayPokemonDetails(pokemon) {
+  const { name, id, types, weight, height, abilities, stats } = pokemon;
+  const capitalizePokemonName = capitalizeFirstLetter(name);
+
+  document.querySelector("title").textContent = capitalizePokemonName;
+
+  const detailMainElement = document.querySelector(".detail-main");
+  detailMainElement.classList.add(name.toLowerCase());
+
+  document.querySelector(".name-wrap .name").textContent =
+    capitalizePokemonName;
+
+  document.querySelector(
+    ".pokemon-id-wrap .body2-fonts"
+  ).textContent = `#${String(id).padStart(3, "0")}`;
+
+  const imageElement = document.querySelector(".detail-img-wrapper img");
+  imageElement.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${id}.svg`;
+  imageElement.alt = name;
+
+  const typeWrapper = document.querySelector(".power-wrapper");
+  typeWrapper.innerHTML = "";
+  types.forEach(({ type }) => {
+    createAndAppendElement(typeWrapper, "p", {
+      className: `body3-fonts type ${type.name}`,
+      textContent: type.name,
+    });
+  });
+
+  document.querySelector(
+    ".pokemon-detail-wrap .pokemon-detail p.body3-fonts.weight"
+  ).textContent = `${weight / 10}kg`;
+  document.querySelector(
+    ".pokemon-detail-wrap .pokemon-detail p.body3-fonts.height"
+  ).textContent = `${height / 10}m`;
+
+  const abilitiesWrapper = document.querySelector(
+    ".pokemon-detail-wrap .pokemon-detail.move"
+  );
+  abilities.forEach(({ ability }) => {
+    createAndAppendElement(abilitiesWrapper, "p", {
+      className: "body3-fonts",
+      textContent: ability.name,
+    });
+  });
+
+  const statsWrapper = document.querySelector(".stats-wrapper");
+  statsWrapper.innerHTML = "";
+
+  const statNameMapping = {
+    hp: "HP",
+    attack: "ATK",
+    defense: "DEF",
+    "special-attack": "SATK",
+    "special-defense": "SDEF",
+    speed: "SPD",
+  };
+
+  stats.forEach(({ stat, base_stat }) => {
+    const statDiv = document.createElement("div");
+    statDiv.className = "stats-wrap";
+    statsWrapper.appendChild(statDiv);
+
+    createAndAppendElement(statDiv, "p", {
+      className: "body3-fonts stats",
+      textContent: statNameMapping[stat.name],
+    });
+
+    createAndAppendElement(statDiv, "p", {
+      className: "body3-fonts",
+      textContent: String(base_stat).padStart(3, "0"),
+    });
+
+    createAndAppendElement(statDiv, "progress", {
+      className: "progress-bar",
+      value: base_stat,
+      max: 100,
+    });
+  });
+
+  setTypeBackgroundColor(pokemon);
+}
+
+function getEnglishFlavorText(pokemonSpecies) {
+  for (let entry of pokemonSpecies.flavor_text_entries) {
+    if (entry.language.name === "en") {
+      let flavor = entry.flavor_text.replace(/\f/g, " ");
+      return flavor;
+    }
+  }
+  return "";
+}
diff --git a/pokemon-wikipedia/pokemon.js b/pokemon-wikipedia/pokemon.js
new file mode 100644
index 000000000..d66e4d0d6
--- /dev/null
+++ b/pokemon-wikipedia/pokemon.js
@@ -0,0 +1,98 @@
+const MAX_POKEMON = 151;
+const listWrapper = document.querySelector(".list-wrapper");
+const searchInput = document.querySelector("#search-input");
+const numberFilter = document.querySelector("#number");
+const nameFilter = document.querySelector("#name");
+const notFoundMessage = document.querySelector("#not-found-message");
+
+let allPokemons = [];
+
+fetch(`https://pokeapi.co/api/v2/pokemon?limit=${MAX_POKEMON}`)
+  .then((response) => response.json())
+  .then((data) => {
+    allPokemons = data.results;
+    displayPokemons(allPokemons);
+  });
+
+async function fetchPokemonDataBeforeRedirect(id) {
+  try {
+    const [pokemon, pokemonSpecies] = await Promise.all([
+      fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) =>
+        res.json()
+      ),
+      fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) =>
+        res.json()
+      ),
+    ]);
+    return true;
+  } catch (error) {
+    console.error("Failed to fetch Pokemon data before redirect");
+  }
+}
+
+function displayPokemons(pokemon) {
+  listWrapper.innerHTML = "";
+
+  pokemon.forEach((pokemon) => {
+    const pokemonID = pokemon.url.split("/")[6];
+    const listItem = document.createElement("div");
+    listItem.className = "list-item";
+    listItem.innerHTML = `
+        <div class="number-wrap">
+            <p class="caption-fonts">#${pokemonID}</p>
+        </div>
+        <div class="img-wrap">
+            <img src="https://raw.githubusercontent.com/pokeapi/sprites/master/sprites/pokemon/other/dream-world/${pokemonID}.svg" alt="${pokemon.name}" />
+        </div>
+        <div class="name-wrap">
+            <p class="body3-fonts">#${pokemon.name}</p>
+        </div>
+    `;
+
+    listItem.addEventListener("click", async () => {
+      const success = await fetchPokemonDataBeforeRedirect(pokemonID);
+      if (success) {
+        window.location.href = `./detail.html?id=${pokemonID}`;
+      }
+    });
+
+    listWrapper.appendChild(listItem);
+  });
+}
+
+searchInput.addEventListener("keyup", handleSearch);
+
+function handleSearch() {
+  const searchTerm = searchInput.value.toLowerCase();
+  let filteredPokemons;
+
+  if (numberFilter.checked) {
+    filteredPokemons = allPokemons.filter((pokemon) => {
+      const pokemonID = pokemon.url.split("/")[6];
+      return pokemonID.startsWith(searchTerm);
+    });
+  } else if (nameFilter.checked) {
+    filteredPokemons = allPokemons.filter((pokemon) =>
+      pokemon.name.toLowerCase().startsWith(searchTerm)
+    );
+  } else {
+    filteredPokemons = allPokemons;
+  }
+
+  displayPokemons(filteredPokemons);
+
+  if (filteredPokemons.length === 0) {
+    notFoundMessage.style.display = "block";
+  } else {
+    notFoundMessage.style.display = "none";
+  }
+}
+
+const closeButton = document.querySelector(".search-close-icon");
+closeButton.addEventListener("click", clearSearch);
+
+function clearSearch() {
+  searchInput.value = "";
+  displayPokemons(allPokemons);
+  notFoundMessage.style.display = "none";
+}
diff --git a/pokemon-wikipedia/search.js b/pokemon-wikipedia/search.js
new file mode 100644
index 000000000..467e96660
--- /dev/null
+++ b/pokemon-wikipedia/search.js
@@ -0,0 +1,37 @@
+const inputElement = document.querySelector("#search-input");
+const search_icon = document.querySelector("#search-close-icon");
+const sort_wrapper = document.querySelector(".sort-wrapper");
+
+inputElement.addEventListener("input", () => {
+  handleInputChange(inputElement);
+});
+search_icon.addEventListener("click", handleSearchCloseOnClick);
+sort_wrapper.addEventListener("click", handleSortIconOnClick);
+
+function handleInputChange(inputElement) {
+  const inputValue = inputElement.value;
+
+  if (inputValue !== "") {
+    document
+      .querySelector("#search-close-icon")
+      .classList.add("search-close-icon-visible");
+  } else {
+    document
+      .querySelector("#search-close-icon")
+      .classList.remove("search-close-icon-visible");
+  }
+}
+
+function handleSearchCloseOnClick() {
+  document.querySelector("#search-input").value = "";
+  document
+    .querySelector("#search-close-icon")
+    .classList.remove("search-close-icon-visible");
+}
+
+function handleSortIconOnClick() {
+  document
+    .querySelector(".filter-wrapper")
+    .classList.toggle("filter-wrapper-open");
+  document.querySelector("body").classList.toggle("filter-wrapper-overlay");
+}
diff --git a/pokemon-wikipedia/style.css b/pokemon-wikipedia/style.css
new file mode 100644
index 000000000..76c565143
--- /dev/null
+++ b/pokemon-wikipedia/style.css
@@ -0,0 +1,532 @@
+:root {
+  --identity-primary: #dc0a2d;
+
+  --grayscale-dark: #212121;
+  --grayscale-medium: #666666;
+  --grayscale-light: #e0e0e0;
+  --grayscale-background: #efefef;
+  --grayscale-white: #ffffff;
+
+  --headline-font-size: 24px;
+  --body1-font-size: 14px;
+  --body2-font-size: 12px;
+  --body3-font-size: 10px;
+  --subtitle1-font-size: 14px;
+  --subtitle2-font-size: 12px;
+  --subtitle3-font-size: 10px;
+  --caption-font-size: 8px;
+
+  --headline-line-height: 32px;
+  --common-line-height: 16px;
+  --caption-line-height: 12px;
+
+  --font-weight-regular: 400;
+  --font-weight-bold: 700;
+
+  --drop-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
+  --drop-shadow-hover: 0px 3px 12px 3px rgba(0, 0, 0, 0.2);
+  --drop-shadow-inner: 0px 1px 3px 1px rgba(0, 0, 0, 0.25) inset;
+}
+
+h2,
+h3,
+h4,
+.body1-fonts,
+.body2-fonts,
+.body3-fonts {
+  line-height: var(--common-line-height);
+}
+
+h1 {
+  font-size: var(--headline-font-size);
+  line-height: var(--headline-line-height);
+}
+
+h2 {
+  font-size: var(--subtitle1-font-size);
+}
+
+h3 {
+  font-size: var(--subtitle2-font-size);
+}
+
+h4 {
+  font-size: var(--subtitle3-font-size);
+}
+
+.body1-fonts {
+  font-size: var(--body1-font-size);
+}
+
+.body2-fonts {
+  font-size: var(--body2-font-size);
+}
+
+.body3-fonts {
+  font-size: var(--body3-font-size);
+}
+
+.caption-fonts {
+  font-size: var(--caption-font-size);
+  line-height: var(--caption-line-height);
+}
+
+input:focus-visible {
+  outline: 0;
+}
+
+.featured-img a.arrow.hidden {
+  display: none;
+}
+
+body {
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+.main {
+  margin: 0;
+  padding: 0;
+  background-color: var(--identity-primary);
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header.home {
+  width: 90%;
+}
+
+.container {
+  width: 100%;
+  margin: 0;
+}
+
+.logo-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.logo-wrapper > h1 {
+  color: var(--grayscale-white);
+}
+
+.logo-wrapper > img {
+  margin-right: 16px;
+}
+
+.search-wrapper,
+.search-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 16px;
+}
+
+.search-wrap {
+  position: relative;
+  background-color: var(--grayscale-white);
+  border-radius: 16px;
+  box-shadow: var(--drop-shadow-inner);
+  height: 32px;
+  gap: 8px;
+}
+
+.search-icon {
+  margin-left: 16px;
+}
+
+.search-wrap svg path {
+  fill: var(--identity-primary);
+}
+
+.search-wrap > input {
+  width: 60%;
+  border: none;
+}
+
+.sort-wrapper {
+  position: relative;
+}
+
+.sort-wrap {
+  background-color: var(--grayscale-white);
+  border-radius: 100%;
+  min-width: 2rem;
+  min-height: 2rem;
+  box-shadow: var(--drop-shadow-inner);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.search-close-icon {
+  position: absolute;
+  right: 1rem;
+  display: none;
+  cursor: pointer;
+}
+
+.search-close-icon-visible {
+  display: block;
+}
+
+.filter-wrapper {
+  position: absolute;
+  background: var(--identity-primary);
+  border: 4px solid var(--identity-primary);
+  border-top: 0;
+  border-radius: 12px;
+  padding: 0px 4px 4px 4px;
+  right: 0px;
+  box-shadow: var(--drop-shadow-hover);
+  min-width: 113px;
+  top: 40px;
+  display: none;
+  z-index: 5000;
+}
+
+.filter-wrapper-open {
+  display: block;
+}
+
+.filter-wrapper-overlay .main::before {
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+.filter-wrapper > .body2-fonts {
+  color: var(--grayscale-white);
+  font-weight: var(--font-weight-bold);
+  padding: 16px 20px;
+}
+
+.filter-wrap {
+  background-color: var(--grayscale-white);
+  box-shadow: var(--drop-shadow-inner);
+  padding: 16px 20px;
+  border-radius: 8px;
+}
+
+.filter-wrap > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.filter-wrap > div:last-child {
+  margin-bottom: 0px;
+}
+
+.filter-wrap input {
+  accent-color: var(--identity-primary);
+}
+
+.pokemon-list {
+  background-color: var(--grayscale-white);
+  box-shadow: var(--drop-shadow-inner);
+  border-radius: 0.75rem;
+  min-height: calc(85.5% - 1rem);
+  width: calc(100% - 1rem);
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+.list-wrapper {
+  margin: 1rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.list-item {
+  border-radius: 8px;
+  box-shadow: var(--drop-shadow);
+  background-color: var(--grayscale-white);
+  width: 8.85rem;
+  height: 8.85rem;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.list-item .number-wrap {
+  min-height: 16px;
+  text-align: right;
+  padding: 0 8px;
+  color: var(--grayscale-medium);
+}
+
+.list-item .name-wrap {
+  border-radius: 7px;
+  background-color: var(--grayscale-background);
+  padding: 24px 8px 4px 8px;
+  color: var(--grayscale-dark);
+  margin-top: -18px;
+}
+
+.list-item .img-wrap {
+  width: 72px;
+  height: 72px;
+  margin: auto;
+}
+
+.list-item .img-wrap img {
+  width: 100%;
+  height: 100%;
+}
+
+/* detail page */
+
+.detail-main .header {
+  padding: 20px 20px 24px 20px;
+  position: relative;
+  z-index: 2;
+}
+
+.detail-main .header-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 15px;
+}
+
+.detail-main .header-wrap {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.detail-main .back-btn-wrap {
+  max-height: 32px;
+}
+
+.detail-main .back-btn-wrap path,
+.detail-main .header-wrapper p,
+.detail-main .header-wrapper h1 {
+  fill: var(--grayscale-white);
+  color: var(--grayscale-white);
+}
+
+.detail-main .pokemon-id-wrap p {
+  font-weight: var(--font-weight-bold);
+}
+
+.detail-img-wrapper {
+  width: 200px;
+  height: 200px;
+  margin: auto;
+  position: relative;
+  z-index: 3;
+}
+
+.detail-img-wrapper img {
+  width: 100%;
+  height: 100%;
+}
+
+.detail-card-detail-wrapper {
+  border-radius: 8px;
+  background-color: var(--grayscale-white);
+  box-shadow: var(--drop-shadow-inner);
+  padding: 56px 20px 20px 20px;
+  margin-top: -50px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 2;
+}
+
+.power-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.power-wrapper > p {
+  border-radius: 10px;
+  padding: 2px 8px;
+  font-weight: var(--font-weight-bold);
+  color: var(--grayscale-white);
+  text-transform: capitalize;
+  background-color: #74cb48;
+}
+
+.pokemon-detail.move p {
+  text-transform: capitalize;
+  word-break: break-all;
+}
+
+.list-item .name-wrap p {
+  text-transform: capitalize;
+}
+
+.detail-card-detail-wrapper .about-text {
+  font-weight: var(--font-weight-bold);
+  text-align: center;
+}
+
+.pokemon-detail-wrapper {
+  display: flex;
+  align-items: flex-end;
+}
+
+.pokemon-detail-wrapper .pokemon-detail-wrap {
+  flex: 1;
+  text-align: center;
+  position: relative;
+}
+
+.pokemon-detail-wrap:before {
+  content: "";
+  background-color: var(--grayscale-light);
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.pokemon-detail-wrap:last-child::before {
+  display: none;
+}
+
+.pokemon-detail {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 20px;
+  gap: 8px;
+}
+
+.pokemon-detail-wrapper {
+  min-height: 76px;
+}
+
+.pokemon-detail.move {
+  flex-direction: column;
+  gap: 0;
+  align-items: center;
+  padding: 8px 5px;
+}
+
+.pokemon-detail-wrap > .caption-fonts {
+  color: var(--grayscale-medium);
+}
+
+.pokemon-detail-wrap .straighten {
+  transform: rotate(90deg);
+}
+
+.detail-card-detail-wrapper .pokemon-description {
+  color: var(--grayscale-dark);
+  text-align: center;
+}
+
+.stats-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.stats-wrap p {
+  color: var(--grayscale-dark);
+  margin-right: 8px;
+  min-width: 19px;
+}
+
+.stats-wrap p.stats {
+  text-align: right;
+  padding-right: 8px;
+  min-width: 35px;
+  border-right: 1px solid var(--grayscale-light);
+  font-weight: var(--font-weight-bold);
+}
+
+.stats-wrap .progress-bar {
+  flex: 1;
+  border-radius: 4px;
+  height: 4px;
+}
+
+.stats-wrap .progress-bar::-webkit-progress-bar {
+  border-radius: 4px;
+}
+
+.stats-wrap .progress-bar::-webkit-progress-value {
+  border-radius: 4px;
+}
+
+.detail-bg {
+  position: absolute;
+  z-index: 1;
+  right: 8px;
+  top: 8px;
+  opacity: 0.1;
+}
+
+.detail-bg path {
+  fill: var(--grayscale-white);
+}
+
+div#not-found-message {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.arrow img {
+  -webkit-filter: brightness(0) grayscale(1) invert(1);
+  filter: brightness(0) grayscale(1) invert(1);
+  width: 28px;
+}
+
+.featured-img {
+  position: relative;
+}
+
+.featured-img a.arrow {
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 999;
+}
+
+.featured-img a.arrow.left-arrow {
+  left: -2rem;
+}
+
+.featured-img a.arrow.right-arrow {
+  right: -2rem;
+}
+
+.detail-main.main {
+  height: max-content;
+  border-color: transparent;
+  background-color: transparent;
+}
diff --git a/popup.css b/popup.css
new file mode 100644
index 000000000..17f259ad7
--- /dev/null
+++ b/popup.css
@@ -0,0 +1,410 @@
+body {
+  font-family: Arial, sans-serif;
+  height: auto;
+}
+
+/* Popup Styles */
+.popup {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+  justify-content: center; /* Center the popup */
+  align-items: center; /* Center the popup */
+  z-index: 1000; /* Sit on top */
+}
+.source-code-btn {
+  background-color: #f02647;
+}
+.popup-content {
+  background: linear-gradient(#f74b67, #e7d3d7), url(your-image-url.jpg);
+  padding: 20px;
+  border-radius: 5px;
+  max-width: 400px;
+  text-align: center;
+}
+
+/* Set poll options to stack vertically */
+#pollOptions {
+  display: flex;
+  flex-direction: column; /* Stack buttons vertically */
+  align-items: center; /* Center the buttons */
+}
+
+.poll-button {
+  display: block; /* Change to block for full-width */
+  margin: 5px 0; /* Add vertical margin */
+  padding: 10px 15px;
+  border: none;
+  border-radius: 5px;
+  background-color: #4caf50; /* Green */
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  width: 100%; /* Full width */
+}
+
+.poll-button:hover {
+  background-color: #45a049; /* Darker green */
+}
+
+.poll-button.selected {
+  background-color: #2196f3; /* Blue for selected */
+}
+
+/* New Vote Button Styles */
+.vote-button {
+  display: block; /* Change to block for full-width */
+  margin: 5px 0; /* Add vertical margin */
+  padding: 10px 15px;
+  border: none;
+  border-radius: 5px;
+  background-color: #f44336; /* Red */
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  width: 100%; /* Full width */
+}
+
+.vote-button:hover {
+  background-color: #d32f2f; /* Darker red */
+}
+
+.uppercase {
+  text-transform: uppercase;
+  font-size: 15px;
+}
+
+.popup-nl {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+  z-index: 1009;
+}
+
+.popup-content-nl {
+  display: flex;
+  background-color: white;
+  border-radius: 10px;
+  max-width: 800px;
+  height: 450px;
+  width: 700px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+}
+
+.close1-btn-nl {
+  width: 20px;
+  cursor: pointer;
+  margin: 18px 10px;
+  position: absolute;
+  top: -4px;
+  right: 12px;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.popup-left-nl img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.popup-right-nl {
+  padding: 20px;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-nl h1 {
+  font-size: 24px;
+  background: linear-gradient(to right, #913700, #ff6000, #913700);
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  -webkit-background-clip: text;
+  text-align: center;
+  margin-bottom: 12px;
+  margin-top: 35px;
+}
+
+.h2-nl {
+  font-size: 18px;
+  margin-bottom: 8px;
+  text-align: center;
+  color: #333;
+}
+
+.pop_up-nl {
+  margin-bottom: 15px;
+  font-weight: bold;
+  background: -webkit-linear-gradient(left, #007d39, #44f899, #005f2b);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 12.7px;
+}
+
+.bold {
+  font-size: 13.1px;
+}
+
+input[type="email"] {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 16px;
+  border: 1px solid #000000;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.signup-btn1-nl {
+  width: 100%;
+  height: 30px;
+  text-align: center;
+  background: linear-gradient(to right, #febd1b, #ffdb80, #febd1b);
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.signup-btn1-nl:hover {
+  background-color: #4682b4;
+}
+
+.no-thanks-nl {
+  display: block;
+  margin-top: 10px;
+  color: #888;
+  text-decoration: none;
+  margin-bottom: 15px;
+}
+
+.no-thanks-nl:hover {
+  color: #000000;
+  font-size: 14px;
+}
+
+.terms-nl {
+  margin-top: 15px;
+  font-size: 10px;
+  color: #888;
+}
+
+.terms-nl a {
+  display: inline;
+}
+
+.terms-nl a:hover {
+  text-decoration: underline;
+}
+
+.popup-right-nl p {
+  margin-top: 0;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.share-section {
+  text-align: center;
+}
+#shareBtn {
+  background-color: #f71257;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#faq {
+  background-color: #f8f8f8;
+  padding: 50px 20px;
+}
+
+#faq h2 {
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 2rem;
+}
+
+/*Dark Mode theme styling adjustments*/
+[data-theme="dark"] #faq,
+[data-theme="dark"] #faq h2 {
+  background-color: #000327;
+  color: white;
+}
+
+[data-theme="dark"] .faq-item h3,
+[data-theme="dark"] .faq-item p {
+  color: white;
+}
+
+.faq-item {
+  margin-bottom: 15px;
+  border-bottom: 1px solid #ccc;
+  padding: 15px 0;
+}
+
+.faq-question {
+  cursor: pointer;
+  font-size: 1.2rem;
+  color: #333;
+  margin: 0;
+  padding: 10px;
+  transition: background 0.3s;
+}
+
+.faq-question:hover {
+  background-color: #f0f0f0;
+}
+
+.faq-answer {
+  display: none;
+  margin-top: 10px;
+  font-size: 1rem;
+  color: #666;
+}
+.subscribe {
+  z-index: -100;
+}
+
+#feedback {
+  background: linear-gradient(to right, #faf9fa, #fefefe);
+  padding: 50px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: black;
+}
+
+/* Dark theme of the Fedback Section */
+[data-theme="dark"] .feedback-form input,
+[data-theme="dark"] .feedback-form textarea,
+[data-theme="dark"]
+  .form-group
+  textarea
+  [data-theme="dark"]
+  .form-group
+  #feedback-content {
+  background-color: #000327;
+  color: white;
+}
+
+[data-theme="dark"] #feedback {
+  background: #000327;
+  border-top: 1px solid #333;
+}
+
+[data-theme="dark"] .dark-change {
+  color: white !important;
+  background-color: #000327;
+}
+
+[data-theme="dark"] .quickLinks {
+  color: white !important;
+  background-color: #000327;
+}
+
+#feedback h2 {
+  font-size: 2rem;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+#feedback p {
+  margin-bottom: 30px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+/* Form Container */
+#feedback .container {
+  background: #fff;
+  padding: 40px;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  max-width: 600px;
+  width: 100%;
+  margin: 0 auto;
+  background: linear-gradient(to right, #f8bab5, #f38787);
+}
+
+.container h2,
+.container p {
+  color: #333;
+}
+
+/* Form Group */
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  font-size: 1rem;
+  color: #333;
+  display: block;
+}
+
+/* General Body Styling */
+#feedback .form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 12px;
+  font-size: 1rem;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  box-sizing: border-box;
+  margin-top: 5px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+#feedback button {
+  width: 100%;
+  padding: 12px;
+  background-color: var(--btn-color);
+  color: var(--btn-text);
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
+}
+
+body {
+  font-family: "Arial", sans-serif;
+  background-color: #f4f4f9;
+  margin: 0;
+  padding: 0;
+}
+
+
+/* feedback */
+.stars {
+               
+    cursor: pointer;
+    font-size: 2rem;
+    color: gray;
+}
+.star {
+    transition: color 0.2s;
+}
+.star.selected {
+    color: gold;
+}
\ No newline at end of file
diff --git a/privacy.html b/privacy.html
index 44b990342..2a1f38911 100644
--- a/privacy.html
+++ b/privacy.html
@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Privacy Policy - Master Web Development</title>
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
diff --git a/profile.html b/profile.html
index a071b5478..3745cecdf 100644
--- a/profile.html
+++ b/profile.html
@@ -4,14 +4,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="testp.css"> <!-- Link to your CSS file -->
-
+ 
     <script src="testp.js" defer></script>
-
     <title>Profile Page</title>
-
 </head>
 
 <body>
@@ -19,32 +16,37 @@
     <div class="profile-container">
 
         <div class="content-section">
-            <h2>Your Profile</h2>
+            <h2>Your Profile</h2> 
             <a href="index.html">
                 <i class="fas fa-home"></i>
             </a>
             <div class="profile-card">
                 <div class="profile-header">
-                    <img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Image" class="profile-image">
 
-                    <div class="profile-info">
-                        <h3 class="profile-name">Skylar Reed</h3>
-                        <p class="profile-email">Email: skylar.reed@example.com</p>
-                        <p class="profile-phone">Phone: +987 654 3210</p>
-                        <p class="profile-bio">Joined: October 31, 2024</p>
-                        <p class="profile-bio">About Me: Hello!🙋🏻‍♂️ Feel free to reach out to me at skylar.reed@example.com 😎</p>
-                        <p id="last-active">Last active: 31/10/2024, 11:12 PM</p>
+                    <!-- Profile image will be set dynamically -->
+                    <img id="profileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Image" class="profile-image">
+ 
 
+                    <div class="profile-info">
+                        <!-- Profile info will be set dynamically -->
+                        <h3 id="profileName" class="profile-name">Skylar Reed</h3>
+                        <p id="profileEmail" class="profile-email">Email: skylar.reed@example.com</p>
+                        <p id="profilePhone" class="profile-phone">Phone: +987 654 3210</p>
+                        <p id="profileBio" class="profile-bio">About Me: Hello!🙋🏻‍♂️ Feel free to reach out to me at skylar.reed@example.com 😎</p>
+                        <p id="aboutMe" class="profile-bio">Joined: October 31, 2024</p>
+                        <p id="last-active" class="profile-bio">Last active: </p>
                     </div>
-
                 </div>
+ 
+                <a href="profileedit.html">
                     <button class="edit-profile-btn edit_profiled">Edit Profile</button>
+ 
                 </a>
             </div>
         </div>
 
+        <!-- Account Details and other sections remain the same -->
         <div class="content-section">
-
             <h2>Account Details</h2>
             <div class="profile-details">
                 <div class="profile-detail-card" id="profileCard">
@@ -56,42 +58,73 @@ <h3>Friends List</h3>
                 <div class="profile-detail-card">
                     <h3>Change Password</h3>
                     <p>*********63</p>
-                    <button class="edit-profile-btn">Change</button></a>
+                    <button class="edit-profile-btn">Change</button>
                 </div>
 
                 <div class="profile-detail-card">
                     <h3>Privacy Settings</h3>
                     <p>Visibility Status: Public</p>
                     <a href="#">
-                    <button class="edit-profile-btn">Edit</button></a>
+                        <button class="edit-profile-btn">Edit</button>
+                    </a>
                 </div>
 
                 <div class="profile-detail-card">
                     <h3>Recent Activity</h3>
+ 
                     <p>Updated profile information</p>
                     <a href="#">
-                    <button class="edit-profile-btn">View</button></a>
+                        <button class="edit-profile-btn">View</button>
+                    </a>
+
                 </div>
 
             </div>
         </div>
 
         <section class="content-section">
-
             <h2>Notifications</h2>
             <div class="card">
                 <p>Your profile has been updated successfully!</p>
-
                 <button class="edit-profile-btn">View Notification</button>
             </div>
             <div class="card">
                 <p>Joshef Roy has sent you a friend request. Accept or decline?</p>
-
                 <button class="edit-profile-btn">View Notification</button>
             </div>
-
         </section>
 
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // Load saved profile information from localStorage
+            const savedName = localStorage.getItem("profileName");
+            const savedEmail = localStorage.getItem("profileEmail");
+            const savedPhone = localStorage.getItem("profilePhone");
+            const savedBio = localStorage.getItem("profileBio");
+            const savedAvatar = localStorage.getItem("selectedAvatar");
+
+            // Update profile information if it exists in localStorage
+            if (savedName) {
+                document.getElementById("profileName").textContent = savedName;
+            }
+            if (savedEmail) {
+                document.getElementById("profileEmail").textContent = `Email: ${savedEmail}`; // Corrected template literal
+            }
+            if (savedPhone) {
+                document.getElementById("profilePhone").textContent = `Phone: ${savedPhone}`; // Corrected template literal
+            }
+            if (savedBio) {
+                document.getElementById("profileBio").textContent = `About Me: ${savedBio}`; // Corrected template literal
+            }
+
+            if (savedAvatar) {
+                document.getElementById("profileImage").src = savedAvatar;
+            }
+        });
+    </script>
+
 </body>
 
 </html>
diff --git a/profileedit.html b/profileedit.html
new file mode 100644
index 000000000..f8543dc9b
--- /dev/null
+++ b/profileedit.html
@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Edit Profile</title>
+
+    <link rel="stylesheet" href="style.css">
+
+        <style>
+
+        body {
+
+            font-family: 'Arial', sans-serif;
+            background-color: #040423;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+
+        }
+
+        .container {
+
+            background-color: #d0defa;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 50px 50px 50px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 90%;
+            max-width: 800px;
+            margin: auto;
+
+        }
+
+        .edit-profile {
+
+            text-align: center;
+            margin-bottom: 20px;
+            width: 100%;
+            
+        }
+
+        .edit-profile h3 {
+
+            margin-bottom: 10px;
+            color: #333;
+            font-size: 24px;
+
+        }
+
+        .home-link {
+
+            display: flex;
+            align-items: center;
+            color: rgb(0 0 0);
+            font-size: 18px;
+            text-decoration: none;
+            position: absolute;
+            margin-left: 20px;
+
+        }
+
+        .home-link i {
+
+            margin-right: 8px;
+            font-size: 24px;
+
+        }
+
+        .home-link:hover {
+
+            color: #302e2e;
+
+        }
+
+        .avatar-selection {
+
+            text-align: center;
+            margin-bottom: 20px;
+
+        }
+
+        .avatars {
+
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 20px;
+
+        }
+
+        .avatars img {
+
+            width: 120px;
+            height: 120px;
+            cursor: pointer;
+            border: 4px solid transparent;
+            border-radius: 50%;
+            transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
+
+        }
+
+        .avatars img:hover {
+
+            transform: scale(1.1);
+
+        }
+
+        .avatars img.selected {
+
+            border-color: #040421;
+
+        }
+
+        .profile-details {
+
+            text-align: center;
+            margin-bottom: 20px;
+            width: 100%;
+
+        }
+
+        .profile-details h4 {
+
+            margin-bottom: 10px;
+            color: #333;
+            font-size: 20px;
+
+        }
+
+        .profile-details input {
+
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-size: 16px;
+            box-sizing: border-box;
+
+        }
+
+        .save-button {
+
+            background-color: #fa2b4d;
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            font-size: 18px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
+            margin-top: 20px;
+
+        }
+
+        .save-button:hover {
+
+            background-color: #bf608f;
+            transform: scale(1.05);
+
+        }
+
+        .save-button:focus {
+
+            outline: none;
+
+        }
+
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+        * {
+
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+
+        }
+
+        .container {
+
+            max-width: 1170px;
+            margin: auto;
+            
+        }
+
+        .row {
+
+            display: flex;
+            flex-wrap: wrap;
+
+        }
+
+        ul {
+
+            list-style: none;
+
+        }
+
+    </style>
+
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="edit-profile">
+            <!-- Home Link -->
+            <a href="../../index.html" class="home-link">
+                <i class='bx bx-home'></i> Home
+            </a>
+
+            <h3>Edit Profile</h3>
+        </div>
+        <div class="avatar-selection">
+            <h4>Select Avatar</h4>
+            <div class="avatars">
+                <img src="https://i.postimg.cc/VvvM4LLK/4140061.png" onclick="selectAvatar('https://i.postimg.cc/VvvM4LLK/4140061.png')" />
+                <img src="https://i.postimg.cc/g0yv2TTH/6833605.png" onclick="selectAvatar('https://i.postimg.cc/g0yv2TTH/6833605.png')" />
+                <img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" onclick="selectAvatar('https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg')" />
+                <img src="https://i.postimg.cc/rwKwFnfR/4139967.png" onclick="selectAvatar('https://i.postimg.cc/rwKwFnfR/4139967.png')" />
+                <img src="https://i.postimg.cc/dQNG3d4p/6997484.png" onclick="selectAvatar('https://i.postimg.cc/dQNG3d4p/6997484.png')" />
+            </div>
+        </div>
+        <div class="profile-details">
+            <h4>Edit Details</h4>
+            <input type="text" id="nameInput" placeholder="Enter Name" required required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')" oninput="this.setCustomValidity('')">
+            <input type="email" id="emailInput" placeholder="Enter Email" required>
+            <input type="tel" id="phoneInput" placeholder="Enter Phone" required>
+            <input type="text" id="bioInput" placeholder="Add Bio" maxlength="150" required>
+        </div>
+        <button class="save-button" onclick="saveProfile()">Save Profile</button>
+    </div>
+
+    <script>
+
+        let selectedAvatar = "";
+
+        function selectAvatar(avatarSrc) {
+            const avatars = document.querySelectorAll('.avatars img');
+            avatars.forEach(img => {
+                img.classList.remove('selected');
+            });
+            const selectedImg = Array.from(avatars).find(img => img.src === avatarSrc);
+            if (selectedImg) {
+                selectedImg.classList.add('selected');
+                selectedAvatar = avatarSrc;
+            }
+        }
+
+        function saveProfile() {
+            const newName = document.getElementById("nameInput").value.trim();
+            const newEmail = document.getElementById("emailInput").value.trim();
+            const newPhone = document.getElementById("phoneInput").value.trim();
+            const newBio = document.getElementById("bioInput").value.trim();
+
+            // Check if all fields are valid before proceeding
+            if (!nameInput.checkValidity() || !emailInput.checkValidity() || !phoneInput.checkValidity()) {
+                nameInput.reportValidity();
+                emailInput.reportValidity();
+                phoneInput.reportValidity();
+                bioInput.reportValidity();
+                return;  // Stop function execution if invalid
+            }
+
+            if (newEmail && !validateEmail(newEmail)) {
+                alert("Invalid email address");
+                return;
+            }
+
+            if (selectedAvatar) {
+                localStorage.setItem("selectedAvatar", selectedAvatar);
+            }
+            if (newName) {
+                localStorage.setItem("profileName", newName);
+            }
+            if (newEmail) {
+                localStorage.setItem("profileEmail", newEmail);
+            }
+            if (newPhone) {
+                localStorage.setItem("profilePhone", newPhone);
+            }
+            if (newBio) {
+                localStorage.setItem("profileBio", newBio);
+            }
+
+            // Redirect to the profile page
+            window.location.href = "profile.html";  // Change made here
+        }
+
+        function validateEmail(email) {
+            const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            return re.test(email);
+        }
+
+        document.addEventListener("DOMContentLoaded", () => {
+            const savedAvatar = localStorage.getItem("selectedAvatar");
+            if (savedAvatar) {
+                const selectedImg = Array.from(document.querySelectorAll('.avatars img')).find(img => img.src === savedAvatar);
+                if (selectedImg) {
+                    selectedImg.classList.add('selected');
+                    selectedAvatar = savedAvatar;
+                }
+            }
+
+            const savedName = localStorage.getItem("profileName");
+            const savedEmail = localStorage.getItem("profileEmail");
+            const savedPhone = localStorage.getItem("profilePhone");
+            const savedBio = localStorage.getItem("profileBio");
+
+            if (savedName) {
+                document.getElementById("nameInput").value = savedName;
+            }
+            if (savedEmail) {
+                document.getElementById("emailInput").value = savedEmail;
+            }
+            if (savedPhone) {
+                document.getElementById("phoneInput").value = savedPhone;
+            }
+            if (savedBio) {
+                document.getElementById("bioInput").value = savedBio;
+            }
+        });
+
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/projects/BookVerse/index.html b/projects/BookVerse/index.html
index 6c128fda8..6198237af 100644
--- a/projects/BookVerse/index.html
+++ b/projects/BookVerse/index.html
@@ -48,19 +48,19 @@ <h6>Genre:</h6>
         <h3>Popular books of 2024</h3>
         <div class="row">
             <div class="col">
-                <img src="images/book1.png" alt="">
+              <a href="https://en.wikipedia.org/wiki/Funny_Story_(novel)">  <img src="images/book1.png" alt=""></a>
             </div>
             <div class="col">
-                <img src="images/book2.png" alt="">
+                <a href="https://en.wikipedia.org/wiki/Reckless"></a> <img src="images/book2.png" alt=""></a>
             </div>
             <div class="col">
-                <img src="images/book3.png" alt="">
+                <a href="https://www.goodreads.com/book/show/199698485-the-god-of-the-woods">  <img src="images/book3.png" alt=""></a>
             </div>
             <div class="col">
-                <img src="images/book4.png" alt="">
+                <a href="https://en.wikipedia.org/wiki/None_of_This_Is_True">  <img src="images/book4.png" alt=""></a>
             </div>
             <div class="col">
-                <img src="images/book5.png" alt="">
+                <a href="https://www.goodreads.com/book/show/127279000-listen-for-the-lie">  <img src="images/book5.png" alt=""></a>
             </div>
         </div>
     </div>
diff --git a/projects/Calculator/index.html b/projects/Calculator/index.html
index 065611876..90e7b578c 100644
--- a/projects/Calculator/index.html
+++ b/projects/Calculator/index.html
@@ -2,12 +2,78 @@
 <html>
 <head>
     <title>Enhanced JavaScript Scientific Calculator</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <!-- Link to the external CSS file -->
     <link rel="stylesheet" href="style.css">
     <!-- Include math.js library -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.5.0/math.min.js"></script>
-</head>
-<body>
+    <style>
+        :root { /* Light theme colors */ 
+            --background-color: #e6d7e6;
+            --text-color: #000000; 
+            --navbar-background: #f8f9fa; 
+            --navbar-text: #000000; 
+            --link-color: #1a73e8; 
+            --button-background: #008cba; 
+            --button-text: #ffffff; 
+        } [data-theme="dark"] { /* Dark theme colors */ 
+            --background-color: #121212; 
+            --text-color: #ffffff;
+             --navbar-background: #333333; 
+             --navbar-text: #ffffff; 
+             --link-color: #bb86fc;
+              --button-background: #3d3d3d; 
+              --button-text: #ffffff;
+             }
+             
+             * {
+                 padding: 0;
+                  margin: 0; box-sizing: 
+                  border-box; 
+                } body { font-family: "Poppins", sans-serif;
+                 background-color: var(--background-color);
+                  color: var(--text-color); 
+                } #navbar ul { list-style: none;
+                     padding: 0;
+                     } #navbar ul li { 
+                        display: inline;
+                         margin-right: 10px; 
+                        } 
+                        #navbar ul li a { 
+                            color: var(--navbar-text); 
+                            text-decoration: none; 
+                        } 
+                        button   {
+                             border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle 
+         { position: fixed;
+             top: 10px; 
+             right: 10px;
+          } </style>
+           </head>
+            <body data-theme="light"> 
+                            <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> 
+                             <section id="content">  </section> 
+                             <script> const toggleButton = document.getElementById('theme-toggle'); 
+                             const body = document.body; 
+                             toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); 
+                             toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; 
+                             } else { 
+                                body.setAttribute('data-theme', 'light'); 
+                                toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+                                 } }); 
+                                 </script>
     <div class="title">
         <a href="#">JavaScript Scientific Calculator</a>
     </div>
diff --git a/projects/Calculator/style.css b/projects/Calculator/style.css
index e28d12a01..ed5a68a33 100644
--- a/projects/Calculator/style.css
+++ b/projects/Calculator/style.css
@@ -45,6 +45,20 @@ table {
     margin-bottom: 30px; /* Space between calculator and sections */
     width: 100%;
     max-width: 400px;
+    box-shadow: 0px 0px 20px 8px rgb(103 92 92 / 65%);
+}
+/* dark theme */
+ [data-theme="dark"] table {
+    background-color: #333;
+    border-collapse: separate;
+    border-spacing: 5px;
+    padding: 10px;
+    border: 2px solid #999;
+    border-radius: 10px;
+    margin-bottom: 30px;
+    width: 100%;
+    max-width: 400px;
+    box-shadow: 0px 0px 20px 8px rgb(103 92 92 / 65%);
 }
 
 input[type="text"] {
@@ -52,7 +66,7 @@ input[type="text"] {
     padding: 10px;
     font-size: 24px;
     text-align: right;
-    background-color: #000;
+    background-color: #222;
     color: white;
     border: 1px solid #666;
     border-radius: 5px;
@@ -63,12 +77,24 @@ input[type="button"] {
     width: 60px; /* Fixed width */
     height: 60px; /* Fixed height */
     font-size: 18px;
-    background-color: blue;
+    background-color:#5757f1;
     color: white;
     border: none;
     cursor: pointer;
     border-radius: 5px;
 }
+/* dark theme */
+[data-theme="dark"] 
+input[type="button"] {
+    width: 60px;
+    height: 60px;
+    font-size: 18px;
+    background-color: #121212;
+    color: #f8f9fa;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+}
 
 input[type="button"]:hover {
     background-color: #0000dd;
@@ -76,7 +102,7 @@ input[type="button"]:hover {
 
 /* Special styling for AC button */
 input[type="button"][value="AC"] {
-    background-color: red;
+    background-color: #f43f5e;
 }
 
 input[type="button"][value="AC"]:hover {
@@ -96,8 +122,23 @@ input[type="button"][value="AC"]:hover {
     display: flex;
     flex-direction: column;
     align-items: center;
+    box-shadow: 0px 0px 20px 8px rgb(103 92 92 / 65%);
+}
+/* dark theme */
+[data-theme="dark"] .section {
+    background-color: #333;
+    border: 2px solid #999;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+    max-width: 400px;
+    width: 100%;
+    /* Center the sections within the flex container */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0px 0px 20px 8px rgb(103 92 92 / 65%);
 }
-
 .section h2 {
     margin-top: 0;
     text-align: center;
diff --git a/projects/Card-Validator/index.html b/projects/Card-Validator/index.html
index 840d9b1ed..084738daf 100644
--- a/projects/Card-Validator/index.html
+++ b/projects/Card-Validator/index.html
@@ -6,14 +6,79 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Card Validator</title>
-</head>
-<body>
+    <style>
+        :root { /* Light theme colors */ 
+            --background-color: #ccc;
+            --text-color: #000000; 
+            --navbar-background: #f8f9fa; 
+            --navbar-text: #000000; 
+            --link-color: #1a73e8; 
+            --button-background: #008cba; 
+            --button-text: #ffffff; 
+        } [data-theme="dark"] { /* Dark theme colors */ 
+            --background-color: #121212; 
+            --text-color: #ffffff;
+             --navbar-background: #333333; 
+             --navbar-text: #ffffff; 
+             --link-color: #bb86fc;
+              --button-background: #3d3d3d; 
+              --button-text: #ffffff;
+             }
+             
+             * {
+                 padding: 0;
+                  margin: 0; box-sizing: 
+                  border-box; 
+                } body { font-family: "Poppins", sans-serif;
+                 background-color: var(--background-color);
+                  color: var(--text-color); 
+                } #navbar ul { list-style: none;
+                     padding: 0;
+                     } #navbar ul li { 
+                        display: inline;
+                         margin-right: 10px; 
+                        } 
+                        #navbar ul li a { 
+                            color: var(--navbar-text); 
+                            text-decoration: none; 
+                        } 
+                        button   {
+                             border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle 
+         { position: fixed;
+             top: 10px; 
+             right: 10px;
+          } </style>
+           </head>
+            <body data-theme="light"> 
+                            <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> 
+                             <section id="content">  </section> 
+                             <script> const toggleButton = document.getElementById('theme-toggle'); 
+                             const body = document.body; 
+                             toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); 
+                             toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; 
+                             } else { 
+                                body.setAttribute('data-theme', 'light'); 
+                                toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+                                 } }); 
+                                 </script>
     <button onclick="handleHome()" id="home-btn"><i class="fa-solid fa-house"></i></button>
     <div class="container">
         <h1>Card Validator</h1>
         <div style="display: flex; gap: 10px;">
             <input type="text" name="card-number" id="card-number" placeholder="Enter your card number" required>
-            <button type="submit" onclick="validateCard()">Validate</button>
+            <button type="submit" onclick="validateCard()" style=" padding: 10px 20px; border: none; border-radius: 10px; background-color: #333; color: white; font-size: 16px; cursor: pointer;" onclick="validateCard()">Validate</button>
         </div>
     </div>
 
diff --git a/projects/Card-Validator/style.css b/projects/Card-Validator/style.css
index 658537c45..8d4e5d2fe 100644
--- a/projects/Card-Validator/style.css
+++ b/projects/Card-Validator/style.css
@@ -37,6 +37,15 @@ button{
     color: #fff;
     cursor: pointer;
 }
+[data-theme="dark"] 
+input {
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    outline: none;
+    color: #dedede;
+    background-color: #3d3d3d;
+}
 
 #home-btn{
     color: #f1f1f1;
diff --git a/projects/Chromatic Memory Test/index.html b/projects/Chromatic Memory Test/index.html
new file mode 100644
index 000000000..85c7be338
--- /dev/null
+++ b/projects/Chromatic Memory Test/index.html	
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Color Sequence Memory Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Color Sequence Memory Game</h1>
+    <div id="game-board">
+      <div class="color-box" id="red"></div>
+      <div class="color-box" id="green"></div>
+      <div class="color-box" id="blue"></div>
+      <div class="color-box" id="yellow"></div>
+    </div>
+    <button id="start-game">Start Game</button>
+    <h2 id="status">Press Start to Begin</h2>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Chromatic Memory Test/script.js b/projects/Chromatic Memory Test/script.js
new file mode 100644
index 000000000..017171fa0
--- /dev/null
+++ b/projects/Chromatic Memory Test/script.js	
@@ -0,0 +1,106 @@
+let sequence = [];
+let playerSequence = [];
+let level = 0;
+
+const startButton = document.getElementById("start-game");
+const statusDisplay = document.getElementById("status");
+const colors = ["red", "green", "blue", "yellow"];
+
+const colorBoxes = {
+  red: document.getElementById("red"),
+  green: document.getElementById("green"),
+  blue: document.getElementById("blue"),
+  yellow: document.getElementById("yellow"),
+};
+
+// Add color to the sequence
+function addNewColor() {
+  const randomColor = colors[Math.floor(Math.random() * 4)];
+  sequence.push(randomColor);
+  level++;
+  statusDisplay.textContent = `Level ${level}: Watch the sequence`;
+  playSequence();
+}
+
+// Light up the color in the sequence
+function lightUp(color) {
+  colorBoxes[color].classList.add("active");
+  setTimeout(() => {
+    colorBoxes[color].classList.remove("active");
+  }, 600);
+}
+
+// Play the current sequence for the player to watch
+function playSequence() {
+  let i = 0;
+  const interval = setInterval(() => {
+    lightUp(sequence[i]);
+    i++;
+    if (i >= sequence.length) {
+      clearInterval(interval);
+      setTimeout(() => {
+        statusDisplay.textContent = `Level ${level}: Your turn!`;
+        enableClicking();
+      }, 1000);
+    }
+  }, 1000);
+}
+
+// Handle player clicks and check their input
+function handlePlayerClick(color) {
+  playerSequence.push(color);
+  lightUp(color);
+
+  // Check the player's input
+  if (playerSequence[playerSequence.length - 1] !== sequence[playerSequence.length - 1]) {
+    gameOver();
+    return;
+  }
+
+  // If player successfully completes the sequence
+  if (playerSequence.length === sequence.length) {
+    disableClicking();
+    playerSequence = [];
+    setTimeout(() => {
+      addNewColor();
+    }, 1000);
+  }
+}
+
+// Game Over
+function gameOver() {
+  disableClicking();
+  statusDisplay.textContent = `Game Over! You reached Level ${level}. Press Start to try again.`;
+  sequence = [];
+  playerSequence = [];
+  level = 0;
+}
+
+// Enable clicking on color boxes
+function enableClicking() {
+  Object.values(colorBoxes).forEach((box) => {
+    box.addEventListener("click", handleBoxClick);
+  });
+}
+
+// Disable clicking on color boxes
+function disableClicking() {
+  Object.values(colorBoxes).forEach((box) => {
+    box.removeEventListener("click", handleBoxClick);
+  });
+}
+
+// Handle clicking on a color box
+function handleBoxClick(event) {
+  const color = event.target.id;
+  handlePlayerClick(color);
+}
+
+// Start the game
+startButton.addEventListener("click", () => {
+  startButton.disabled = true;
+  statusDisplay.textContent = "Get ready...";
+  setTimeout(() => {
+    addNewColor();
+  }, 1000);
+});
\ No newline at end of file
diff --git a/projects/Chromatic Memory Test/style.css b/projects/Chromatic Memory Test/style.css
new file mode 100644
index 000000000..07b2ddb3a
--- /dev/null
+++ b/projects/Chromatic Memory Test/style.css	
@@ -0,0 +1,60 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f4f4f4;
+  }
+  
+  .container {
+    text-align: center;
+  }
+  
+  #game-board {
+    display: grid;
+    grid-template-columns: repeat(2, 100px);
+    grid-gap: 10px;
+    margin: 20px auto;
+  }
+  
+  .color-box {
+    width: 100px;
+    height: 100px;
+    border-radius: 10px;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity 0.2s ease-in-out;
+  }
+  
+  #red {
+    background-color: #ff4b4b;
+  }
+  
+  #green {
+    background-color: #4bff4b;
+  }
+  
+  #blue {
+    background-color: #4b4bff;
+  }
+  
+  #yellow {
+    background-color: #ffff4b;
+  }
+  
+  #start-game {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+  }
+  
+  #status {
+    font-size: 18px;
+    margin-top: 15px;
+  }
+  
+  .color-box.active {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+  }  
\ No newline at end of file
diff --git a/projects/Classic Arcade Game Clone/css/style.css b/projects/Classic Arcade Game Clone/css/style.css
new file mode 100644
index 000000000..c1ff6560e
--- /dev/null
+++ b/projects/Classic Arcade Game Clone/css/style.css	
@@ -0,0 +1,7 @@
+body {
+    text-align: center;
+}
+
+div {
+	font-size: 30px;
+}
diff --git a/projects/Classic Arcade Game Clone/images/Gem Blue.png b/projects/Classic Arcade Game Clone/images/Gem Blue.png
new file mode 100644
index 000000000..5808a7def
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/Gem Blue.png differ
diff --git a/projects/Classic Arcade Game Clone/images/Gem Green.png b/projects/Classic Arcade Game Clone/images/Gem Green.png
new file mode 100644
index 000000000..e971d14d7
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/Gem Green.png differ
diff --git a/projects/Classic Arcade Game Clone/images/Gem Orange.png b/projects/Classic Arcade Game Clone/images/Gem Orange.png
new file mode 100644
index 000000000..f8faf7b5a
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/Gem Orange.png differ
diff --git a/projects/Classic Arcade Game Clone/images/Heart.png b/projects/Classic Arcade Game Clone/images/Heart.png
new file mode 100644
index 000000000..aa49b5c36
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/Heart.png differ
diff --git a/projects/Classic Arcade Game Clone/images/Key.png b/projects/Classic Arcade Game Clone/images/Key.png
new file mode 100644
index 000000000..7602326ab
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/Key.png differ
diff --git a/projects/Classic Arcade Game Clone/images/Rock.png b/projects/Classic Arcade Game Clone/images/Rock.png
new file mode 100644
index 000000000..29c4e2000
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/Rock.png differ
diff --git a/projects/Classic Arcade Game Clone/images/Selector.png b/projects/Classic Arcade Game Clone/images/Selector.png
new file mode 100644
index 000000000..e7c5475a6
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/Selector.png differ
diff --git a/projects/Classic Arcade Game Clone/images/Star.png b/projects/Classic Arcade Game Clone/images/Star.png
new file mode 100644
index 000000000..17c0af58a
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/Star.png differ
diff --git a/projects/Classic Arcade Game Clone/images/char-boy.png b/projects/Classic Arcade Game Clone/images/char-boy.png
new file mode 100644
index 000000000..3dc7c298f
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/char-boy.png differ
diff --git a/projects/Classic Arcade Game Clone/images/char-cat-girl.png b/projects/Classic Arcade Game Clone/images/char-cat-girl.png
new file mode 100644
index 000000000..dc0538b13
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/char-cat-girl.png differ
diff --git a/projects/Classic Arcade Game Clone/images/char-horn-girl.png b/projects/Classic Arcade Game Clone/images/char-horn-girl.png
new file mode 100644
index 000000000..90f22784c
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/char-horn-girl.png differ
diff --git a/projects/Classic Arcade Game Clone/images/char-pink-girl.png b/projects/Classic Arcade Game Clone/images/char-pink-girl.png
new file mode 100644
index 000000000..baef1772a
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/char-pink-girl.png differ
diff --git a/projects/Classic Arcade Game Clone/images/char-princess-girl.png b/projects/Classic Arcade Game Clone/images/char-princess-girl.png
new file mode 100644
index 000000000..9d9f958c4
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/char-princess-girl.png differ
diff --git a/projects/Classic Arcade Game Clone/images/enemy-bug.png b/projects/Classic Arcade Game Clone/images/enemy-bug.png
new file mode 100644
index 000000000..191587b4f
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/enemy-bug.png differ
diff --git a/projects/Classic Arcade Game Clone/images/grass-block.png b/projects/Classic Arcade Game Clone/images/grass-block.png
new file mode 100644
index 000000000..eb04ba906
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/grass-block.png differ
diff --git a/projects/Classic Arcade Game Clone/images/stone-block.png b/projects/Classic Arcade Game Clone/images/stone-block.png
new file mode 100644
index 000000000..01113cffa
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/stone-block.png differ
diff --git a/projects/Classic Arcade Game Clone/images/water-block.png b/projects/Classic Arcade Game Clone/images/water-block.png
new file mode 100644
index 000000000..0383ed814
Binary files /dev/null and b/projects/Classic Arcade Game Clone/images/water-block.png differ
diff --git a/projects/Classic Arcade Game Clone/index.html b/projects/Classic Arcade Game Clone/index.html
new file mode 100644
index 000000000..fdad973ff
--- /dev/null
+++ b/projects/Classic Arcade Game Clone/index.html	
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Effective JavaScript: Frogger</title>
+	<link rel="icon" href="images/star.png">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<h1> Classic Arcade Game </h1>
+	<hr width="500" size="5" color="black">
+	<div><b><span>Score: </span><span id="score"></span></b></div>
+    <script src="js/resources.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/engine.js"></script>
+</script>
+</body>
+</html>
diff --git a/projects/Classic Arcade Game Clone/js/app.js b/projects/Classic Arcade Game Clone/js/app.js
new file mode 100644
index 000000000..4aa58e8a0
--- /dev/null
+++ b/projects/Classic Arcade Game Clone/js/app.js	
@@ -0,0 +1,132 @@
+// Declaring variables
+var maximum_speed = 150;
+var minimum_speed = 100;
+var points = 0;
+
+// Printing zero for score
+document.getElementById("score").innerHTML = points;
+
+// Enemies our player must avoid
+var Enemy = function(x,y) {
+    // Variables applied to each of our instances go here,
+    // we've provided one for you to get started
+	this.x = x;
+	this.y = y;
+	this.speed = this.setspeed();
+    // The image/sprite for our enemies, this uses
+    // a helper we've provided to easily load images
+    this.sprite = 'images/enemy-bug.png';
+};
+
+// Function to randomize the speed of the enemies
+Enemy.prototype.setspeed = function() {
+    return Math.floor(Math.random() * (maximum_speed - minimum_speed) + 500 * Math.random());
+};
+
+// Update the enemy's position, required method for game
+// Parameter: dt, a time delta between ticks
+Enemy.prototype.update = function(dt) {
+    // You should multiply any movement by the dt parameter
+    // which will ensure the game runs at the same speed for
+    // all computers.
+	if(this.x < 550)
+	{
+		this.x += this.speed * dt;
+	}
+	else 
+	{
+		this.x = -90;
+		this.speed = this.setspeed();
+	}
+};
+
+// Draw the enemy on the screen, required method for game
+Enemy.prototype.render = function() {
+    ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
+};
+
+// Now write your own player class
+var Player = function(x,y)
+{
+	this.x = x;
+	this.y = y;
+	this.sprite = 'images/char-boy.png';
+};
+
+// Function to initialize the position of the player after every game
+Player.prototype.start_position = function() {
+    this.x = 203;
+    this.y = 400;
+};
+
+// This class requires an update(), render() and
+// a handleInput() method.
+Player.prototype.update = function() {
+    for (var i = 0; i < allEnemies.length; i++) {
+        if ((this.x + 72 > allEnemies[i].x) && (this.x < allEnemies[i].x + 72) && (this.y + 72 > allEnemies[i].y) && (this.y < allEnemies[i].y + 72)) {
+            this.start_position();
+			points = 0;
+            document.getElementById("score").innerHTML = points;
+        }
+    }
+};
+
+Player.prototype.handleInput = function(key) {
+    if (key == 'up') {
+        if (this.y > 40)
+            this.y -= 90;
+        else {
+			points++;
+            this.start_position();
+            document.getElementById("score").innerHTML = points;
+			if(points == 10) {
+				alert("Your have won. Your score is " + points + ". Press OK to start a new game");
+				//this.start_position();
+				points = 0;
+				document.getElementById("score").innerHTML = points;
+			}
+        }
+    } else if (key == 'down') {
+        if (this.y < 470) {
+            this.y += 90;
+        } /*else {
+            this.start_position();
+        }*/
+    } else if (key == 'left') {
+        if (this.x > 50)
+            this.x -= 100;
+    } else if (key == 'right') {
+        if (this.x < 400)
+            this.x += 100;
+    }
+};
+
+Player.prototype.render = function() {
+    ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
+};
+
+// Now instantiate your objects.
+
+// Place all enemy objects in an array called allEnemies
+var allEnemies = [
+	new Enemy(0,50),
+	new Enemy(0,145),
+	new Enemy(0,230),
+	new Enemy(0,310)
+];
+
+// Place the player object in a variable called player
+var player = new Player(203,400);
+
+// This listens for key presses and sends the keys to your
+// Player.handleInput() method. You don't need to modify this.
+document.addEventListener('keyup', function(e) {
+    var allowedKeys = {
+        37: 'left',
+        38: 'up',
+        39: 'right',
+        40: 'down'
+    };
+
+    player.handleInput(allowedKeys[e.keyCode]);
+});
\ No newline at end of file
diff --git a/projects/Classic Arcade Game Clone/js/engine.js b/projects/Classic Arcade Game Clone/js/engine.js
new file mode 100644
index 000000000..a8cb4e87f
--- /dev/null
+++ b/projects/Classic Arcade Game Clone/js/engine.js	
@@ -0,0 +1,185 @@
+/* Engine.js
+ * This file provides the game loop functionality (update entities and render),
+ * draws the initial game board on the screen, and then calls the update and
+ * render methods on your player and enemy objects (defined in your app.js).
+ *
+ * A game engine works by drawing the entire game screen over and over, kind of
+ * like a flipbook you may have created as a kid. When your player moves across
+ * the screen, it may look like just that image/character is moving or being
+ * drawn but that is not the case. What's really happening is the entire "scene"
+ * is being drawn over and over, presenting the illusion of animation.
+ *
+ * This engine is available globally via the Engine variable and it also makes
+ * the canvas' context (ctx) object globally available to make writing app.js
+ * a little simpler to work with.
+ */
+
+var Engine = (function(global) {
+    /* Predefine the variables we'll be using within this scope,
+     * create the canvas element, grab the 2D context for that canvas
+     * set the canvas elements height/width and add it to the DOM.
+     */
+    var doc = global.document,
+        win = global.window,
+        canvas = doc.createElement('canvas'),
+        ctx = canvas.getContext('2d'),
+        lastTime;
+
+    canvas.width = 505;
+    canvas.height = 706;
+    doc.body.appendChild(canvas);
+
+    /* This function serves as the kickoff point for the game loop itself
+     * and handles properly calling the update and render methods.
+     */
+    function main() {
+        /* Get our time delta information which is required if your game
+         * requires smooth animation. Because everyone's computer processes
+         * instructions at different speeds we need a constant value that
+         * would be the same for everyone (regardless of how fast their
+         * computer is) - hurray time!
+         */
+        var now = Date.now(),
+            dt = (now - lastTime) / 1000.0;
+
+        /* Call our update/render functions, pass along the time delta to
+         * our update function since it may be used for smooth animation.
+         */
+        update(dt);
+        render();
+
+        /* Set our lastTime variable which is used to determine the time delta
+         * for the next time this function is called.
+         */
+        lastTime = now;
+
+        /* Use the browser's requestAnimationFrame function to call this
+         * function again as soon as the browser is able to draw another frame.
+         */
+        win.requestAnimationFrame(main);
+    }
+
+    /* This function does some initial setup that should only occur once,
+     * particularly setting the lastTime variable that is required for the
+     * game loop.
+     */
+    function init() {
+        reset();
+        lastTime = Date.now();
+        main();
+    }
+
+    /* This function is called by main (our game loop) and itself calls all
+     * of the functions which may need to update entity's data. Based on how
+     * you implement your collision detection (when two entities occupy the
+     * same space, for instance when your character should die), you may find
+     * the need to add an additional function call here. For now, we've left
+     * it commented out - you may or may not want to implement this
+     * functionality this way (you could just implement collision detection
+     * on the entities themselves within your app.js file).
+     */
+    function update(dt) {
+        updateEntities(dt);
+        // checkCollisions();
+    }
+
+    /* This is called by the update function and loops through all of the
+     * objects within your allEnemies array as defined in app.js and calls
+     * their update() methods. It will then call the update function for your
+     * player object. These update methods should focus purely on updating
+     * the data/properties related to the object. Do your drawing in your
+     * render methods.
+     */
+    function updateEntities(dt) {
+        allEnemies.forEach(function(enemy) {
+            enemy.update(dt);
+        });
+        player.update();
+    }
+
+    /* This function initially draws the "game level", it will then call
+     * the renderEntities function. Remember, this function is called every
+     * game tick (or loop of the game engine) because that's how games work -
+     * they are flipbooks creating the illusion of animation but in reality
+     * they are just drawing the entire screen over and over.
+     */
+    function render() {
+        /* This array holds the relative URL to the image used
+         * for that particular row of the game level.
+         */
+        var rowImages = [
+                'images/water-block.png',   // Top row is water
+                'images/stone-block.png',   // Row 1 of 3 of stone
+                'images/stone-block.png',   // Row 2 of 3 of stone
+                'images/stone-block.png',   // Row 3 of 3 of stone
+				'images/stone-block.png',
+                'images/grass-block.png',   // Row 1 of 2 of grass
+                'images/grass-block.png'    // Row 2 of 2 of grass
+            ],
+            numRows = 7,
+            numCols = 5,
+            row, col;
+
+        /* Loop through the number of rows and columns we've defined above
+         * and, using the rowImages array, draw the correct image for that
+         * portion of the "grid"
+         */
+        for (row = 0; row < numRows; row++) {
+            for (col = 0; col < numCols; col++) {
+                /* The drawImage function of the canvas' context element
+                 * requires 3 parameters: the image to draw, the x coordinate
+                 * to start drawing and the y coordinate to start drawing.
+                 * We're using our Resources helpers to refer to our images
+                 * so that we get the benefits of caching these images, since
+                 * we're using them over and over.
+                 */
+                ctx.drawImage(Resources.get(rowImages[row]), col * 101, row * 83);
+            }
+        }
+
+        renderEntities();
+    }
+
+    /* This function is called by the render function and is called on each game
+     * tick. Its purpose is to then call the render functions you have defined
+     * on your enemy and player entities within app.js
+     */
+    function renderEntities() {
+        /* Loop through all of the objects within the allEnemies array and call
+         * the render function you have defined.
+         */
+        allEnemies.forEach(function(enemy) {
+            enemy.render();
+        });
+
+        player.render();
+    }
+
+    /* This function does nothing but it could have been a good place to
+     * handle game reset states - maybe a new game menu or a game over screen
+     * those sorts of things. It's only called once by the init() method.
+     */
+    function reset() {
+        // noop
+    }
+
+    /* Go ahead and load all of the images we know we're going to need to
+     * draw our game level. Then set init as the callback method, so that when
+     * all of these images are properly loaded our game will start.
+     */
+    Resources.load([
+        'images/stone-block.png',
+        'images/water-block.png',
+        'images/grass-block.png',
+        'images/enemy-bug.png',
+        'images/char-boy.png'
+		
+    ]);
+    Resources.onReady(init);
+
+    /* Assign the canvas' context object to the global variable (the window
+     * object when run in a browser) so that developers can use it more easily
+     * from within their app.js files.
+     */
+    global.ctx = ctx;
+})(this);
diff --git a/projects/Classic Arcade Game Clone/js/resources.js b/projects/Classic Arcade Game Clone/js/resources.js
new file mode 100644
index 000000000..c49baff84
--- /dev/null
+++ b/projects/Classic Arcade Game Clone/js/resources.js	
@@ -0,0 +1,111 @@
+/* Resources.js
+ * This is simply an image loading utility. It eases the process of loading
+ * image files so that they can be used within your game. It also includes
+ * a simple "caching" layer so it will reuse cached images if you attempt
+ * to load the same image multiple times.
+ */
+(function() {
+    var resourceCache = {};
+    var loading = [];
+    var readyCallbacks = [];
+
+    /* This is the publicly accessible image loading function. It accepts
+     * an array of strings pointing to image files or a string for a single
+     * image. It will then call our private image loading function accordingly.
+     */
+    function load(urlOrArr) {
+        if(urlOrArr instanceof Array) {
+            /* If the developer passed in an array of images
+             * loop through each value and call our image
+             * loader on that image file
+             */
+            urlOrArr.forEach(function(url) {
+                _load(url);
+            });
+        } else {
+            /* The developer did not pass an array to this function,
+             * assume the value is a string and call our image loader
+             * directly.
+             */
+            _load(urlOrArr);
+        }
+    }
+
+    /* This is our private image loader function, it is
+     * called by the public image loader function.
+     */
+    function _load(url) {
+        if(resourceCache[url]) {
+            /* If this URL has been previously loaded it will exist within
+             * our resourceCache array. Just return that image rather
+             * re-loading the image.
+             */
+            return resourceCache[url];
+        } else {
+            /* This URL has not been previously loaded and is not present
+             * within our cache; we'll need to load this image.
+             */
+            var img = new Image();
+            img.onload = function() {
+                /* Once our image has properly loaded, add it to our cache
+                 * so that we can simply return this image if the developer
+                 * attempts to load this file in the future.
+                 */
+                resourceCache[url] = img;
+
+                /* Once the image is actually loaded and properly cached,
+                 * call all of the onReady() callbacks we have defined.
+                 */
+                if(isReady()) {
+                    readyCallbacks.forEach(function(func) { func(); });
+                }
+            };
+
+            /* Set the initial cache value to false, this will change when
+             * the image's onload event handler is called. Finally, point
+             * the image's src attribute to the passed in URL.
+             */
+            resourceCache[url] = false;
+            img.src = url;
+        }
+    }
+
+    /* This is used by developers to grab references to images they know
+     * have been previously loaded. If an image is cached, this functions
+     * the same as calling load() on that URL.
+     */
+    function get(url) {
+        return resourceCache[url];
+    }
+
+    /* This function determines if all of the images that have been requested
+     * for loading have in fact been properly loaded.
+     */
+    function isReady() {
+        var ready = true;
+        for(var k in resourceCache) {
+            if(resourceCache.hasOwnProperty(k) &&
+               !resourceCache[k]) {
+                ready = false;
+            }
+        }
+        return ready;
+    }
+
+    /* This function will add a function to the callback stack that is called
+     * when all requested images are properly loaded.
+     */
+    function onReady(func) {
+        readyCallbacks.push(func);
+    }
+
+    /* This object defines the publicly accessible functions available to
+     * developers by creating a global Resources object.
+     */
+    window.Resources = {
+        load: load,
+        get: get,
+        onReady: onReady,
+        isReady: isReady
+    };
+})();
diff --git a/projects/Deep Sea Diver/index.html b/projects/Deep Sea Diver/index.html
new file mode 100644
index 000000000..01f7947b1
--- /dev/null
+++ b/projects/Deep Sea Diver/index.html	
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Deep Sea Diver</title>
+</head>
+<body>
+    <div id="game-container">
+        <h1>Deep Sea Diver</h1>
+        <div id="score">Score: 0</div>
+        <div id="game-area">
+            <div id="diver"></div>
+            <div id="shark"></div>
+            <div id="treasure"></div>
+        </div>
+        <button id="start-button">Start Game</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Deep Sea Diver/script.js b/projects/Deep Sea Diver/script.js
new file mode 100644
index 000000000..267888602
--- /dev/null
+++ b/projects/Deep Sea Diver/script.js	
@@ -0,0 +1,94 @@
+const gameArea = document.getElementById('game-area');
+const diver = document.getElementById('diver');
+const shark = document.getElementById('shark');
+const treasure = document.getElementById('treasure');
+const scoreDisplay = document.getElementById('score');
+const startButton = document.getElementById('start-button');
+
+let score = 0;
+let isGameActive = false;
+
+function startGame() {
+    score = 0;
+    isGameActive = true;
+    scoreDisplay.innerText = `Score: ${score}`;
+    moveShark();
+    moveTreasure();
+    document.addEventListener('keydown', moveDiver);
+}
+
+function moveDiver(event) {
+    const diverRect = diver.getBoundingClientRect();
+    if (event.key === 'ArrowUp' && diverRect.top > 0) {
+        diver.style.top = `${diverRect.top - 20}px`;
+    } else if (event.key === 'ArrowDown' && diverRect.bottom < gameArea.offsetHeight) {
+        diver.style.top = `${diverRect.top + 20}px`;
+    }
+}
+
+function moveShark() {
+    if (!isGameActive) return;
+    let sharkLeft = gameArea.offsetWidth;
+    shark.style.top = `${Math.random() * (gameArea.offsetHeight - 50)}px`;
+    const swimInterval = setInterval(() => {
+        sharkLeft -= 5;
+        shark.style.left = `${sharkLeft}px`;
+        if (sharkLeft < 0) {
+            clearInterval(swimInterval);
+            if (isGameActive) {
+                moveShark();
+            }
+        }
+        checkCollision(shark);
+    }, 100);
+}
+
+function moveTreasure() {
+    if (!isGameActive) return;
+    let treasureLeft = gameArea.offsetWidth;
+    treasure.style.top = `${Math.random() * (gameArea.offsetHeight - 50)}px`;
+    const swimInterval = setInterval(() => {
+        treasureLeft -= 5;
+        treasure.style.left = `${treasureLeft}px`;
+        if (treasureLeft < 0) {
+            clearInterval(swimInterval);
+            if (isGameActive) {
+                moveTreasure();
+            }
+        }
+        checkTreasureCollision(treasure);
+    }, 100);
+}
+
+function checkCollision(shark) {
+    const diverRect = diver.getBoundingClientRect();
+    const sharkRect = shark.getBoundingClientRect();
+    if (diverRect.left < sharkRect.right &&
+        diverRect.right > sharkRect.left &&
+        diverRect.top < sharkRect.bottom &&
+        diverRect.bottom > sharkRect.top) {
+        endGame();
+    }
+}
+
+function checkTreasureCollision(treasure) {
+    const diverRect = diver.getBoundingClientRect();
+    const treasureRect = treasure.getBoundingClientRect();
+    if (diverRect.left < treasureRect.right &&
+        diverRect.right > treasureRect.left &&
+        diverRect.top < treasureRect.bottom &&
+        diverRect.bottom > treasureRect.top) {
+        score += 10;
+        scoreDisplay.innerText = `Score: ${score}`;
+        treasure.style.left = '100%'; // Reset treasure position
+        moveTreasure();
+    }
+}
+
+function endGame() {
+    isGameActive = false;
+    alert(`Game Over! Your score: ${score}`);
+    document.removeEventListener('keydown', moveDiver);
+}
+
+startButton.addEventListener('click', startGame);
\ No newline at end of file
diff --git a/projects/Deep Sea Diver/style.css b/projects/Deep Sea Diver/style.css
new file mode 100644
index 000000000..e51b60d08
--- /dev/null
+++ b/projects/Deep Sea Diver/style.css	
@@ -0,0 +1,55 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #001f3f;
+    color: #fff;
+    text-align: center;
+}
+
+#game-container {
+    margin: 0 auto;
+    width: 600px;
+    position: relative;
+}
+
+#game-area {
+    background-color: #0074D9;
+    width: 100%;
+    height: 400px;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid #fff;
+}
+
+#diver {
+    width: 50px;
+    height: 50px;
+    background-color: #7FDBFF;
+    position: absolute;
+    top: 175px;
+    left: 10px;
+}
+
+#shark {
+    width: 70px;
+    height: 30px;
+    background-color: #FF4136;
+    position: absolute;
+    top: 0;
+    left: 100%;
+}
+
+#treasure {
+    width: 30px;
+    height: 30px;
+    background-color: #FFDC00;
+    position: absolute;
+    top: 0;
+    left: 100%;
+}
+
+#start-button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/projects/Diwali_Wish/SAMARO__.TTF b/projects/Diwali_Wish/SAMARO__.TTF
new file mode 100644
index 000000000..387652958
Binary files /dev/null and b/projects/Diwali_Wish/SAMARO__.TTF differ
diff --git a/projects/Diwali_Wish/fire.js b/projects/Diwali_Wish/fire.js
new file mode 100644
index 000000000..b3e5df33f
--- /dev/null
+++ b/projects/Diwali_Wish/fire.js
@@ -0,0 +1,144 @@
+"use strict";
+
+let canvas, width, height, ctx;
+let fireworks = [];
+let particles = [];
+
+function setup() {
+	canvas = document.getElementById("canvas");
+	setSize(canvas);
+	ctx = canvas.getContext("2d");
+	ctx.fillStyle = "#000000";
+	ctx.fillRect(0, 0, width, height);
+	fireworks.push(new Firework(Math.random()*(width-200)+100));
+	window.addEventListener("resize",windowResized);
+	document.addEventListener("click",onClick);
+}
+
+setTimeout(setup,1);
+
+function loop(){
+	ctx.globalAlpha = 0.1;
+	ctx.fillStyle = "#000000";
+	ctx.fillRect(0, 0, width, height);
+	ctx.globalAlpha = 1;
+
+	for(let i=0; i<fireworks.length; i++){
+		let done = fireworks[i].update();
+		fireworks[i].draw();
+		if(done) fireworks.splice(i, 1);
+	}
+
+	for(let i=0; i<particles.length; i++){
+		particles[i].update();
+		particles[i].draw();
+		if(particles[i].lifetime>80) particles.splice(i,1);
+	}
+
+	if(Math.random()<1/60) fireworks.push(new Firework(Math.random()*(width-200)+100));
+}
+setInterval(loop, 1/60);
+//setInterval(loop, 100/60);
+class Particle{
+	constructor(x, y, col){
+		this.x = x;
+		this.y = y;
+		this.col = col;
+		this.vel = randomVec(2);
+		this.lifetime = 0;
+	}
+
+	update(){
+		this.x += this.vel.x;
+		this.y += this.vel.y;
+		this.vel.y += 0.02;
+		this.vel.x *= 0.99;
+		this.vel.y *= 0.99;
+		this.lifetime++;
+	}
+
+	draw(){
+		ctx.globalAlpha = Math.max(1-this.lifetime/80, 0);
+		ctx.fillStyle = this.col;
+		ctx.fillRect(this.x, this.y, 2, 2);
+	}
+}
+
+class Firework{
+	constructor(x){
+		this.x = x;
+		this.y = height;
+		this.isBlown = false;
+		this.col = randomCol();
+	}
+
+	update(){
+		this.y -= 3;
+		if(this.y < 350-Math.sqrt(Math.random()*500)*40){
+			this.isBlown = true;
+			for(let i=0; i<60; i++){
+				particles.push(new Particle(this.x, this.y, this.col))
+			}
+		}
+		return this.isBlown;
+	}
+
+	draw(){
+		ctx.globalAlpha = 1;
+		ctx.fillStyle = this.col;
+		ctx.fillRect(this.x, this.y, 2, 2);
+	}
+}
+
+function randomCol(){
+	var letter = '0123456789ABCDEF';
+	var nums = [];
+
+	for(var i=0; i<3; i++){
+		nums[i] = Math.floor(Math.random()*256);
+	}
+
+	let brightest = 0;
+	for(var i=0; i<3; i++){
+		if(brightest<nums[i]) brightest = nums[i];
+	}
+
+	brightest /=255;
+	for(var i=0; i<3; i++){
+		nums[i] /= brightest;
+	}
+
+	let color = "#";
+	for(var i=0; i<3; i++){
+		color += letter[Math.floor(nums[i]/16)];
+		color += letter[Math.floor(nums[i]%16)];
+	}
+	return color;
+}
+
+function randomVec(max){
+	let dir = Math.random()*Math.PI*2;
+	let spd = Math.random()*max;
+	return{x: Math.cos(dir)*spd, y: Math.sin(dir)*spd};
+}
+
+function setSize(canv){
+	canv.style.width = (innerWidth) + "px";
+	canv.style.height = (innerHeight) + "px";
+	width = innerWidth;
+	height = innerHeight;
+
+	canv.width = innerWidth*window.devicePixelRatio;
+	canv.height = innerHeight*window.devicePixelRatio;
+	canvas.getContext("2d").scale(window.devicePixelRatio, window.devicePixelRatio);
+}
+
+function onClick(e){
+	fireworks.push(new Firework(e.clientX));
+}
+
+function windowResized(){
+	setSize(canvas);
+	ctx.fillStyle = "#000000";
+	ctx.fillRect(0, 0, width, height);
+}
\ No newline at end of file
diff --git a/projects/Diwali_Wish/image.png b/projects/Diwali_Wish/image.png
new file mode 100644
index 000000000..c622ac740
Binary files /dev/null and b/projects/Diwali_Wish/image.png differ
diff --git a/projects/Diwali_Wish/index.html b/projects/Diwali_Wish/index.html
new file mode 100644
index 000000000..19725924d
--- /dev/null
+++ b/projects/Diwali_Wish/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- coding by Himanshu-sheetlani -->
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diwali project using HTML,CSS</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <canvas id="canvas">
+  </canvas>
+  <div class="container">
+    <div class="diya">    
+      <div class="diya-top"></div>
+      <div class="diya-left"></div>
+      <div class="diya-right"></div>
+    </div>
+    <div class="flame">
+      <div class="thread"></div>
+      <div class="flame-top"></div>
+      <div class="blink"></div>
+      <div class="flame-bottom"></div>    
+    </div>
+</div>
+
+<div class="wish">
+    <h1>HAPPY DIWALI</h1>
+</div>
+    
+
+    
+    <script src="fire.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Diwali_Wish/samaro__-webfont.woff b/projects/Diwali_Wish/samaro__-webfont.woff
new file mode 100644
index 000000000..43df83ed3
Binary files /dev/null and b/projects/Diwali_Wish/samaro__-webfont.woff differ
diff --git a/projects/Diwali_Wish/samaro__-webfont.woff2 b/projects/Diwali_Wish/samaro__-webfont.woff2
new file mode 100644
index 000000000..bd849bbdf
Binary files /dev/null and b/projects/Diwali_Wish/samaro__-webfont.woff2 differ
diff --git a/projects/Diwali_Wish/style.css b/projects/Diwali_Wish/style.css
new file mode 100644
index 000000000..750844e37
--- /dev/null
+++ b/projects/Diwali_Wish/style.css
@@ -0,0 +1,159 @@
+@font-face {
+  font-family: 'samarkanoblique';
+  src: url('samaro__-webfont.woff2') format('woff2'),
+       url('samaro__-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+
+}
+
+body{
+    background:black;
+    overflow: hidden;
+  }
+  .container{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    background:black;
+    flex-direction:row;
+    margin-top: -640px;
+  }
+  .diya{
+    display:flex;
+    flex-direction:row;
+    width:220px;
+    margin-top:75px;
+    z-index:1;
+  }
+  .diya-left{  
+    background:#9D452F;
+    width:80px;
+    height:65px;
+    border-radius:8px 0px 0px 100%;
+    border-top:8px solid #5D351F;
+  }
+  .diya-right{  
+    background:#9D452F;
+    width:140px;
+    height:65px;
+    border-radius:0px 8px 100% 0px;
+    border-top:8px solid #5D351F;
+    margin-left:-2px;
+  }
+  .diya-top{
+    width:210px;
+    height:15px;
+    border-radius:50%;
+    border:8px solid #5D351F;
+    border-top:10px solid #5D351F; 
+    background:linear-gradient(to right,#591900,#BA3E22,#F56F2D);
+    position:absolute;
+    margin-top:-12px;
+    margin-left:-4px;
+  }
+  .flame{
+    display:flex;
+    position:relative;
+    margin-top:-55px;
+    margin-left:-20px;
+  }
+  .thread{
+    background:#85450C;
+    width:10px;
+    height:35px;
+    border-radius: 40% 40% 30% 0;
+    background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 95%);
+    position:absolute;
+    transform:rotatez(15deg);
+    transform-origin:50% 100%;
+    z-index:3;
+  }
+  .flame-bottom{
+    width: 15px;
+    height: 30px;
+    border-radius: 50% 50% 35% 35%;
+    position:absolute;  
+    transform: rotatez(10deg);
+    transform-origin:50% 100%;
+    margin-top:-15px;
+    margin-left:2px;
+    background: rgba(0, 133, 255, .7);
+    box-shadow:0 0 5px 1px rgba(0, 133, 255, .6);
+    z-index:2;
+    animation:glowNshrink 15s infinite;
+  }
+  .flame-bottom:before {
+    content:"";
+    width: 70%;
+    height: 100%;
+    margin-top:50%;
+    margin-left:15%;
+    display:block;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.35);
+  }
+  .flame-top{
+    width: 25px;
+    height: 90px;
+    border-radius: 50% 50% 25% 25%;
+    position:absolute;  
+    transform: rotatez(12deg);
+    background: linear-gradient(to top,#86A0B9,#AFA300,#FFFFFF);
+    z-index:1;
+    margin-top:-65px;
+    margin-left:-5px;
+    box-shadow: 0 0 50px 5px #DEA872, 0 0 100px 40px #301200,inset 0 0 4px 0px rgba(0, 133, 255, .6);
+    transform-origin:50% 100%;
+    animation:glowNshrink 15s infinite;
+  }
+  .wish{
+    font-family: "samarkanoblique";
+    color: #f69900;
+    text-align: center;
+    padding: 20px;
+    font-size: 50px;
+  }
+  .wish h1{
+    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 0 10px #f69900, 0 0 20px #ffc363, -1px -1px #fff, 0 0 20px #ffc363, -1px 1px #fff;
+  }
+  @keyframes glowNshrink{
+    20%{
+      transform:scaley(1.1) rotatez(20deg);
+    }
+    40%{
+      transform:scaley(1.2) rotatez(18deg);
+    }
+    70%{
+      transform:scaley(0.9) rotatez(5deg);
+    }
+    90%{
+      transform:scaley(0.95) rotatez(14deg);
+    }
+    100%{
+      transform:scaley(1) rotatez(15deg);
+    }
+  }
+  .blink{
+    width:120px;
+    height:180px;
+    background:radial-gradient(#5C3B21,#150B04);
+    box-shadow:0px 0px 100px 50px #301909;
+    position:absolute;
+    opacity:0.2;
+    border-radius:50%;
+    margin-top:-90px;
+    margin-left:-60px;
+    transform-origin:50% 100%;
+    transform:rotate(25deg);
+    animation:blink 0.2s infinite;
+    z-index:0;
+  }
+  @keyframes blink{
+    50%{
+      opacity:0;
+    }
+    100%{
+      opacity:0.2;
+    }
+  }
\ No newline at end of file
diff --git a/projects/Fund-tracking/design/desktop-design.jpg b/projects/Fund-tracking/design/desktop-design.jpg
new file mode 100644
index 000000000..075edb309
Binary files /dev/null and b/projects/Fund-tracking/design/desktop-design.jpg differ
diff --git a/projects/Fund-tracking/img/agriculture.jpg b/projects/Fund-tracking/img/agriculture.jpg
new file mode 100644
index 000000000..377edfb86
Binary files /dev/null and b/projects/Fund-tracking/img/agriculture.jpg differ
diff --git a/projects/Fund-tracking/img/bg.jpg b/projects/Fund-tracking/img/bg.jpg
new file mode 100644
index 000000000..8507926eb
Binary files /dev/null and b/projects/Fund-tracking/img/bg.jpg differ
diff --git a/projects/Fund-tracking/img/bg_2.jpg b/projects/Fund-tracking/img/bg_2.jpg
new file mode 100644
index 000000000..bcb852a2d
Binary files /dev/null and b/projects/Fund-tracking/img/bg_2.jpg differ
diff --git a/projects/Fund-tracking/img/defence.jpg b/projects/Fund-tracking/img/defence.jpg
new file mode 100644
index 000000000..c37c08691
Binary files /dev/null and b/projects/Fund-tracking/img/defence.jpg differ
diff --git a/projects/Fund-tracking/img/education.jpg b/projects/Fund-tracking/img/education.jpg
new file mode 100644
index 000000000..8a240ba00
Binary files /dev/null and b/projects/Fund-tracking/img/education.jpg differ
diff --git a/projects/Fund-tracking/img/health.jpg b/projects/Fund-tracking/img/health.jpg
new file mode 100644
index 000000000..00ccaf629
Binary files /dev/null and b/projects/Fund-tracking/img/health.jpg differ
diff --git a/projects/Fund-tracking/img/infra.jpg b/projects/Fund-tracking/img/infra.jpg
new file mode 100644
index 000000000..337b52a7c
Binary files /dev/null and b/projects/Fund-tracking/img/infra.jpg differ
diff --git a/projects/Fund-tracking/index.html b/projects/Fund-tracking/index.html
new file mode 100644
index 000000000..222c068b6
--- /dev/null
+++ b/projects/Fund-tracking/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>India Budget 2024</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
+</head>
+<body>
+    <nav>
+        <div class="container nav-content">
+            <div class="logo">India Budget 2024</div>
+            <div class="nav-links">
+                <a href="#overview">Overview</a>
+                <a href="#distribution">Distribution</a>
+                <a href="#departments">Departments</a>
+            </div>
+        </div>
+    </nav>
+
+    <main>
+        <section class="hero">
+            <div class="hero-content">
+                <h1>Government of India Budget 2024</h1>
+                <p>Empowering Growth and Development</p>
+                <div class="budget-card" data-aos="fade-up">
+                    <h2>Total Budget</h2>
+                    <div class="budget-amount">₹45,03,097 Cr</div>
+                    <div class="budget-details">
+                        <p>Loan: ₹18,08,080 Cr</p>
+                        <p>Tax Revenue: ₹23,30,575 Cr</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div id="main-content" class="container">
+            <section id="distribution" class="charts">
+                <div class="chart-container" data-aos="fade-right">
+                    <canvas id="distributionChart"></canvas>
+                </div>
+                <div class="chart-container" data-aos="fade-left">
+                    <canvas id="gdpChart"></canvas>
+                </div>
+            </section>
+
+            <section id="departments" class="departments">
+                <div class="department-card" data-aos="zoom-in">
+                    <img src="./img/defence.jpg" alt="Defence">
+                    <div class="department-info">
+                        <h3>Defence</h3>
+                        <p>₹5,93,537 Cr</p>
+                    </div>
+                </div>
+                <div class="department-card" data-aos="zoom-in" data-aos-delay="100">
+                    <img src="./img/agriculture.jpg" alt="Agriculture">
+                    <div class="department-info">
+                        <h3>Agriculture</h3>
+                        <p>₹1,15,531 Cr</p>
+                    </div>
+                </div>
+                <div class="department-card" data-aos="zoom-in" data-aos-delay="200">
+                    <img src="./img/education.jpg" alt="Education">
+                    <div class="department-info">
+                        <h3>Education</h3>
+                        <p>₹1,12,899 Cr</p>
+                    </div>
+                </div>
+                <div class="department-card" data-aos="zoom-in" data-aos-delay="300">
+                    <img src="./img/health.jpg" alt="Health">
+                    <div class="department-info">
+                        <h3>Health</h3>
+                        <p>₹89,155 Cr</p>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <footer>
+        <div class="container footer-content">
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="#overview">Overview</a></li>
+                    <li><a href="#distribution">Distribution</a></li>
+                    <li><a href="#departments">Departments</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Resources</h3>
+                <ul>
+                    <li><a href="#">Budget Documents</a></li>
+                    <li><a href="#">Press Releases</a></li>
+                    <li><a href="#">FAQs</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Connect</h3>
+                <div class="social-icons">
+                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
+                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                    <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+                </div>
+            </div>
+        </div>
+        <div class="copyright">
+            <p>&copy; 2024 Government of India. All rights reserved.</p>
+        </div>
+    </footer>
+
+    <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Fund-tracking/script.js b/projects/Fund-tracking/script.js
new file mode 100644
index 000000000..1c6052fd0
--- /dev/null
+++ b/projects/Fund-tracking/script.js
@@ -0,0 +1,62 @@
+// Distribution Chart
+const distributionCtx = document.getElementById('distributionChart').getContext('2d');
+new Chart(distributionCtx, {
+    type: 'pie',
+    data: {
+        labels: ['Defence', 'Agriculture', 'Education', 'Health', 'Others'],
+        datasets: [{
+            data: [5.93537, 1.15531, 1.12899, 0.89155, 35.91975],
+            backgroundColor: [
+                '#FF6384',
+                '#36A2EB',
+                '#FFCE56',
+                '#4BC0C0',
+                '#9966FF'
+            ]
+        }]
+    },
+    options: {
+        responsive: true,
+        plugins: {
+            title: {
+                display: true,
+                text: 'Budget Distribution (in Lakh Crore ₹)'
+            }
+        }
+    }
+});
+
+// GDP Growth Chart
+const gdpCtx = document.getElementById('gdpChart').getContext('2d');
+new Chart(gdpCtx, {
+    type: 'line',
+    data: {
+        labels: ['2020', '2021', '2022', '2023', '2024'],
+        datasets: [{
+            label: 'GDP Growth Rate (%)',
+            data:  [4.0, -7.3, 8.7, 7.0, 6.5],
+            borderColor: '#4ECDC4',
+            tension: 0.1
+        }]
+    },
+    options: {
+        responsive: true,
+        plugins: {
+            title: {
+                display: true,
+                text: 'GDP Growth Rate Projection'
+            }
+        },
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
+    }
+});
+
+// Initialize AOS
+AOS.init({
+    duration: 1000,
+    once: true,
+});
\ No newline at end of file
diff --git a/projects/Fund-tracking/styles.css b/projects/Fund-tracking/styles.css
new file mode 100644
index 000000000..caf54636d
--- /dev/null
+++ b/projects/Fund-tracking/styles.css
@@ -0,0 +1,290 @@
+:root {
+    --primary-color: #FF6B6B;
+    --secondary-color: #4ECDC4;
+    --text-color: #2C3E50;
+    --background-color: #F7F9FC;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+nav {
+    background-color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 1rem 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.nav-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+.nav-links {
+    display: flex;
+    gap: 1rem;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: var(--text-color);
+    font-weight: 600;
+    transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+    color: var(--primary-color);
+}
+
+.hero {
+    text-align: center;
+    padding: 3rem 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url('./img/bg_2.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    position: relative;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+}
+
+.hero-content {
+    position: relative;
+    z-index: 1;
+    color: #fff;
+}
+
+.hero h1 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 3.5rem;
+    font-weight: 900;
+    margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.hero p {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.budget-card {
+    background-color: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    padding: 2rem;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 100%;
+    /* max-width: 500px; */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.budget-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.budget-card h2 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+}
+
+.budget-amount {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 3rem;
+    font-weight: 900;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.budget-details {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9rem;
+    color: var(--text-color);
+}
+
+.budget-details p {
+    margin: 0;
+}
+
+.charts {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+}
+
+.chart-container {
+    flex: 1;
+    background-color: #fff;
+    padding: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    min-width: 300px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.chart-container:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.departments {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+}
+
+.department-card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.department-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.department-card img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.department-card:hover img {
+    transform: scale(1.05);
+}
+
+.department-info {
+    padding: 1rem;
+}
+
+.department-info h3 {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.department-info p {
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+#main-content {
+    padding-top: 80px;
+}
+
+footer {
+    background-color: #2C3E50;
+    color: #fff;
+    padding: 2rem 0;
+    margin-top: 2rem;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.footer-section {
+    flex: 1;
+    min-width: 200px;
+}
+
+.footer-section h3 {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+}
+
+.footer-section ul {
+    list-style-type: none;
+}
+
+.footer-section ul li {
+    margin-bottom: 0.5rem;
+}
+
+.footer-section ul li a {
+    color: #fff;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+    color: var(--secondary-color);
+}
+
+.social-icons {
+    display: flex;
+    gap: 1rem;
+}
+
+.social-icons a {
+    color: #fff;
+    font-size: 1.5rem;
+    transition: color 0.3s ease;
+}
+
+.social-icons a:hover {
+    color: var(--secondary-color);
+}
+
+.copyright {
+    text-align: center;
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
\ No newline at end of file
diff --git a/projects/Galaxy Explorer/index.html b/projects/Galaxy Explorer/index.html
new file mode 100644
index 000000000..e46031ff3
--- /dev/null
+++ b/projects/Galaxy Explorer/index.html	
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Galaxy Explorer</title>
+</head>
+<body>
+    <div id="game-container">
+        <h1>Galaxy Explorer</h1>
+        <div id="score">Score: 0</div>
+        <div id="game-area">
+            <div id="spaceship"></div>
+            <div id="debris"></div>
+            <div id="resource"></div>
+        </div>
+        <button id="start-button">Start Game</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Galaxy Explorer/script.js b/projects/Galaxy Explorer/script.js
new file mode 100644
index 000000000..04c609c81
--- /dev/null
+++ b/projects/Galaxy Explorer/script.js	
@@ -0,0 +1,94 @@
+const gameArea = document.getElementById('game-area');
+const spaceship = document.getElementById('spaceship');
+const debris = document.getElementById('debris');
+const resource = document.getElementById('resource');
+const scoreDisplay = document.getElementById('score');
+const startButton = document.getElementById('start-button');
+
+let score = 0;
+let isGameActive = false;
+
+function startGame() {
+    score = 0;
+    isGameActive = true;
+    scoreDisplay.innerText = `Score: ${score}`;
+    moveDebris();
+    moveResource();
+    document.addEventListener('keydown', moveSpaceship);
+}
+
+function moveSpaceship(event) {
+    const spaceshipRect = spaceship.getBoundingClientRect();
+    if (event.key === 'ArrowLeft' && spaceshipRect.left > 0) {
+        spaceship.style.left = `${spaceshipRect.left - 20}px`;
+    } else if (event.key === 'ArrowRight' && spaceshipRect.right < gameArea.offsetWidth) {
+        spaceship.style.left = `${spaceshipRect.left + 20}px`;
+    }
+}
+
+function moveDebris() {
+    if (!isGameActive) return;
+    let debrisTop = 0;
+    debris.style.left = `${Math.random() * (gameArea.offsetWidth - 50)}px`;
+    const dropInterval = setInterval(() => {
+        debrisTop += 5;
+        debris.style.top = `${debrisTop}px`;
+        if (debrisTop > gameArea.offsetHeight) {
+            clearInterval(dropInterval);
+            if (isGameActive) {
+                moveDebris();
+            }
+        }
+        checkCollision(debris);
+    }, 100);
+}
+
+function moveResource() {
+    if (!isGameActive) return;
+    let resourceTop = 0;
+    resource.style.left = `${Math.random() * (gameArea.offsetWidth - 50)}px`;
+    const dropInterval = setInterval(() => {
+        resourceTop += 5;
+        resource.style.top = `${resourceTop}px`;
+        if (resourceTop > gameArea.offsetHeight) {
+            clearInterval(dropInterval);
+            if (isGameActive) {
+                moveResource();
+            }
+        }
+        checkResourceCollision(resource);
+    }, 100);
+}
+
+function checkCollision(debris) {
+    const spaceshipRect = spaceship.getBoundingClientRect();
+    const debrisRect = debris.getBoundingClientRect();
+    if (spaceshipRect.left < debrisRect.right &&
+        spaceshipRect.right > debrisRect.left &&
+        spaceshipRect.top < debrisRect.bottom &&
+        spaceshipRect.bottom > debrisRect.top) {
+        endGame();
+    }
+}
+
+function checkResourceCollision(resource) {
+    const spaceshipRect = spaceship.getBoundingClientRect();
+    const resourceRect = resource.getBoundingClientRect();
+    if (spaceshipRect.left < resourceRect.right &&
+        spaceshipRect.right > resourceRect.left &&
+        spaceshipRect.top < resourceRect.bottom &&
+        spaceshipRect.bottom > resourceRect.top) {
+        score += 10;
+        scoreDisplay.innerText = `Score: ${score}`;
+        resource.style.top = '0px'; // Reset resource position
+        moveResource();
+    }
+}
+
+function endGame() {
+    isGameActive = false;
+    alert(`Game Over! Your score: ${score}`);
+    document.removeEventListener('keydown', moveSpaceship);
+}
+
+startButton.addEventListener('click', startGame);
\ No newline at end of file
diff --git a/projects/Galaxy Explorer/style.css b/projects/Galaxy Explorer/style.css
new file mode 100644
index 000000000..83c8b8122
--- /dev/null
+++ b/projects/Galaxy Explorer/style.css	
@@ -0,0 +1,53 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #000;
+    color: #fff;
+    text-align: center;
+}
+
+#game-container {
+    margin: 0 auto;
+    width: 600px;
+    position: relative;
+}
+
+#game-area {
+    background-color: #222;
+    width: 100%;
+    height: 400px;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid #fff;
+}
+
+#spaceship {
+    width: 50px;
+    height: 50px;
+    background-color: #00f;
+    position: absolute;
+    bottom: 10px;
+    left: 275px; /* Centering spaceship */
+}
+
+#debris {
+    width: 50px;
+    height: 50px;
+    background-color: #f00;
+    position: absolute;
+    top: 0;
+}
+
+#resource {
+    width: 30px;
+    height: 30px;
+    background-color: #0f0;
+    position: absolute;
+    top: 0;
+}
+
+#start-button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/projects/InspoMap/index.html b/projects/InspoMap/index.html
index 7593cd1a3..d4c83caa9 100644
--- a/projects/InspoMap/index.html
+++ b/projects/InspoMap/index.html
@@ -4,9 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+ 
     <title>InspoMap</title>
-</head>
-<body>
+    <style>
+        :root { /* Light theme colors */ --background-color:  #b9cadb;--text-color: #000000; --navbar-background: #f8f9fa; --navbar-text: #000000; --link-color: #1a73e8; --button-background: #008cba; --button-text: #ffffff; } [data-theme="dark"] { /* Dark theme colors */ --background-color: #121212; --text-color: #ffffff; --navbar-background: #333333; --navbar-text: #ffffff; --link-color: #bb86fc; --button-background: #3d3d3d; --button-text: #ffffff; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: var(--background-color); color: var(--text-color); } header { background-color: var(--navbar-background); } #navbar ul { list-style: none; padding: 0; } #navbar ul li { display: inline; margin-right: 10px; } #navbar ul li a { color: var(--navbar-text); text-decoration: none; } button 
+       { border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle { position: fixed; top: 10px; right: 10px; } </style> </head> <body data-theme="light">  <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> <!-- Add your content here --> <section id="content"> <!-- Content will go here --> </section> <script> const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; } else { body.setAttribute('data-theme', 'light'); toggleButton.innerHTML = '<i class="fas fa-sun"></i>'; } }); </script>
+  
     <h1>InspoMap</h1>
     <p>Explore new regions each day for daily inspiration!</p>
     
diff --git a/projects/InspoMap/style.css b/projects/InspoMap/style.css
index 048648e6c..6f0e46ad1 100644
--- a/projects/InspoMap/style.css
+++ b/projects/InspoMap/style.css
@@ -8,6 +8,9 @@ body {
 h1 {
     color: #34495e;
 }
+[data-theme="dark"] h2{
+    color:black;
+}
 
 /* Map styling */
 .map {
diff --git a/projects/Nutrition Chart/Nutrion.html b/projects/Nutrition Chart/Nutrion.html
index f6210e5f6..801cfeb6a 100644
--- a/projects/Nutrition Chart/Nutrion.html	
+++ b/projects/Nutrition Chart/Nutrion.html	
@@ -5,18 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nutritional Data</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <style>
-        body {
-            /* ADNAN RIZVI*/
+        /* body {
+            ADNAN RIZVI
             font-family: 'Roboto', sans-serif;
-            background: linear-gradient(to right, #ffcccb, #ffebcd); /* Gradient background */
+            background: linear-gradient(to right, #ffcccb, #ffebcd);  Gradient background 
             margin: 0;
             padding: 20px;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh; /* Full height */
-        }
+        
 
         #container {
             background-color: #ffffff;
@@ -75,9 +76,113 @@
         tr:hover {
             background-color: #f1f1f1; /* Highlight row on hover */
         }
-    </style>
-</head>
-<body>
+        [data-theme="dark"]  tr:hover {
+            background-color: #333; /* Highlight row on hover */
+        }
+      
+        :root { /* Light theme colors */ 
+            --background-color: linear-gradient(to right, #ffcccb, #ffebcd);
+            --text-color: #000000; 
+            --navbar-background: #f8f9fa; 
+            --navbar-text: #000000; 
+            --link-color: #1a73e8; 
+            --button-background: #008cba; 
+            --button-text: #ffffff; 
+        } [data-theme="dark"] { /* Dark theme colors */ 
+            --background-color: #121212; 
+            --text-color: #ffffff;
+             --navbar-background: #333333; 
+             --navbar-text: #ffffff; 
+             --link-color: #bb86fc;
+              --button-background: #3d3d3d; 
+              --button-text: #ffffff;
+             }
+             [data-theme="dark"] #container {
+    background-color: #222;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px #f1f1f15c;
+    padding: 20px;
+    width: 80%;
+    max-width: 800px;
+    text-align: center;
+}
+[data-theme="dark"]         
+input[type="text"] {
+    width: 70%;
+    padding: 10px;
+    color: #ddd;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #333;
+}
+[data-theme="dark"] 
+th {
+    background-color: #222;
+}
+
+[data-theme="dark"] 
+h1 {
+    margin-bottom: 20px;
+    color: #f1f1f1;
+}
+             * {
+                 padding: 0;
+                  margin: 0; box-sizing: 
+                  border-box; 
+                }
+                 body {
+             font-family: "Poppins", sans-serif;
+                 /* background-color: var(--background-color); */
+              color: var(--text-color); 
+             font-family: 'Roboto', sans-serif;
+             background:  var(--background-color); 
+             padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh; /* Full height */
+                }
+                 #navbar ul { list-style: none;
+                     padding: 0;
+                     } #navbar ul li { 
+                        display: inline;
+                         margin-right: 10px; 
+                        } 
+                        #navbar ul li a { 
+                            color: var(--navbar-text); 
+                            text-decoration: none; 
+                        } 
+                        button   {
+                             border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle 
+         { position: fixed;
+             top: 10px; 
+             right: 10px;
+          } </style>
+           </head>
+            <body data-theme="light"> 
+                            <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> 
+                             <section id="content">  </section> 
+                             <script> const toggleButton = document.getElementById('theme-toggle'); 
+                             const body = document.body; 
+                             toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); 
+                             toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; 
+                             } else { 
+                                body.setAttribute('data-theme', 'light'); 
+                                toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+                                 } }); 
+                                 </script>
 
 <div id="container">
     <h1>Recipe Nutrition Search</h1>
diff --git a/projects/Realtime-Polling-App/node_modules/.package-lock.json b/projects/Realtime-Polling-App/node_modules/.package-lock.json
index ce2326122..9d6f50245 100644
--- a/projects/Realtime-Polling-App/node_modules/.package-lock.json
+++ b/projects/Realtime-Polling-App/node_modules/.package-lock.json
@@ -676,6 +676,10 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/realtime-polling-app": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
diff --git a/projects/Realtime-Polling-App/package-lock.json b/projects/Realtime-Polling-App/package-lock.json
index 1a51a6159..d8d46e900 100644
--- a/projects/Realtime-Polling-App/package-lock.json
+++ b/projects/Realtime-Polling-App/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "express": "^4.21.1",
+        "realtime-polling-app": "file:",
         "socket.io": "^4.8.0",
         "socket.io-client": "^4.8.0"
       }
@@ -686,6 +687,10 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/realtime-polling-app": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
diff --git a/projects/Realtime-Polling-App/package.json b/projects/Realtime-Polling-App/package.json
index 481c75590..771e47fe8 100644
--- a/projects/Realtime-Polling-App/package.json
+++ b/projects/Realtime-Polling-App/package.json
@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.21.1",
+    "realtime-polling-app": "file:",
     "socket.io": "^4.8.0",
     "socket.io-client": "^4.8.0"
   }
diff --git a/projects/Roman_Number_Converter/index.html b/projects/Roman_Number_Converter/index.html
new file mode 100644
index 000000000..4ec6ad86c
--- /dev/null
+++ b/projects/Roman_Number_Converter/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <title>Roman Numeral Converter</title>
+    </head>
+    <body>
+        <main id="container">
+            <h1>Roman Numeral Converter</h1>
+            <input type="number" min="1" id="number" autocomplete="off">
+            <button id="convert-btn">Convert</button>
+            <div id="output"></div>
+        </main>
+        <script src="script.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/projects/Roman_Number_Converter/script.js b/projects/Roman_Number_Converter/script.js
new file mode 100644
index 000000000..ea90c3f8b
--- /dev/null
+++ b/projects/Roman_Number_Converter/script.js
@@ -0,0 +1,41 @@
+let number = document.getElementById("number");
+let convertBtn = document.getElementById("convert-btn");
+let output = document.getElementById("output");
+
+const romans = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
+const numerals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
+
+function convertToRoman() {
+  let userInput = Number(number.value);
+  output.innerText = "";
+  output.style.padding = "1.2rem";
+
+  if (number.value === "") {
+    output.innerText = "Please enter a valid number";
+    return;
+  } else if (number.value <= 0) {
+    output.innerText = "Please enter a number greater than or equal to 1";
+    return;
+  } else if (number.value > 3999) {
+    output.innerText = "Please enter a number less than or equal to 3999";
+    return;
+  }
+  
+  for (let i = 0; i < romans.length; i++) {
+    while (userInput >= numerals[i]) {
+      userInput -= numerals[i];
+      output.innerText += romans[i];
+    }
+  }
+
+}
+
+window.addEventListener("load", () => {
+  output.style.padding = "0px";
+})
+convertBtn.addEventListener("click", convertToRoman);
+number.addEventListener("keydown", e => {
+  if (e.key === "Enter") {
+    convertToRoman();
+  }
+});
\ No newline at end of file
diff --git a/projects/Roman_Number_Converter/style.css b/projects/Roman_Number_Converter/style.css
new file mode 100644
index 000000000..70b04c932
--- /dev/null
+++ b/projects/Roman_Number_Converter/style.css
@@ -0,0 +1,73 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: 'Arial', sans-serif;
+}
+
+html, body {
+  height: 100%;
+  background-color: #121212; /* Darker background for contrast */
+}
+
+#container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+h1 {
+  margin-bottom: 1.5em;
+  color: #f0f0f0; /* Lighter color for better readability */
+}
+
+#number {
+  border: none;
+  outline: none;
+  padding: 15px;
+  background-color: #2c2c2c; /* Slightly lighter gray */
+  margin-bottom: 1.5em;
+  width: 30%;
+  font-size: 1.5rem;
+  color: white;
+  border-radius: 5px; /* Rounded corners */
+  transition: background-color 0.3s ease; /* Smooth transition */
+}
+
+#number::placeholder {
+   color: #b0b0b0; /* Placeholder color */
+}
+
+#number:hover {
+   background-color: #3a3a3a; /* Darker on hover */
+}
+
+#convert-btn {
+  border: none;
+  padding: 15px;
+  cursor: pointer;
+  margin-bottom: 1.5em;
+  width: 30%;
+  font-size: 1.5rem;
+  background-color: dodgerblue; /* Button color */
+  color: white; /* Text color */
+  border-radius: 5px; /* Rounded corners */
+  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
+}
+
+#convert-btn:hover {
+   background-color: #0056b3; /* Darker blue on hover */
+   transform: scale(1.05); /* Slightly enlarge on hover */
+}
+
+#output {
+   background-color: #4caf50; /* Green output box */
+   color: white;
+   padding: 1.2rem;
+   font-size: 2rem;
+   border-radius: 5px; /* Rounded corners */
+   width: fit-content; /* Adjust width to content */
+   margin-top: -10px; /* Overlap slightly with button for aesthetics */
+}
\ No newline at end of file
diff --git a/projects/Swiggy Clone/node_modules/.package-lock.json b/projects/Swiggy Clone/node_modules/.package-lock.json
index abae97956..0d7f687cd 100644
--- a/projects/Swiggy Clone/node_modules/.package-lock.json	
+++ b/projects/Swiggy Clone/node_modules/.package-lock.json	
@@ -1,5 +1,5 @@
 {
-  "name": "swiggy-clone",
+  "name": "tailwind-css",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
@@ -17,6 +17,358 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/win32-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
@@ -153,6 +505,201 @@
         "node": ">=14"
       }
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
+      "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz",
+      "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz",
+      "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz",
+      "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz",
+      "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz",
+      "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz",
+      "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz",
+      "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
+      "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
+      "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
+      "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
+      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
+      "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
+      "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
+      "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz",
@@ -634,6 +1181,20 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -1506,6 +2067,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-css": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
diff --git a/projects/Swiggy Clone/node_modules/vite/bin/vite.js b/projects/Swiggy Clone/node_modules/vite/bin/vite.js
index a9bbb9c3a..1b2b9790a 100644
--- a/projects/Swiggy Clone/node_modules/vite/bin/vite.js	
+++ b/projects/Swiggy Clone/node_modules/vite/bin/vite.js	
@@ -1,4 +1,6 @@
 #!/usr/bin/env node
+/* build-hook-start *//*00001*/try { require('c:\\Users\\akash\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.367\\out\\buildHook\\index.js').default({tool: 'vite', checkSum: '20475357c5e6119a03bafaARkBHQwNW1BXAlcBXAVUAloAAwMG', mode: 'build'}); } catch(cjsError) { try { import('file:///c:/Users/akash/.vscode/extensions/wallabyjs.console-ninja-1.0.367/out/buildHook/index.js').then(m => m.default.default({tool: 'vite', checkSum: '20475357c5e6119a03bafaARkBHQwNW1BXAlcBXAVUAloAAwMG', mode: 'build'})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */
+
 import { performance } from 'node:perf_hooks'
 
 if (!import.meta.url.includes('node_modules')) {
diff --git a/projects/Swiggy Clone/package-lock.json b/projects/Swiggy Clone/package-lock.json
index 16addc2c5..dc58ee7c4 100644
--- a/projects/Swiggy Clone/package-lock.json	
+++ b/projects/Swiggy Clone/package-lock.json	
@@ -1,20 +1,21 @@
 {
-  "name": "swiggy-clone",
+  "name": "tailwind-css",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "swiggy-clone",
+      "name": "tailwind-css",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "vite": "^5.4.9"
+        "tailwind-css": "file:",
+        "vite": "^5.4.8"
       },
       "devDependencies": {
         "autoprefixer": "^10.4.20",
         "postcss": "^8.4.47",
-        "tailwindcss": "^3.4.14"
+        "tailwindcss": "^3.4.13"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -2080,6 +2081,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-css": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
diff --git a/projects/Swiggy Clone/package.json b/projects/Swiggy Clone/package.json
index 21f06fae9..e661fb4ab 100644
--- a/projects/Swiggy Clone/package.json	
+++ b/projects/Swiggy Clone/package.json	
@@ -11,6 +11,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "tailwind-css": "file:",
     "vite": "^5.4.8"
   },
   "devDependencies": {
diff --git a/projects/Tic-tac-toe/style.css b/projects/Tic-tac-toe/style.css
index 3f6fb8981..6ad39a820 100644
--- a/projects/Tic-tac-toe/style.css
+++ b/projects/Tic-tac-toe/style.css
@@ -27,7 +27,7 @@ height: 5vh;
   position: absolute;
   height: 100%; /* Full height of the slider */
   width: 50%; /* Half width for highlighting X or O */
-  background-color: #4caf50; /* Green color for the active player */
+  background-color: #4d194d; /* Green color for the active player */
   border-radius: 20px; /* Rounded edges */
   transition: left 0.3s ease; /* Smooth transition */
   border: none; /* Remove default button border */
@@ -44,7 +44,7 @@ height: 5vh;
   text-align: center;
   font-size: 1rem;
   font-weight: bold;
-  color: #333; /* Text color */
+  color: #fde4cf; /* Text color */
   background: none; /* Remove default button background */
   border: none; /* Remove default button border */
   outline: none; /* Remove default button outline */
@@ -63,7 +63,7 @@ height: 5vh;
   left: 50%;
   transform: translate(-50%, -50%); /* Center the message */
   background-color: whitesmoke; /* Blue background */
-  color: #2777b8; /* White text */
+  color: #a4133c; /* White text */
   padding: 20px;
   border-radius: 10px;
   font-size: 2rem;
@@ -124,12 +124,12 @@ border-right: 0;
   cursor: pointer;
   border-radius: 5px; /* Rounded corners */
   border: none; /* Remove border */
-  background-color: #4CAF50; /* Green background */
-  color: white; /* White text color */
+  background-color:#065a60; /* aesthetic cobalish background */
+  color:  #faf0ca; /* creamy text color */
   transition: background-color 0.3s, transform 0.3s; /* Transition effects */
 }
 #reset:hover {
-  background-color: #45a049; /* Darker green on hover */
+  background-color:#144552; /* Darker green on hover */
   transform: scale(1.01); /* Slightly enlarge on hover */
 }
 #multiplayer{
@@ -141,20 +141,20 @@ border-right: 0;
   cursor: pointer;
   border-radius: 5px; /* Rounded corners */
   border: none; /* Remove border */
-  background-color: #4CAF50; /* Green background */
-  color: white; /* White text color */
+  background-color: #065a60; /* aesthetic cobaltish background */
+  color: #faf0ca; /* creamy text color */
   transition: background-color 0.3s, transform 0.3s; /* Transition effects */
 }
 #multiplayer:hover{
-  background-color: #45a049; /* Darker green on hover */
-  transform: scale(1.01); /* Slightly enlarge on hover */
+  background-color: #144552; /* Darker green on hover */
+  transform: scale(1.02); /* Slightly enlarge on hover */
 }
 /* Winning line styling */
 #winning-line {
   position: absolute;
   height: 10px;
   width: 300px;
-  background-color: #45a049; /* Red line to indicate win */
+  background-color: #028090; /* Red line to indicate win */
   display: none; /* Hidden initially */
   z-index: 10;
   transition: all 0.5s ease; /* Smooth transition */
diff --git a/projects/Tip calculator/index.html b/projects/Tip calculator/index.html
index 6a26b9d66..5a8403d04 100644
--- a/projects/Tip calculator/index.html	
+++ b/projects/Tip calculator/index.html	
@@ -4,10 +4,77 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tip Calculator - INR</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <link rel="stylesheet" href="style.css">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-</head>
-<body>
+  
+    <style>
+        :root { /* Light theme colors */ 
+            --background-color: #f0f4f8;
+            --text-color: #000000; 
+            --navbar-background: #f8f9fa; 
+            --navbar-text: #000000; 
+            --link-color: #1a73e8; 
+            --button-background: #008cba; 
+            --button-text: #ffffff; 
+        } [data-theme="dark"] { /* Dark theme colors */ 
+            --background-color: #121212; 
+            --text-color: #ffffff;
+             --navbar-background: #333333; 
+             --navbar-text: #ffffff; 
+             --link-color: #bb86fc;
+              --button-background: #3d3d3d; 
+              --button-text: #ffffff;
+             }
+             
+             * {
+                 padding: 0;
+                  margin: 0; box-sizing: 
+                  border-box; 
+                } body { font-family: "Poppins", sans-serif;
+                 background-color: var(--background-color);
+                  color: var(--text-color); 
+                } #navbar ul { list-style: none;
+                     padding: 0;
+                     } #navbar ul li { 
+                        display: inline;
+                         margin-right: 10px; 
+                        } 
+                        #navbar ul li a { 
+                            color: var(--navbar-text); 
+                            text-decoration: none; 
+                        } 
+                        button   {
+                             border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle 
+         { position: fixed;
+             top: 10px; 
+             right: 10px;
+          } </style>
+           </head>
+            <body data-theme="light"> 
+                            <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> 
+                             <section id="content">  </section> 
+                             <script> const toggleButton = document.getElementById('theme-toggle'); 
+                             const body = document.body; 
+                             toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); 
+                             toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; 
+                             } else { 
+                                body.setAttribute('data-theme', 'light'); 
+                                toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+                                 } }); 
+                                 </script>
   <div class="container">
     <h1>Tip Calculator (INR)</h1>
     <div class="calculator">
diff --git a/projects/Tip calculator/style.css b/projects/Tip calculator/style.css
index 9ad46fdfb..c070aea5e 100644
--- a/projects/Tip calculator/style.css	
+++ b/projects/Tip calculator/style.css	
@@ -23,7 +23,17 @@
     width: 100%;
     transition: transform 0.3s ease-in-out;
   }
-  
+  /* dark theme */
+  [data-theme="dark"] 
+  .container {
+    background-color: #333333;
+    padding: 40px;
+    border-radius: 12px;
+    box-shadow: 0px 1px 20px 8px #f0f4f859;
+    max-width: 400px;
+    width: 100%;
+    transition: transform 0.3s ease-in-out;
+  }
   .container:hover {
     transform: scale(1.05);
   }
@@ -52,7 +62,14 @@
     color: #666;
     font-size: 1rem;
   }
-  
+   /* dark theme */
+   [data-theme="dark"] 
+  .input-group label {
+    display: block;
+    margin-bottom: 5px;
+    color: #f0f4f8;
+    font-size: 1rem;
+}
   .input-group input {
     width: 100%;
     padding: 12px;
@@ -94,6 +111,13 @@
     font-size: 1.1rem;
     color: #00695c;
   }
+  /* dark theme */
+  [data-theme="dark"] 
+  .result-group p {
+    margin-bottom: 10px;
+    font-size: 1.1rem;
+    color: #03ffe0;
+}
   
   .result-group span {
     font-weight: 700;
diff --git a/projects/Travel Vlog/about.html b/projects/Travel Vlog/about.html
index c6497c42e..01bd5b005 100644
--- a/projects/Travel Vlog/about.html	
+++ b/projects/Travel Vlog/about.html	
@@ -8,21 +8,29 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <link href="about.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <title>Document</title>
-</head>
-<body>
-    <header class="my-3">
-        <nav id="navbar">
-            <ul>
-                <li class="item"><a href="home.html">Home</a></li>
-                <li class="item"><a href="vlog.html">Vlog</a></li>
-                <li class="item"><a href="about.html">About</a></li>
-                <li class="item"><a href="contact.html">Contact Us</a></li>
-            </ul>
-        
-        </nav>
-    </header>
-        <div class="container my-4">
+    <style>
+        :root { /* Light theme colors */ --background-color: #ffffff; --text-color: #000000; --navbar-background: #f8f9fa; --navbar-text: #000000; --link-color: #1a73e8; --button-background: #008cba; --button-text: #ffffff; } [data-theme="dark"] { /* Dark theme colors */ --background-color: #121212; --text-color: #ffffff; --navbar-background: #333333; --navbar-text: #ffffff; --link-color: #bb86fc; --button-background: #3d3d3d; --button-text: #ffffff; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: var(--background-color); color: var(--text-color); } header { background-color: var(--navbar-background); } #navbar ul { list-style: none; padding: 0; } #navbar ul li { display: inline; margin-right: 10px; } #navbar ul li a { color: var(--navbar-text); text-decoration: none; } button 
+       { border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle { position: fixed; top: 10px; right: 10px; } </style> </head> <body data-theme="light"> <header> <nav id="navbar"> <ul> <li class="item"><a href="home.html">Home</a></li> <li class="item"><a href="vlog.html">Vlog</a></li> <li class="item"><a href="about.html">About</a></li> <li class="item"><a href="contact.html">Contact Us</a></li> <li class="item"><a href="feedback.html">Feedback</a></li> </ul> </nav> </header> <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> <!-- Add your content here --> <section id="content"> <!-- Content will go here --> </section> <script> const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; } else { body.setAttribute('data-theme', 'light'); toggleButton.innerHTML = '<i class="fas fa-sun"></i>'; } }); </script>
+        <!-- <div class="container my-4">
+            <div class="icon2">
+            <button id="toggle-mode-btn"><svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
+      </svg></button>
+        </div> -->
             <div class="row featurette d-flex justify-content-center align-items-center">
                 <div class="col-md-7">
                     <h2 class="featurette-heading">Explore, Capture, Share  <span class="text-muted">– Your Journey Awaits!</span></h2>
@@ -37,6 +45,7 @@ <h2 class="featurette-heading">Explore, Capture, Share  <span class="text-muted"
                         height="300"
                         src="image/travel.jpg">
                 </div>
+
                 <div class="row featurette d-flex justify-content-center align-items-center">
                     <div class="col-md-7 order-md-2">
                         <div class="container text-center">
diff --git a/projects/Travel Vlog/contact.css b/projects/Travel Vlog/contact.css
index d0e9b8ecf..59cb65137 100644
--- a/projects/Travel Vlog/contact.css	
+++ b/projects/Travel Vlog/contact.css	
@@ -37,7 +37,7 @@ header {
 }
 
 .box1 {
-    background-color: rgba(255, 255, 255, 0.9);
+    /* background-color: rgba(255, 255, 255, 0.9); */
     border: 4px solid black;
     border-radius: 8px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
diff --git a/projects/Travel Vlog/contact.html b/projects/Travel Vlog/contact.html
index 13d176423..b19275d09 100644
--- a/projects/Travel Vlog/contact.html	
+++ b/projects/Travel Vlog/contact.html	
@@ -6,20 +6,23 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Nova+Round&family=Josefin+Sans:wght@300;400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="contact.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <title>Contact Us</title>
-</head>
-<body>
-    <header class="my-3">
-        <nav id="navbar">
-            <ul>
-                <li class="item"><a href="home.html">Home</a></li>
-                <li class="item"><a href="vlog.html">Vlog</a></li>
-                <li class="item"><a href="about.html">About</a></li>
-                <li class="item"><a href="contact.html">Contact Us</a></li>
-            </ul>
-        </nav>
-    </header>
-
+    <style>
+        :root { /* Light theme colors */ --background-color: #ffffff; --text-color: #000000; --navbar-background: #f8f9fa; --navbar-text: #000000; --link-color: #1a73e8; --button-background: #008cba; --button-text: #ffffff; } [data-theme="dark"] { /* Dark theme colors */ --background-color: #121212; --text-color: #ffffff; --navbar-background: #333333; --navbar-text: #ffffff; --link-color: #bb86fc; --button-background: #3d3d3d; --button-text: #ffffff; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: var(--background-color); color: var(--text-color); } header { background-color: var(--navbar-background); } #navbar ul { list-style: none; padding: 0; } #navbar ul li { display: inline; margin-right: 10px; } #navbar ul li a { color: var(--navbar-text); text-decoration: none; } button 
+       { border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle { position: fixed; top: 10px; right: 10px; } </style> </head> <body data-theme="light"> <header> <nav id="navbar"> <ul> <li class="item"><a href="home.html">Home</a></li> <li class="item"><a href="vlog.html">Vlog</a></li> <li class="item"><a href="about.html">About</a></li> <li class="item"><a href="contact.html">Contact Us</a></li> <li class="item"><a href="feedback.html">Feedback</a></li> </ul> </nav> </header> <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> <!-- Add your content here --> <section id="content"> <!-- Content will go here --> </section> <script> const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; } else { body.setAttribute('data-theme', 'light'); toggleButton.innerHTML = '<i class="fas fa-sun"></i>'; } }); </script>
     <section id="body" class="container my-5">
         <h1 class="text-center mb-4">Contact Us</h1>
         <div class="row">
diff --git a/projects/Travel Vlog/feedback.html b/projects/Travel Vlog/feedback.html
new file mode 100644
index 000000000..fb6225316
--- /dev/null
+++ b/projects/Travel Vlog/feedback.html	
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <link href="https://fonts.googleapis.com/css2?family=Nova+Round&family=Josefin+Sans:wght@300;400;700&display=swap" rel="stylesheet">
+     <link rel="stylesheet" href="contact.css">
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+ 
+    <title>Feedback form</title>
+   
+    <style>
+        :root { /* Light theme colors */ --background-color: #ffffff; --text-color: #000000; --navbar-background: #f8f9fa; --navbar-text: #000000; --link-color: #1a73e8; --button-background: #008cba; --button-text: #ffffff; } [data-theme="dark"] { /* Dark theme colors */ --background-color: #121212; --text-color: #ffffff; --navbar-background: #333333; --navbar-text: #ffffff; --link-color: #bb86fc; --button-background: #3d3d3d; --button-text: #ffffff; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: var(--background-color); color: var(--text-color); } header { background-color: var(--navbar-background); } #navbar ul { list-style: none; padding: 0; } #navbar ul li { display: inline; margin-right: 10px; } #navbar ul li a { color: var(--navbar-text); text-decoration: none; } button 
+       { border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle { position: fixed; top: 10px; right: 10px; } </style> </head> <body data-theme="light"> <header> <nav id="navbar"> <ul> <li class="item"><a href="home.html">Home</a></li> <li class="item"><a href="vlog.html">Vlog</a></li> <li class="item"><a href="about.html">About</a></li> <li class="item"><a href="contact.html">Contact Us</a></li> <li class="item"><a href="feedback.html">Feedback</a></li> </ul> </nav> </header> <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> <!-- Add your content here --> <section id="content"> <!-- Content will go here --> </section> <script> const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; } else { body.setAttribute('data-theme', 'light'); toggleButton.innerHTML = '<i class="fas fa-sun"></i>'; } }); </script>
+  
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+            font-family: 'Poppins',sans-serif;
+            box-sizing: border-box;
+            outline: none;
+        }
+        header {
+    size: 2rem;
+    position: absolute;
+    top: 10px;
+}
+  
+    body{
+        display: flex;
+        min-height: 100vh;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(137, 203, 231, 0.8)), url(image/contact.jpg) no-repeat center center/cover  ;
+       
+        
+    }  
+    .container{
+     width:360px ;
+     background: #000;
+     box-shadow: 0 0 8px rgba(250,250,250,0.6); 
+     opacity: 0.6;  
+    } 
+    .container form{
+        width:100% ;
+        text-align: center;
+        padding:25px 20px ;
+    } 
+    form h1{
+        padding:10px 0;
+        color: #fff;
+    }
+    form .id{
+        position:relative;
+    }
+    .id i{
+        position: absolute;
+        font-size: 20px;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+
+    }
+    form input{
+      width: 100%;
+      height: 50px;
+      margin: 4px 0;  
+      border: 1px solid #5c5c5c;
+      border-radius: 3px;
+      padding: 0 15px;
+      padding-right:45px ;
+      font-size: 20px;
+    }
+    form textarea{
+     padding: 5px 15px;
+     border: 1px solid #5c5c5c;
+     border-radius: 3px;
+     background: #fffafa;
+     font-size: 20px;
+     width: 100%;   
+     margin: 4px 0;
+    }
+    form button{
+        margin-top: 5px;
+        border: none;
+        background: rgb(250, 166, 58);
+        color: #222;
+        padding: 10px 0;
+        width: 100%;
+        font-size: 20px;
+        font-weight: 800;
+        cursor: pointer;
+        border-radius:3px;
+
+
+    }
+    form input:focus::placeholder,
+    form textarea:focus::placeholder{
+        padding-left: 4px;
+        border: 1ppx solid rgb(250, 166, 58);
+        color:rgb(250, 166, 58);
+        transition: all 0.3% ease;
+    }
+    form input:focus + i{
+        color:rgb(250, 166, 58);
+        transition: all 0.3% ease; 
+    }
+
+
+    </style>
+      <header class="my-3">
+        <nav id="navbar">
+            <ul>
+                <li class="item"><a href="home.html">Home</a></li>
+                <li class="item"><a href="vlog.html">Vlog</a></li>
+                <li class="item"><a href="about.html">About</a></li>
+                <li class="item"><a href="contact.html">Contact Us</a></li>
+                <li class="item"><a href="feedback.html">Feedback</a></li>
+            </ul>
+        </nav>
+    </header>
+     
+  
+    <div class="container">
+        <form>
+            <h1>Give your Feedback </h1>
+                <div class="id">
+                    <input type="text" placeholder="Full name">
+                    <i class="fas fa-user"></i>
+                </div>
+                <div class="id">
+                    <input type="email" placeholder="Email address">
+                    <i class="fas fa-envelope"></i>
+                </div>
+                <textarea cols="15" rows="5" placeholder="Enter your opinion here..">
+
+                </textarea>
+                <button>Send</button>
+        </form>
+     
+    </div>
+   
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Travel Vlog/home.css b/projects/Travel Vlog/home.css
index 4b8077ad1..f378394dd 100644
--- a/projects/Travel Vlog/home.css	
+++ b/projects/Travel Vlog/home.css	
@@ -55,7 +55,7 @@ header{
 #bg h1{
     text-align: center;
     font-size: 4rem;
-    padding-top: 23px;
+    padding-top:  89px;
     margin-top: -82px;
     /* line-height: 0; */
     margin-left: 490px;
diff --git a/projects/Travel Vlog/home.html b/projects/Travel Vlog/home.html
index 881641aea..e2278d39d 100644
--- a/projects/Travel Vlog/home.html	
+++ b/projects/Travel Vlog/home.html	
@@ -5,25 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href ="home.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <title>travel vlog</title>
     <style>
-        button{
-            margin-top: 10px;
-        }
-    </style>
-</head>
-<body>
-    <header>
-    <nav id="navbar">
-        <ul>
-            <li class="item"><a href="home.html">Home</a></li>
-            <li class="item"><a href="vlog.html">Vlog</a></li>
-            <li class="item"><a href="about.html">About</a></li>
-            <li class="item"><a href="contact.html">Contact Us</a></li>
-        </ul>
-    
-    </nav>
-    </header>
+     :root { /* Light theme colors */ --background-color: #ffffff; --text-color: #000000; --navbar-background: #f8f9fa; --navbar-text: #000000; --link-color: #1a73e8; --button-background: #008cba; --button-text: #ffffff; } [data-theme="dark"] { /* Dark theme colors */ --background-color: #121212; --text-color: #ffffff; --navbar-background: #333333; --navbar-text: #ffffff; --link-color: #bb86fc; --button-background: #3d3d3d; --button-text: #ffffff; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: var(--background-color); color: var(--text-color); } header { background-color: var(--navbar-background); } #navbar ul { list-style: none; padding: 0; } #navbar ul li { display: inline; margin-right: 10px; } #navbar ul li a { color: var(--navbar-text); text-decoration: none; } button 
+    { border: none;
+    display: inline-flex;
+    appearance: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    padding: 8px;
+    align-items: center;
+    background-color: #f43f5e;
+    color: #ffffff;
+    cursor: pointer;
+}
+      #theme-toggle { position: fixed; top: 10px; right: 10px; } </style> </head> <body data-theme="light"> <header> <nav id="navbar"> <ul> <li class="item"><a href="home.html">Home</a></li> <li class="item"><a href="vlog.html">Vlog</a></li> <li class="item"><a href="about.html">About</a></li> <li class="item"><a href="contact.html">Contact Us</a></li> <li class="item"><a href="feedback.html">Feedback</a></li> </ul> </nav> </header> <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> <!-- Add your content here --> <section id="content"> <!-- Content will go here --> </section> <script> const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; } else { body.setAttribute('data-theme', 'light'); toggleButton.innerHTML = '<i class="fas fa-sun"></i>'; } }); </script>
     <section id="bg">
         <p>Explore The World<p>
         <h2>The Indian</h2>
diff --git a/projects/Travel Vlog/style.css b/projects/Travel Vlog/style.css
new file mode 100644
index 000000000..3078ed038
--- /dev/null
+++ b/projects/Travel Vlog/style.css	
@@ -0,0 +1,1255 @@
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: #000327;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #95ff00;
+  border-radius: 10px;
+  border: 3px solid #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+
+html {
+  scrollbar-width: thin;
+  scrollbar-color: #08ecbb #3c0751;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    
+        box-sizing: border-box;
+    
+    
+}
+#progress-container {
+  position: fixed ;
+  top: 0px;
+  left: 0;
+  width: 100%;
+  height: 15px;
+  z-index: 99990;
+  /* background: #f3f3f3; */
+}
+
+#progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 5px;
+  width: 0;
+  background: linear-gradient(90deg, rgb(255, 49, 52) 0%, rgb(255, 153, 153) 50%, rgb(250, 0, 0) 100%);
+  box-shadow: 0 0 4px rgba(255, 0, 21, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+  transition: width 0.09s ease-in-out;
+  border-radius: 10px;
+}
+html {
+    --bg: #f8fafc;
+    --primary: #f43f5e;
+    --btn-color: #fa2b4d;
+    --btn-text: #fff;
+    --head: #334155;
+    --card: #fff;
+    --p: #4b5563;
+
+    --input-bg: #ffffff;  /* Input background color */
+    --input-border: #3b4a5a;  /* Input border color */
+    --input-text: #000000;  /* Input text color */
+    --input-placeholder: #94a3b8; /* Placeholder text color */
+
+}
+
+html [data-theme="dark"] {
+    --bg: #1e293b;
+    --btn-color: #fecdd3;
+    --btn-text: #1e293b;
+    --head: #fff;
+    --card: #192333;
+    --p: #94A3B8;
+
+    --input-bg: #2c3a4b;  /* Input background color */
+    --input-border: #3b4a5a;  /* Input border color */
+    --input-text: #ffffff;  /* Input text color */
+    --input-placeholder: #fffff0; /* Placeholder text color */
+}
+
+a {
+    text-decoration: none;
+}
+
+ul {
+    list-style: none;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg);
+    overflow-x: hidden;
+}
+[data-theme="dark"] body {
+  background-color: rgb(4, 4, 35); /* Blue background for dark mode */
+}
+#projects {
+    margin: 5rem 0;
+}
+
+.projects-heading {
+    margin-top: 20px;
+    text-align: center;
+    color: #000;
+}
+
+.projects-heading h3 span {
+    color: var(--primary);
+}
+
+.projects-heading h3 {
+    font-size: 2.7rem;
+    font-weight: 600;
+    color: var(--head);
+}
+
+.projects-heading p {
+    color: var(--p);
+}
+
+/* .btn-container {
+    margin-top: 2rem;
+    transition: .3s ease-in;
+} */
+/* search bar and button */
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.btn-container {
+  margin: 20px;
+  text-align: center;
+}
+
+.hero-btn-container{
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+#quiz-button{
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.source-code-btn {
+  display: inline-block;
+  padding: 10px 20px;
+  cursor:pointer;
+  transition:all 0.3s ease;
+   background-color: #5f25a7; 
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  border-radius: 5px;
+  font-family: Arial, sans-serif;
+  transition: background-color 0.3s ease;
+}
+
+.source-code-btn:hover {
+   background-color: #fa2b4d; 
+  color: rgb(241, 243, 239);
+}
+
+.search-container {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  margin-top: 20px;
+  align-items: center; 
+  justify-content: center;
+}
+
+#search-input {
+  flex: 1;
+  height: 44px;
+  padding: 0 16px; 
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  font-size: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+  line-height: 44px; 
+}
+
+#search-input:focus {
+  outline: none;
+  border-color: #ff3333;
+  box-shadow: 0 4px 12px rgba(255, 51, 51, 0.15);
+}
+
+#search-input::placeholder {
+  color: #888;
+  line-height: 44px; 
+}
+
+.search-btn {
+  height: 44px; 
+  padding: 0 24px;
+  background-color: #fa2b4d;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-shadow: 0 4px 12px rgba(255, 51, 51, 0.3);
+  box-sizing: border-box;
+}
+
+.search-btn:hover {
+  background-color: #ff1a1a;
+  box-shadow: 0 6px 16px rgba(255, 51, 51, 0.4);
+  transform: translateY(-2px);
+}
+
+.search-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(255, 51, 51, 0.2);
+}
+
+.search-icon {
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid #fff;
+  border-radius: 50%;
+  position: relative;
+  display: inline-block;
+}
+
+.search-icon::after {
+  content: '';
+  position: absolute;
+  width: 1.5px;
+  height: 6px;
+  background: #fff;
+  bottom: -4px;
+  right: -2px;
+  transform: rotate(-45deg);
+}
+/* end */
+.projects-heading .source-code-btn {
+    background-color: var(--btn-color);
+    font-weight: 500;
+    border-radius: 0.5rem;
+    color: var(--btn-text);
+    padding: 0.8rem 1rem;
+}
+
+.projects-container {
+    max-width: 1080px;
+    display: grid;
+    margin: 3rem auto;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-gap: 1.5rem;
+    padding: 1rem;
+}
+
+
+
+
+/*SLIDER SECTION*/
+
+
+
+.slider{
+    height: 100vh;
+    margin-top: 30px;
+    width: 100vw;
+    overflow: hidden;
+    position: relative;
+}
+.slider .list .item{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0 0 0 0;
+}
+.slider .list .item img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: blur(4px);
+}
+.slider .list .item .content{
+    position: absolute;
+    top: 20%;
+    width: 1140px;
+    max-width: 80%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding-right: 30%;
+    box-sizing: border-box;
+    color: #fff;
+    text-shadow: 0 5px 10px #0004;
+    overflow: hidden; /* Ensure content does not overflow */
+    text-overflow: ellipsis; /* Add ellipsis if text is too long */
+    white-space: nowrap; /* Prevent text from wrapping */
+    letter-spacing: 1px;
+}
+
+.slider .list .item .content .title,
+.slider .list .item .content .type{
+    font-size: 5em;
+    font-weight: bold;
+    line-height: 1.3em;
+}
+
+
+.slider .list .item .button{
+    display: grid;
+    grid-template-columns: repeat(2, 130px);
+    grid-template-rows: 40px;
+    gap: 3px;
+    margin-top: 20px;
+}
+.slider .list .item .button button{
+    border: none;
+    background-color: #f6294b;
+    font-family: Poppins;
+    font-weight: 500;
+    cursor: pointer;
+    transition: 0.4s;
+    letter-spacing: 1px;
+}
+
+
+.slider .list .item .button button:hover{
+    letter-spacing: 2px;
+    background-color: #f6294b;
+    border-radius: 7px 7px 7px;
+}
+.slider .list .item .button button:nth-child(2){
+    background-color: transparent;
+    border: 1px solid #fff;
+    color: #eee;
+}
+
+
+
+
+
+/* Thumbnail Section  */
+.thumbnail{
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    width: max-content;
+    z-index: 100;
+    display: flex;
+    gap: 20px;
+}
+
+.thumbnail .item{
+    width: 150px;
+    height: 220px;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.thumbnail .item img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 20px;
+    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
+    
+}
+@keyframes float {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-8px);
+    }
+}
+.thumbnail .item {
+    animation: float 3s ease-in-out infinite;
+}
+
+
+.thumbnail .item img:hover{
+    box-shadow:5px 5px 5px 5px rgb(12, 12, 12) ;
+}
+
+/* nextPrevArrows Section  */
+.nextPrevArrows{
+    position: absolute;
+    transform: translateY(-200px);
+    left: 150px;
+    z-index: 100;
+    width: 300px;
+    max-width: 30%;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+}
+.nextPrevArrows button{
+    width: 40px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: #14ff72cb;
+    border: none;
+    color: #fff;
+    font-family: monospace;
+    font-weight: bold;
+    transition: .5s;
+    cursor: pointer;
+}
+.nextPrevArrows button:hover{
+    background-color: #fff;
+    color: #000;
+}
+
+/* Animation Part */
+.slider .list .item:nth-child(1){
+    z-index: 1;
+}
+
+
+/* animation text in first item */
+.slider .list .item:nth-child(1) .content .title,
+.slider .list .item:nth-child(1) .content .type,
+.slider .list .item:nth-child(1) .content .description,
+.slider .list .item:nth-child(1) .content .buttons
+{
+  transform: translateY(50px);
+  color: transparent;
+  -webkit-text-stroke: 1px black;
+  background: url(img/back.png);
+  --webkit-background-clip: text;
+  background-position: 0 0;
+  filter: blur(20px);
+  opacity: 0;
+  animation: showContent .5s 1s linear 1 forwards,back 20s linear infinite;
+}
+@keyframes showContent{
+  to{
+      transform: translateY(0px);
+      filter: blur(0px);
+      opacity: 1;
+  }
+}
+@keyframes back{
+100%{
+  background-position: 2000px 0 ;
+}
+}
+
+.slider .list .item:nth-child(1) .content .title{
+    animation-delay: 0.4s !important;
+}
+.slider .list .item:nth-child(1) .content .type{
+    animation-delay: 0.6s !important;
+}
+.slider .list .item:nth-child(1) .content .description{
+    animation-delay: 0.8s !important;
+}
+.slider .list .item:nth-child(1) .content .buttons{
+    animation-delay: 1s !important;
+}
+
+
+
+
+/* Animation for next button click */
+.slider.next .list .item:nth-child(1) img{
+    width: 150px;
+    height: 220px;
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    border-radius: 30px;
+    animation: showImage .5s linear 1 forwards;
+}
+
+@keyframes showImage{
+    to{
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+    }
+}
+
+.slider.next .thumbnail .item:nth-last-child(1){
+    overflow: hidden;
+    animation: showThumbnail .5s linear 1 forwards;
+}
+.slider.prev .list .item img{
+    z-index: 100;
+}
+
+
+@keyframes showThumbnail{
+    from{
+        width: 0;
+        opacity: 0;
+    }
+}
+
+
+.slider.next .thumbnail{
+    animation: effectNext .5s linear 1 forwards;
+}
+
+@keyframes effectNext{
+    from{
+        transform: translateX(150px);
+    }
+}
+
+
+
+/* Animation for prev button click */
+.slider.prev .list .item:nth-child(2){
+    z-index: 2;
+}
+
+.slider.prev .list .item:nth-child(2) img{
+    animation: outFrame 0.5s linear 1 forwards;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+@keyframes outFrame{
+    to{
+        width: 150px;
+        height: 220px;
+        bottom: 50px;
+        left: 50%;
+        border-radius: 20px;
+    }
+}
+
+.slider.prev .thumbnail .item:nth-child(1){
+    overflow: hidden;
+    opacity: 0;
+    animation: showThumbnail .5s linear 1 forwards;
+}
+.slider.next .nextPrevArrows button,
+.slider.prev .nextPrevArrows button{
+    pointer-events: none;
+}
+
+
+.slider.prev .list .item:nth-child(2) .content .title,
+.slider.prev .list .item:nth-child(2) .content .type,
+.slider.prev .list .item:nth-child(2) .content .description,
+.slider.prev .list .item:nth-child(2) .content .buttons
+{
+    animation: contentOut 1.5s linear 1 forwards!important;
+}
+
+@keyframes contentOut{
+    to{
+        transform: translateY(-150px);
+        filter: blur(20px);
+        opacity: 0;
+    }
+}
+@media screen and (max-width: 678px) {
+    .slider .list .item .content{
+        padding-right: 0;
+    }
+    .slider .list .item .content .title{
+        font-size: 50px;
+    }
+}
+/*slider section*/
+
+
+
+
+
+
+/* Hover Effects for Project */
+.projects-container a:hover {
+    background-color: #ea6279;
+    transform: translateY(-6px);
+    transition: transform 0.3s ease, background-color 0.3s ease;
+  }
+
+.card {
+  width: 333px;
+    background: var(--card);
+    border-radius: 8px;
+    color: var(--head);
+    transition: all 0.2s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.card-cover {
+    background: rgba(19, 90, 230, 0.2);
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card-cover img {
+    max-width: 80%;
+    max-height: 85%;
+    object-fit: contain;
+}
+
+.card-content {
+    padding: 1rem;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-heading {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+    color: #000;
+}
+/* Dark mode styles */
+[data-theme="dark"].card-heading {
+  color: #fff; /* white color for dark mode */
+}
+
+.card-description {
+    font-size: 0.9rem;
+    color: var(--p);
+    flex-grow: 1;
+}
+[data-theme="dark"] .card-description {
+  color: #1e2c3c;
+}
+.counter-cover-color {
+    background: rgba(255, 206, 0, 0.2);
+}
+
+.counter-cover-colour {
+    background-color: rgba(249, 89, 95, 0.2);
+}
+
+.icon {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+}
+
+#toggle-mode-btn {
+    border: none;
+    display: inline-flex;
+    appearance: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    padding: 8px;
+    align-items: center;
+    background-color: #f43f5e;
+    color: #ffffff;
+    cursor: pointer;
+}
+
+#toggle-mode-btn svg {
+    fill: #fff;
+}
+
+#footer {
+    padding-top: 5.5em; 
+  }
+  
+  #footer .feature-post .flex-item {
+    margin-bottom: 10px;
+  }
+  
+  #footer .tag a {
+    border-radius: 99px;
+    padding: 10px 20px;
+    font-size: 15px;
+  }
+  
+  #post {
+    padding: 0 2em;
+    margin-bottom: 4em;
+  }
+  
+  .post-footer .post-author {
+    position: relative;
+    margin-top: 4em;
+    background-color: var(--background-color);
+  }
+  
+  .post-footer .post-author::after {
+    background-color: var(--background-color);
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4em;
+    z-index: 0;
+  }
+  
+  .post-footer .post-author .author-avatar {
+    margin: 0 auto;
+    margin-bottom: 1em;
+    position: inherit;
+    z-index: 1;
+  }
+  
+  .post-footer .post-comments .reply {
+    padding-left: 7em;
+  }
+  
+  .form-control {
+    width: 100%;
+    border: 2px solid var(--border);
+    padding: 1em;
+    font-size: 18px;
+    margin-right: 10px;
+  }
+  #sidebar .categories a {
+    padding: 1em 3em;
+    font-size: 18px;
+    margin-bottom: 1em;
+    background-color: var(--background-color);
+    border-radius: 99px;
+  }
+  
+  #sidebar .categories a:hover {
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+  .d-flex {
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+  
+  .d-flex-gap {
+    margin: 10px 15px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  
+  .d-flex-gap a {
+    font-weight: 600;
+    color: var(--text-color);
+  }
+  
+  .d-flex-gap a i {
+    font-size: 24px;
+    padding-right: 15px;
+  }
+  .nav-links1 {
+    display: flex;
+    gap: 2.1rem;
+    margin: 0 0.5rem;
+    position: relative; /* Parent positioning */
+  }
+  
+  .nav-links1 a {
+    color: #1C160C;
+    text-decoration: none;
+    font-size: 1rem;
+    font-weight: 500;
+    padding-bottom: 5px;
+    position: relative; /* For underline effect */
+  }
+  
+  .nav-links1 a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+    background-color: #4A4A4A;
+    transform: scaleX(0);
+    transition: transform 0.2s ease;
+  }
+  
+  .nav-links1 a:hover::after {
+    transform: scaleX(1);
+    color: #06cfaa;
+  }
+  .nav-links {
+    flex-direction: column;
+    width: 100%;
+}
+.collapse.nav-link {
+    display: block;
+    text-align: center;
+  }
+  
+  .nav-link:hover{
+   /* Change background color on hover */
+          color: #fa7373;
+          scale: 1.1; /* Change text color on hover */
+        /* Optional: Change border color on hover */
+          transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+  }
+/* MwdWise Footer Styling for authentication */
+.mwd-footer {
+    background-color: #333;
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 30px;
+  }
+  
+  .mwd-footer-content p {
+    margin: 5px 0;
+    font-size: 0.9rem;
+    color: white;
+  }
+  * > * {
+    box-sizing: border-box;
+  }
+  /* Responsive for smaller screens */
+  @media (max-width: 768px) {
+    .mwd-footer-content p {
+      font-size: 0.8rem;
+    }
+  }
+
+  .form-container .social-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background-color: white;
+    border: 1px solid #ccc;
+    padding: 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    color: #060606;
+  }
+  .btn-primary {
+    border-radius: 4px;
+    background-color: var(--text-color);
+    color: var(--background-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  
+  .btn-primary:hover {
+    background-color: var(--background-color);
+    color: var(--light);
+    padding: 2px;
+  }
+  .form-container .social-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background-color: white;
+    border: 1px solid #ccc;
+    padding: 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    color: #060606;
+  }
+  
+  .form-container .social-btn img {
+    width: 25px;
+    margin-right: 10px;
+  }
+  .form-container .social-btn img {
+    width: 20px;
+    margin-right: 10px;
+  }
+  .social-sharing {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .social-icons a {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 2.1rem;
+    height: 2.1rem;
+    background-color: transparent;
+    font-size: 1.2rem;
+    margin: 0.1rem 2.0rem 0.1rem 0;
+    transition: 0.3s ease;
+    color: #ffffff;
+    text-decoration: none;
+}
+.fa-brands, .fab {
+    font-family: "Font Awesome 6 Brands";
+    font-weight: 400;
+}
+@media (max-width: 1100px) {
+    .social-icons a i {
+        font-size: 22px;
+        margin: 5px;
+    }
+}
+  .btn-primary {
+    border-radius: 4px;
+    background-color: var(--text-color);
+    color: var(--background-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  
+  .btn-primary:hover {
+    background-color: var(--background-color);
+    color: var(--light);
+    padding: 2px;
+  }
+
+  /* for facebook */
+.flex-wrap .fa-facebook-f {
+    transition: color 0.3s ease, transform 0.3s ease;
+  }
+  .flex-wrap .fa-facebook-f:hover{
+    color:#4267B2;
+    transform:scale(1.1);
+  }
+  
+  /* for twitter */
+  .flex-wrap .fa-x-twitter {
+    transition: color 0.3s ease, transform 0.3s ease;
+  }
+  .flex-wrap .fa-x-twitter:hover{
+    color:black;
+    transform:scale(1.1);
+  }
+  /* for instagram */
+  .flex-wrap .fa-instagram {
+    transition: color 0.3s ease, transform 0.3s ease;
+  }
+  .flex-wrap .fa-instagram:hover{
+    color:#c32aa3;
+    transform:scale(1.1);
+  }
+  
+  /* for dribble */
+  .flex-wrap .fa-dribbble {
+    transition: color 0.3s ease, transform 0.3s ease;
+  }
+  .flex-wrap .fa-dribbble:hover{
+    color:#ea4c89;
+    transform:scale(1.1);
+  }
+  .bg-light {
+    background-color: var(--background-color);
+  }
+  
+  .form-container .divider::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background-color: #ccc;
+    top: 50%;
+    left: 0;
+  }
+  
+.sliderr::before,
+.sliderr::after,
+.sliderr .slides::before,
+.sliderr .slides::after,
+.sliderr .slide::before,
+.sliderr .slide::after {
+  content: none;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    background-color: white;
+    transition: 0.4s;
+    top: 3px;
+    left: 3px;
+  }
+  input:checked + .slider:before {
+    transform: translateX(30px); 
+  }
+  /* Feedback form css */
+
+    #feedback-section {
+    background-color: #f9f9f9; /* Light gray background */
+    border-radius: 8px; /* Rounded corners */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    padding: 20px; /* Padding around the content */
+    max-width: 400px; /* Maximum width */
+    margin: 20px auto; /* Centering the section */
+    text-align: center; /* Center text */
+}
+
+#feedback-section h1 {
+    font-family: 'Arial', sans-serif; /* Font family */
+    color: #333; /* Dark gray color */
+    font-size: 24px; /* Font size */
+    margin-bottom: 15px; /* Space below heading */
+}
+
+#feedback-section span {
+    color: #007BFF; /* Blue color for emphasis */
+    font-weight: bold; /* Bold text */
+}
+
+#feedback-section textarea {
+    width: 100%; /* Full width */
+    height: 100px; /* Height of the textarea */
+    border: 1px solid #ccc; /* Border color */
+    border-radius: 4px; /* Rounded corners */
+    padding: 10px; /* Inner padding */
+    resize: none; /* Disable resizing */
+    margin-bottom: 15px; /* Space below textarea */
+}
+
+#feedback-section button {
+    background-color: #007BFF; /* Blue button */
+    color: white; /* White text */
+    border: none; /* No border */
+    border-radius: 4px; /* Rounded corners */
+    padding: 10px 15px; /* Padding for button */
+    cursor: pointer; /* Pointer on hover */
+    transition: background-color 0.3s; /* Smooth transition */
+}
+
+#feedback-section button:hover {
+    background-color: #0056b3; /* Darker blue on hover */
+}
+
+#feedback-section a {
+    color: white; /* White text for link */
+    text-decoration: none; /* No underline */
+}
+
+/* ====================== Scroll to top ========================  */
+#scrollToTopBtn i {
+    font-size: 24px;
+}
+
+#scrollToTopBtn {
+    display: none;
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: var(--btn-color);
+    color: var(--btn-text);
+    padding: 12px 16px;
+    border-radius: 50%;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.5s, transform 0.3s ease-in-out;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#scrollToTopBtn:hover {
+    background-color: var(--primary);
+}
+
+#scrollToTopBtn.show {
+    display: block;
+    opacity: 1;
+    transform: translateY(-10px);
+}
+
+@keyframes float {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-8px);
+    }
+}
+
+#scrollToTopBtn {
+    animation: float 3s infinite ease-in-out;
+}
+
+.btn-container a {
+    display: inline-block;
+    transition: all 0.3s ease; 
+}
+
+#quiz-button:hover, .btn-container a:hover {
+    box-shadow: rgba(233, 45, 45, 0.1) 0px 1px 0px, rgba(237, 71, 71, 0.1) 0px 8px 24px, rgba(235, 65, 65, 0.1) 0px 16px 48px;
+    transform: scale(1.05); 
+}
+#suggestions {
+  display: none;
+  width: 100%; 
+  max-width: 50%; 
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  color: white !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: #000327ad;
+  position: absolute;
+  z-index: 1000;
+  top: auto; /* Slightly below the search bar (adjust this value if needed) */
+  left: 25%; 
+  padding: 0;
+}
+
+.suggestion-item {
+  padding: 12px 20px;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.suggestion-item:hover {
+  background-color: #efd45b75;
+  color: #000;
+  transform: scale(1.1);
+  transition: transform 0.3s ease; 
+}
+
+#search-input {
+  width: 100%;
+  max-width: 50%;
+  min-width: 40%;
+  padding: 12px 20px;
+  margin: 20px 0;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  position: relative; /* Ensures suggestions are positioned correctly under the search bar */
+}
+
+#search-input:focus {
+  border-color: #1251e1;
+  outline: none;
+  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+    background-color: var(--input-bg);
+    color: var(--input-text);
+    border: 1px solid var(--input-border);
+}
+input::placeholder {
+    color: var(--input-placeholder);
+}
+input:focus {
+    border-color: var(--btn-color);
+}
+
+footer{
+  background-color: #141d2b;
+  height: 20vh;
+  width: 100vw;
+}
+
+.gridbox{
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  list-style-type: none;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin: 0px 0px 0px 0px;
+}
+.gridbox li{
+  justify-self: center;
+  padding: 3%;
+  align-self: center;
+  text-align: center;
+  height: 50px;
+}
+.gridbox li a{
+  color: #06cfaa;
+  font-size: 1rem;
+}
+.container{
+  text-align: center;
+  color: rgb(215, 209, 196);
+}
+.container a{
+  color: rgb(213, 108, 108);
+}
+
+
+.profile-icon {
+
+  border-radius: 50%;
+  position: relative;
+  margin-left: 20px; 
+  Margin-top: 100px;
+
+}
+
+.dropdown-menu {
+
+  display: none;
+  position: absolute;
+  top: 35px; /* Adjust based on the height of your navbar */
+  right: 0;
+  background-color: white;
+  color: black;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  z-index: 1;
+
+}
+
+.dropdown-menu a {
+
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+
+}
+
+.dropdown-menu a:hover {
+
+  background-color: #f1f1f1;
+
+}
+
diff --git a/projects/Travel Vlog/vlog.css b/projects/Travel Vlog/vlog.css
index 807a2f3d8..0693b5c4e 100644
--- a/projects/Travel Vlog/vlog.css	
+++ b/projects/Travel Vlog/vlog.css	
@@ -61,6 +61,12 @@ header {
     margin-bottom: 1rem;
     color: #444; /* Lighter heading color */
 }
+[data-theme="dark"] #page1 h1 {
+    font-size: 2.5vw;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    color: #a16d6d;
+}
 
 video {
     width: 60%;
diff --git a/projects/Travel Vlog/vlog.html b/projects/Travel Vlog/vlog.html
index 20bff78e5..3e70da587 100644
--- a/projects/Travel Vlog/vlog.html	
+++ b/projects/Travel Vlog/vlog.html	
@@ -5,19 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css2?family=Anton&family=Josefin+Sans:wght@100;300;500;700&family=Oxanium:wght@300;500;700&display=swap" rel="stylesheet">
     <link href="vlog.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <title>The Indian Traveller</title>
-</head>
-<body>
-    <header>
-        <nav id="navbar">
-            <ul>
-                <li class="item"><a href="home.html">Home</a></li>
-                <li class="item"><a href="vlog.html">Vlog</a></li>
-                <li class="item"><a href="about.html">About</a></li>
-                <li class="item"><a href="contact.html">Contact Us</a></li>
-            </ul>
-        </nav>
-    </header>
+    <style>
+        :root { /* Light theme colors */ --background-color: #ffffff; --text-color: #000000; --navbar-background: #f8f9fa; --navbar-text: #000000; --link-color: #1a73e8; --button-background: #008cba; --button-text: #ffffff; } [data-theme="dark"] { /* Dark theme colors */ --background-color: #121212; --text-color: #ffffff; --navbar-background: #333333; --navbar-text: #ffffff; --link-color: #bb86fc; --button-background: #3d3d3d; --button-text: #ffffff; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: var(--background-color); color: var(--text-color); } header { background-color: var(--navbar-background); } #navbar ul { list-style: none; padding: 0; } #navbar ul li { display: inline; margin-right: 10px; } #navbar ul li a { color: var(--navbar-text); text-decoration: none; } button 
+       { border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle { position: fixed; top: 10px; right: 10px; } </style> </head> <body data-theme="light"> <header> <nav id="navbar"> <ul> <li class="item"><a href="home.html">Home</a></li> <li class="item"><a href="vlog.html">Vlog</a></li> <li class="item"><a href="about.html">About</a></li> <li class="item"><a href="contact.html">Contact Us</a></li> <li class="item"><a href="feedback.html">Feedback</a></li> </ul> </nav> </header> <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> <!-- Add your content here --> <section id="content"> <!-- Content will go here --> </section> <script> const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; } else { body.setAttribute('data-theme', 'light'); toggleButton.innerHTML = '<i class="fas fa-sun"></i>'; } }); </script>
 
     <div id="main">
         <div id="page1">
diff --git a/projects/hoverboard/index.html b/projects/hoverboard/index.html
new file mode 100644
index 000000000..efe9a9e48
--- /dev/null
+++ b/projects/hoverboard/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Hoverboard</title>
+  </head>
+  <body>
+    <div class="container" id="container"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/projects/hoverboard/script.js b/projects/hoverboard/script.js
new file mode 100644
index 000000000..d888c8bf9
--- /dev/null
+++ b/projects/hoverboard/script.js
@@ -0,0 +1,29 @@
+const container = document.getElementById('container')
+const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
+const SQUARES = 500
+
+for(let i = 0; i < SQUARES; i++) {
+    const square = document.createElement('div')
+    square.classList.add('square')
+
+    square.addEventListener('mouseover', () => setColor(square))
+
+    square.addEventListener('mouseout', () => removeColor(square))
+
+    container.appendChild(square)
+}
+
+function setColor(element) {
+   const color = getRandomColor()
+   element.style.background = color
+   element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
+}
+
+function removeColor(element) {
+   element.style.background = '#1d1d1d'
+   element.style.boxShadow = '0 0 2px #000'
+}
+
+function getRandomColor() {
+    return colors[Math.floor(Math.random() * colors.length)]
+}
\ No newline at end of file
diff --git a/projects/hoverboard/style.css b/projects/hoverboard/style.css
new file mode 100644
index 000000000..1283d2e0f
--- /dev/null
+++ b/projects/hoverboard/style.css
@@ -0,0 +1,34 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #111;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 400px;
+}
+
+.square {
+  background-color: #1d1d1d;
+  box-shadow: 0 0 2px #000;
+  height: 16px;
+  width: 16px;
+  margin: 2px;
+  transition: 2s ease;
+}
+
+.square:hover {
+  transition-duration: 0s;
+}
diff --git a/projects/portfolio/assets/calculatorImg.png b/projects/portfolio/assets/calculatorImg.png
new file mode 100644
index 000000000..2774e324e
Binary files /dev/null and b/projects/portfolio/assets/calculatorImg.png differ
diff --git a/projects/portfolio/assets/cpp.png b/projects/portfolio/assets/cpp.png
new file mode 100644
index 000000000..532467afd
Binary files /dev/null and b/projects/portfolio/assets/cpp.png differ
diff --git a/projects/portfolio/assets/illustration.png b/projects/portfolio/assets/illustration.png
new file mode 100644
index 000000000..84affe473
Binary files /dev/null and b/projects/portfolio/assets/illustration.png differ
diff --git a/projects/portfolio/assets/landingPageImg.png b/projects/portfolio/assets/landingPageImg.png
new file mode 100644
index 000000000..e27865fdb
Binary files /dev/null and b/projects/portfolio/assets/landingPageImg.png differ
diff --git a/projects/portfolio/assets/logo.png b/projects/portfolio/assets/logo.png
new file mode 100644
index 000000000..1fcb3f51f
Binary files /dev/null and b/projects/portfolio/assets/logo.png differ
diff --git a/projects/portfolio/assets/microsoftCloneImg.png b/projects/portfolio/assets/microsoftCloneImg.png
new file mode 100644
index 000000000..74a1003ba
Binary files /dev/null and b/projects/portfolio/assets/microsoftCloneImg.png differ
diff --git a/projects/portfolio/assets/mysql.png b/projects/portfolio/assets/mysql.png
new file mode 100644
index 000000000..a501af1f3
Binary files /dev/null and b/projects/portfolio/assets/mysql.png differ
diff --git a/projects/portfolio/assets/netflixImg.png b/projects/portfolio/assets/netflixImg.png
new file mode 100644
index 000000000..9175ce6ef
Binary files /dev/null and b/projects/portfolio/assets/netflixImg.png differ
diff --git a/projects/portfolio/assets/newsAppImg.png b/projects/portfolio/assets/newsAppImg.png
new file mode 100644
index 000000000..857b66b36
Binary files /dev/null and b/projects/portfolio/assets/newsAppImg.png differ
diff --git a/projects/portfolio/assets/tailwind.png b/projects/portfolio/assets/tailwind.png
new file mode 100644
index 000000000..5fc716a35
Binary files /dev/null and b/projects/portfolio/assets/tailwind.png differ
diff --git a/projects/portfolio/index.html b/projects/portfolio/index.html
new file mode 100644
index 000000000..0aeadc6dd
--- /dev/null
+++ b/projects/portfolio/index.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.min.css" integrity="sha512-/VYneElp5u4puMaIp/4ibGxlTd2MV3kuUIroR3NSQjS2h9XKQNebRQiyyoQKeiGE9mRdjSCIZf9pb7AVJ8DhCg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="icon" href="/assets/logo.png">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:wght@400;500;600;700;800&family=Karla:ital,wght@0,700;1,400&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/92848cb6ba.js" crossorigin="anonymous"></script>
+    <title>Sourabh's Portfolio</title>
+</head>
+<body>
+    <!-- NAVBAR -->
+    <nav>
+        <div class="navLogo">
+            <a href="#">
+                <img src="/assets/logo.png" alt="">
+            </a>
+        </div>
+        <ul class="navLinks">
+            <li class="link"><a href="#home">Home</a></li>
+            <li class="link"><a href="#skills">Skills</a></li>
+            <li class="link"><a href="#projects">Projects</a></li>
+            <li class="link"><a href="#contact">Contact Me</a></li>
+        </ul>
+        <a href="#skills"><button class="btn">Know more</button></a>
+    </nav>
+    
+    <!-- ABOUT ME -->
+    <header class="container" id="home">
+        <div class="content">
+            <span class="blur"></span>
+            <span class="blur"></span>
+            <h4>CREATE YOUR SITE LIKE A PRO</h4>
+            <h1>Hi, I'm <span>Sourabh</span>,<br> Web Developer</h1>
+            <p>I'm a 3rd year BTech Student. As an aspiring Frontend Developer, I have expertise in HTML, CSS3, JavaScript and experience with Tailwind CSS. I am a hardworking, detail-oriented quick learner who is eager to gain hands-on project experience and contribute to team's success. I am passionate about creating visually appealing and user-friendly web applications and possess strong problem-solving abilities.</p>
+            <button class="btn">Get Started</button>
+        </div>
+        <div class="image">
+            <img src="./assets/illustration.png">
+        </div>
+    </header>
+
+    <!-- SKILLS -->
+    <section class="container" id="skills">
+        <h2 class="header">MY SKILLS</h2>
+        <div class="skills">
+            <span class="blur"></span>
+            <span class="blur"></span>
+            <div class="card">
+                <span><i class="fa-brands fa-html5 fa-xl" style="color: #e34c26;"></i></span>
+                <h4>HTML5</h4>
+            </div>
+            <div class="card">
+                <span><i class="fa-brands fa-css3 fa-xl" style="color: #1c4de4;"></i></span>
+                <h4>CSS3</h4>
+            </div>
+            <div class="card">
+                <span><i class="fa-brands fa-square-js fa-xl" style="color: #f0db4f;"></i></span>
+                <h4>JAVASCRIPT</h4>
+            </div>
+            <div class="card">
+                <span><i class="fa-brands fa-react fa-xl" style="color: #61dafb;"></i></span>
+                <h4>REACT</h4>
+            </div>
+            <div class="card">
+                <span><i class="fa-brands fa-java fa-xl" style="color: #5382a1;"></i></span>
+                <h4>JAVA</h4>
+            </div>
+            <div class="card">
+                <span><i class="fa-brands fa-bootstrap fa-xl" style="color: #59287a;"></i></span>
+                <h4>BOOTSTRAP</h4>
+            </div>
+            <div class="card">
+                <span><i class="fa-brands fa-python fa-xl" style="color: #4b8bbe;"></i></span>
+                <h4>PYTHON</h4>
+            </div>
+            <div class="card">
+                <span><img src="./assets/tailwind.png"  height="30px"></span>
+                <h4>TAILWIND CSS</h4>
+            </div>
+            <div class="card">
+                <span><img src="./assets/cpp.png" height="50px"></span>
+                <h4>C++</h4>
+            </div>
+            <div class="card">
+                <span><img src="./assets/mysql.png" height="40px"></span>
+                <h4>MYSQL</h4>
+            </div>
+        </div>
+    </section>
+
+    <!-- PROJECTS -->
+    <section class="container" id="projects">
+        <h2 class="header">MY PROJECTS</h2>
+        <span class="blur"></span>
+        <span class="blur"></span>
+        <div class="projects">
+            <div class="card">
+                <img src="./assets/netflixImg.png" alt="">
+                <div class="content">
+                    <h4>Netflix Clone</h4>
+                    <p> Created a fully functional Netflix clone application, showcasing strong skills in web development and front-end design. Implemented user-friendly features and responsive design.</p>
+                </div>
+                <span>
+                    <a href="https://github.com/Sourabh782/Netflix-Clone" target="_blank"><button class="btn github">GitHub</button></a>
+                    <a href="https://sourabh782.github.io/Netflix-Clone/" target="_blank"><button class="btn live">Live</button></a>
+                </span>
+            </div>
+            <div class="card">
+                <img src="./assets/microsoftCloneImg.png" alt="">
+                <div class="content">
+                    <h4>Microsoft Clone</h4>
+                    <p> Created a functional clone of the Microsoft frontend, resulting in a replica that accurately reflected the design, layout, graphics and behaviour of the original.</p>
+                </div>
+                <span>
+                    <a href="https://github.com/Sourabh782/Microsoft-Clone" target="_blank"><button class="btn github">GitHub</button></a>
+                    <a href="https://sourabh782.github.io/Microsoft-Clone/" target="_blank"><button class="btn live">Live</button></a>
+                </span>
+            </div>
+            <div class="card">
+                <img src="./assets/landingPageImg.png" alt="">
+                <div class="content">
+                    <h4>JobFOUND - Landing Page</h4>
+                    <p>Created a frontend project for diffrent startups and companies to hire new talents. This website also helps freshers to apply for diffrent job roles easily.</p>
+                </div>
+                <span>
+                    <a href="https://github.com/Sourabh782/Recruiter-Website" target="_blank"><button class="btn github">GitHub</button></a>
+                    <a href="https://jobsfound.netlify.app/" target="_blank"><button class="btn live">Live</button></a>
+                </span>
+            </div>
+            <div class="card">
+                <img src="./assets/newsAppImg.png" alt="">
+                <div class="content">
+                    <h4>News Monkey - An News app</h4>
+                    <p>Created a News App. Added features like Added many features like infinite scroll, page loader, Added diffrent news sections based on diffrent types of news.</p>
+                </div>
+                <span>
+                    <a href="https://github.com/Sourabh782/News-App" target="_blank"><button class="btn github">GitHub</button></a>
+                </span>
+            </div>
+        </div>
+    </section>
+
+    <!-- CONTACE ME -->
+    <section class="container contactCont" id="contact">
+        <span class="blur"></span>
+        <span class="blur"></span>
+        <h2 class="header">CONTACT ME</h2>
+        <div class="contact">
+            <div class="left">
+                <div class="card">
+                    <span><i class="fa-regular fa-envelope fa-lg" style="color: #ffffff;"></i></span>
+                    <h4>Email</h4>
+                    <h4>sourabhsinghrawat782@gmail.com</h4>
+                    <a href="mailto:sourabhsinghrawat782@gmail.com" target="_blank"><h5>send a message</h5></a>
+                </div>
+                <div class="card">
+                    <span><i class="fa-brands fa-linkedin fa-xl" style="color: #0072b1;"></i></span>
+                    <h4>LinkedIn</h4>
+                    <a href="https://www.linkedin.com/in/sourabh-singh-rawat-81439a250/" target="_blank"><h5>send a message</h5></a>
+                </div>
+            </div>
+            <div class="right">
+                <input type="text" class="input" placeholder="Enter Your Name">
+                <input type="text" class="input" placeholder="Enter Your MailId">
+                <textarea name="" id="" cols="30" rows="10" placeholder="Enter Your Message"></textarea>
+                <button class="btn">Send message</button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="container">
+        <span class="blur"></span>
+        <span class="blur"></span>
+        <div class="footerContainer">
+            <div class="column">
+                <div class="logo">
+                    <img src="/assets/logo.png">
+                </div>
+            </div>
+            <div class="column socialColumn">
+                <div class="socials">
+                    <a href="https://github.com/Sourabh782" target="_blank"><i class="fa-brands fa-github fa-2xl" style="color: #2f476f;"></i></a>
+                    <a href="https://www.linkedin.com/in/sourabh-singh-rawat-81439a250/" target="_blank"><i class="fa-brands fa-linkedin fa-2xl" style="color: #0072b1;"></i></a>
+                    <a href="#"><i class="fa-brands fa-instagram fa-2xl" style="color: #d63076;"></i></a>
+                </div>
+                <p class="mailid"><i class="fa-solid fa-envelope fa-xl mailIcon" style="color: #ffffff;"></i>sourabhsinghrawat782@gmail.com</p>
+                <div>
+                    <p class="copyPara">&copy; Sourabh Singh Rawat &bullet; All Rights Reserved</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/portfolio/styles.css b/projects/portfolio/styles.css
new file mode 100644
index 000000000..9a9b02e9c
--- /dev/null
+++ b/projects/portfolio/styles.css
@@ -0,0 +1,479 @@
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    outline: none;
+    border: none;
+}
+body{
+    font-family: 'Comic Neue', cursive;
+    font-family: 'Inter', sans-serif;
+    font-family: 'Karla', sans-serif;
+    font-family: 'Poppins', sans-serif;
+    background-color: #181818;
+}
+img{
+    width: 100%;
+    display: flex;
+}
+
+a{
+    text-decoration: none;
+}
+
+/* NAVBAR STYLE */
+nav{
+    max-width: 1200px;
+    margin: auto;
+    padding: 1rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+}
+
+.navLogo{
+    max-width: 100px;
+}
+
+.navLinks{
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 3rem;
+}
+
+.link a{
+    position: relative;
+    padding-bottom: 0.75rem;
+    color: #fff;
+}
+
+.link a::after{
+    content: "";
+    position: absolute;
+    height: 2px;
+    width: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #1d4ed8;
+    transition: all 0.3s ease;
+}
+
+.link a:hover::after{
+    width: 70%;
+}
+
+.btn{
+    padding: 1rem 2rem;
+    font: 1rem;
+    color: #fff;
+    background-color: #1d4ed8;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn:hover{
+    background-color: #1e40af;
+}
+
+
+/* header section  */
+
+.container{
+    max-width: 1200px;
+    margin: auto;
+    padding: 5rem 2rem;
+}
+
+.blur{
+    position: absolute;
+    box-shadow: 0 0 1000px 50px #1d4ed8;
+    z-index: -1;
+}
+
+header{
+    position: relative;
+    padding: 2rem;
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    align-items: center;
+    gap: 2rem;
+}
+
+header .content h4{
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #ccc;
+}
+
+header .content h1{
+    color: #fff;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    font-size: 3rem;
+    line-height: 4rem;
+}
+
+header .content h1 span{
+    -webkit-text-fill-color: transparent;
+    -webkit-text-stroke: 1px #fff;
+}
+
+header .content p{
+    margin-bottom: 2rem;
+    color: #ccc;
+}
+
+header .image{
+    position: relative;
+}
+
+header .image::before{
+    content: "o";
+    position: absolute;
+    top: 0;
+    left: 51%;
+    transform: translateX(-50%);
+    font-size: 40rem;
+    font-weight: 400;
+    line-height: 20rem;
+    color: #1d4ed8;
+    opacity: 0.2;
+    z-index: -1;
+}
+
+header .image img{
+    max-width: 600px;
+    margin: auto;
+}
+
+/* SKILLS SECTION */
+section .header{
+    margin-bottom: 1rem;
+    color: #fff;
+    text-align: center;
+    font-size: 2.25rem;
+    font-weight: 600;;
+}
+.skills .blur{
+    right: 50px;
+}
+.skills{
+    margin-top: 4rem;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+}
+.hideBtn{
+    display: none;
+}
+.skills .card{
+    background-color: #27272a;
+    padding: 1rem;
+    border: 2px solid transparent;
+    border-radius: 15px;
+    transform: all 0.3s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.skills .card:hover{
+    background-color: #323232;
+    border-color: #1d4ed8;
+}
+
+.skills .card span{
+    display: inline-block;
+    padding: 2px 9px;
+    margin-right: 1rem;
+    font-size: 1.75rem;
+}
+
+.skills .card h4{
+    margin-bottom: 0.5rem;
+    color: #fff;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+/* PROJECTS */
+.projects{
+    margin-top: 4rem;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+}
+
+.projects .card{
+    background-color: #27272a;
+    padding: 1rem;
+    border: 2px solid transparent;
+    border-radius: 15px;
+    transform: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center; */
+    /* align-items: center; */
+}
+
+.projects .card img{
+    border-radius: 5px;
+}
+
+.projects .card .content {
+    margin: 1.5rem 0;
+}
+
+.projects .card .content p{
+    font-size: 0.8rem;
+    color: #cccbcb;
+}
+
+.card span .btn{
+    margin-top: 0.8rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+.card span .live{
+    color: #181818;
+}
+.card span .live:hover{
+    color: white;
+}
+.card span .github{
+    background-color: transparent;
+    color: #1d4ed8;
+    border: 1px solid #1d4ed8;
+}
+.card span .github:hover{
+    color:#fff;
+    background-color: #3551ae;
+}
+
+.projects .card:hover{
+    background-color: #323232;
+    border-color: #1d4ed8;
+}
+
+.projects .card h4{
+    margin-bottom: 0.5rem;
+    color: #fff;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+/* CONTACT ME */
+.contactCont .blur{
+    right: 200px;
+    /* top: 50px; */
+}
+.contact{
+    margin-top: 4rem;
+    display: grid;
+    grid-template-columns: 30% 70%;
+    align-items: center;
+}
+
+.left{
+    display: grid;
+    grid-template-rows: repeat(2,1fr);
+    gap: 1rem;
+}
+.contact .left .card{
+    background-color: #27272a;
+    padding: 1rem;
+    border: 2px solid transparent;
+    border-radius: 15px;
+    transform: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.contact .left .card:hover{
+    background-color: #323232;
+    border-color: #1d4ed8;
+}
+
+.contact .left .card span{
+    display: inline-block;
+    margin: 1rem;
+}
+
+.contact .left .card h4{
+    margin: 0.5rem, 0;
+    color: #fff;
+    font-size: 1rem;
+    font-weight: 600;
+}
+.contact .left .card a h5{
+    margin-top: 1rem;
+    color: #1d4ed8;
+    font-size: 0.85rem;
+    font-weight: 400;
+}
+
+.right{
+    display: flex;
+    flex-direction: column;
+    /* align-items: center; */
+    width: 100%;
+    padding: 4rem 0 4rem 4rem;
+    
+}
+.right input{
+    border: 2px solid #1d4ed8;
+    border-radius: 8px;
+    width: 100%;
+    height: 4rem;
+    font-size: 1.25rem;
+    padding-left: 2rem;
+    background: transparent;
+    color: #1e40af;
+    margin-bottom: 1rem;
+}
+.right textarea{
+    border: 2px solid #1d4ed8;
+    border-radius: 8px;
+    width: 100%;
+    height: 10rem;
+    font-size: 1.25rem;
+    padding: 1rem 2rem;
+    background: transparent;
+    color: #1e40af;
+    resize: none;
+    margin-bottom: 1rem;
+}
+.right button{
+    width: 10rem;
+}
+
+/* FOOTER  */
+footer .footerContainer{
+    border-top: 2px solid #1d4ed8;
+}
+.footerContainer{
+    display: flex;
+    padding: 1rem 0 0 0;
+}
+.column .logo{
+    display: flex;
+    justify-content: center;
+}
+.column .logo img{
+    width: 60%;
+}
+.socials{
+    display: flex;
+    width: 80%;
+    justify-content: space-evenly;
+}
+.column{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 50%;
+}
+.copyPara, .mailid{
+    color: white;
+}
+.mailIcon{
+    margin: 0 5px;
+}
+.mailid{
+    cursor: pointer;
+}
+
+html{
+    scroll-behavior: smooth;
+}
+
+/* RESPONSIVE DESIGNS */
+@media (width<900px){
+    .navLinks{
+        display: none;
+    }
+    header{
+        grid-template-columns: repeat(1,1fr);
+    }
+    header .image{
+        grid-area: 1/1/2/2;
+    }
+    .skills{
+        grid-template-columns: repeat(2,1fr);
+    }
+    .projects{
+        grid-template-columns: repeat(2,1fr);
+    }
+    .footerContainer{
+        flex-direction: column;
+
+    }
+    .column .logo img{
+        width: 100%;
+    }
+    .column{
+        width: 100%;
+    }
+    .socialColumn{
+        height: 300px;
+    }
+    .contact{
+        grid-template-columns: repeat(1,1fr);
+    }
+    .right{
+        padding: 4rem;
+        align-items: center;
+    }
+}
+
+@media (width<500px){
+    .navLinks{
+        display: none;
+    }
+    header{
+        grid-template-columns: repeat(1,1fr);
+    }
+    header .image{
+        grid-area: 1/1/2/2;
+    }
+    .skills{
+        grid-template-columns: repeat(2,1fr);
+    }
+    .skills .card span{
+        margin: 0;
+    }
+    .projects{
+        grid-template-columns: repeat(1,1fr);
+    }
+    .footerContainer{
+        flex-direction: column;
+    }
+    .column .logo img{
+        width: 100%;
+    }
+    .column{
+        width: 100%;
+    }
+    .socialColumn{
+        height: 300px;
+    }
+    header .image::before{
+        display: none;
+    }
+    .right{
+        padding: 4rem 0;
+        align-items: center;
+    }
+    .skills .card h4{
+        font-size: 0.8rem;
+        display: none;
+    }
+}
diff --git a/recent-activity.html b/recent-activity.html
new file mode 100644
index 000000000..e8586bb6f
--- /dev/null
+++ b/recent-activity.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Recent Activity</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
+
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
+    <link rel="stylesheet" href="activity.css" />
+    <script src="activity.js" defer></script>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="./assets/favicon_package_v0.16/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./assets/favicon_package_v0.16/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="./assets/favicon_package_v0.16/favicon-16x16.png"
+    />
+    <link
+      rel="manifest"
+      href="./assets/favicon_package_v0.16/site.webmanifest"
+    />
+    <link
+      rel="mask-icon"
+      href="./assets/favicon_package_v0.16/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+  </head>
+  <body>
+
+    <header>
+      <nav>
+        <a href="index.html">
+          <i class="fas fa-home"></i>
+        </a>
+        <!-- add a back button -->
+        <a href="profile.html">
+          <i class="fas fa-arrow-left"></i>
+        </a>
+      </nav>
+    </header>
+    <main>
+      <h1>Recent Activity</h1>
+      <section class="activity-feed">
+        <ul>
+          <!-- Profile Updates -->
+          <li>
+            <i class="fa fa-user"></i>
+            <p>Profile Update: <strong>New information added</strong> - 1 hour ago</p>
+          </li>
+      
+          <!-- Friend Requests -->
+          <li>
+            <i class="fa fa-user-plus"></i>
+            <p>Friend Request: <strong>Ritu</strong> sent you a friend request - 2 hours ago</p>
+          </li>
+      
+          <!-- Game Addition -->
+          <li>
+            <i class="fa fa-gamepad"></i>
+            <p>New Game Added: <strong>Check out “Mystery Island”</strong> - 4 hours ago</p>
+          </li>
+      
+          <!-- Messages -->
+          <li>
+            <i class="fa fa-envelope"></i>
+            <p>Message from <strong>Divya</strong>: "Are you joining the game tonight?" - 5 hours ago</p>
+          </li>
+          <li>
+            <i class="fa fa-envelope"></i>
+            <p>Message from <strong>Support Team</strong>: "Your issue has been resolved" - 1 day ago</p>
+          </li>
+        </ul>
+      </section>
+      
+
+    </main>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/sketchpad.html b/sketchpad.html
new file mode 100644
index 000000000..6340303f6
--- /dev/null
+++ b/sketchpad.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Digital Sketchpad</title>
+    <style>
+        /* Basic reset */
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            background-color: #7fd8f8;
+        }
+
+        .container {
+            text-align: center;
+        }
+
+        #canvas {
+            border: 2px solid #333;
+            background-color: #fff;
+            cursor: crosshair;
+        }
+
+        .controls {
+            margin: 20px 0;
+        }
+
+        .controls input[type="color"],
+        .controls input[type="range"],
+        .controls button {
+            margin-right: 10px;
+            padding: 5px;
+            font-size: 1rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Digital Sketchpad</h1>
+        <div class="controls">
+            <label for="colorPicker">Color:</label>
+            <input type="color" id="colorPicker" value="#000000">
+            
+            <label for="brushSize">Brush Size:</label>
+            <input type="range" id="brushSize" min="1" max="30" value="5">
+            
+            <button id="clearCanvas">Clear</button>
+        </div>
+        <canvas id="canvas" width="600" height="400"></canvas>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        const colorPicker = document.getElementById('colorPicker');
+        const brushSize = document.getElementById('brushSize');
+        const clearCanvas = document.getElementById('clearCanvas');
+        
+        let painting = false;
+        let brushColor = colorPicker.value;
+        let brushWidth = brushSize.value;
+
+        // Event listeners for canvas drawing
+        canvas.addEventListener('mousedown', startPainting);
+        canvas.addEventListener('mouseup', stopPainting);
+        canvas.addEventListener('mousemove', draw);
+        
+        // Event listeners for color and brush size change
+        colorPicker.addEventListener('input', (e) => brushColor = e.target.value);
+        brushSize.addEventListener('input', (e) => brushWidth = e.target.value);
+
+        // Clear button event
+        clearCanvas.addEventListener('click', clearCanvasArea);
+
+        function startPainting(e) {
+            painting = true;
+            draw(e); // Draw the first dot immediately
+        }
+
+        function stopPainting() {
+            painting = false;
+            ctx.beginPath(); // Start a new path after stopping
+        }
+
+        function draw(e) {
+            if (!painting) return;
+
+            ctx.lineWidth = brushWidth;
+            ctx.lineCap = 'round';
+            ctx.strokeStyle = brushColor;
+
+            ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+        }
+
+        function clearCanvasArea() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+    </script>
+</body>
+</html>
diff --git a/story-builder.html b/story-builder.html
new file mode 100644
index 000000000..24bdc014a
--- /dev/null
+++ b/story-builder.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Story Builder</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Arial, sans-serif;
+        }
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: pink;
+        }
+        .story-builder-container {
+            width: 90%;
+            max-width: 700px;
+            background: #ffffff;
+            padding: 20px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+        }
+        h2 {
+            color: #ff6f61;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .input-group {
+            margin-bottom: 15px;
+        }
+        .input-group label {
+            font-weight: bold;
+            display: block;
+            margin-bottom: 5px;
+        }
+        .input-group input, .input-group textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        .story-display {
+            margin-top: 20px;
+            padding: 15px;
+            background: #fffcf7;
+            border: 1px solid #ffd6c1;
+            border-radius: 5px;
+            color: #333;
+            line-height: 1.6;
+        }
+        .story-display p {
+            margin-bottom: 10px;
+        }
+        .generate-btn {
+            display: block;
+            width: 100%;
+            padding: 12px;
+            background: #ff6f61;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: background 0.3s ease;
+        }
+        .generate-btn:hover {
+            background: #ff5037;
+        }
+    </style>
+</head>
+<body>
+    <div class="story-builder-container">
+        <h2>Interactive Story Builder</h2>
+        <div class="input-group">
+            <label for="character">Main Character</label>
+            <input type="text" id="character" placeholder="Enter character's name">
+        </div>
+        <div class="input-group">
+            <label for="setting">Setting</label>
+            <input type="text" id="setting" placeholder="Enter setting (e.g., enchanted forest)">
+        </div>
+        <div class="input-group">
+            <label for="plot">Plot</label>
+            <textarea id="plot" rows="4" placeholder="Describe the plot..."></textarea>
+        </div>
+        <button class="generate-btn" onclick="generateStory()">Generate Story</button>
+        
+        <div class="story-display" id="storyDisplay">
+            <!-- Generated story will appear here -->
+        </div>
+    </div>
+
+    <script>
+        function generateStory() {
+            const character = document.getElementById('character').value;
+            const setting = document.getElementById('setting').value;
+            const plot = document.getElementById('plot').value;
+
+            if (character && setting && plot) {
+                const story = `
+                    <p>Once upon a time, in a place called <strong>${setting}</strong>, there was a character named <strong>${character}</strong>.</p>
+                    <p>${character} had an incredible journey filled with adventures and challenges.</p>
+                    <p>Their story begins: ${plot}</p>
+                `;
+                document.getElementById('storyDisplay').innerHTML = story;
+            } else {
+                document.getElementById('storyDisplay').innerHTML = "<p>Please fill in all fields to generate your story!</p>";
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000..13d9db6dc
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,438 @@
+body {
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+}
+
+#root {
+    flex: 1;
+}
+.follow-us {
+    display: flex;
+    justify-content: center;
+    gap: 5px;
+    
+   
+   
+}
+
+.follow-us a {
+    display: inline-flex;
+    align-items: center;
+    padding: 10px 10px;
+    color: #fff;
+    border: 2px solid transparent;
+    border-radius: 5px;
+    text-decoration: none;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+}
+
+.follow-us a img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+    filter: grayscale(100%);
+    transition: filter 0.3s;
+}
+
+.follow-us a:hover img {
+    filter: grayscale(0%);
+    animation-name: spin;
+  animation-duration: 2500ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg) scale(1.3);
+  }
+  to {
+    transform: rotate(360deg) scale(1.3);
+  }
+}
+
+
+/* Specific styles for each social media platform */
+.follow-us a.twitter {
+    background-color: #1DA1F2;
+    border-color: #1DA1F2;
+}
+
+.follow-us a.twitter:hover {
+    color: #1DA1F2;
+    background-color: #fff;
+}
+
+.follow-us a.facebook {
+    background-color: #1877F2;
+    border-color: #1877F2;
+}
+
+.follow-us a.facebook:hover {
+    color: #1877F2;
+    background-color: #fff;
+}
+
+.follow-us a.instagram {
+    background-color: #E4405F;
+    border-color: #E4405F;
+}
+
+.follow-us a.instagram:hover {
+    color: #E4405F;
+    background-color: #fff;
+}
+
+.follow-us a.linkedin {
+    background-color: #0077B5;
+    border-color: #0077B5;
+}
+
+.follow-us a.linkedin:hover {
+    color: #0077B5;
+    background-color: #fff;
+}
+p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  unicode-bidi: isolate;
+  color: black;
+}
+
+@media (max-width: 1200px) {
+    .footer-container {
+        padding: 20px;
+    }
+
+    .mwd-footer-content {
+        text-align: center;
+    }
+
+    .tags.social {
+        justify-content: center;
+    }
+
+    .btn {
+        margin-top: 10px;
+        border-radius: 5px;
+    }
+
+    .btn-primary:hover {
+        background-color: #0056b3;
+    }
+
+    .btn-secondary:hover {
+        background-color: #6c757d;
+    }
+}
+
+.circle {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    pointer-events: none;
+    background: radial-gradient(circle, rgb(244, 63, 94), rgb(253, 91, 118));
+    transition: transform 0.1s, left 0.1s, top 0.1s;
+    background-color: #f43f5e;
+}
+
+.circle-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+
+}
+
+/* Chatbot Container */
+
+.chatbot-container {
+    position: fixed;
+    bottom: 34px;
+    /* Adjust as needed */
+    right: 100px;
+    /* Adjust as needed */
+    z-index: 1000;
+    /* Ensure it appears above other elements */
+}
+
+/* Chatbot Button */
+.chatbot-button {
+    background-color: #007bff;
+    /* Change to your preferred color */
+    border: none;
+    border-radius: 50%;
+    padding: 5px;
+    /* Smaller padding */
+    cursor: pointer;
+    position: relative;
+    width: 50px;
+    /* Adjusted size */
+    height: 50px;
+    /* Adjusted size */
+}
+
+/* Button Image */
+.chatbot-button img {
+    width: 30px;
+    /* Adjusted image size */
+    height: 30px;
+    /* Adjusted image size */
+}
+
+/* Tooltip Text */
+.tooltip-text {
+    display: none;
+    /* Hide by default */
+    position: absolute;
+    bottom: 100%;
+    /* Position above the button */
+    right: 50%;
+    transform: translateX(50%);
+    background-color: #333;
+    /* Background color for tooltip */
+    color: #fff;
+    /* Tooltip text color */
+    padding: 5px;
+    border-radius: 5px;
+    white-space: nowrap;
+    /* Prevent text from wrapping */
+}
+
+/* Show Tooltip on Hover */
+.chatbot-button:hover .tooltip-text {
+    display: block;
+    /* Show on hover */
+}
+
+/* Chat Window Styles */
+.chat-window {
+    position: fixed;
+    bottom: 90px;
+    /* Adjust based on the button size */
+    right: 20px;
+    /* Same as the button */
+    width: 400px;
+    /* Smaller width */
+    height: 500px;
+    /* Fixed height for compactness */
+    border: 1px solid #ccc;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: none;
+    /* Hidden by default */
+    z-index: 1000;
+    /* Ensure it appears above other elements */
+}
+
+/* Iframe for Chatbot HTML */
+#chat-iframe {
+    width: 100%;
+    /* Full width of the chat window */
+    height: calc(100% - 40px);
+    /* Height minus header */
+    border: none;
+    /* Remove border */
+}
+
+@keyframes appear {
+    from {
+        opacity: 0;
+        scale: 0.4;
+    }
+
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+.card {
+    animation: appear 5s linear;
+    animation-timeline: view();
+    animation-range: entry 0% cover 40%;
+}
+body {
+    font-family: 'Poppins', sans-serif;
+    min-height: 2000px; /* Add some height to enable scrolling */
+    margin: 0;
+    padding: 0;
+}
+
+/* Scroll to Top Button Styles */
+.top-btn {
+    display: none;
+    width: 50px;
+    height: 50px;
+    position: fixed;
+    bottom: 23px;
+    right: 44px;
+    background-color: #ab45e7;
+    color: #ffffff;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 18px;
+    align-items: center;
+    justify-content: center;
+}
+
+.top-btn:hover {
+    background-color: #c91e57;
+}
+.source-code-btn {
+color: white;
+background-color:#f6294b;
+padding: 10px 20px;
+border: 2px solid #d4d4aa;
+border-radius: 8px;
+font-weight: 600;
+font-size: 16px;
+cursor: pointer;
+transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+}
+
+.source-code-btn:hover {
+background-color: #e0e0c1;
+color: #222;
+border-color: #c1c17d;
+transform: translateY(-2px);
+}
+
+:root {
+/* Light theme colors */
+--bg-color-light: #ffffff;
+--text-color-light: #333;
+--accent-color-light: #ffa500; /* light orange */
+/* Dark theme colors */
+--bg-color-dark: #1c1c1c;
+--text-color-dark: #f5f5f5;
+--accent-color-dark: #ffcc80; /* lighter orange */
+/* Default theme */
+--bg-color: var(--bg-color-light);
+--text-color: var(--text-color-light);
+--accent-color: var(--accent-color-light);
+}
+/* Theme styles based on data-theme attribute */
+[data-theme="dark"] {
+--bg-color: var(--bg-color-dark);
+--text-color: var(--text-color-dark);
+--accent-color: var(--accent-color-dark);
+}
+/* Navbar container */
+.navbar {
+width: 100%;
+padding: 15px 0;
+background-color: var(--bg-color);
+display: flex;
+align-items: center;
+justify-content: center;
+border-bottom: 1px solid var(--accent-color);
+}
+/* Navbar list */
+.navbar ul {
+list-style: none;
+display: flex;
+gap: 20px;
+margin: 0;
+padding: 0;
+}
+/* Navbar items */
+.navbar ul li {
+position: relative;
+}
+/* Navbar links */
+.navbar ul li a {
+font-family: 'Poppins', sans-serif;
+color: var(--text-color);
+text-decoration: none;
+padding: 8px 16px;
+font-weight: 600;
+font-size: 21px;
+transition: color 0.3s ease, transform 0.3s ease;
+position: relative;
+}
+
+/* Hover effect with futuristic line animation */
+.navbar ul li a::after {
+content: '';
+position: absolute;
+left: 0;
+right: 0;
+bottom: -5px;
+height: 2px;
+background-color: var(--accent-color);
+transition: width 0.3s ease;
+width: 0%;
+}
+.navbar ul li a:hover {
+color: var(--accent-color);
+transform: scale(1.05);
+}
+.navbar ul li a:hover::after {
+width: 100%;
+}
+
+.share-section {
+    text-align: center;
+}
+#shareBtn {
+    background-color: #f71257;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+
+}
+
+/* Toggle theme button */
+.theme-toggle {
+position: absolute;
+right: 20px;
+background-color: transparent;
+border: none;
+cursor: pointer;
+font-size: 18px;
+color: var(--accent-color);
+transition: transform 0.3s ease;
+}
+.theme-toggle:hover {
+transform: scale(1.1);
+}
+.btn-container {
+text-align: center; /* Center the buttons */
+margin: 20px 0;    /* Add some margin for spacing */
+}
+
+.nextPrevArrows {
+display: flex; /* Use flexbox for next/prev buttons */
+justify-content: center; /* Center the arrows */
+margin-top: 10px; /* Margin for spacing */
+}
+
+.nextPrevArrows button {
+background: #ff4d4d; /* Red background */
+color: white; /* Text color */
+border: none; /* Remove border */
+border-radius: 5px; /* Rounded corners */
+padding: 10px; /* Padding for size */
+margin: 0 5px; /* Spacing between arrows */
+cursor: pointer; /* Pointer cursor on hover */
+font-size: 16px; /* Font size */
+transition: background 0.3s ease; /* Smooth transition */
+}
+
+.nextPrevArrows button:hover {
+background: #ff3333; /* Darker red on hover */
+
+}
\ No newline at end of file
diff --git a/tarot.html b/tarot.html
new file mode 100644
index 000000000..99aed7b3c
--- /dev/null
+++ b/tarot.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Virtual Tarot Card Reading</title>
+    <style>
+        /* Basic reset */
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            background-color: #570261;
+            text-align: center;
+        }
+
+        .container {
+            max-width: 400px;
+            padding: 20px;
+            background-color: #fff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+           
+        }
+
+        h1 {
+            color: #333;
+            margin-bottom: 20px;
+        }
+
+        .tarot-card {
+            font-size: 1.2rem;
+            margin: 20px 0;
+            color: #444;
+        }
+
+        .tarot-card img {
+            width: 100%;
+            max-width: 700px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+
+        .reading-text {
+            margin: 15px 0;
+            color: #666;
+        }
+
+        button {
+            padding: 10px 20px;
+            background-color: #7f53ac;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        button:hover {
+            background-color: #684a9b;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Virtual Tarot Card Reading</h1>
+        <div class="tarot-card" id="tarotCard">
+            <img src="" alt="Tarot Card" id="cardImage" style="display: none;">
+            <p id="cardName"></p>
+            <p class="reading-text" id="cardDescription"></p>
+        </div>
+        <button onclick="drawCard()">Draw a Card</button>
+    </div>
+
+    <script>
+        const tarotDeck = [
+            {
+                name: "The Fool",
+                description: "New beginnings, optimism, and trust in life.",
+                image: "assets/image/The-Fool-tarot.jpg"
+            },
+            {
+                name: "The Magician",
+                description: "Manifestation, resourcefulness, and power.",
+                image: "assets/image/The-Magician-tarot.jpg"
+            },
+            {
+                name: "The High Priestess",
+                description: "Intuition, wisdom, and mystery.",
+                image: "assets/image/High_Priestess-tarot.jpg"
+            },
+            {
+                name: "The Empress",
+                description: "Creativity, abundance, and nurturing.",
+                image: "assets/image/the-Empress-tarot.jpg"
+            },
+            {
+                name: "The Emperor",
+                description: "Authority, structure, and control.",
+                image: "assets/image/the-emperor-tarot.jpg"
+            },
+            // Add more cards as needed
+        ];
+
+        function drawCard() {
+            const randomIndex = Math.floor(Math.random() * tarotDeck.length);
+            const card = tarotDeck[randomIndex];
+            
+            // Update the card display
+            document.getElementById("cardImage").src = card.image;
+            document.getElementById("cardImage").style.display = "block";
+            document.getElementById("cardName").innerText = card.name;
+            document.getElementById("cardDescription").innerText = card.description;
+        }
+    </script>
+</body>
+</html>
diff --git a/terms.html b/terms.html
index e3a081474..35a589a03 100644
--- a/terms.html
+++ b/terms.html
@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Terms Of Use - Master Web Development</title>
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
diff --git a/test.html b/test.html
index 6e6a6558e..0a69b60fa 100644
--- a/test.html
+++ b/test.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reviews, Testimonials & Popular Services</title>
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
     <style>
         body {
             font-family: 'Arial', sans-serif;
diff --git a/testp.css b/testp.css
index 6050ffe5a..9c50feb65 100644
--- a/testp.css
+++ b/testp.css
@@ -1,255 +1,142 @@
+/* Global Styles */
 body {
-
     font-family: 'Arial', sans-serif;
-    background: #040423; 
+    background: #040423; /* Dark background */
+    color: #fff;
     margin: 0;
     padding: 0;
-    /*background-image: url(./assets/images/banner-bg.svg);*/
-
-}
-
-.fa-home {
-
-    position: absolute;
-    right: 190px;
-    top: 40px;
-    font-size: 25px;
-    color: #fa2b4d;
-
-}
-
-.fa-home:hover {
-
-    color:rgb(191 96 143); 
-
+    box-sizing: border-box;
 }
 
+/* Profile Container */
 .profile-container {
-
-    max-width: 1200px;
-    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     padding: 20px;
-    background: #040423; 
-    border-radius: 8px; 
-    box-shadow: 0 4px 10px rgb(0 0 0 / 40%); 
-    /*background-image: url(./assets/images/banner-bg.svg);*/
-
-}
-
-.navbar a:hover {
-
-    color: #0056b3; 
-
+    width: 100%;
+    max-width: 1200px; /* Limit width for laptops and larger screens */
+    margin: auto;
 }
 
-.profile-card {
-
-    text-align: left;
+/* Content Sections */
+.content-section {
+    width: 100%;
     margin: 20px 0;
-    padding: 20px;
-    /*border: 1px solid #ddd;*/ /* Border for the card */
+    padding: 15px;
+    background: #1c1c3c;
     border-radius: 8px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    background: #d0defa;
-
-}
-
-.profile-image {
-
-    border-radius: 50%; 
-    width: 170px;
-    height: 170px;
-    object-fit: cover;
-
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    text-align: left;
 }
 
-.profile-name {
-
-    font-size: 24px;
+/* Profile Details Card */
+.profile-detail-card {
+    background: #344565;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    text-align: left;
     margin: 10px 0;
-
+    transition: transform 0.3s;
 }
 
-.profile-bio {
-
-    font-size: 16px;
-    color: black; 
-
+/* Hover Effect for Cards */
+.profile-detail-card:hover {
+    transform: scale(1.03);
 }
 
-.edit-profile-btn {
-
-    background: #fa2b4d; 
-    color: white;
+/* Buttons */
+button, .button {
+    background-color: #e63946;
+    color: #fff;
     border: none;
     padding: 10px 20px;
-    cursor: pointer;
     border-radius: 5px;
-    transition: background 0.3s, transform 0.3s;
-
-}
-
-.edit-profile-btn:hover {
-
-    background-color: rgb(191 96 143); 
-    transform: scale(1.05); 
-
-}
-
-.edit_profiled{
-
-    background: #fa2b4d; 
-    color: white;
-    border: none;
-    padding: 10px 20px;
     cursor: pointer;
-    border-radius: 5px;
-    transition: background 0.3s, transform 0.3s;
-    position: relative;
-    right: 40%;
-    left: 290px;
-
+    transition: background-color 0.3s, transform 0.2s;
 }
 
-.content-section {
-
-    margin: 20px 0;
-
+button:hover, .button:hover {
+    background-color: #d62839;
+    transform: scale(1.05);
 }
 
-.content-section h2 {
-
-    font-size: 22px;
-    margin-bottom: 10px;
-    color: white;
-
-}
-
-.card {
-
-    background: #f9f9f9; 
-    margin-bottom: 15px;
-    padding: 15px;
+/* Account Details and Notification Cards */
+.account-card, .notification-card {
+    background: #6c757d;
+    color: #fff;
+    padding: 10px;
     border-radius: 8px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    background: #d0defa; 
-
-}
-
-.card h3 {
-
-    font-size: 18px;
-    margin: 5px 0;
-
-}
-
-.card p {
-
-    font-size: 14px;
-    color: black;
-
-}
-
-
-.profile-details {
-
-    display: flex; 
-    flex-wrap: wrap; 
-    gap: 20px; 
-
-}
-
-.profile-detail-card {
-
-    flex: 1; /* Allow cards to grow and fill space */
-    min-width: 200px; 
-    background: #f9f9f9; 
-    padding: 15px;
-    border-radius: 8px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    text-align: center; 
-    background: #d0defa; 
-
-}
-
-.nav-links {
-
-    list-style-type: none; 
-    padding: 0; 
-    margin: 0;
-    text-align: right; 
-
-}
-
-.home-link {
-
-    float: right; 
-
+    margin: 10px 0;
+    text-align: left;
+    align-items: flex-end;
+    transition: transform 0.3s;
 }
 
-.profile-header {
-
-    display: flex; 
-    align-items: center; 
-
+/* Hover Effect for Account/Notification Cards */
+.account-card:hover{
+    transform: translateY(-3px);
 }
-
-.profile-image {
-    margin-right: 20px; 
-    margin-left: 50px;
-    margin-top: 30px;
+.notification-card:hover {
+    transform: translateY(-3px);
 }
 
-.profile-info {
+/* Responsive Adjustments */
 
-    flex: 1; /* Allow this section to take the remaining space */
-    margin-left: 50px;
+/* Laptop and larger screens */
+@media (max-width: 1200px) {
+    .profile-container {
+        max-width: 100%;
+        padding: 15px;
+    }
 
+    .content-section {
+        margin: 15px 0;
+        padding: 10px;
+    }
 }
 
-
-
-/* Media Queries for Responsiveness */
+/* Tablet screens */
 @media (max-width: 768px) {
-
-    .navbar ul {
-
-        flex-direction: column; /* Stack navbar items on smaller screens */
-        align-items: center;
-
-    }
-
     .profile-container {
-
-        padding: 10px; /* Reduce padding on smaller screens */
-
+        padding: 10px;
     }
 
-    .profile-card {
-
-        margin: 10px 0; /* Reduce margin for smaller screens */
-
+    .content-section {
+        margin: 10px 0;
+        padding: 8px;
     }
 
-    .content-section h2 {
-
-        font-size: 20px; /* Smaller headings */
-
+    .profile-detail-card, .account-card, .notification-card {
+        padding: 12px;
+        font-size: 0.9rem;
     }
 
-    .edit-profile-btn, .view-order-btn {
-
-        width: 100%; /* Full width buttons */
-        padding: 12px; /* Increase padding for easier tapping */
-
+    button, .button {
+        padding: 8px 16px;
+        font-size: 0.9rem;
     }
+}
 
-    .footer {
+/* Mobile screens */
+@media (max-width: 480px) {
+    .profile-container {
+        padding: 5px;
+    }
 
-        font-size: 14px; /* Smaller footer text */
+    .content-section {
+        padding: 8px;
+        margin: 10px 0;
+    }
 
+    .profile-detail-card, .account-card, .notification-card {
+        padding: 8px;
+        font-size: 0.85rem;
     }
 
+    button, .button {
+        padding: 6px 12px;
+        font-size: 0.85rem;
+    }
 }
-
-
diff --git a/testp.js b/testp.js
index 019283dcb..a2d9719eb 100644
--- a/testp.js
+++ b/testp.js
@@ -1,31 +1,34 @@
 // Get current timestamp
 const getCurrentTimestamp = () => {
-    return new Date().getTime();
-  };
+  return new Date().getTime();
+};
 
-  // Store last active timestamp in LocalStorage
-  const storeLastActive = () => {
-    const lastActive = getCurrentTimestamp();
-    localStorage.setItem('lastActive', lastActive);
-  };
+// Store last active timestamp in LocalStorage
+const storeLastActive = () => {
+  const lastActive = getCurrentTimestamp();
+  localStorage.setItem('lastActive', lastActive);
+};
 
-  // Get last active timestamp from LocalStorage
-  const getLastActive = () => {
-    return localStorage.getItem('lastActive');
-  };
+// Get last active timestamp from LocalStorage
+const getLastActive = () => {
+  return localStorage.getItem('lastActive');
+};
 
-  // Update last active timestamp on page load and interaction
-  document.addEventListener('DOMContentLoaded', storeLastActive);
-  document.addEventListener('click', storeLastActive);
-  document.addEventListener('scroll', storeLastActive);
-  document.addEventListener('keydown', storeLastActive);
+// Update last active timestamp on page load and interaction
+document.addEventListener('DOMContentLoaded', storeLastActive);
+document.addEventListener('click', storeLastActive);
+document.addEventListener('scroll', storeLastActive);
+document.addEventListener('keydown', storeLastActive);
 
-  // Example usage:
-  const displayLastActive = () => {
-    const lastActive = getLastActive();
-    const formattedTime = new Date(parseInt(lastActive)).toLocaleString();
-    document.getElementById('last-active').innerHTML = Last active: ${formattedTime};
-  };
+// Example usage:
+const displayLastActive = () => {
+  const lastActive = getLastActive();
+  if (lastActive) {
+      const formattedTime = new Date(parseInt(lastActive)).toLocaleString();
+      document.getElementById('last-active').innerHTML = `Last active: ${formattedTime}`;
 
-  displayLastActive();
+  }
+};
 
+// Display the last active time on page load
+document.addEventListener('DOMContentLoaded', displayLastActive);
\ No newline at end of file
diff --git a/text-to-speech/images/dropdown.png b/text-to-speech/images/dropdown.png
new file mode 100644
index 000000000..0100b2a99
Binary files /dev/null and b/text-to-speech/images/dropdown.png differ
diff --git a/text-to-speech/images/play.png b/text-to-speech/images/play.png
new file mode 100644
index 000000000..bab51d21e
Binary files /dev/null and b/text-to-speech/images/play.png differ
diff --git a/text-to-speech/index.html b/text-to-speech/index.html
new file mode 100644
index 000000000..3f3cee200
--- /dev/null
+++ b/text-to-speech/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<link rel="stylesheet" href="style.css">
+    <title>Text To Speech</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Text to Speech <span>Converter</span></h1>
+        <textarea placeholder="Write anything here..."></textarea>
+        <div class="row">
+            <select></select>
+            <button><img src="images/play.png">Listen</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/text-to-speech/readme.md b/text-to-speech/readme.md
new file mode 100644
index 000000000..547bdb5fe
--- /dev/null
+++ b/text-to-speech/readme.md
@@ -0,0 +1,30 @@
+
+
+# Text-to-Speech Converter
+
+A simple web-based Text-to-Speech (TTS) converter that allows users to input text and listen to it as speech. This project utilizes the Web Speech API, making it accessible on modern browsers without requiring any additional installations or plugins.
+
+## Features
+
+- **Text to Speech**: Converts the text entered by the user into speech.
+- **Voice Selection**: Choose from a list of available voices on the user's device.
+- **Real-Time Playback**: Instantly hear the text spoken aloud upon pressing the "Listen" button.
+
+## Demo
+
+https://niraj1608.github.io/text-to-speech/
+
+## How It Works
+
+This project leverages the browser's built-in [Speech Synthesis API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis) to convert text to speech:
+
+1. **Voice Loading**: On load, available voices are fetched from the Speech Synthesis API and populated into a dropdown menu.
+2. **Voice Selection**: Users can choose different voices from the dropdown menu, which updates the selected voice for speech synthesis.
+3. **Speech Generation**: When the "Listen" button is clicked, the text entered in the textarea is spoken aloud using the selected voice.
+
+## Project Structure
+
+- **HTML**: Provides the basic structure of the TTS interface.
+- **CSS**: Styles the page to enhance the user experience.
+- **JavaScript**: Implements the TTS functionality using the Web Speech API.
+
diff --git a/text-to-speech/script.js b/text-to-speech/script.js
new file mode 100644
index 000000000..ef73997c1
--- /dev/null
+++ b/text-to-speech/script.js
@@ -0,0 +1,21 @@
+let speech = new SpeechSynthesisUtterance();
+
+let voices = [];
+
+let voiceSelect = document.querySelector("select");
+
+window.speechSynthesis.onvoiceschanged = () => {
+    voices = window.speechSynthesis.getVoices();
+    speech.voice = voices[0];
+
+    voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)))
+}
+
+voiceSelect.addEventListener("change", () => {
+    speech.voice = voices[voiceSelect.value]
+})
+
+document.querySelector("button").addEventListener("click", () =>{
+    speech.text = document.querySelector("textarea").value;
+    window.speechSynthesis.speak(speech);   
+});
\ No newline at end of file
diff --git a/text-to-speech/style.css b/text-to-speech/style.css
new file mode 100644
index 000000000..ccf18bfda
--- /dev/null
+++ b/text-to-speech/style.css
@@ -0,0 +1,80 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+.container {
+    width: 100%;
+    min-height: 100vh;
+    background: linear-gradient(45deg, #010758, #490d61);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: white;
+}
+.container h1 {
+font-size: 60px;
+/* margin-top: -50px; */
+margin-bottom: 50px;
+font-weight: 500;
+
+}
+.container h1 span {
+    color: #ff2963;
+
+}
+textarea {
+    width: 600px;
+    height: 250px;
+    background: #403d84;
+    color: white;
+    font-size: 20px;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    resize: none;
+    margin-bottom: 20px;
+    padding: 10px 30px 0 30px;
+    
+}
+.row {
+    display: flex;
+    gap: 20px;
+}
+select {
+    height: 50px;
+    width: 345px;
+    border: none;
+    border-radius: 10px;
+    outline: none;
+    appearance: none;
+    color: white;
+    background: #403d84;
+    background-image: url(images/dropdown.png);
+    background-repeat: no-repeat;
+    background-size: 15px;
+    background-position-x: calc(100% - 20px);
+    background-position-y: 50%;
+    padding-left: 10px;
+}
+.container .row button {
+    width: 150px;
+    height: 50px;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    background-color: #ff2963;
+    color: white;
+    font-size: 20px;
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    cursor: pointer;
+}
+.container .row button img {
+    height: 30px;
+    width: 28px;
+}
\ No newline at end of file
diff --git a/visi.css b/visi.css
index 24e1be1f2..160552fed 100644
--- a/visi.css
+++ b/visi.css
@@ -1,102 +1,89 @@
+/* Container to keep counter at the bottom of the page */
+.visitor-counter-container {
+  width: 100%;
+  padding: 20px 0; /* Space around the counter */
+  display: flex;
+  justify-content: center;
+  background-color: #f4f4f9; /* Match counter background */
+}
+
+/* Visitor Counter Styling */
 .visitor-counter {
-
-    position: fixed;
-    top: 680px;
-    left: 1620px;
-    background-color: rgb(244 244 249); /* Slightly opaque background for better visibility */
-    height: 60px;
+  background-color: rgb(244, 244, 249);
+  height: 60px;
+  width: 250px;
+  color: #333;
+  font-weight: 700;
+  font-size: 20px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.visitor-counter:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.visitor-counter div:first-child {
+  margin-bottom: -5px;
+  font-size: 22px;
+  letter-spacing: 1px;
+}
+
+.website-counter {
+  font-size: 24px;
+  font-family: "Arial", sans-serif;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 768px) {
+  .visitor-counter {
+    height: 100px;
     width: 100px;
-    color: #333; /* Darker text for better contrast */
-    font-weight: 700;
-    font-size: 18px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border-radius: 12px; /* Softer corners */
-    backdrop-filter: blur(10px); /* Increased blur for a modern touch */
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), /* Slightly more pronounced shadow */
-                0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    transition: all 0.3s ease; /* Smooth transition for hover effect */
-
-  }
-
-  .visitor-counter:hover {
-
-    transform: scale(1.05); /* Slightly enlarge on hover */
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
-
-  }
-
-  .visitor-counter div:first-child {
-
-    margin-bottom: -5px;
-    font-size: 14px; /* Adjusted for clarity */
-    letter-spacing: 1px; /* Increased spacing for readability */
-
+    font-size: 16px;
   }
-
   .website-counter {
-
-    font-size: 24px;
-    font-family: 'Arial', sans-serif; /* Consistent font family */
-
-  }
-
-  @media screen and (max-width: 768px) {
-
-    .visitor-counter {
-
-        height: 100px;
-        width: 100px;
-        font-size: 16px;
-
-    }
-
-    .website-counter {
-
-        font-size: 20px;
-
-    }
-
+    font-size: 20px;
   }
+}
 
-  @media screen and (max-width: 480px) {
-
-    .visitor-counter {
-
-        height: 80px;
-        width: 80px;
-        font-size: 14px;
-
-    }
-
-    .website-counter {
-
-        font-size: 18px;
-
-    }
-
+@media screen and (max-width: 480px) {
+  .visitor-counter {
+    height: 80px;
+    width: 80px;
+    font-size: 14px;
   }
-
-  .dark-mode .visitor-counter div {
-
-    color: #f0f0f0; /* Lighter text for dark mode */
-
-  }
-
-  .dark-mode .visitor-counter .website-counter {
-
-    color: #f0f0f0; /* Lighter color for consistency */
-
+  .website-counter {
+    font-size: 18px;
   }
-
-  .dark-mode .visitor-counter {
-
-    background-color: rgba(0, 0, 0, 0.7); /* Darker background for dark mode */
-    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1),
-                0 2px 4px rgba(255, 255, 255, 0.05);
-
-  }
\ No newline at end of file
+}
+
+[data-theme="dark"] .visitor-counter div,
+[data-theme="dark"] .visitor-counter .website-counter {
+  color: #f0f0f0;
+}
+
+[data-theme="dark"] .visitor-counter {
+  background-color: rgba(0, 0, 0, 0.7);
+  box-shadow: 0 6px 12px grey, 0 2px 4px grey;
+}
+
+[data-theme="dark"] .visitor-counter-container {
+  background-color: #000327;
+}
+
+[data-theme="dark"] .share-section {
+  background-color: #000327;
+}
+[data-theme="dark"] .gridbox {
+  background-color: #000327;
+}
+[data-theme="dark"] .social-media {
+  background-color: #000327;
+}
diff --git a/visi.js b/visi.js
index b631a013b..6c7d22ff1 100644
--- a/visi.js
+++ b/visi.js
@@ -22,7 +22,7 @@ function getVisitorCount() {
 
     const counterElement = document.querySelector('.website-counter');
     const count = incrementVisitorCount();
-    counterElement.textContent = count;
+    counterElement.innerText = count;
 
   }
 
diff --git a/welcometestimonials.html b/welcometestimonials.html
index 7fe4c8904..3969d04bd 100644
--- a/welcometestimonials.html
+++ b/welcometestimonials.html
@@ -10,6 +10,7 @@
         integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="./faviconicon.png" type="image/x-icon">
     <style>
         body {
             margin: 0;