responsiveness update

src/styles/global.css

@@ -81,3 +81,19 @@ body {
     flex-direction: column;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  body {
+    > main {
+      width: 80vw;
+    }
+  }
+}
+
+@media screen and (max-width: 610px) {
+  body {
+    > main {
+      width: 90vw;
+    }
+  }
+}

src/styles/navbar.css

@@ -144,3 +144,56 @@ header {
     transform: translateX(-100%);
   }
 }
+
+@media screen and (max-width: 1600px) {
+  header {
+    > nav {
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: stretch;
+      gap: 2rem;
+    }
+  }
+}
+
+@media screen and (max-width: 770px) {
+  header {
+    > nav {
+      > ul {
+        gap: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 470px) {
+  header {
+    > nav {
+      > ul {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: stretch;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 610px) {
+  header {
+    > nav {
+      > ul {
+        border-radius: 16px;
+        > section {
+          > input[type="text"] {
+            border-radius: 8px;
+          }
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          padding: 0.5rem;
+        }
+      }
+    }
+  }
+}

src/styles/postcard.css

@@ -26,3 +26,9 @@ article {
     font-style: italic;
   }
 }
+
+@media screen and (max-width: 600px) {
+  article {
+    width: 80%;
+  }
+}