* { box-sizing:border-box;font-family: "Avenir Next", Avenir, system-ui, -apple-system, sans-serif }

button, input { border-radius: 3px; }
a, button { cursor: pointer }
html, input { font-size: 16px }
button { font-size: 0.875em }
html { display: flex; flex-direction: column; height: 100% }
body { background-color: hsl(75, 100%, 98%); color: hsla(0, 0%, 0%, 0.9); display: flex; flex-direction: column; flex-grow: 1; line-height: 1.55; margin: 0; padding: 0; text-align: center }
footer a { border-bottom: 1px solid hsla(0, 0%, 100%, 0.4); color: #e6f2bf; text-decoration: none }
input { background: #fff; padding: 2px 8px; width: 200px }
main { margin-top: 60px; margin-bottom: 120px }
p { line-height: 1.5; margin: 0.5em }
p.flash { margin: 0 auto 2em; max-width: 24em }

.aic { align-items: center }
.aife { align-items: flex-end }
.b1999 { border: 1px solid #999 }
.bfff { background: #fff }
.bgf { background: hsl(74,  66%,  85%) }
.bgg { background: hsl(74,  6%,  90%) }
.bggg { background: linear-gradient(#f3f3f3 45%, #e1e1e1) }
.br1 { border-radius: 1em }
.br10 { border-radius: 10px }
.df { display: flex }
.fdc { flex-direction: column }
.fg1 { flex-grow: 1 }
.fw500 { font-weight: 500 }
.jcc { justify-content: center }

.ma { margin: auto }
.mb16 { margin-bottom: 16px }
.mh100vh { min-height: 100vh }
.ml1 { margin-left: 1em }
.mt1 { margin-top: 1em }
.mw960 { max-width: 960px }
.my1 { margin-top: 1em; margin-bottom: 1em }

.p4 { padding: 4px }
.p10 { padding: 10px }
.pb60 { padding-bottom: 60px }
.pl10 { padding-left: 10px }
.pr10 { padding-right: 10px }
.pt0 { padding-top: 0 }

.tal { text-align: left }

.w100 { width: 100%}

/* .df * { background: hsla(0, 100%, 50%, 0.1)} */