style.css

:root {
    --font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
    --text-color: rgb(107, 114, 128);
    --card-border-color: lightgray;
    --card-border-radius: 16px;
    --card-padding: 1rem; /* 16px */
    --body-padding: 2rem;
}

* {
    box-sizing: border-box; /* CSS Reset for consistent box sizing */
}

body {
    padding: var(--body-padding);
    font-family: var(--font-family);
}

h1 {
    font-size: 1rem; /* 16px */
    margin: 0; /* Reset margin for consistency */
}

p {
    color: var(--text-color);
    font-size: 0.9375rem; /* 15px */
    margin: 0.3125rem 0 0.625rem; /* 5px top, 10px bottom */
}

.card {
    max-width: 620px;
    margin: 0 auto;
    padding: var(--card-padding);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
}

.card p:last-child {
    margin-bottom: 0; /* Remove margin for the last paragraph */
}

/* Media Queries for responsive design */
@media (max-width: 768px) {
    body {
        padding: 1rem; /* Reduce padding on smaller screens */
    }

    .card {
        padding: 0.5rem; /* Adjust card padding for smaller screens */
    }
}