* { box-sizing: border-box; }
body { margin: 0; background: #003264; color: #202b35; font: 16px/1.45 Arial, Helvetica, sans-serif; }
.layout { display: grid; grid-template-columns: 190px minmax(0, 760px); align-items: start; max-width: 1040px; margin: 0 auto; padding: 0 24px; gap: 24px; }
.sidebar { padding: 28px 0; color: #fff; }
.site-name { font: 24px/1.2 Georgia, serif; margin: 0 0 24px; }
nav a { display: block; color: #b9dfff; padding: 3px 0; text-decoration: none; }
nav a[aria-current] { color: #fff; font-weight: bold; }
nav a:hover { text-decoration: underline; }
.smile { display: block; margin: 24px 0 16px; }
.home { color: #b9dfff; }
main { min-width: 0; background: #fff; padding: 32px; margin: 24px 0; border-top: 5px solid #a8cbe5; overflow-wrap: break-word; }
h1,h2 { line-height: 1.2; }
h1 { font-family: Georgia, serif; font-size: 30px; margin: 0 0 24px; }
h2 { font-size: 21px; margin: 28px 0 16px; }
p { margin: 0 0 16px; }
a { color: #164f81; text-underline-offset: 3px; }
.sidebar a { color: #b9dfff; }
a:hover { text-decoration: underline; }
a:focus-visible,summary:focus-visible { outline: 2px solid #b46500; outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.article img { display: block; margin: 20px auto; }
.welcome-image { display: block; margin: 0 auto; }
ul,ol { padding-left: 26px; margin: 16px 0 24px; }
li { margin-bottom: 10px; }
footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid #cbd8e3; font-size: 14px; }
details { margin-top: 28px; background: #fff6d6; border: 1px solid #dccb99; padding: 16px; }
summary { cursor: pointer; font-weight: bold; }
.answer-key { padding-top: 20px; }
@media(max-width:700px) {
 .layout { display: flex; flex-direction: column; padding: 0 12px; gap: 0; }
 main { order: 0; width: 100%; padding: 24px 18px; margin: 12px 0 0; }
 .sidebar { order: 1; width: 100%; padding: 24px 12px; }
 nav a { padding: 2px 0; line-height: 1.3; }
 h1 { font-size: 26px; }
}