Added bootstrap and changed the overall grid display

	new file:   css/bootstrap-grid.min.css
	new file:   css/bootstrap.min.css
	modified:   css/main.css
	modified:   css/todo.css
	modified:   index.php
	modified:   package-lock.json
	modified:   package.json

css/main.css

@@ -465,6 +465,9 @@ margin-left: 10px;
 .header-content {
     padding: 25px;
     margin-top: -35px;
+    color: #fff;
+    font-weight: 800;
+    font-family: Montserrat, sans-serif;
 }
 
 .header-content h1 {

css/todo.css

@@ -38,8 +38,8 @@ body {
     flex: 1;
     margin-right: 10px;
     padding: 10px;
-    border-radius: 5px;
-    border: 1px solid #ffffff;
+    border-radius: 15px;
+    border: 2.5px solid #ffffff;
     background: #1b1e23;
     color: #ffffff;
     transition: all 0.3s ease-in-out;
@@ -51,11 +51,13 @@ body {
 }
 
 #add-task-button {
-    padding: 10px 20px;
+    padding: 2px 20px;
     background: #3949ab;
     border: none;
     color: #fff;
-    border-radius: 5px;
+    font-size: 15px;
+    font-weight: 700;
+    border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease-in-out;
 }
@@ -81,6 +83,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    color: #fff
 }
 
 #task-list li:hover {
@@ -89,18 +92,21 @@ body {
 }
 
 .delete-task-button {
-    background-color: #f44336;
-    color: #fff;
+    background-color: #ececec;
+    color: #070707;
     border: none;
     padding: 5px 10px;
     border-radius: 5px;
     cursor: pointer;
     transition: all 0.3s ease-in-out;
+    font-weight: 700;
 }
 
 .delete-task-button:hover {
-    background-color: #e53935;
+    background-color: #181818;
     transform: scale(1.1);
+    color: #fff;
+    font-weight: 700;
 }
 
 #task-list li.completed {

index.php

@@ -222,13 +222,15 @@ function totalAccounts($conn) {
     <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
     <title>Rogue-V | Dashboard</title>
 </head>
 
 <!-- Navigation -->
 <section class="page-section bg-dark-lighter" id="navigation">
-    <div class="container relative">
-
+    <div class="container relative">         
         <!-- Navigation grid -->
         <div class="navigation-grid">
             <!-- Navigation -->
@@ -245,7 +247,6 @@ function totalAccounts($conn) {
             </div>
             </a>
             <!-- End Navigation -->
-
             <!-- Navigation -->
             <a href="https://roguev.de" target="_blank">
             <div class="navigation-item animate-init" data-anim-type="fade-in" data-anim-delay="100">
@@ -259,8 +260,7 @@ function totalAccounts($conn) {
                 </div>
             </div>
             </a>
-            <!-- End Navigation -->
-
+            <!-- End Navigation -->             
             <!-- Navigation -->
             <a href="https://roguev.de" target="_blank">
             <div class="navigation-item animate-init" data-anim-type="fade-in" data-anim-delay="300">
@@ -275,21 +275,6 @@ function totalAccounts($conn) {
             </div>
             </a>
             <!-- End Navigation -->
-
-            <!-- Navigation -->
-            <a href="#rvdatenbank">
-            <div class="navigation-item animate-init" data-anim-type="fade-in" data-anim-delay="300">
-                <div class="navigation-item-descr dark">
-                    <div class="navigation-item-name">
-                    <i class="fa-solid fa-database todoicon"></i>Datenbank
-                    </div>
-                    <div class="navigation-item-role glow-text2">
-                        Siehe dir die wichtigsten Einträge in der Datenbank an
-                    </div>
-                </div>
-            </div>
-            </a>
-            <!-- End Navigation -->
             <!-- Navigation -->
             <a href="https://roguev.de" target="_blank">
             <div class="navigation-item animate-init" data-anim-type="fade-in" data-anim-delay="300">
@@ -459,7 +444,7 @@ function totalAccounts($conn) {
     <input type="text" id="task-input" placeholder="Neue Aufgabe hinzufügen...">
     <button id="add-task-button">Hinzufügen</button>
   </div>
-  <ul id="task-list"></ul>
+    <ul id="task-list"></ul>
 </div>
 
 <div class="wirtschafts-header"><i class="fa-solid fa-chart-simple fa-bounce wheadericon"></i>Wirtschaftsübersicht</div>

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",