/* Port of the old Tailwind markup; colors are Tailwind's red-700, green-500, slate-700, gray-500, gray-200. */
*, ::before, ::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
html {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: inherit; }
img { display: block; max-width: 100%; height: auto; }
hr { height: 0; margin: 0; border-top-width: 2px; color: inherit; }

main { padding: 4rem 0; display: flex; flex-direction: column; align-items: center; }

header { padding: 0 2rem; display: flex; flex-direction: column; }
.avatar {
  width: 9rem; height: 9rem;
  border-radius: 9999px; border: 4px solid #b91c1c; background: #b91c1c;
  object-fit: cover;
  transition: transform 1s;
}
.avatar:hover { transform: rotate(180deg); }
h1 { margin-top: 1.5rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: #b91c1c; }

section { display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 36rem; margin-top: 2rem; }
article { padding: 0 2rem; margin: 1.5rem 0; }
article img { width: 13rem; max-height: 20rem; border-radius: .375rem; border-width: 2px; object-fit: cover; }
article h2 { padding-top: 1rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #22c55e; }
.subtitle { margin-top: 1rem; font-size: 1.25rem; line-height: 1.75rem; color: #334155; }
.description { margin-top: 1rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; font-style: italic; color: #6b7280; white-space: pre-line; }

footer { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.updated { color: #6b7280; }

@media (min-width: 768px) {
  header { align-items: center; }
  h1 { font-size: 3rem; line-height: 1; }
  article img { width: 12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar { transition: none; }
}