*{box-sizing:border-box;font-family:Arial,Sans-Serif;margin:0;padding:0}header{background:#002E66;color:#fff;padding:.5em 0 .2em 1em}ul{display:flex;flex-direction:column;list-style:none}li{margin:1em}a{display:inline-block;color:#fff;text-decoration:none;border-radius:4px;border:1px solid white;margin:.5em 1em}a:hover{background:#1A5FB4}nav{padding:1em;background:#1C71D8;text-align:right}@media all and (min-width: 30em){nav{padding:1em}ul{flex-direction:row;flex-wrap:wrap;justify-content:space-around}li{display:inline-block}}