fix mobile view- hopefully

styles.css

@@ -1,3 +1,4 @@
+/* Base Styles */
 html, body {
     height: 100%;
     margin: 0;
@@ -8,8 +9,8 @@ html, body {
 }
 
 .container {
-    width: 60%;
-    max-width: 950px;
+    width: 90%; /* Make it responsive and fit within the screen */
+    max-width: 950px; /* Set a max width */
     margin: auto;
     display: flex;
     flex-direction: column;
@@ -18,7 +19,8 @@ html, body {
     height: 100vh;
     text-align: center;
     position: relative;
-    z-index: 1;
+    padding: 1rem; /* Add breathing room for small screens */
+    box-sizing: border-box;
 }
 
 .background-image {
@@ -27,15 +29,15 @@ html, body {
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
+    max-width: 600px; /* Limit size */
     height: auto;
-    opacity: 0.2;
+    opacity: 0.15; /* Light transparency for clarity */
     z-index: 0;
-    pointer-events: none; 
+    pointer-events: none;
 }
 
-
 blockquote {
-    font-size: 1.8rem;
+    font-size: clamp(1.2rem, 2vw, 1.8rem); /* Responsive font size */
     font-style: italic;
     margin: 0;
     line-height: 1.5;
@@ -43,16 +45,16 @@ blockquote {
 }
 
 .author {
-    margin-top: 1.5rem;
-    font-size: 1.2rem;
+    margin-top: 1rem;
+    font-size: clamp(1rem, 1.5vw, 1.2rem); /* Responsive font size */
     font-style: italic;
     color: #bbbbbb;
     z-index: 1;
 }
 
 .source {
-    margin-top: 1rem;
-    font-size: 1rem;
+    margin-top: 0.5rem;
+    font-size: clamp(0.9rem, 1.2vw, 1rem);
     color: #999999;
     z-index: 1;
 }
@@ -69,3 +71,24 @@ blockquote {
     color: #d1d1d1;
     border-color: #d1d1d1;
 }
+
+/* Mobile Responsive Styles */
+@media (max-width: 768px) {
+    .container {
+        width: 95%;
+        height: auto; /* Allow the container to grow naturally */
+        padding: 2rem 1rem;
+    }
+
+    .background-image {
+        max-width: 400px;
+        opacity: 0.1;
+    }
+}
+
+@media (max-width: 480px) {
+    .background-image {
+        max-width: 300px;
+        opacity: 0.08;
+    }
+}