Update style.css

style.css

@@ -1,28 +1,52 @@
+/*  Этот файл style.css по сути дублирует стили, находящиеся внутри тега style в index.html.
+    Он нужен, если вы хотите иметь отдельный файл стилей.  Убедитесь, что стили согласованы.
+*/
+
+/* Общие стили из вашего CSS, но с адаптивными улучшениями */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    padding: 1rem; /* Уменьшил отступ для мобильных */
+    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    margin: 0; /* Убрал margin по умолчанию */
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+    font-size: 1.2rem; /* Уменьшил размер шрифта для мобильных */
+    margin-top: 0;
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+    color: rgb(107, 114, 128);
+    font-size: 0.9rem; /* Уменьшил размер шрифта для мобильных */
+    margin-bottom: 0.5rem; /* Уменьшил отступ для мобильных */
+    margin-top: 0.25rem; /* Уменьшил отступ для мобильных */
 }
 
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+    max-width: 100%; /* Занимает всю ширину на мобильных */
+    margin: 0 auto;
+    padding: 0.5rem; /* Уменьшил отступ для мобильных */
+    border: 1px solid lightgray;
+    border-radius: 0.5rem; /* Уменьшил радиус для мобильных */
 }
 
 .card p:last-child {
-	margin-bottom: 0;
+    margin-bottom: 0;
+}
+
+/* Адаптивные стили */
+@media (min-width: 640px) { /* Для экранов больше 640px */
+    body {
+        padding: 2rem;
+    }
+    h1 {
+        font-size: 1.6rem;
+    }
+    p {
+        font-size: 1rem;
+    }
+    .card {
+        max-width: 620px;
+        padding: 1rem;
+        border-radius: 1rem;
+    }
 }