*{box-sizing:border-box}
body{margin:0 auto;padding:30px 15px 0;font:16px/1.5 system-ui,sans-serif;background:#545454;color:#dcdddf;text-transform:lowercase}
a{color:#269fde;text-decoration:none}
img{max-width:100%;height:auto}
time{font-style:italic;color:gray}
#logo{display:block;text-align:center}
nav{display:flex;margin-top:30px}
nav a{flex:1;padding:8px 16px;background:#404040;border-top:10px solid #646464;text-align:center;color:#dcdddf}
nav a:hover,nav a.active{border-top-color:#269fde}
nav a.active{background:#1c81b5}
article{margin-top:30px;padding:15px;background:#4d4d4d;border-top:10px solid #269fde}
h2{margin:0 0 10px;padding-bottom:10px;font-size:22px;font-weight:500;line-height:1.2;border-bottom:2px solid #269fde}
article p{margin:0}
article time{display:block;margin-bottom:1rem}
@media(min-width:576px){body{max-width:564px}}
@media(min-width:768px){
body{max-width:744px}
header{display:flex;justify-content:space-between;align-items:flex-start}
#logo{width:25%}
nav{width:41.67%}
main{padding-left:33.33%}
}
@media(min-width:992px){body{max-width:984px}}
@media(min-width:1200px){body{max-width:1164px}}
@media(min-width:1400px){body{max-width:1344px}}