improved view in mobile

quarto_docs/index.qmd

@@ -21,11 +21,17 @@ toc: false
   padding: 79px; /* Add some padding around the edges */
 }
 
+@media (max-width: 768px) {
+  .background-image-container {
+    padding: 20px; /* Reduced padding for smaller screens */
+  }
+}
+
 .text-block {
   color: rgb(100, 100, 100); /* Text color */
   max-width: 70%; /* Max width of the text, relative to the background container */
   font-family: 'Montserrat', sans-serif;
-  font-size: 1.09rem;
+  font-size: clamp(1rem, 2vw, 1.09rem); /* Adjusts between 1rem and 1.09rem based on viewport width */
   text-align: center; /* Center text horizontally */
   display: flex; /* Use Flexbox for vertical centering */
   flex-direction: column; /* Stack children vertically */