Update README.md

README.md

@@ -13,14 +13,15 @@ pinned: false
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>About Greener Pastures</title>
   <style>
-    body {
+    html, body {
+      height: 100%;
+      margin: 0;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-color: #1e1f24;
       color: #d4dce3;
-      margin: 0;
-      padding: 2em;
       display: flex;
       justify-content: center;
+      align-items: center;
     }
     .card {
       background-color: #2a2c31;
@@ -34,21 +35,28 @@ pinned: false
       color: #93c5fd;
       margin-top: 0;
       font-size: 2.2em;
+      text-align: center;
     }
     p {
       line-height: 1.7;
       font-size: 1.05em;
       color: #d4dce3;
+      margin-bottom: 1.2em;
     }
     .emoji {
       font-size: 1.2em;
     }
-    a {
-      color: #8ab4f8;
-      text-decoration: none;
+    @media (max-height: 700px) {
+      body {
+        align-items: flex-start;
+        padding-top: 2em;
+      }
     }
-    a:hover {
-      text-decoration: underline;
+    @media (max-width: 768px) {
+      .card {
+        padding: 1.5em;
+        margin: 1em;
+      }
     }
   </style>
 </head>