body { margin: 0; font-family: Georgia, serif; color: #33302b; background: #fbf7ef; }
.fiction { background: #33302b; color: #fbf7ef; font: 13px/1.6 Helvetica, Arial, sans-serif; text-align: center; padding: 4px; }
header { background: #f2c14e; padding: 24px 10%; }
header h1 { margin: 0; font-size: 34px; }
header p { margin: 4px 0 0; font-style: italic; }
nav { padding: 10px 10%; background: #e9dfcb; font-family: Helvetica, Arial, sans-serif; }
nav a { margin-right: 20px; color: #33302b; }
main { padding: 24px 10%; max-width: 760px; line-height: 1.6; }
footer { padding: 24px 10%; font: 13px Helvetica, Arial, sans-serif; color: #7a7366; }
form { display: grid; gap: 10px; max-width: 320px; font-family: Helvetica, Arial, sans-serif; }
input, button { font: inherit; padding: 8px; }
.error { color: #a12; }
.note { background: #fff4c7; border-left: 4px solid #f2c14e; padding: 12px 16px; }