* { box-sizing: border-box; } :root { color-scheme: light; --ink: #342f2a; --paper: #fcf8f2; --accent: #67594c; } body { background: var(--paper); color: var(--ink); font: 18px/1.65 Georgia, serif; margin: 0; } header, main, footer { max-width: 830px; margin: auto; padding: 24px; } header { border-bottom: 1px solid #d5c6b3; } .brand { font-size: 29px; } nav { margin-top: 15px; font: 15px/2 Arial, sans-serif; } a { color: var(--accent); } h1 { font-weight: normal; font-size: clamp(30px, 6vw, 46px); line-height: 1.15; } h2 { font-size: 24px; } .note, footer { color: #766554; } .button { background: var(--accent); color: white; padding: 10px 16px; display: inline-block; } table { border-collapse: collapse; width: 100%; font-size: 16px; } th, td { border-bottom: 1px solid #d5c6b3; text-align: left; padding: 12px 8px; } th:first-child, td:first-child { padding-left: 0; } dt { margin-top: 10px; } dd { margin-left: 0; } footer { margin-top: 32px; border-top: 1px solid #d5c6b3; font-size: 15px; } @media(max-width: 480px) { header, main, footer { padding: 16px; } table { font-size: 14px; } }