*{box-sizing:border-box}body,html{box-sizing:border-box;height:100%;font-family:Arial,Helvetica,sans-serif;padding:0;margin:0}.wrapper{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column}.navbar{overflow:hidden;background-color:#333;flex-shrink:0}.navbar a{float:left;display:block;color:#fff;text-align:center;padding:14px 20px;text-decoration:none}.navbar a.right{float:right}.navbar a:hover{background-color:#ddd;color:#000}@media screen and (width<=700px){.row{flex-direction:column}}@media screen and (width<=400px){.navbar a{float:none;width:100%}}.footer{position:fixed;left:0;bottom:0;width:100%;padding:20px;text-align:center;background:#ddd;flex-grow:0;flex-shrink:0}#content{margin:10px;padding:10px}