Update index.html to have animated background

Author: cmlpolymath

index.html

@@ -5,13 +5,17 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Notebooks</title>
-    <!-- You can include a style tag to add CSS directly in your HTML file -->
     <style>
         body {
             font-family: 'cambria', sans-serif;
             line-height: 1.6;
             font-size: 16px;
-        }
+            background-color: #010d42;
+            background-image: url('https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYXF6anRobWxpdzFvazBtbGg5czUzZDZrb2FyNWI0ZHlxaDZiZjJtYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7E8lI6TkLrvvAcPXso/giphy.gif');
+            background-attachment: fixed;
+            background-size: 1200px;
+            background-repeat: 2;
+            background-position: left;        }
         .container {
             max-width: 900px;
             margin: auto;
@@ -20,10 +24,13 @@
         .notebook-cover {
             text-align: center;
             padding: 50px;
-            background-color: #b2e2f8;
+            background-color: #b2e2f8; /* This will be visible while GIF is loading or if the path to the GIF is incorrect */
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
             color: #333;
             border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0,0,0,.3);
+            box-shadow: 0 5px 15px rgba(0,0,0,2);
             margin-bottom: 30px;
         }
         h1 {
@@ -47,20 +54,15 @@ <h1><span style="color:#daa520;">✨ CML Polymath Notebooks ✨</span></h1>
             <p>Welcome to this repository, which contains all the notebooks based on Data Science books I've read.
                  The purpose of this repository is to show my journey through the field and, most importantly, <b>to share the knowledge.</b>
             </p>
-            
             <hr>
-
             <p class="section-title">Each series of notebooks is dedicated to a specific book and contains the following sections:</p>
-
             <ul>
                 <li><strong>Book Information:</strong> <em>Title, Author, Publication Year,</em> and a brief summary.</li>
                 <li><strong>Key Takeaways:</strong> The most important points and ideas from the book.</li>
                 <li><strong>General Notes:</strong> Terms, caveats, and the code written step-by-step</li>
                 <li><strong>Discussion Questions:</strong> Questions to spark conversations and debates about the book's content.</li>
             </ul>
-
             <p>Feel free to explore the notebooks, contribute your own insights, and join the discussion. <i>Happy reading!</i></p>
-        </div>
         <!-- Add notebook entries here -->
     </div>
 </body>