body { align-items: flex-start; } .app { padding: 28px 0; width: min(480px, calc(100vw - 32px)); } *, *::before, *::after { box-sizing: border-box; } .lesson-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lesson-tiles button { font-size: 15px; padding: 14px 8px; margin: 0; background: #222; color: #fff; font-weight: 500; } .lesson-tiles button[aria-pressed="true"] { background: #fff; color: #111; } h2 { font-size: 22px; margin: 24px 0 16px; } label { display: block; text-align: left; color: #bbb; font-size: 13px; margin-top: 12px; } .instructions { font-size: 14px; color: #aaa; line-height: 1.5; } .status { white-space: pre-line; color: #eee; } details { text-align: left; margin-top: 24px; color: #bbb; font-size: 14px; line-height: 1.6; } summary { cursor: pointer; } #material p { border-bottom: 1px solid #333; padding-bottom: 8px; } button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #8cb4ff; outline-offset: 3px; } .small { color: #aaa; } @media(max-width: 360px) { h1 { font-size: 26px; } select { font-size: 17px; } }