*{box-sizing:border-box}body{color:#172437;background:#f4f7fb;margin:0;font-family:system-ui,sans-serif}header{color:#fff;background:#123b58;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}h1{margin:0;font-size:24px}header span{font-size:12px}nav{gap:8px;padding:16px;display:flex}nav a{color:#23364b;border-radius:10px;padding:12px;text-decoration:none}nav a.active{background:#d3eaff;font-weight:700}main{background:#fff;border-radius:16px;margin:24px;padding:24px}@media (width<=600px){nav{background:#fff;justify-content:space-around;padding:8px;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -3px 12px #0001}nav a{padding:12px 8px;font-size:13px}main{margin:16px 16px 90px}header{padding:16px}}