10 lines
1.6 KiB
CSS
10 lines
1.6 KiB
CSS
:root { --ink:#132238; --muted:#526174; --line:#d9e1ea; --paper:#fff; --soft:#f3f7fb; --blue:#0759ad; --green:#0b6e4f; }
|
|
* { box-sizing:border-box; }
|
|
body { margin:0; color:var(--ink); background:var(--soft); font:17px/1.55 Georgia, serif; }
|
|
main { max-width:850px; margin:32px auto; padding:42px 52px; background:var(--paper); box-shadow:0 3px 24px #13223814; }
|
|
h1,h2,h3,button { font-family:Inter,Arial,sans-serif; } h1 { font-size:2.15rem; line-height:1.15; margin:.1rem 0 .45rem; } h2 { margin-top:2rem; font-size:1.3rem; border-bottom:1px solid var(--line); padding-bottom:.35rem; } h3 { font-size:1rem; margin-bottom:.25rem; }
|
|
.eyebrow { color:var(--blue); text-transform:uppercase; letter-spacing:.09em; font:700 .78rem Inter,Arial,sans-serif; } .lede { font-size:1.15rem; color:var(--muted); }
|
|
.callout { background:#edf6ff; border-left:4px solid var(--blue); padding:14px 18px; margin:1.2rem 0; } .plan { padding-left:1.2rem; } .plan li { margin:.45rem 0; } code { background:#f0f3f6; padding:.1em .3em; font: .9em Consolas,monospace; }
|
|
.quiz { border:1px solid var(--line); padding:20px; margin:1.2rem 0; } label { display:block; padding:.38rem 0; cursor:pointer; } button { background:var(--blue); color:#fff; border:0; border-radius:4px; padding:.62rem .9rem; font-weight:700; cursor:pointer; } .feedback { min-height:1.4em; font-weight:700; margin-top:.8rem; } .good { color:var(--green); } .bad { color:#a32424; } footer { color:var(--muted); font-size:.88rem; border-top:1px solid var(--line); margin-top:2.5rem; padding-top:1rem; }
|
|
@media (max-width:650px) { main { margin:0; padding:28px 22px; } }
|