css: Fix formatting for iPhone 13 and 15 pro

css/style.css

@@ -1,13 +1,95 @@
-@media only screen and (max-width: 479px) {
-    body { font-size: 5.33pt; }
-}
-
-body {
-  font-family: monospace;
-  max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
-  padding: 20px;
-  background-color: #ffffff;
-  color: #000;
-  white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
-  word-wrap: break-word; /* Ensures long words do not overflow */
+/*============================================================================== 
+iPhone 13 Pro || 390 x 844 || Default, Portrait and Landscape
+================================================================================ */
+@media only screen and (min-width: 390px) and (max-width: 844px) {
+    body { 
+      font-family: monospace;
+      font-size: 7.11px;
+      max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
+      padding: 20px;
+      background-color: #ffffff;
+      color: #000;
+      white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
+      word-wrap: break-word; /* Ensures long words do not overflow */
+  }
+}
+
+@media only screen and (min-width: 390px) and (max-width: 844px) and (orientation: portrait) { 
+    body { 
+      font-family: monospace;
+      font-size: 7.11px;
+      max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
+      padding: 20px;
+      background-color: #ffffff;
+      color: #000;
+      white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
+      word-wrap: break-word; /* Ensures long words do not overflow */
+  }
+}
+
+@media only screen and (min-width: 390px) and (max-width: 844px) and (orientation: landscape) { 
+    body { 
+      font-family: monospace;
+      font-size: 7.11px;
+      max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
+      padding: 20px;
+      background-color: #ffffff;
+      color: #000;
+      white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
+      word-wrap: break-word; /* Ensures long words do not overflow */
+  }
+}
+
+/*============================================================================== 
+iPhone 15 Pro || 393 x 852 || Default, Portrait and Landscape
+================================================================================ */
+@media only screen and (min-width: 393px) and (max-width: 852px) {
+    body { 
+      font-family: monospace;
+      font-size: 7.25px;
+      max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
+      padding: 20px;
+      background-color: #ffffff;
+      color: #000;
+      white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
+      word-wrap: break-word; /* Ensures long words do not overflow */
+  }
+}
+
+@media only screen and (min-width: 393px) and (max-width: 852px) and (orientation: portrait) { 
+    body { 
+      font-family: monospace;
+      font-size: 7.25px;
+      max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
+      padding: 20px;
+      background-color: #ffffff;
+      color: #000;
+      white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
+      word-wrap: break-word; /* Ensures long words do not overflow */
+  }
+}
+
+@media only screen and (min-width: 393px) and (max-width: 852px) and (orientation: landscape) { 
+    body { 
+      font-family: monospace;
+      font-size: 7.25px;
+      max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
+      padding: 20px;
+      background-color: #ffffff;
+      color: #000;
+      white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
+      word-wrap: break-word; /* Ensures long words do not overflow */
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  body {
+    font-family: monospace;
+    max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
+    padding: 20px;
+    background-color: #ffffff;
+    color: #000;
+    white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
+    word-wrap: break-word; /* Ensures long words do not overflow */
+  }
 }