adjust mobile styling

Author: umyeah

src/layouts/Layout.astro

@@ -47,7 +47,13 @@ const { pageTitle= "UmYeah's Dev" } = Astro.props
 		width: 720px;
 		max-width: calc(100% - 2em);
 		margin: auto;
-		padding: 3em 1em;
+		padding: 3em 1em 1em;
 		text-align: center;
 	}
+
+	@media (max-width: 720px) {
+		main {
+			padding: 1em 0;
+		}
+	}
 </style>

src/styles/global.css

@@ -225,6 +225,7 @@ UmYeahDev Stuff
   --gray-gradient: rgba(var(--gray-light), 50%), #fff;
   --box-shadow: 0 2px 6px rgba(var(--gray), 25%),
     0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%);
+  --mobile-breakpoint: 720px;
 }
 @font-face {
   font-family: "Atkinson Hyperlegible";