updated scaling for mobile

style.css

@@ -7,23 +7,38 @@ body {
 
 .bard {
   margin: 0 auto 40px;
-  width: 65em;
-  height: 62em;
+  /* Remove fixed width in pixels */
+  width: 100%;
+  max-width: 65em; /* Keep the same max size for desktop */
+  height: auto;
+  aspect-ratio: 1 / 0.95; /* Maintains the proportion of the artwork */
   font-size: 2px;
 }
-@media (min-width: 360px) {
+
+/* Adjust media queries for better scaling */
+@media (max-width: 768px) {
+  body {
+    padding: 20px 10px; /* Smaller padding on mobile */
+  }
+  
   .bard {
-    font-size: 3px;
+    font-size: 3px; /* Slightly larger base size for small screens */
+  }
+  
+  p {
+    font-size: 0.8rem;
+    max-width: 320px;
   }
 }
-@media (min-width: 600px) {
+
+/* For very small screens */
+@media (max-width: 400px) {
   .bard {
-    font-size: 4px;
+    aspect-ratio: 1 / 1; /* Slightly different ratio for tiny screens */
   }
-}
-@media (min-width: 1000px) {
-  .bard {
-    font-size: 5px;
+  
+  p {
+    font-size: 0.75rem;
   }
 }