Почему-то при попытке убрать импорт бутстрапа в footer задний фон пропадает.... Мега странно

online-library/src/App.jsx

@@ -7,7 +7,7 @@ import Lk from "./Lk/Lk";
 import Choice from "./Choice/Choice";
 import BookCardInfo from "./BookCardInfo/BookCardIInfo";
 import AuthPages from "./Registration/AuthPages";
-import "./style.css"
+import "./style.css";
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
 

online-library/src/BookCard/BookCard.css

@@ -0,0 +1,5 @@
+.book-card {
+  background-color: var(--bg-medium);
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}

online-library/src/BookCard/BookCard.jsx

@@ -1,4 +1,5 @@
 import { Link } from "react-router-dom";
+import "./BookCard.css"
 
 function BookCard({book}) {
   console.log("BookCard - " + book)

online-library/src/Choice/CustomList/CustomList.css

@@ -0,0 +1,5 @@
+.category-card {
+  background-color: var(--bg-medium);
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}

online-library/src/Choice/CustomList/CustomList.jsx

@@ -1,4 +1,5 @@
 import ElementList from "../ElementList/ElementList";
+import "./CustomList.css";
 
 function CustomList({ genre, listOfElements }) {
   return (
@@ -8,7 +9,7 @@ function CustomList({ genre, listOfElements }) {
           {genre}
         </h2>
         {listOfElements.map((item, index) => (
-          <ElementList key={index} book={item}/>
+          <ElementList key={index} book={item} />
         ))}
         <div className="list-group"></div>
       </div>

online-library/src/Choice/ElementList/ElementList.css

@@ -0,0 +1,10 @@
+.book-item {
+  background-color: var(--bg-dark);
+  border-radius: 5px;
+  transition: transform 0.2s;
+  color: var(--text-light);
+}
+
+.book-item:hover {
+  transform: translateX(10px);
+}

online-library/src/Choice/ElementList/ElementList.jsx

@@ -1,4 +1,5 @@
 import { NavLink } from "react-router-dom";
+import "./ElementList.css"
 
 function ElementList({ book }) {
   return (

online-library/src/Footer/Footer.css

@@ -0,0 +1,3 @@
+.footer-custom {
+  background-color: var(--bg-medium);
+}

online-library/src/Footer/Footer.jsx

@@ -1,4 +1,5 @@
 import "bootstrap/dist/css/bootstrap.css";
+import "./Footer.css"
 
 
 function Footer() {

online-library/src/style.css

@@ -1,96 +1,54 @@
 :root {
-    --bg-dark: #222831;
-    --bg-medium: #393e46;
-    --accent: #00adb5;
-    --text-light: #eeeeee;
+  --bg-dark: #222831;
+  --bg-medium: #393e46;
+  --accent: #00adb5;
+  --text-light: #eeeeee;
 }
 
 body {
-    background-color: var(--bg-dark);
-    color: var(--text-light);
+  background-color: var(--bg-dark);
+  color: var(--text-light);
 }
 
 .navbar-custom {
-    background-color: var(--accent);
-    border-radius: 10px;
-}
-
-.book-card {
-    background-color: var(--bg-medium);
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.footer-custom {
-    background-color: var(--bg-medium);
+  background-color: var(--accent);
+  border-radius: 10px;
 }
 
 .nav-link-custom {
-    color: var(--bg-dark) !important;
-    font-weight: bold;
+  color: var(--bg-dark) !important;
+  font-weight: bold;
 }
 
 .nav-link-custom:hover {
-    color: var(--text-light) !important;
+  color: var(--text-light) !important;
 }
 
 .dropdown-custom .dropdown-menu {
-    background-color: var(--bg-medium);
+  background-color: var(--bg-medium);
 }
 
 .dropdown-custom .dropdown-item {
-    color: var(--text-light);
+  color: var(--text-light);
 }
 
 .dropdown-custom .dropdown-item:hover {
-    background-color: var(--accent);
-    color: var(--bg-dark);
+  background-color: var(--accent);
+  color: var(--bg-dark);
 }
 
 .form-custom input {
-    background-color: var(--bg-medium);
-    color: var(--text-light);
-    border: 1px solid var(--accent);
+  background-color: var(--bg-medium);
+  color: var(--text-light);
+  border: 1px solid var(--accent);
 }
 
 .btn-custom {
-    background-color: var(--accent);
-    color: var(--bg-dark);
-    font-weight: bold;
+  background-color: var(--accent);
+  color: var(--bg-dark);
+  font-weight: bold;
 }
 
-.book-card {
-    background-color: var(--bg-medium);
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.category-card {
-    background-color: var(--bg-medium);
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.book-item {
-    background-color: var(--bg-dark);
-    border-radius: 5px;
-    transition: transform 0.2s;
-    color: var(--text-light);
-}
-
-.book-item:hover {
-    transform: translateX(10px);
-}
-
-
-
-
-
-
-
-
-
-
 .nav-tabs .nav-link {
   color: var(--text-light);
   background-color: transparent;
@@ -106,4 +64,4 @@ body {
 
 .nav-tabs {
   border-bottom: 1px solid var(--accent);
-}
+}