@font-face{font-family:'Permanent Marker';src:url('fonts/permanent-marker.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Patrick Hand';src:url('fonts/patrick-hand.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;background:#f8f3e8 url('assets/paper-ground.webp') repeat;background-size:900px;color:#302f2a}
*{box-sizing:border-box}
body{margin:0;font:20px/1.4 'Patrick Hand',sans-serif}
.cover{width:min(100% - 48px,620px);min-height:100svh;margin:auto;padding:38px 0 52px;display:grid;align-content:center;justify-items:center;text-align:center}
.wordmark{width:min(290px,75vw);height:auto;filter:drop-shadow(0 3px 3px #302f2a35);transform:rotate(-3deg)}
.nib{display:block;width:min(410px,87vw);height:auto;margin:-8px auto 0;filter:drop-shadow(0 4px 3px #302f2a35);transform:rotate(3deg)}
h1{margin:12px 0 0;font:clamp(37px,6vw,64px)/1.12 'Permanent Marker',cursive;color:#a33e2e;transform:rotate(-2deg)}
h1::after{content:'';display:block;height:24px;margin:-6px -12px 0;background:url('assets/red-pencil.webp') center/100% 100% no-repeat}
form{display:grid;gap:12px;width:min(100%,340px);margin-top:22px;text-align:left}
input,button{font:inherit;padding:8px 14px;border-radius:2px}
input{width:100%;background:#fffdf7;color:#302f2a;border:1px solid #4b443a}
button{justify-self:start;background:#a33e2e;color:#fffdf7;border:0;cursor:pointer}
:focus-visible{outline:3px solid #315c77;outline-offset:4px}
.error{margin:0;color:#a33e2e}