*{box-sizing:border-box}body{margin:0;font:17px/1.65 Arial,sans-serif;background:#f4f6f6;color:#283b40}header{background:#296c77;color:white;padding:32px 20px}header h1{margin:0;font-size:36px}header p{margin:0}main{max-width:1100px;margin:25px auto;padding:0 18px;display:grid;grid-template-columns:260px 1fr;gap:25px}nav,article{background:white;border-radius:6px;padding:24px;box-shadow:0 1px 6px #0001}nav a{display:block;color:#286d77;text-decoration:none;padding:7px;border-bottom:1px solid #e6eeee}nav a:hover,nav a.active{background:#e8f3f4}h2{margin-top:0;color:#286d77}footer{text-align:center;padding:30px;color:#64777a}@media(max-width:700px){main{display:block}nav{margin-bottom:20px}header h1{font-size:28px}}