html{box-sizing:border-box}body{font-family:sans-serif;margin:0;background:#3494e6;background:linear-gradient(to right,#ec6ead,#3494e6)}a{color:#fff;text-decoration:none;background:rgba(0,0,0,.2);padding:1em 0;display:inline-block;width:100%;text-align:center}a:hover{background:rgba(0,0,0,.3)}#container{margin:0 auto;padding:2em}article{background:rgba(255,255,255,.7);padding:1em}nav ul{border:1px solid #000;list-style:none;margin:0;padding:0;display:flex}nav ul li{flex-grow:4}nav ul li.social{flex-grow:1}