Fixes responsiveness for small screen sizes

src/layouts/RootLayout.astro

@@ -33,14 +33,14 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     </div>
 	</body>
   <style>
-    @media (max-width: 720px) {
+    @media (max-width: 800px) {
       body {
         grid-template-areas: 
           "header"
           "main"
           "footer";
         grid-template-columns: 1fr;
-
+        margin: 1rem 0.5rem;
       }
       .header {
         display: block;
@@ -49,13 +49,14 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         display: none;
       }
     }
-    @media (min-width: 720px) {
+    @media (min-width: 800px) {
       body {
         grid-template-areas: 
           "header header"
           "sidebar main"
           "footer footer";
         grid-template-columns: 20rem 1fr;
+        margin: 2rem 1rem;
       }
       .header {
         display: none;
@@ -66,7 +67,6 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     }
     body {
       display: grid;
-      margin: 2rem 3rem;
     }
 
     .header {