modernizing blog design

app/globals.css

@@ -5,6 +5,8 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
   Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   height: 100%;
+  color: white;
+  background-color: #2c3e50;
 }
 
 a {
@@ -73,6 +75,7 @@ nav {
   margin: 0;
   text-align: center;
   background-color: #34495E;
+  box-shadow: #111111 0.3rem 0.3rem 0.3rem;
 }
 
 .postList {
@@ -88,6 +91,7 @@ nav {
   padding-right: 0.3rem;
   margin: 0;
   border: 0.1rem solid #34495E;
+  box-shadow: #111111 0.3rem 0.3rem 0.3rem;
 }
 
 .postParagraph {
@@ -100,6 +104,6 @@ nav {
   }
   body {
     color: white;
-    background: black;
+    background-color: #2c3e50;
   }
 }

app/page.js

@@ -20,7 +20,7 @@ export default async function Page({ children }) {
                         <div className="postContent">
                             <div className="categories">
                                 {item["@expand"].categories.map((item, i) => (
-                                    <div key={i} style={{backgroundColor: item.color, color: item.text_color , borderRadius: 100, textAlign: "center", padding: "0.15rem", fontWeight: "bold"}}>
+                                    <div key={i} style={{backgroundColor: item.color, color: item.text_color , borderRadius: 100, textAlign: "center", padding: "0.15rem", paddingLeft: "0.3rem", paddingRight: "0.3rem", fontWeight: "bold", boxShadow: "#111111 0.3rem 0.3rem 0.3rem"}}>
                                         {item.name}
                                     </div>
                                 ))}