/*  Этот файл style.css по сути дублирует стили, находящиеся внутри тега style в index.html.
    Он нужен, если вы хотите иметь отдельный файл стилей.  Убедитесь, что стили согласованы.
*/

/* Общие стили из вашего CSS, но с адаптивными улучшениями */
body {
    padding: 1rem; /* Уменьшил отступ для мобильных */
    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
    margin: 0; /* Убрал margin по умолчанию */
}

h1 {
    font-size: 1.2rem; /* Уменьшил размер шрифта для мобильных */
    margin-top: 0;
}

p {
    color: rgb(107, 114, 128);
    font-size: 0.9rem; /* Уменьшил размер шрифта для мобильных */
    margin-bottom: 0.5rem; /* Уменьшил отступ для мобильных */
    margin-top: 0.25rem; /* Уменьшил отступ для мобильных */
}

.card {
    max-width: 100%; /* Занимает всю ширину на мобильных */
    margin: 0 auto;
    padding: 0.5rem; /* Уменьшил отступ для мобильных */
    border: 1px solid lightgray;
    border-radius: 0.5rem; /* Уменьшил радиус для мобильных */
}

.card p:last-child {
    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;
    }
}