modify it so it running

static/css/card.css

@@ -0,0 +1,45 @@
+.grid { 
+  display: grid; 
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
+  gap: 25px; 
+}
+
+.card { 
+  background: white; 
+  border-radius: 15px; 
+  overflow: hidden; 
+  box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
+}
+
+.card img { 
+  width: 100%; 
+  height: 320px; 
+  object-fit: cover; 
+}
+
+.content { 
+  padding: 15px; 
+}
+
+.badge { 
+  padding: 4px 10px; 
+  border-radius: 20px; 
+  color: white; 
+  font-size: 0.7rem; 
+  font-weight: bold; 
+}
+
+.book-badge { 
+  background: var(--book-color); 
+}
+
+.show-badge { 
+  background: var(--show-color); 
+}
+
+.genre-list { 
+  display: block; 
+  color: #888; 
+  font-size: 0.8rem; 
+  margin: 5px 0; 
+}

static/css/style.css

@@ -0,0 +1,61 @@
+:root {
+    --ink: #1a1409;
+    --cream: #f5f0e8;
+    --parchment: #ede8dc;
+    --amber: #c8822a;
+    --amber-light: #e8a84a;
+    --sage: #7a8c6e;
+    --rust: #a84832;
+    --muted: #7a7060;
+    --card-bg: #faf7f2;
+  }
+
+#body_page{
+  display: flex;
+  flex-direction: row;
+  background-color:var(--cream);
+}
+#side_bar{
+  background-color:var(--ink);
+  display:flex;
+  flex-direction: column;
+  justify-content:center;
+  height: 100vh;
+  width: 30vw;
+}
+#menu{
+  list-style-type:none;
+  padding: 0;
+
+}
+#menu-button{
+  text-decoration:none;
+}
+
+#home_nav{
+  display:flex;
+  flex-direction:row;
+  justify-content:space-around;
+  align-content:center;
+  width:80vw;
+  padding:20px;
+}
+#addLog_button{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  background-color:var(--amber);
+  color:white;
+  border:none;
+  border-radius:40px;
+  padding:12px 22px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(200,130,42,0.35);
+  transition: all 0.2s;
+}
+
+#navagtor{
+  
+}