body { font: 1rem/1.5 system-ui, sans-serif; margin: 0 auto; display: flex; flex-flow: column nowrap; min-height: 100vh; }
header, main, footer { padding: .5em max(calc(50vw - 593px), 15px) .5em; }
header, footer, footer a, footer a span { background: #003e62; color: #fff; }
header::before { content: url("images/illinois-gov.svg"); line-height: 1; vertical-align: bottom; }
header::after { content: "Illinois.gov"; }
footer a:first-child::before { content: "DoIT-Accessibility"; }
footer a::after { content: "|"; margin-left: .25em; }
header span, header::after, footer a span { position: absolute; left: -10000px; }
main { padding-bottom: 2em; flex: 1; }
section { margin: 1em 0 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 1em 0 0; }
h1 { margin-top: .5em; line-height: 1.25; }
p, table { margin: .75em 0 0; }
ul, ol { margin: 0; }
li { margin: .5em 0 0; }
table { border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: .25em .5em; text-align: left; vertical-align: top; }
thead th { background: #ddd; }
tbody th[colspan] { background: #eee; }
button, input, select, textarea { font: inherit; }
select { padding: 2px 1px 3px; }
strong { font-weight: 500; }
kbd { padding: .1em .3em; border: 1px solid #ccc; border-radius: .2em; box-shadow: inset 0 -1px 0 #bbb; }
.example { margin: 1em; }
.example label { font-weight: 500; }
.note h2, .note h3 { margin-top: .5rem; }
.note { padding: .1em 1em 1em; border-left: 0.5em solid #52e052; background: #e9fbe9; }
.problem { border-color: #e05252; background: #fbe9e9; }
.visually-hidden:not(:focus) { position: absolute; height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; }