diff --git a/static/css/style.css b/static/css/style.css
index a3dd03b..5af0672 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -7,7 +7,7 @@ html, body {
 }
 
 body {
-    font-family: 'Georgia', serif; /* Adjust for clean serif typography */
+    font-family: 'Georgia', serif; /* Clean serif typography */
     background-color: #fff;
     color: #333;
     line-height: 1.8;
@@ -30,7 +30,7 @@ main {
 
 /* Header Links */
 header nav a {
-    font-family: 'Courier New', monospace; /* Monospace for navigation links */
+    font-family: 'Courier New', monospace;
     font-size: 1.2rem;
     color: #007acc;
     text-decoration: none;
@@ -127,3 +127,50 @@ a {
 a:hover {
     text-decoration: underline;
 }
+
+/* Responsive Design */
+
+/* For small screens (below 768px) */
+@media (max-width: 768px) {
+    body {
+        font-size: 90%; /* Reduce base font size for better scaling */
+    }
+
+    header nav a {
+        font-size: 1rem; /* Smaller navigation links */
+        margin: 0 5px;
+    }
+
+    main {
+        padding: 10px; /* Reduce horizontal padding */
+    }
+
+    article.h-entry h1 {
+        font-size: 1.5rem; /* Smaller article titles */
+    }
+
+    .photo-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* More compact grid */
+    }
+
+    footer {
+        padding: 10px; /* Smaller footer padding */
+        font-size: 0.8rem; /* Smaller footer text */
+    }
+}
+
+/* For very small screens (below 480px) */
+@media (max-width: 480px) {
+    header nav {
+        display: flex;
+        flex-direction: column;
+    }
+
+    header nav a {
+        margin: 5px 0; /* Stack navigation links vertically */
+    }
+
+    .photo-grid {
+        grid-template-columns: 1fr; /* Single-column photo grid */
+    }
+}