|
|
|
body { |
|
padding: 2rem; |
|
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif; |
|
background-color: #f9fafb; |
|
color: #374151; |
|
line-height: 1.6; |
|
} |
|
|
|
|
|
h1 { |
|
font-size: 1.5rem; |
|
margin-top: 0; |
|
margin-bottom: 1rem; |
|
color: #111827; |
|
} |
|
|
|
|
|
p { |
|
color: #6b7280; |
|
font-size: 1rem; |
|
margin-bottom: 1rem; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
|
|
.card { |
|
max-width: 620px; |
|
margin: 1rem auto; |
|
padding: 1.5rem; |
|
border: 1px solid #e5e7eb; |
|
border-radius: 12px; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); |
|
background-color: #ffffff; |
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
} |
|
|
|
.card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
|
|
.card p:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
|
|
@media (max-width: 640px) { |
|
body { |
|
padding: 1rem; |
|
} |
|
|
|
h1 { |
|
font-size: 1.25rem; |
|
} |
|
|
|
.card { |
|
padding: 1rem; |
|
} |
|
} |
|
|