diff --git a/index.html b/index.html
index 12e7143..e6e0eef 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <title>dangrubb.net</title>
       <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="./style.css">
 
diff --git a/style.css b/style.css
index 6a3b10f..4568147 100644
--- a/style.css
+++ b/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;
   }
 }